diff --git a/apps/docs/content/components/accordion.mdx b/apps/docs/content/components/accordion.mdx
index ce6848a3..89856e39 100644
--- a/apps/docs/content/components/accordion.mdx
+++ b/apps/docs/content/components/accordion.mdx
@@ -32,6 +32,8 @@ import { Accordion } from '@pillar-ui/core'
 
 ### Collapsible
 
+Employ the collapsible prop to enable the closing of all items.
+
 <Playground name="accordionCollapsible" root="accordion" />
 
 ### Variants
diff --git a/apps/docs/content/components/timeline.mdx b/apps/docs/content/components/timeline.mdx
index 7809a90d..3b4ea143 100644
--- a/apps/docs/content/components/timeline.mdx
+++ b/apps/docs/content/components/timeline.mdx
@@ -40,10 +40,16 @@ import { Timeline } from '@pillar-ui/core'
 
 ### Variant
 
-<Prop defaultValue="solid" type="'solid' | 'dashed' | 'doted'" />
+<Prop defaultValue="solid" type="'shadow'  |  'solid'  |  'outline'  |  'soft'  |  'mixed'" />
 
 <Playground name="timelineVariant" root="timeline" />
 
-### Bullet
+### Line
+
+<Prop defaultValue="solid" type="'solid' | 'dashed' | 'doted'" />
+
+<Playground name="timelineLine" root="timeline" />
+
+### Content
 
-<Playground name="timelineCustomBullet" root="timeline" />
+<Playground name="timelineContent" root="timeline" />
diff --git a/apps/docs/src/app/_components/playground/timeline/timelineColor.tsx b/apps/docs/src/app/_components/playground/timeline/timelineColor.tsx
index 239ee174..4d2f7623 100644
--- a/apps/docs/src/app/_components/playground/timeline/timelineColor.tsx
+++ b/apps/docs/src/app/_components/playground/timeline/timelineColor.tsx
@@ -1,33 +1,26 @@
-import { Timeline, TimelineProps, Heading, Text, TimelineItem } from '@pillar-ui/core'
+import { Timeline, TimelineProps, Heading, Text, TimelineItem, Paper } from '@pillar-ui/core'
 import React from 'react'
 
+const items = Array.from({ length: 3 })
+
 const TimelineBase = (props: Omit<TimelineProps, 'children'>) => {
   return (
     <Timeline {...props}>
-      <TimelineItem>
-        <Heading size="3">Hello</Heading>
-        <Text size="3">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
-          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
-          quae.
-        </Text>
-      </TimelineItem>
-      <TimelineItem>
-        <Heading size="3">Hello</Heading>
-        <Text size="3">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
-          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
-          quae.
-        </Text>
-      </TimelineItem>
-      <TimelineItem>
-        <Heading size="3">Hello</Heading>
-        <Text size="3">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
-          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
-          quae.
-        </Text>
-      </TimelineItem>
+      {items.map((_, index) => (
+        <TimelineItem content={index + 1} {...props} key={index}>
+          <Paper flow="2">
+            <Heading size="5">Hello</Heading>
+            <Text as="time" color="b" low size="3">
+              13 May 2021
+            </Text>
+            <Text size="3">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
+              Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
+              Nihil, quae.
+            </Text>
+          </Paper>
+        </TimelineItem>
+      ))}
     </Timeline>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/timeline/timelineContent.tsx b/apps/docs/src/app/_components/playground/timeline/timelineContent.tsx
new file mode 100644
index 00000000..e9bae102
--- /dev/null
+++ b/apps/docs/src/app/_components/playground/timeline/timelineContent.tsx
@@ -0,0 +1,45 @@
+import { Timeline, TimelineProps, Heading, Text, Avatar, TimelineItem, Alert, Paper } from '@pillar-ui/core'
+import { Cross, Pencil, UserInfo, X } from '@pillar-ui/icons'
+import React from 'react'
+
+const Item = (props: any) => {
+  return (
+    <TimelineItem className="Sf-3" {...props}>
+      <Paper flow="4">
+        <Heading size="3">Nice to Meet You</Heading>
+        <Alert
+          title="helllo world"
+          message="Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad. Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil, quae."
+        />
+        <Text size="3">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
+          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
+          quae.
+        </Text>
+      </Paper>
+    </TimelineItem>
+  )
+}
+
+export const TimelineContent = () => {
+  return (
+    <>
+      <Timeline>
+        <Item content="1" />
+        <Item content="2" />
+        <Item content="3" />
+      </Timeline>
+
+      <Timeline>
+        <Item content="A" />
+        <Item content="B" />
+        <Item content="C" />
+      </Timeline>
+      <Timeline>
+        <Item content={<X />} />
+        <Item content={<Pencil />} />
+        <Item content={<UserInfo />} />
+      </Timeline>
+    </>
+  )
+}
diff --git a/apps/docs/src/app/_components/playground/timeline/timelineCustomBullet.tsx b/apps/docs/src/app/_components/playground/timeline/timelineCustomBullet.tsx
deleted file mode 100644
index 187ef94b..00000000
--- a/apps/docs/src/app/_components/playground/timeline/timelineCustomBullet.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Timeline, TimelineProps, Heading, Text, Avatar, TimelineItem } from '@pillar-ui/core'
-import { Cross } from '@pillar-ui/icons'
-import React from 'react'
-
-export const TimelineCustomBullet = () => {
-  return (
-    <>
-      <Timeline>
-        <TimelineItem bullet={<Cross />}>
-          <Heading size="3">Hello</Heading>
-          <Text size="3">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
-            Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
-            Nihil, quae.
-          </Text>
-        </TimelineItem>
-        <TimelineItem
-          bullet={<Avatar variant="image" size="3" image="https://picsum.photos/id/152/40/40" title="hello" />}
-        >
-          <Heading size="3">Hello</Heading>
-          <Text size="3">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
-            Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
-            Nihil, quae.
-          </Text>
-        </TimelineItem>
-        <TimelineItem>
-          <Heading size="3">Hello</Heading>
-          <Text size="3">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
-            Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
-            Nihil, quae.
-          </Text>
-        </TimelineItem>
-        <TimelineItem>
-          <Heading size="3">Hello</Heading>
-          <Text size="3">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
-            Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
-            Nihil, quae.
-          </Text>
-        </TimelineItem>
-      </Timeline>
-    </>
-  )
-}
diff --git a/apps/docs/src/app/_components/playground/timeline/timelineLine.tsx b/apps/docs/src/app/_components/playground/timeline/timelineLine.tsx
new file mode 100644
index 00000000..e9a33abb
--- /dev/null
+++ b/apps/docs/src/app/_components/playground/timeline/timelineLine.tsx
@@ -0,0 +1,77 @@
+import { Timeline, Paper, TimelineProps, Heading, Text, TimelineItem } from '@pillar-ui/core'
+import React from 'react'
+
+const TimelineBase = (props: Omit<TimelineProps, 'children'>) => {
+  return (
+    <Timeline {...props}>
+      <TimelineItem>
+        <Heading size="3">Hello</Heading>
+        <Text size="3">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
+          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
+          quae.
+        </Text>
+      </TimelineItem>
+      <TimelineItem>
+        <Heading size="3">Hello</Heading>
+        <Text size="3">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
+          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
+          quae.
+        </Text>
+      </TimelineItem>
+      <TimelineItem>
+        <Heading size="3">Hello</Heading>
+        <Text size="3">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
+          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
+          quae.
+        </Text>
+      </TimelineItem>
+    </Timeline>
+  )
+}
+
+export const TimelineLine = () => {
+  return (
+    <>
+      <TimelineBase line="solid" />
+      <TimelineBase line="dashed" />
+      <TimelineBase line="dotted" />
+      <Timeline>
+        <TimelineItem line="solid">
+          <Heading size="3">Hello</Heading>
+          <Text size="3">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
+            Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
+            Nihil, quae.
+          </Text>
+        </TimelineItem>
+        <TimelineItem line="dashed">
+          <Heading size="3">Hello</Heading>
+          <Text size="3">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
+            Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
+            Nihil, quae.
+          </Text>
+        </TimelineItem>
+        <TimelineItem line="dotted">
+          <Heading size="3">Hello</Heading>
+          <Text size="3">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
+            Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
+            Nihil, quae.
+          </Text>
+        </TimelineItem>
+        <TimelineItem>
+          <Heading size="3">Hello</Heading>
+          <Text size="3">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
+            Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
+            Nihil, quae.
+          </Text>
+        </TimelineItem>
+      </Timeline>
+    </>
+  )
+}
diff --git a/apps/docs/src/app/_components/playground/timeline/timelineSize.tsx b/apps/docs/src/app/_components/playground/timeline/timelineSize.tsx
index 1cd09238..9737261f 100644
--- a/apps/docs/src/app/_components/playground/timeline/timelineSize.tsx
+++ b/apps/docs/src/app/_components/playground/timeline/timelineSize.tsx
@@ -1,33 +1,21 @@
 import { Timeline, Paper, TimelineProps, Heading, Text, TimelineItem } from '@pillar-ui/core'
 import React from 'react'
 
-const TimelineBase = (props: Omit<TimelineProps, 'children'>) => {
+const items = Array.from({ length: 3 })
+
+const TimelineBase = ({ size }: Omit<TimelineProps, 'children'>) => {
   return (
-    <Timeline {...props}>
-      <TimelineItem>
-        <Heading size="3">Hello</Heading>
-        <Text size="3">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
-          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
-          quae.
-        </Text>
-      </TimelineItem>
-      <TimelineItem>
-        <Heading size="3">Hello</Heading>
-        <Text size="3">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
-          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
-          quae.
-        </Text>
-      </TimelineItem>
-      <TimelineItem>
-        <Heading size="3">Hello</Heading>
-        <Text size="3">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
-          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
-          quae.
-        </Text>
-      </TimelineItem>
+    <Timeline size={size}>
+      {items.map((_, index) => (
+        <TimelineItem content={index + 1} key={index}>
+          <Heading size="3">Hello</Heading>
+          <Text size="3">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
+            Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
+            Nihil, quae.
+          </Text>
+        </TimelineItem>
+      ))}
     </Timeline>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/timeline/timelineVariant.tsx b/apps/docs/src/app/_components/playground/timeline/timelineVariant.tsx
index 47c5e4be..ad2ae69a 100644
--- a/apps/docs/src/app/_components/playground/timeline/timelineVariant.tsx
+++ b/apps/docs/src/app/_components/playground/timeline/timelineVariant.tsx
@@ -1,33 +1,21 @@
-import { Timeline, Paper, TimelineProps, Heading, Text, TimelineItem } from '@pillar-ui/core'
+import { Timeline, TimelineProps, Heading, Text, TimelineItem } from '@pillar-ui/core'
 import React from 'react'
 
+const items = Array.from({ length: 3 })
+
 const TimelineBase = (props: Omit<TimelineProps, 'children'>) => {
   return (
-    <Timeline {...props}>
-      <TimelineItem>
-        <Heading size="3">Hello</Heading>
-        <Text size="3">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
-          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
-          quae.
-        </Text>
-      </TimelineItem>
-      <TimelineItem>
-        <Heading size="3">Hello</Heading>
-        <Text size="3">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
-          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
-          quae.
-        </Text>
-      </TimelineItem>
-      <TimelineItem>
-        <Heading size="3">Hello</Heading>
-        <Text size="3">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
-          Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit! Nihil,
-          quae.
-        </Text>
-      </TimelineItem>
+    <Timeline>
+      {items.map((_, index) => (
+        <TimelineItem content={index + 1} {...props} key={index}>
+          <Heading size="3">Hello</Heading>
+          <Text size="3">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laboriosam cumque voluptatem magnam ad.
+            Aspernatur explicabo a, est similique sed debitis eveniet alias repellendus doloremque nobis nisi odit!
+            Nihil, quae.
+          </Text>
+        </TimelineItem>
+      ))}
     </Timeline>
   )
 }
@@ -35,9 +23,11 @@ const TimelineBase = (props: Omit<TimelineProps, 'children'>) => {
 export const TimelineVariant = () => {
   return (
     <>
-      <TimelineBase variant="solid" />
-      <TimelineBase variant="dashed" />
-      <TimelineBase variant="dotted" />
+      <TimelineBase color="i" variant="shadow" />
+      <TimelineBase color="i" variant="solid" />
+      <TimelineBase color="i" variant="mixed" />
+      <TimelineBase color="i" variant="soft" />
+      <TimelineBase color="i" variant="outline" />
     </>
   )
 }