diff --git a/docs/components/timeline.md b/docs/components/timeline.md
index 9560561..9ef6f68 100644
--- a/docs/components/timeline.md
+++ b/docs/components/timeline.md
@@ -1,6 +1,7 @@
 <script setup>
 import TimelineExample from './timeline/examples/TimelineExample.vue';
 import TimelineWithIconsExample from './timeline/examples/TimelineWithIconsExample.vue';
+import TimelineHorizontalExample from './timeline/examples/TimelineHorizontalExample.vue';
 </script>
 # Vue Timeline Component - Flowbite
 
@@ -13,62 +14,62 @@ import TimelineWithIconsExample from './timeline/examples/TimelineWithIconsExamp
 import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton } from 'flowbite-vue'
 </script>
 <template>
-  <div class="vp-raw flex flex-col">
-    <Timeline>
-      <timeline-item>
-        <timeline-point>
-        </timeline-point>
-        <timeline-time>
-          February 2022
-        </timeline-time>
-        <timeline-title>
-          Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-content>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
-      </timeline-item>
-      <timeline-item>
-        <timeline-point>
-        </timeline-point>
-        <timeline-time>
-          February 2021
-        </timeline-time>
-        <timeline-title>
-          Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-content>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
-      </timeline-item>
-      <timeline-item>
-        <timeline-point>
-        </timeline-point>
+  <Timeline>
+    <timeline-item>
+      <timeline-point>
+      </timeline-point>
+      <timeline-content>
         <timeline-time>
           February 2020
         </timeline-time>
         <timeline-title>
           Application UI code in Tailwind CSS
         </timeline-title>
-        <timeline-content>
+        <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
+        </timeline-body>
         <timeline-button>
           Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
         </timeline-button>
-      </timeline-item>
-    </Timeline>
-  </div>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2020
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2020
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+  </Timeline>
 </template>
 
 ```
 ## Timeline with icons
+You can add icons by passing svg icons as slot to `<timeline-point></timeline-point>`
+<br>
 
 <TimelineWithIconsExample />
 
@@ -77,61 +78,126 @@ import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, T
 import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton } from 'flowbite-vue'
 </script>
 <template>
-  <div class="vp-raw flex flex-col">
-    <Timeline>
-      <timeline-item>
-        <timeline-point>
-          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-        </timeline-point>
+  <Timeline>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
         <timeline-time>
           February 2022
         </timeline-time>
         <timeline-title>
           Application UI code in Tailwind CSS
         </timeline-title>
-        <timeline-content>
+        <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
+        </timeline-body>
         <timeline-button>
           Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
         </timeline-button>
-      </timeline-item>
-      <timeline-item>
-        <timeline-point>
-          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-        </timeline-point>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
         <timeline-time>
-          February 2021
+          February 2022
         </timeline-time>
         <timeline-title>
           Application UI code in Tailwind CSS
         </timeline-title>
-        <timeline-content>
+        <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
-      </timeline-item>
-      <timeline-item>
-        <timeline-point>
-          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-        </timeline-point>
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
         <timeline-time>
-          February 2020
+          February 2022
         </timeline-time>
         <timeline-title>
           Application UI code in Tailwind CSS
         </timeline-title>
-        <timeline-content>
+        <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
-      </timeline-item>
-    </Timeline>
-  </div>
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+  </Timeline>
+</template>
+
+```
+## Timeline with icons
+`horizontal` prop makes timeline horizontal
+<br>
+
+<TimelineHorizontalExample />
+
+```vue
+<script setup>
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton } from 'flowbite-vue'
+</script>
+<template>
+  <Timeline>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2022
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+        <timeline-button>
+          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </timeline-button>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2022
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2022
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+  </Timeline>
 </template>
 
 ```
diff --git a/docs/components/timeline/examples/TimelineExample.vue b/docs/components/timeline/examples/TimelineExample.vue
index 652bdf4..52ae8a2 100644
--- a/docs/components/timeline/examples/TimelineExample.vue
+++ b/docs/components/timeline/examples/TimelineExample.vue
@@ -1,57 +1,55 @@
 <template>
-  <div class="vp-raw flex flex-col">
-    <Timeline>
-      <timeline-item>
-        <timeline-point>
-        </timeline-point>
-        <timeline-time>
-          February 2022
-        </timeline-time>
-        <timeline-title>
-          Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-content>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
-      </timeline-item>
-      <timeline-item>
-        <timeline-point>
-        </timeline-point>
-        <timeline-time>
-          February 2021
-        </timeline-time>
-        <timeline-title>
-          Application UI code in Tailwind CSS
-        </timeline-title>
-        <timeline-content>
-          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
-      </timeline-item>
-      <timeline-item>
-        <timeline-point>
-        </timeline-point>
+  <Timeline>
+    <timeline-item>
+      <timeline-point>
+      </timeline-point>
+      <timeline-content>
         <timeline-time>
           February 2020
         </timeline-time>
         <timeline-title>
           Application UI code in Tailwind CSS
         </timeline-title>
-        <timeline-content>
+        <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
+        </timeline-body>
         <timeline-button>
           Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
         </timeline-button>
-      </timeline-item>
-    </Timeline>
-  </div>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2020
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2020
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+  </Timeline>
 </template>
 <script setup>
-import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton } from '../../../../src/index'
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton, TimelineBody } from '../../../../src/index'
 </script>
diff --git a/docs/components/timeline/examples/TimelineHorizontalExample.vue b/docs/components/timeline/examples/TimelineHorizontalExample.vue
new file mode 100644
index 0000000..dc83df5
--- /dev/null
+++ b/docs/components/timeline/examples/TimelineHorizontalExample.vue
@@ -0,0 +1,58 @@
+<template>
+  <Timeline horizontal>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2022
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+        <timeline-button>
+          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        </timeline-button>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2022
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
+        <timeline-time>
+          February 2022
+        </timeline-time>
+        <timeline-title>
+          Application UI code in Tailwind CSS
+        </timeline-title>
+        <timeline-body>
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+  </Timeline>
+</template>
+<script setup>
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton, TimelineBody } from '../../../../src/index'
+</script>
diff --git a/docs/components/timeline/examples/TimelineWithIconsExample.vue b/docs/components/timeline/examples/TimelineWithIconsExample.vue
index a3e47f5..0a28213 100644
--- a/docs/components/timeline/examples/TimelineWithIconsExample.vue
+++ b/docs/components/timeline/examples/TimelineWithIconsExample.vue
@@ -1,60 +1,58 @@
 <template>
-  <div class="vp-raw flex flex-col">
-    <Timeline>
-      <timeline-item>
-        <timeline-point>
-          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-        </timeline-point>
+  <Timeline>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
         <timeline-time>
           February 2022
         </timeline-time>
         <timeline-title>
           Application UI code in Tailwind CSS
         </timeline-title>
-        <timeline-content>
+        <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
+        </timeline-body>
         <timeline-button>
           Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
         </timeline-button>
-      </timeline-item>
-      <timeline-item>
-        <timeline-point>
-          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-        </timeline-point>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
         <timeline-time>
-          February 2021
+          February 2022
         </timeline-time>
         <timeline-title>
           Application UI code in Tailwind CSS
         </timeline-title>
-        <timeline-content>
+        <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
-      </timeline-item>
-      <timeline-item>
-        <timeline-point>
-          <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
-        </timeline-point>
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+    <timeline-item>
+      <timeline-point>
+        <svg aria-hidden="true" class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
+      </timeline-point>
+      <timeline-content>
         <timeline-time>
-          February 2020
+          February 2022
         </timeline-time>
         <timeline-title>
           Application UI code in Tailwind CSS
         </timeline-title>
-        <timeline-content>
+        <timeline-body>
           Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
-        </timeline-content>
-        <timeline-button>
-          Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-        </timeline-button>
-      </timeline-item>
-    </Timeline>
-  </div>
+        </timeline-body>
+      </timeline-content>
+    </timeline-item>
+  </Timeline>
 </template>
 <script setup>
-import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton } from '../../../../src/index'
+import { Timeline, TimelineItem, TimelinePoint, TimelineTime, TimelineContent, TimelineTitle, TimelineButton, TimelineBody } from '../../../../src/index'
 </script>
diff --git a/src/components/Timeline/Timeline.vue b/src/components/Timeline/Timeline.vue
index b030d3f..85d11c9 100644
--- a/src/components/Timeline/Timeline.vue
+++ b/src/components/Timeline/Timeline.vue
@@ -1,14 +1,24 @@
 <template>
-  <ol class="relative border-l border-gray-200 dark:border-gray-700">
-    <slot></slot>
-  </ol>
+  <div class="vp-raw">
+    <ol :class="classNames(defaultClasses, horizontal ? horizontalClasses : verticalClasses)" v-bind="$attrs">
+      <slot></slot>
+    </ol>
+  </div>
 </template>
 <script lang="ts" setup>
-defineProps({
+import classNames from 'classnames'
+import { provide } from 'vue'
+
+const props = defineProps({
   horizontal: {
     type: Boolean,
     default: false,
   },
 })
 
+provide('horizontal', props.horizontal)
+
+const defaultClasses = 'relative border-gray-200 dark:border-gray-700'
+const verticalClasses = 'border-l'
+const horizontalClasses = 'flex'
 </script>
diff --git a/src/components/Timeline/TimelineBody.vue b/src/components/Timeline/TimelineBody.vue
new file mode 100644
index 0000000..d9c5bec
--- /dev/null
+++ b/src/components/Timeline/TimelineBody.vue
@@ -0,0 +1,3 @@
+<template>
+  <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400"><slot></slot></p>
+</template>
diff --git a/src/components/Timeline/TimelineContent.vue b/src/components/Timeline/TimelineContent.vue
index d9c5bec..7c27116 100644
--- a/src/components/Timeline/TimelineContent.vue
+++ b/src/components/Timeline/TimelineContent.vue
@@ -1,3 +1,11 @@
 <template>
-  <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400"><slot></slot></p>
+  <div :class="classes"><slot></slot></div>
 </template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue'
+import classNames from 'classnames'
+
+const isHorizontal = inject('horizontal')
+const classes = computed(() => classNames(isHorizontal ? 'mt-3 sm:pr-8' : ''))
+</script>
diff --git a/src/components/Timeline/TimelineItem.vue b/src/components/Timeline/TimelineItem.vue
index fdd58b5..1d97666 100644
--- a/src/components/Timeline/TimelineItem.vue
+++ b/src/components/Timeline/TimelineItem.vue
@@ -1,5 +1,19 @@
 <template>
-  <li class="mb-10 ml-6">
+  <li :class="timelineItemClasses">
     <slot></slot>
   </li>
 </template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue'
+import classNames from 'classnames'
+
+const isHorizontal = inject('horizontal')
+
+const defaultClasses = 'mb-10'
+const horizontalClasses = 'mb-6 sm:mb-0 relative'
+const verticalClasses = 'ml-6'
+const timelineItemClasses = computed(() => {
+  return classNames(defaultClasses, isHorizontal ? horizontalClasses : verticalClasses)
+})
+</script>
diff --git a/src/components/Timeline/TimelinePoint.vue b/src/components/Timeline/TimelinePoint.vue
index 56684a7..175fb18 100644
--- a/src/components/Timeline/TimelinePoint.vue
+++ b/src/components/Timeline/TimelinePoint.vue
@@ -1,13 +1,16 @@
 <template>
-  <div
-    :class="timelineClasses"
-  >
-    <slot />
+  <div :class="wrapperClasses">
+    <div
+        :class="timelineClasses"
+    >
+      <slot />
+    </div>
+    <div :class="borderClasses"></div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, useSlots } from 'vue'
+import { computed, inject, useSlots } from 'vue'
 import classNames from 'classnames'
 
 const slots = useSlots()
@@ -16,9 +19,24 @@ const hasSlot = computed(() => {
   return !!slots.default
 })
 
+const isHorizontal = inject('horizontal')
+
+const wrapperClasses = computed(() => {
+  return classNames(isHorizontal ? 'flex items-center' : '')
+})
+
+const defaultBorderClasses = 'h-0.5 w-full bg-gray-200 dark:bg-gray-700 sm:flex'
+const borderClasses = computed(() => classNames(defaultBorderClasses, { 'sm:hidden hidden': !isHorizontal }))
+
 const defaultClasses = 'absolute rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700'
-const noIconClasses = 'mt-1.5 w-3 h-3 bg-gray-200'
+const noIconClasses = 'w-3 h-3 bg-gray-200'
+const horizontalClasses = ''
+const verticalClasses = 'mt-1.5'
 const iconContainerClasses = 'w-6 h-6 -left-3 flex justify-center items-center bg-blue-200 ring-8 ring-white dark:ring-gray-900'
 
-const timelineClasses = classNames(defaultClasses, hasSlot.value ? iconContainerClasses : noIconClasses)
+const timelineClasses = classNames(
+    defaultClasses,
+    hasSlot.value ? iconContainerClasses : noIconClasses,
+    isHorizontal ? horizontalClasses : verticalClasses,
+)
 </script>
diff --git a/src/index.ts b/src/index.ts
index c92b24f..a40897f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -35,9 +35,10 @@ export { default as Table } from './components/Table/Table.vue'
 export { default as Timeline } from './components/Timeline/Timeline.vue'
 export { default as TimelineItem } from './components/Timeline/TimelineItem.vue'
 export { default as TimelinePoint } from './components/Timeline/TimelinePoint.vue'
+export { default as TimelineContent } from './components/Timeline/TimelineContent.vue'
 export { default as TimelineTime } from './components/Timeline/TimelineTime.vue'
 export { default as TimelineTitle } from './components/Timeline/TimelineTitle.vue'
-export { default as TimelineContent } from './components/Timeline/TimelineContent.vue'
+export { default as TimelineBody } from './components/Timeline/TimelineBody.vue'
 export { default as TimelineButton } from './components/Timeline/TimelineButton.vue'
 export { default as Toast } from './components/Toast/Toast.vue'
 export { default as ToastProvider } from './components/Toast/components/ToastProvider/ToastProvider.vue'