diff --git a/src/views/uikit/timelinedoc.ts b/src/views/uikit/timelinedoc.ts
new file mode 100644
index 0000000..c857969
--- /dev/null
+++ b/src/views/uikit/timelinedoc.ts
@@ -0,0 +1,147 @@
+import { Component } from '@angular/core';
+import { TimelineModule } from 'primeng/timeline';
+import { CardModule } from 'primeng/card';
+import { CommonModule } from '@angular/common';
+import { ButtonModule } from 'primeng/button';
+
+@Component({
+    standalone:true,
+    imports: [
+        CommonModule,
+        TimelineModule,
+        ButtonModule,
+        CardModule
+    ],
+    template: `<div class="grid">
+        <div class="col-12 md:col-6">
+            <div class="card">
+                <h5>Left Align</h5>
+                <p-timeline [value]="events1">
+                    <ng-template pTemplate="content" let-event>
+                        {{event.status}}
+                    </ng-template>
+                </p-timeline>
+            </div>
+        </div>
+        <div class="col-12 md:col-6">
+            <div class="card">
+                <h5>Right Align</h5>
+                <p-timeline [value]="events1" align="right">
+                    <ng-template pTemplate="content" let-event>
+                        {{event.status}}
+                    </ng-template>
+                </p-timeline>
+            </div>
+        </div>
+        <div class="col-12 md:col-6">
+            <div class="card">
+                <h5>Alternate Align</h5>
+                <p-timeline [value]="events1" align="alternate">
+                    <ng-template pTemplate="content" let-event>
+                        {{event.status}}
+                    </ng-template>
+                </p-timeline>
+            </div>
+        </div>
+        <div class="col-12 md:col-6">
+            <div class="card">
+                <h5>Opposite Content</h5>
+                <p-timeline [value]="events1">
+                    <ng-template pTemplate="content" let-event>
+                        <small class="p-text-secondary">{{event.date}}</small>
+                    </ng-template>
+                    <ng-template pTemplate="opposite" let-event>
+                        {{event.status}}
+                    </ng-template>
+                </p-timeline>
+            </div>
+        </div>
+    </div>
+
+    <div class="card">
+        <h5>Customized</h5>
+        <p-timeline [value]="events1" align="alternate" styleClass="customized-timeline">
+            <ng-template pTemplate="marker" let-event>
+        <span class="flex z-1 w-2rem h-2rem align-items-center justify-content-center text-white border-circle shadow-2" [style.backgroundColor]="event.color">
+            <i [ngClass]="event.icon"></i>
+        </span>
+            </ng-template>
+            <ng-template pTemplate="content" let-event>
+                <p-card [header]="event.status" [subheader]="event.date">
+                    <img *ngIf="event.image" [src]="'assets/demo/images/product/' + event.image" [alt]="event.name" width="200" class="shadow-2" />
+                    <p class="line-height-3 my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+                        quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
+                    <button pButton label="Read more" class="p-button-outlined mb-5"></button>
+                </p-card>
+            </ng-template>
+        </p-timeline>
+    </div>
+
+    <div class="card">
+        <h5>Horizontal</h5>
+        <h6>Top Align</h6>
+        <p-timeline [value]="events2" layout="horizontal" align="top">
+            <ng-template pTemplate="content" let-event>
+                {{event}}
+            </ng-template>
+        </p-timeline>
+
+        <h6>Bottom Align</h6>
+        <p-timeline [value]="events2" layout="horizontal" align="bottom">
+            <ng-template pTemplate="content" let-event>
+                {{event}}
+            </ng-template>
+        </p-timeline>
+
+        <h6>Alternate Align</h6>
+        <p-timeline [value]="events2" layout="horizontal" align="alternate">
+            <ng-template pTemplate="content" let-event>
+                {{event}}
+            </ng-template>
+            <ng-template pTemplate="opposite" let-event>
+                &nbsp;
+            </ng-template>
+        </p-timeline>
+    </div>`,
+})
+export class TimelineDoc {
+
+    events1: any[] = [];
+
+    events2: any[] = [];
+
+    ngOnInit() {
+        this.events1 = [
+            {
+                status: 'Ordered',
+                date: '15/10/2020 10:30',
+                icon: 'pi pi-shopping-cart',
+                color: '#9C27B0',
+                image: 'game-controller.jpg'
+            },
+            {
+                status: 'Processing',
+                date: '15/10/2020 14:00',
+                icon: 'pi pi-cog',
+                color: '#673AB7'
+            },
+            {
+                status: 'Shipped',
+                date: '15/10/2020 16:15',
+                icon: 'pi pi-envelope',
+                color: '#FF9800'
+            },
+            {
+                status: 'Delivered',
+                date: '16/10/2020 10:00',
+                icon: 'pi pi-check',
+                color: '#607D8B'
+            }
+        ];
+
+        this.events2 = [
+            "2020", "2021", "2022", "2023"
+        ];
+    }
+
+}