diff --git a/docs/content/3.components/alert.md b/docs/content/3.components/alert.md
index 2ba78b87..4f9564fd 100644
--- a/docs/content/3.components/alert.md
+++ b/docs/content/3.components/alert.md
@@ -62,7 +62,7 @@ ignore:
 props:
   title: 'Heads up!'
   description: 'You can change the primary color in your app config.'
-  avatar.src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  avatar.src: 'https://github.com/benjamincanac.png'
 ---
 ::
 
diff --git a/docs/content/3.components/avatar-group.md b/docs/content/3.components/avatar-group.md
index c976c5fb..871dea78 100644
--- a/docs/content/3.components/avatar-group.md
+++ b/docs/content/3.components/avatar-group.md
@@ -17,13 +17,13 @@ prettier: true
 slots:
   default: |
 
-    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
-    <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" />
-    <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" />
+    <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
+    <UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
+    <UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
 ---
-:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac"}
-:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel"}
-:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter"}
+:u-avatar{src="https://github.com/benjamincanac.png" alt="Benjamin Canac"}
+:u-avatar{src="https://github.com/romhml.png" alt="Romain Hamel"}
+:u-avatar{src="https://github.com/noook.png" alt="Neil Richter"}
 ::
 
 ### Size
@@ -38,13 +38,13 @@ props:
 slots:
   default: |
 
-    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
-    <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" />
-    <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" />
+    <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
+    <UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
+    <UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
 ---
-:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac"}
-:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel"}
-:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter"}
+:u-avatar{src="https://github.com/benjamincanac.png" alt="Benjamin Canac"}
+:u-avatar{src="https://github.com/romhml.png" alt="Romain Hamel"}
+:u-avatar{src="https://github.com/noook.png" alt="Neil Richter"}
 ::
 
 ### Max
@@ -59,13 +59,13 @@ props:
 slots:
   default: |
 
-    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
-    <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" />
-    <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" />
+    <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
+    <UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
+    <UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
 ---
-:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac"}
-:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel"}
-:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter"}
+:u-avatar{src="https://github.com/benjamincanac.png" alt="Benjamin Canac"}
+:u-avatar{src="https://github.com/romhml.png" alt="Romain Hamel"}
+:u-avatar{src="https://github.com/noook.png" alt="Neil Richter"}
 ::
 
 ## Examples
diff --git a/docs/content/3.components/avatar.md b/docs/content/3.components/avatar.md
index 029c1d32..80c1a9f8 100644
--- a/docs/content/3.components/avatar.md
+++ b/docs/content/3.components/avatar.md
@@ -18,7 +18,7 @@ Use the `src` prop to set the image URL. You can pass any property from HTML `<i
 ::component-code
 ---
 props:
-  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  src: 'https://github.com/benjamincanac.png'
 ---
 ::
 
@@ -31,7 +31,7 @@ Use the `size` prop to set the size of the Avatar.
 ignore:
   - src
 props:
-  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  src: 'https://github.com/benjamincanac.png'
   size: xl
 ---
 ::
diff --git a/docs/content/3.components/chip.md b/docs/content/3.components/chip.md
index 7aa6a7e1..59f35e30 100644
--- a/docs/content/3.components/chip.md
+++ b/docs/content/3.components/chip.md
@@ -102,9 +102,9 @@ props:
 slots:
   default: |
 
-    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
+    <UAvatar src="https://github.com/benjamincanac.png" />
 ---
-:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4"}
+:u-avatar{src="https://github.com/benjamincanac.png"}
 ::
 
 ### Standalone
diff --git a/docs/content/3.components/dropdown-menu.md b/docs/content/3.components/dropdown-menu.md
index a94c7795..68b4b71c 100644
--- a/docs/content/3.components/dropdown-menu.md
+++ b/docs/content/3.components/dropdown-menu.md
@@ -44,7 +44,7 @@ props:
   items:
     - - label: Benjamin
         avatar:
-          src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+          src: 'https://github.com/benjamincanac.png'
         type: label
     - - label: Profile
         icon: i-heroicons-user
diff --git a/docs/content/3.components/separator.md b/docs/content/3.components/separator.md
index ba2d7733..d903a9d3 100644
--- a/docs/content/3.components/separator.md
+++ b/docs/content/3.components/separator.md
@@ -7,14 +7,107 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Divider.vue
-navigation:
-  badge:
-    label: Todo
 ---
 
 ## Usage
 
-## Examples
+Use the Separator component as-is to separate content.
+
+::component-code
+---
+class: 'p-8'
+---
+::
+
+### Orientation
+
+Use the `orientation` prop to change the orientation of the Separator. Defaults to `horizontal`.
+
+::component-code
+---
+ignore:
+  - class
+class: 'p-8 justify-center'
+props:
+  orientation: vertical
+  class: 'h-48'
+---
+::
+
+### Label
+
+Use the `label` prop to display a label in the middle of the Separator.
+
+::component-code
+---
+class: 'p-8 justify-center'
+props:
+  label: 'Hello World'
+---
+::
+
+### Icon
+
+Use the `icon` prop to display an icon in the middle of the Separator.
+
+::component-code
+---
+class: 'p-8 justify-center'
+props:
+  icon: 'i-simple-icons-nuxtdotjs'
+---
+::
+
+### Avatar
+
+Use the `avatar` prop to display an avatar in the middle of the Separator.
+
+::component-code
+---
+prettier: true
+class: 'p-8 justify-center'
+props:
+  avatar:
+    src: 'https://github.com/benjamincanac.png'
+---
+::
+
+### Color
+
+Use the `color` prop to change the color of the Separator. Defaults to `gray`.
+
+::component-code
+---
+class: 'p-8 justify-center'
+props:
+  color: 'primary'
+  type: solid
+---
+::
+
+### Type
+
+Use the `type` prop to change the type of the Separator. Defaults to `solid`.
+
+::component-code
+---
+class: 'p-8'
+props:
+  type: dashed
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Separator. Defaults to `xs`.
+
+::component-code
+---
+class: 'p-8'
+props:
+  size: 'lg'
+---
+::
 
 ## API
 
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 83749e4e..075fcb63 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -140,6 +140,7 @@ export default defineNuxtConfig({
         'UProgress',
         'URadioGroup',
         'USelect',
+        'USeparator',
         'USlider',
         'USlideover',
         'USwitch',