diff --git a/src/plugins/components/list/list.doc.mdx b/src/plugins/components/list/list.doc.mdx
index 7aef961..2b37b45 100644
--- a/src/plugins/components/list/list.doc.mdx
+++ b/src/plugins/components/list/list.doc.mdx
@@ -22,7 +22,7 @@ Lists are an important part of any website or application. The list component le
 
 Lists can be used to display basic list items. Below is an example of an unordered list.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ListStories.Unordered} />
 </div>
 
@@ -32,7 +32,7 @@ Lists can be used to display basic list items. Below is an example of an unorder
 
 Lists can be used to display basic list items. Below is an example of an ordered list.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ListStories.Ordered} />
 </div>
 
@@ -42,7 +42,7 @@ Lists can be used to display basic list items. Below is an example of an ordered
 
 Lists can be used to display more complex list items. Below is an example of a media list featuring a title and a subtitle.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ListStories.MediaText} />
 </div>
 
@@ -52,7 +52,7 @@ Lists can be used to display more complex list items. Below is an example of a m
 
 Lists can be used to display more complex list items. Below is an example of a media list featuring an icon.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ListStories.MediaIcon} />
 </div>
 
@@ -62,7 +62,7 @@ Lists can be used to display more complex list items. Below is an example of a m
 
 Lists can be used to display more complex list items. Below is an example of a media list featuring an avatar.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ListStories.MediaAvatar} />
 </div>
 
diff --git a/src/plugins/components/list/list.stories.ts b/src/plugins/components/list/list.stories.ts
index 5955fdf..cb46656 100644
--- a/src/plugins/components/list/list.stories.ts
+++ b/src/plugins/components/list/list.stories.ts
@@ -81,7 +81,7 @@ export const MediaText: Story = {
       <li class="nui-list-item">
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Finish project UX
           </h6>
@@ -95,7 +95,7 @@ export const MediaText: Story = {
       <li class="nui-list-item">
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Meet with Andy at 3:00pm
           </h6>
@@ -109,7 +109,7 @@ export const MediaText: Story = {
       <li class="nui-list-item">
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Get groceries for Anna
           </h6>
@@ -123,7 +123,7 @@ export const MediaText: Story = {
       <li class="nui-list-item">
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Pay water bill
           </h6>
@@ -169,7 +169,7 @@ export const MediaIcon: Story = {
         </svg>
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Finish project UX
           </h6>
@@ -204,7 +204,7 @@ export const MediaIcon: Story = {
         </svg>
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Meet with Andy at 3:00pm
           </h6>
@@ -239,7 +239,7 @@ export const MediaIcon: Story = {
         </svg>
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Get groceries for Anna
           </h6>
@@ -274,7 +274,7 @@ export const MediaIcon: Story = {
         </svg>
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Pay water bill
           </h6>
@@ -300,11 +300,11 @@ export const MediaAvatar: Story = {
         ${Avatar({
           src: 'https://apollux.cssninja.io/img/avatars/15.svg',
           srcDark: 'https://apollux.cssninja.io/img/avatars/15.svg',
-          size: 'sm',
+          size: 'xs',
         })}
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Finish project UX
           </h6>
@@ -319,11 +319,11 @@ export const MediaAvatar: Story = {
         ${Avatar({
           src: 'https://apollux.cssninja.io/img/avatars/10.svg',
           srcDark: 'https://apollux.cssninja.io/img/avatars/10.svg',
-          size: 'sm',
+          size: 'xs',
         })}
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Meet with Andy at 3:00pm
           </h6>
@@ -338,11 +338,11 @@ export const MediaAvatar: Story = {
         ${Avatar({
           src: 'https://apollux.cssninja.io/img/avatars/24.svg',
           srcDark: 'https://apollux.cssninja.io/img/avatars/24.svg',
-          size: 'sm',
+          size: 'xs',
         })}
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Get groceries for Anna
           </h6>
@@ -357,11 +357,11 @@ export const MediaAvatar: Story = {
         ${Avatar({
           src: 'https://apollux.cssninja.io/img/avatars/25.svg',
           srcDark: 'https://apollux.cssninja.io/img/avatars/25.svg',
-          size: 'sm',
+          size: 'xs',
         })}
         <div>
           <h6
-            class="nui-heading nui-weight-medium text-muted-800 dark:text-muted-100"
+            class="nui-heading nui-heading-sm nui-weight-medium text-muted-800 dark:text-muted-100"
           >
             Pay water bill
           </h6>