diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.ts b/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.ts
index ade3214..6f6295e 100644
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.ts
+++ b/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.ts
@@ -11,9 +11,6 @@ export class GanttBarsComponent {
   @Input() allocationTypes: any;
   @Input() allocationBase: number;
 
-  constructor() {
-    console.log('hii tiny');
-  }
   formatAllocation(value: number): string {
     return `${value} hours`;
   }
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.html b/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.html
index a35f033..b770925 100644
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.html
+++ b/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.html
@@ -1,8 +1,20 @@
-<div>
-  <h1>{{ name }}</h1>
-  <div *ngIf="showSearch">
-    <input type="text" [placeholder]="searchPlaceholder" />
-  </div>
+<div class="header-wrapper">
+  <h2 class="project-title">{{ name }}</h2>
+  <nb-card>
+    <nb-card-body>
+      <div class="search-wrapper" *ngIf="showSearch">
+        <input
+          nbInput
+          fullWidth
+          fieldSize="medium"
+          type="text"
+          status="basic"
+          [placeholder]="searchPlaceholder"
+        />
+      </div>
+    </nb-card-body>
+  </nb-card>
+
   <div *ngIf="desc">
     <p>Description is enabled.</p>
   </div>
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.scss b/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.scss
index bb1bee4..bec0b67 100644
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.scss
+++ b/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.scss
@@ -28,6 +28,7 @@
       bottom: 70.83%;
     }
   }
+
   .title-bar {
     display: flex;
     align-items: center;
@@ -50,4 +51,15 @@
   nb-form-field nb-icon {
     color: map.get($color, icon);
   }
+
+
 }
+.header-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.project-title{
+  font-size: x-large;
+}
\ No newline at end of file
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.component.html b/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.component.html
index d88285f..cc38b14 100644
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.component.html
+++ b/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.component.html
@@ -1,28 +1,28 @@
 <!-- gantt-tooltip.component.html -->
 <div class="tooltip-wrapper">
-  <div class="gantt-tooltip" *ngIf="item">
+  <div class="gantt-tooltip" *ngIf="itemData">
     <div class="key">
       <div>Hours Per Day</div>
-      <div>{{ formatAllocation(item.allocatedHours) }}</div>
+      <div>{{ formatAllocation(itemData.allocatedHours) }}</div>
     </div>
-    <div class="key" *ngIf="item.billingRate">
+    <div class="key" *ngIf="itemData.billingRate">
       <div>Hourly Rate</div>
-      <div>{{ formatter(item.billingRate) }}</div>
+      <div>{{ formatter(itemData.billingRate) }}</div>
     </div>
-    <div class="key" *ngIf="item.startDate">
+    <div class="key" *ngIf="itemData.startDate">
       <div>Start Date</div>
-      <div *ngIf="item.startDate">
-        {{ formatDate(item.startDate) | date: 'dd/MM/yyyy' }}
+      <div *ngIf="itemData.startDate">
+        {{ formatDate(itemData.startDate) | date: 'dd/MM/yyyy' }}
       </div>
     </div>
-    <div class="key" *ngIf="item.endDate">
+    <div class="key" *ngIf="itemData.endDate">
       <div>End Date</div>
-      <div *ngIf="item.endDate">
-        {{ formatDate(item.endDate) | date: 'dd/MM/yyyy' }}
+      <div *ngIf="itemData.endDate">
+        {{ formatDate(itemData.endDate) | date: 'dd/MM/yyyy' }}
       </div>
     </div>
     <hr />
-    <div class="key" *ngFor="let deal of item.allotedDeals">
+    <div class="key" *ngFor="let deal of itemData.allotedDeals">
       <div class="deal-name">
         <span class="underline">{{ deal.name }}</span>
         <ng-container *ngIf="allocationMap.get(deal.name)">
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.component.ts b/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.component.ts
index c296801..339b875 100644
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.component.ts
+++ b/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.component.ts
@@ -9,7 +9,7 @@ import {Item} from '../../model/item.model';
 })
 export class GanttTooltipComponent {
   @Input()
-  item: Item;
+  itemData: Item;
 
   @Input()
   allocationMap = new Map<string, boolean>([]);
diff --git a/projects/arc-lib/src/lib/components/gantt/gantt.module.ts b/projects/arc-lib/src/lib/components/gantt/gantt.module.ts
index a7bed47..c731dcb 100644
--- a/projects/arc-lib/src/lib/components/gantt/gantt.module.ts
+++ b/projects/arc-lib/src/lib/components/gantt/gantt.module.ts
@@ -15,13 +15,14 @@ import {
   GanttLib,
   GanttScaleService,
 } from './types';
-import {DateOperationService} from './services/date-operation.service';
+
 import {
   GanttBarsComponent,
   GanttColumnComponent,
   GanttHeaderComponent,
   GanttTooltipComponent,
 } from './components';
+import {NbInputModule} from '@nebular/theme/components/input/input.module';
 
 @NgModule({
   declarations: [
@@ -38,7 +39,6 @@ import {
     GanttTooltipComponent,
   ],
   providers: [
-    DateOperationService,
     GanttService,
     {
       provide: GANTT,
diff --git a/projects/arc/src/app/app-routing.module.ts b/projects/arc/src/app/app-routing.module.ts
index 583bf64..80ac72b 100644
--- a/projects/arc/src/app/app-routing.module.ts
+++ b/projects/arc/src/app/app-routing.module.ts
@@ -2,6 +2,7 @@ import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {environment} from '../environments/environment';
 import {AuthGuard, LoggedInGuard} from '@project-lib/core/auth';
+import {GanttDemoComponent} from './components/gantt-demo/gantt-demo.component';
 
 const routes: Routes = [
   {
@@ -25,6 +26,12 @@ const routes: Routes = [
       ),
     canActivate: [AuthGuard],
   },
+
+  {
+    path: 'gantt-demo',
+    component: GanttDemoComponent,
+  },
+
   {
     path: '',
     redirectTo: environment.homePath,
diff --git a/projects/arc/src/app/app.module.ts b/projects/arc/src/app/app.module.ts
index 24ba47b..4cbacc2 100644
--- a/projects/arc/src/app/app.module.ts
+++ b/projects/arc/src/app/app.module.ts
@@ -23,9 +23,11 @@ import {GanttModule} from '@project-lib/components/index';
 import {SelectModule} from '@project-lib/components/selector';
 import {HeaderComponent} from '@project-lib/components/header/header.component';
 import {SidebarComponent} from '@project-lib/components/sidebar/sidebar.component';
+import {GanttService} from '@project-lib/components/gantt';
+import {GanttDemoComponent} from './components/gantt-demo/gantt-demo.component';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, GanttDemoComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [
     BrowserModule,
@@ -36,6 +38,7 @@ import {SidebarComponent} from '@project-lib/components/sidebar/sidebar.componen
     ThemeModule.forRoot('default'),
     OverlayModule,
     SelectModule,
+
     GanttModule,
     BrowserAnimationsModule,
     HeaderComponent,
@@ -49,6 +52,7 @@ import {SidebarComponent} from '@project-lib/components/sidebar/sidebar.componen
     SystemStoreFacadeService,
     EnvAdapterService,
     ApiService,
+    GanttService,
     {
       provide: APP_CONFIG,
       useValue: environment,
diff --git a/projects/arc/src/app/components/gantt-demo/gantt-demo.component.html b/projects/arc/src/app/components/gantt-demo/gantt-demo.component.html
new file mode 100644
index 0000000..2516abf
--- /dev/null
+++ b/projects/arc/src/app/components/gantt-demo/gantt-demo.component.html
@@ -0,0 +1,38 @@
+<nb-layout>
+  <nb-layout-header fixed class="border-basic-bottom">
+    <div class="header-wrapper">
+      <div class="header">
+        <arc-gantt-header
+          [desc]="headerDesc"
+          [name]="headerName"
+          [searchPlaceholder]="headerSearchPlaceholder"
+          [showSearch]="headerShowSearch"
+        ></arc-gantt-header>
+      </div>
+    </div>
+  </nb-layout-header>
+  <nb-sidebar>
+    <div class="sidebar">
+      <arc-gantt-column
+        [items]="items"
+        [showParentInitials]="showParentInitials"
+        [showChildInitials]="showChildInitials"
+        [showOverallocatedIcon]="showOverallocatedIcon"
+      ></arc-gantt-column>
+    </div>
+  </nb-sidebar>
+  <nb-layout-column>
+    <nb-card>
+      <nb-card-header> </nb-card-header>
+      <nb-card-body>
+        <arc-gantt-bars
+          [item]="item"
+          [allocationTypes]="allocationTypes"
+          [allocationBase]="allocationBase"
+        ></arc-gantt-bars>
+      </nb-card-body>
+    </nb-card>
+  </nb-layout-column>
+
+  <arc-gantt-tooltip [item]="selectedItem"></arc-gantt-tooltip>
+</nb-layout>
diff --git a/projects/arc/src/app/components/gantt-demo/gantt-demo.component.scss b/projects/arc/src/app/components/gantt-demo/gantt-demo.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/arc/src/app/components/gantt-demo/gantt-demo.component.spec.ts b/projects/arc/src/app/components/gantt-demo/gantt-demo.component.spec.ts
new file mode 100644
index 0000000..598857a
--- /dev/null
+++ b/projects/arc/src/app/components/gantt-demo/gantt-demo.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GanttDemoComponent } from './gantt-demo.component';
+
+describe('GanttDemoComponent', () => {
+  let component: GanttDemoComponent;
+  let fixture: ComponentFixture<GanttDemoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GanttDemoComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GanttDemoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/arc/src/app/components/gantt-demo/gantt-demo.component.ts b/projects/arc/src/app/components/gantt-demo/gantt-demo.component.ts
new file mode 100644
index 0000000..6ffdfbd
--- /dev/null
+++ b/projects/arc/src/app/components/gantt-demo/gantt-demo.component.ts
@@ -0,0 +1,101 @@
+import {Component} from '@angular/core';
+import {NbSidebarService} from '@nebular/theme';
+import {Item, empData} from '@project-lib/components/gantt/model/item.model';
+
+@Component({
+  selector: 'arc-gantt-demo',
+  templateUrl: './gantt-demo.component.html',
+  styleUrls: ['./gantt-demo.component.scss'],
+})
+export class GanttDemoComponent {
+  // data for tooltip component
+  showTooltip = false;
+  selectedItem: Item;
+
+  onBarHovered(itemData: Item) {
+    this.selectedItem = itemData;
+    this.showTooltip = true;
+  }
+
+  onBarMouseLeave() {
+    this.showTooltip = false;
+  }
+
+  itemData: Item = {
+    allocatedHours: 1600,
+    billingRate: 100,
+    startDate: new Date('2024-01-01'),
+    endDate: new Date('2024-12-31'),
+    allotedDeals: [
+      {name: 'Deal 1', allocatedHours: 800, status: 'approved'},
+      {name: 'Deal 2', allocatedHours: 900, status: 'pending'},
+    ],
+  };
+
+  allocationMap = new Map<string, boolean>([
+    ['Deal 1', true],
+    ['Deal 2', false],
+  ]);
+
+  // Data for GanttColumnComponent
+  items: empData[] = [
+    {
+      name: 'john Doe ',
+      subtitle: 'Manager',
+      hasChildren: false,
+      isParent: false,
+      $open: false,
+      overallocated: false,
+    },
+    {
+      name: 'kelly',
+      subtitle: 'Assistant Manager',
+      hasChildren: false,
+      isParent: false,
+      $open: false,
+      overallocated: false,
+    },
+    {
+      name: 'Clove',
+      subtitle: 'Software Developer',
+      hasChildren: false,
+      isParent: false,
+      $open: false,
+      overallocated: false,
+    },
+    {
+      name: 'Classy',
+      subtitle: 'DevOps',
+      hasChildren: false,
+      isParent: false,
+      $open: false,
+      overallocated: false,
+    },
+  ];
+  showParentInitials = true;
+  showChildInitials = true;
+  showOverallocatedIcon = true;
+
+  allocationTypes = {
+    PlaceholderResource: 'PlaceholderResource',
+  };
+
+  allocationBase = 40;
+
+  item: Item = {
+    type: 'ActualResource',
+    allocation: 32,
+    payload: {dealStage: 'closedwon', billingRate: 100},
+    classes: ['example-class'],
+    subAllocations: [
+      {percent: 50, allocation: 16, allocatedHours: 16, classes: ['class1']},
+      {percent: 50, allocation: 16, allocatedHours: 16, classes: ['class2']},
+    ],
+  };
+
+  // Data for GanttHeaderComponent
+  headerDesc = true;
+  headerName = 'Dynamic Project Gantt';
+  headerSearchPlaceholder = 'Search your tasks';
+  headerShowSearch = true;
+}