diff --git a/src/app/components/pages/shift-update/sample_update.ts b/src/app/components/pages/shift-update/sample_update.ts
index 62d93d9..7601c7c 100644
--- a/src/app/components/pages/shift-update/sample_update.ts
+++ b/src/app/components/pages/shift-update/sample_update.ts
@@ -2,8 +2,19 @@ export const sample_update = [
     {
         id: "1",
         date: "10/10/24",
-        detail: "everything to show here",
+        detail: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum imperdiet libero, sed fermentum velit placerat id. Duis volutpat dictum fermentum. Phasellus tellus mauris, interdum quis purus nec, faucibus lacinia justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed eu finibus quam. Aenean ac tristique nulla. Mauris diam urna, dictum ut faucibus vel, pharetra ut tellus. Integer pellentesque dignissim lorem. Quisque sit amet tempor lectus. Vivamus a quam a diam fringilla interdum sit amet a ante. Proin est neque, mollis quis mi vitae, viverra fermentum justo. Vestibulum vehicula mollis dui, aliquet facilisis magna faucibus et. Mauris quis accumsan metus, quis dignissim lacus. Aliquam erat volutpat. Nullam dui mauris, vehicula et hendrerit ut, facilisis et urna. Donec lobortis venenatis sapien in cursus.Vivamus vel elit turpis. Suspendisse tristique ornare neque non condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In id placerat est. Pellentesque placerat nisi id nibh ornare facilisis. Nunc mi quam, vehicula eu dolor vel, tincidunt vehicula magna. Praesent nec mauris vitae nibh fermentum viverra. Donec finibus ex libero, vel ultricies arcu molestie id. Ut tincidunt venenatis massa, nec aliquam lacus varius quis. Aenean id ex nec velit gravida placerat sit amet vel ligula. Vivamus dignissim commodo justo, non pharetra ex sagittis sit amet.",
+        remarks:"test",
+        Sales: "Test Sales",
         ref: "Mail Reference",
         handler: "xy"
+    },
+    {
+        id: "2",
+        date: "10/12/24",
+        detail: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum imperdiet libero, sed fermentum velit placerat id. Duis volutpat dictum fermentum. Phasellus tellus mauris, interdum quis purus nec, faucibus lacinia justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed eu finibus quam. Aenean ac tristique nulla. Mauris diam urna, dictum ut faucibus vel, pharetra ut tellus. Integer pellentesque dignissim lorem. Quisque sit amet tempor lectus. Vivamus a quam a diam fringilla interdum sit amet a ante. Proin est neque, mollis quis mi vitae, viverra fermentum justo. Vestibulum vehicula mollis dui, aliquet facilisis magna faucibus et. Mauris quis accumsan metus, quis dignissim lacus. Aliquam erat volutpat. Nullam dui mauris, vehicula et hendrerit ut, facilisis et urna. Donec lobortis venenatis sapien in cursus.Vivamus vel elit turpis. Suspendisse tristique ornare neque non condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In id placerat est. Pellentesque placerat nisi id nibh ornare facilisis. Nunc mi quam, vehicula eu dolor vel, tincidunt vehicula magna. Praesent nec mauris vitae nibh fermentum viverra. Donec finibus ex libero, vel ultricies arcu molestie id. Ut tincidunt venenatis massa, nec aliquam lacus varius quis. Aenean id ex nec velit gravida placerat sit amet vel ligula. Vivamus dignissim commodo justo, non pharetra ex sagittis sit amet.",
+        ref: "Mail Reference 3",
+        remarks:"test",
+        Sales: "Test Sales",
+        handler: "xy z"
     }
 ]
\ No newline at end of file
diff --git a/src/app/components/pages/shift-update/shift-update.component.html b/src/app/components/pages/shift-update/shift-update.component.html
index 867ddd0..cff79b6 100644
--- a/src/app/components/pages/shift-update/shift-update.component.html
+++ b/src/app/components/pages/shift-update/shift-update.component.html
@@ -1,22 +1,2 @@
-<div class="container">
-    <table>
-        <thead>
-            <tr>
-                <th>Sr.</th>
-                <th>Date</th>
-                <th>Details</th>
-                <th>Reference</th>
-                <th>Personnel</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Issue Count + 1</td>
-                <td>Date Of the Issue</td>
-                <td>Details of the issue</td>
-                <td>Mail or bcp reference of the issue</td>
-                <td>Personnel Name</td>
-            </tr>        
-        </tbody>
-    </table>
-</div>
\ No newline at end of file
+<page-title title="Shift Update"></page-title>
+<app-table  [tableHeaders]="tableHeaderList" [rowDataList]="updateDataList"></app-table>
\ No newline at end of file
diff --git a/src/app/components/pages/shift-update/shift-update.component.ts b/src/app/components/pages/shift-update/shift-update.component.ts
index 8a54875..3df7ed3 100644
--- a/src/app/components/pages/shift-update/shift-update.component.ts
+++ b/src/app/components/pages/shift-update/shift-update.component.ts
@@ -1,12 +1,26 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { TableComponent } from '../../../shared/components/table/table.component';
+import { UpdateService } from './update.service';
+import { TitleComponent } from '../../../shared/components/title/title.component';
+import { ShortenPipe } from '../../../shared/pipe/shorten.pipe';
 
 @Component({
   selector: 'app-shift-update',
   standalone: true,
-  imports: [],
+  imports: [TableComponent, TitleComponent, ],
   templateUrl: './shift-update.component.html',
-  styleUrl: './shift-update.component.scss'
+  styleUrl: './shift-update.component.scss',
+  providers: [UpdateService]
 })
-export class ShiftUpdateComponent {
+export class ShiftUpdateComponent implements OnInit {
+  tableHeaderList = ['date','detail','ref','handler']
+  updateDataList: any[] = [];
+
+  constructor(private updateService: UpdateService) {}
+
+  ngOnInit(): void {
+      this.updateDataList = this.updateService.allUpdate;
+  }
+
 
 }
diff --git a/src/app/components/pages/shift-update/update.service.ts b/src/app/components/pages/shift-update/update.service.ts
new file mode 100644
index 0000000..987e3da
--- /dev/null
+++ b/src/app/components/pages/shift-update/update.service.ts
@@ -0,0 +1,13 @@
+import { Injectable } from "@angular/core";
+import { sample_update } from "./sample_update";
+
+Injectable({
+    providedIn: 'root'
+})
+
+export class UpdateService{
+    get allUpdate(){
+        return sample_update;
+    }
+}
+
diff --git a/src/app/shared/components/input-form/input-form.component.html b/src/app/shared/components/input-form/input-form.component.html
new file mode 100644
index 0000000..8310de4
--- /dev/null
+++ b/src/app/shared/components/input-form/input-form.component.html
@@ -0,0 +1 @@
+<p>input-form works!</p>
diff --git a/src/app/shared/components/input-form/input-form.component.scss b/src/app/shared/components/input-form/input-form.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/components/input-form/input-form.component.spec.ts b/src/app/shared/components/input-form/input-form.component.spec.ts
new file mode 100644
index 0000000..d0e1ffd
--- /dev/null
+++ b/src/app/shared/components/input-form/input-form.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputFormComponent } from './input-form.component';
+
+describe('InputFormComponent', () => {
+  let component: InputFormComponent;
+  let fixture: ComponentFixture<InputFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InputFormComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(InputFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/input-form/input-form.component.ts b/src/app/shared/components/input-form/input-form.component.ts
new file mode 100644
index 0000000..1d2b0ef
--- /dev/null
+++ b/src/app/shared/components/input-form/input-form.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-input-form',
+  standalone: true,
+  imports: [],
+  templateUrl: './input-form.component.html',
+  styleUrl: './input-form.component.scss'
+})
+export class InputFormComponent {
+
+}
diff --git a/src/app/shared/components/table/table.component.html b/src/app/shared/components/table/table.component.html
new file mode 100644
index 0000000..6a926d7
--- /dev/null
+++ b/src/app/shared/components/table/table.component.html
@@ -0,0 +1,16 @@
+<div class="container">
+    <div class="table">
+        <table>
+            <thead>
+                <tr>
+                    <th *ngFor="let tableHeader of tableHeaders">{{tableHeader}}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let rowData of rowDataList; let i = index" (click)="toggleRow(i)">
+                    <td *ngFor="let field_name of tableHeaders">{{ rowData[field_name] | shorten:getRowNumber(i) }}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/shared/components/table/table.component.scss b/src/app/shared/components/table/table.component.scss
new file mode 100644
index 0000000..4a9b866
--- /dev/null
+++ b/src/app/shared/components/table/table.component.scss
@@ -0,0 +1,67 @@
+@import './../../../shared/scss/colors.scss';
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    
+}
+
+.table{
+    padding: 0rem 2rem;
+}
+
+table {
+    margin-left: 1rem;
+}
+
+table, tr, td {
+    border-collapse: collapse;
+    border: none;
+}
+
+th{
+    color: $txt-heading-color;
+    font-size: 1.5rem;
+    padding-bottom: 3rem;
+}
+
+tbody tr {
+    transition: all 0.3s 
+}
+
+tbody tr:hover {
+    transform: scale(1.01);
+    background-color: rgba($hover-color,0.5);
+    border-collapse: collapse;
+    border: none;
+}
+
+td:first-child{
+    border-radius: 1rem 0rem 0rem 1rem;
+    padding-left: 2rem;
+}
+
+td:nth-child(3){
+    transition: color 0.09s ease-in-out;
+}
+td:last-child{
+    border-radius: 0rem 1rem 1rem 0rem;
+    padding-right: 2rem;
+}
+
+td:nth-child(3):active {
+    color: rgb(168, 168, 168);
+}
+
+tr:nth-child(even) {
+   background-color: rgba(0,0,0,0.03);
+}
+
+td {
+    padding: 0.7rem 0.5rem;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+}
\ No newline at end of file
diff --git a/src/app/shared/components/table/table.component.spec.ts b/src/app/shared/components/table/table.component.spec.ts
new file mode 100644
index 0000000..3c9a5e4
--- /dev/null
+++ b/src/app/shared/components/table/table.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableComponent } from './table.component';
+
+describe('TableComponent', () => {
+  let component: TableComponent;
+  let fixture: ComponentFixture<TableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TableComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/table/table.component.ts b/src/app/shared/components/table/table.component.ts
new file mode 100644
index 0000000..242fda4
--- /dev/null
+++ b/src/app/shared/components/table/table.component.ts
@@ -0,0 +1,32 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { Update } from '../../model/update.model';
+import { ShortenPipe } from '../../pipe/shorten.pipe';
+
+interface RowData {
+  [key: string]: string;
+}
+
+@Component({
+  selector: 'app-table',
+  standalone: true,
+  imports: [CommonModule, ShortenPipe],
+  templateUrl: './table.component.html',
+  styleUrl: './table.component.scss',
+})
+export class TableComponent {
+@Input() 
+@Input() tableHeaders: string[] = ['demo1','demo2','demo3']
+@Input() rowDataList!: any[];
+
+expandRowIndex: number | null = null;
+
+toggleRow(index: number){
+  this.expandRowIndex = this.expandRowIndex === index ? null : index;
+}
+
+getRowNumber(index: number): number {
+  return this.expandRowIndex === index ? 15000 : 75;
+}
+
+}
diff --git a/src/app/shared/components/title/title.component.html b/src/app/shared/components/title/title.component.html
new file mode 100644
index 0000000..e6e6cfc
--- /dev/null
+++ b/src/app/shared/components/title/title.component.html
@@ -0,0 +1,5 @@
+<div class="container">
+    <div class="title">
+        <h1>{{ title }}</h1>
+    </div>
+</div>
diff --git a/src/app/shared/components/title/title.component.scss b/src/app/shared/components/title/title.component.scss
new file mode 100644
index 0000000..e4fdc0e
--- /dev/null
+++ b/src/app/shared/components/title/title.component.scss
@@ -0,0 +1,18 @@
+@import './../../../shared/scss/colors.scss';
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    
+}
+
+.title {
+    padding: 2rem 0;
+    margin: 1rem 2rem 0 2rem;
+}
+
+h1{
+    color: $title;
+}
\ No newline at end of file
diff --git a/src/app/shared/components/title/title.component.spec.ts b/src/app/shared/components/title/title.component.spec.ts
new file mode 100644
index 0000000..a4be199
--- /dev/null
+++ b/src/app/shared/components/title/title.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TitleComponent } from './title.component';
+
+describe('TitleComponent', () => {
+  let component: TitleComponent;
+  let fixture: ComponentFixture<TitleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TitleComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TitleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/title/title.component.ts b/src/app/shared/components/title/title.component.ts
new file mode 100644
index 0000000..aa2975e
--- /dev/null
+++ b/src/app/shared/components/title/title.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'page-title',
+  standalone: true,
+  imports: [],
+  templateUrl: './title.component.html',
+  styleUrl: './title.component.scss'
+})
+export class TitleComponent {
+@Input() title!: string;
+}
diff --git a/src/app/shared/model/update.model.ts b/src/app/shared/model/update.model.ts
new file mode 100644
index 0000000..d9e5893
--- /dev/null
+++ b/src/app/shared/model/update.model.ts
@@ -0,0 +1,7 @@
+export class Update{
+    id!: string;
+    date!: string;
+    detail!: string;
+    ref!: string;
+    handler!: string;
+}
\ No newline at end of file
diff --git a/src/app/shared/pipe/shorten.pipe.ts b/src/app/shared/pipe/shorten.pipe.ts
new file mode 100644
index 0000000..b9c6bec
--- /dev/null
+++ b/src/app/shared/pipe/shorten.pipe.ts
@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+    name: 'shorten',
+    standalone: true
+})
+
+export class ShortenPipe implements PipeTransform{
+    transform(value: string | null | undefined, limit=20, ellipsis="..."): string | null | undefined {
+        if(value=== null || value === undefined) {
+            return value;
+        }
+        return value.length > limit ? value.slice(0, limit) + ellipsis : value;
+    }
+}
\ No newline at end of file