diff --git a/projects/arc-lib/src/lib/components/gantt/components/bb-gantt.component.html b/projects/arc-lib/src/lib/components/gantt/components/bb-gantt.component.html
deleted file mode 100644
index 4408045d..00000000
--- a/projects/arc-lib/src/lib/components/gantt/components/bb-gantt.component.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<div class="gantt-container">
-  <div
-    [ngClass]="showBorder ? 'gantt-chart' : 'gantt-chart no-border'"
-    [class.no-grid-border]="!showGridBorder"
-    [class.no-child-indent]="!childIndent"
-    #gantt
-  ></div>
-</div>
-
-<ng-template #menu let-item="item" let-contextItems="contextItems">
-  <div class="gantt-menu">
-    <nb-menu [items]="contextItems" [tag]="item"></nb-menu>
-  </div>
-</ng-template>
diff --git a/projects/arc-lib/src/lib/components/gantt/components/bb-gantt.component.scss b/projects/arc-lib/src/lib/components/gantt/components/bb-gantt.component.scss
deleted file mode 100644
index ac35a2a9..00000000
--- a/projects/arc-lib/src/lib/components/gantt/components/bb-gantt.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@use 'sass:map';
-@import 'projects/arc-lib/src/lib/theme/styles/_variables.scss';
-//@use  "projects/arc-lib/src/lib/theme/styles/_variables.scss";
-
-.gantt-container {
-  position: relative;
-  border-top: 0.063rem solid map.get($color, gantt-lines);
-  height: 100%;
-}
-
-.gantt-menu {
-  background-color: map.get($color, light);
-  box-shadow: 0px 0.938rem 1.25rem 0px #00000029;
-  width: 11.75rem;
-}
diff --git a/projects/arc-lib/src/lib/components/gantt/components/bb-gantt.component.ts b/projects/arc-lib/src/lib/components/gantt/components/bb-gantt.component.ts
deleted file mode 100644
index 84d44893..00000000
--- a/projects/arc-lib/src/lib/components/gantt/components/bb-gantt.component.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-import {
-  AfterViewInit,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  Output,
-  TemplateRef,
-  Type,
-  ViewChild,
-  ViewContainerRef,
-} from '@angular/core';
-import {AnyObject} from '@project-lib/core/api';
-import {ComponentBaseDirective} from '@project-lib/core/component-base';
-import {NbMenuItem, NbMenuService} from '@nebular/theme';
-import {takeUntil} from 'rxjs';
-import {GANTT_COLUMN_WIDTH} from '../const';
-import {GanttService} from '../services';
-import {
-  ContextItemClickEvent,
-  ContextItemFilter,
-  GanttEvent,
-  GanttRenderOptions,
-  GanttTaskValue,
-  IBarComponent,
-  IColumnComponent,
-  Timelines,
-} from '../types';
-import {GanttBarsComponent} from './gantt-bars/gantt-bars.component';
-import {GanttColumnComponent} from './gantt-column/gantt-column.component';
-
-@Component({
-  selector: 'gantt',
-  templateUrl: './bb-gantt.component.html',
-  styleUrls: ['./bb-gantt.component.scss'],
-})
-export class BbGanttComponent<T extends AnyObject>
-  extends ComponentBaseDirective
-  implements OnChanges, OnInit, AfterViewInit, OnDestroy, GanttRenderOptions<T>
-{
-  @ViewChild('gantt', {static: true}) ganttContainer!: ElementRef;
-
-  @Input()
-  data!: T[];
-
-  @Input()
-  contextItems: NbMenuItem[] = [];
-
-  @Input()
-  contextItemFilter!: ContextItemFilter<T>;
-
-  @Output()
-  contextItemClick = new EventEmitter<ContextItemClickEvent<T>>();
-
-  @Output()
-  event = new EventEmitter<GanttEvent<T>>();
-
-  @Input()
-  showParentInitials = false;
-
-  @Input()
-  showChildInitials = false;
-
-  @ViewChild('menu', {static: true})
-  contextTemplate!: TemplateRef<AnyObject>;
-
-  @Input()
-  columnName = 'Employee Name';
-
-  @Input()
-  showKebab = true;
-
-  @Input()
-  columnWidth = GANTT_COLUMN_WIDTH;
-
-  @Input()
-  resizer = true;
-
-  @Input()
-  columnComponent: Type<IColumnComponent<T>> = GanttColumnComponent;
-
-  @Input()
-  barComponent: Type<IBarComponent<T>> = GanttBarsComponent;
-
-  @Input()
-  searchPlaceholder?: string;
-
-  @Input()
-  showSearch = true;
-
-  @Input()
-  showBorder = true;
-
-  @Input()
-  moveToToday = true;
-
-  @Input()
-  highlightRange!: [Date, Date];
-
-  @Input()
-  showOverallocatedIcon = true;
-
-  @Input()
-  defaultScale: Timelines = Timelines.Monthly;
-
-  @Input()
-  showGridBorder = true;
-
-  @Input()
-  showTooltip = false;
-
-  @Input()
-  markToday = true;
-
-  @Input()
-  childIndent = true;
-
-  constructor(
-    private readonly ganttSvc: GanttService<T>,
-    private readonly menuService: NbMenuService,
-    public readonly viewContainerRef: ViewContainerRef,
-  ) {
-    super();
-  }
-
-  ngOnInit() {
-    this.menuService
-      .onItemClick()
-      .pipe(takeUntil(this._destroy$))
-      .subscribe(event => {
-        this.contextItemClick.emit({
-          event: event.item,
-          task: event.tag as unknown as GanttTaskValue<T>,
-        });
-        this.ganttSvc.closeContextMenu();
-      });
-    this.ganttSvc.events.pipe(takeUntil(this._destroy$)).subscribe(event => {
-      this.event.emit(event);
-    });
-  }
-
-  ngOnChanges() {
-    this.ganttSvc.feed();
-  }
-
-  ngAfterViewInit() {
-    this.ganttSvc.render(this.ganttContainer, this);
-  }
-
-  override ngOnDestroy() {
-    this.ganttSvc.destroy();
-    super.ngOnDestroy();
-  }
-}
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars-routing.module.ts b/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars-routing.module.ts
deleted file mode 100644
index 03520731..00000000
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars-routing.module.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-
-const routes: Routes = [];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class GanttBarsRoutingModule {}
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.html b/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.html
index 90e2d17f..dbfdda0e 100644
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.html
+++ b/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.html
@@ -16,6 +16,8 @@
       class="bar actual-bar"
       [class.with-suballocations]="hasSubAllocation(item)"
       [class.closed-won]="item.payload?.['dealStage'] === 'closedwon'"
+      [attr.gantt-tooltip-data]="'abc'"
+      gantt-hover="tooltip"
       [ngClass]="item.classes ?? []"
       data-gantt-click="bar"
     >
@@ -32,18 +34,26 @@
         {{ formatter(item.payload?.['billingRate']) }}
       </div>
       <div *ngIf="hasSubAllocation(item)" class="bar-container">
-        <ng-container *ngFor="let allocationBar of item.subAllocations">
+        <ng-container
+          *ngFor="let allocationBar of item.subAllocations; let i = index"
+        >
           <div
             class="suballocation-bars"
             [attr.gantt-bar-data]="stringify(allocationBar)"
             gantt-hover="bar"
             [ngClass]="allocationBar.classes ?? []"
-            [ngStyle]="{
-              width: allocationBar.percent + '%',
-            }"
+            [ngStyle]="{width: allocationBar.percent + '%'}"
             [class.empty]="!allocationBar.allocation"
             [class.over-allocated]="allocationBar.allocation > allocationBase"
+            (mouseover)="showTooltip = i"
+            (mouseout)="showTooltip = -1"
           >
+            <div class="showTooltip-wrapper">
+              <arc-gantt-tooltip
+                *ngIf="i == showTooltip"
+                [itemData]="allocationBar"
+              ></arc-gantt-tooltip>
+            </div>
             <div class="actual-hours">
               {{
                 formatAllocation(
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.scss b/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.scss
index 46f1769e..2212e16c 100644
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.scss
+++ b/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.scss
@@ -1,6 +1,5 @@
 @use 'sass:map';
-// @use "../../../../theme/styles/variables" as *;
-@use 'projects/arc-lib/src/lib/theme/styles/_variables.scss' as *;
+@use '../../../../theme/styles/variables' as *;
 
 .actual-rate {
   padding: 0.25rem 0.5rem;
@@ -13,12 +12,22 @@
   margin-right: 0.75rem;
 }
 
+.bar {
+  position: relative;
+  .showTooltip-wrapper {
+    position: absolute;
+    top: 2rem;
+  }
+}
+
 .bar-container {
   display: flex;
   flex-grow: 1;
   background: white;
 }
-
+.showTooltip-wrapper {
+  position: absolute;
+}
 .bar {
   font-family: var(--font-family-primary);
   font-weight: map.get($font-weight, bold);
@@ -28,7 +37,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 100%;
+  height: 20px;
   overflow: hidden;
 
   &.actual-bar {
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.spec.ts b/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.spec.ts
index 2800e0b9..e80f1f75 100644
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.spec.ts
+++ b/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.spec.ts
@@ -1,34 +1,16 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {AnyObject} from '@project-lib/core/api';
-import {TranslationService} from '@project-lib/core/localization';
-import {
-  TranslateFakeLoader,
-  TranslateLoader,
-  TranslateModule,
-  TranslateService,
-} from '@ngx-translate/core';
+
 import {GanttBarsComponent} from './gantt-bars.component';
 
 describe('GanttBarsComponent', () => {
-  let component: GanttBarsComponent<AnyObject>;
-  let fixture: ComponentFixture<GanttBarsComponent<AnyObject>>;
+  let component: GanttBarsComponent;
+  let fixture: ComponentFixture<GanttBarsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [GanttBarsComponent],
-      providers: [TranslateService, TranslationService],
-      imports: [
-        TranslateModule.forRoot({
-          loader: {
-            provide: TranslateLoader,
-            useClass: TranslateFakeLoader,
-          },
-        }),
-      ],
     }).compileComponents();
-  });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(GanttBarsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
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 135d8091..c38620a0 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
@@ -1,42 +1,30 @@
-import {Component} from '@angular/core';
-import {AnyObject} from '@project-lib/core/api';
-import {MAX_ALLOCATION} from '@project-lib/core/constants';
-import {TranslationService} from '@project-lib/core/localization';
-import {TranslateService} from '@ngx-translate/core';
-import {
-  GanttTaskValue,
-  GanttTaskValueWithSubAllocation,
-  SubAllocation,
-} from '../../types';
+import {Component, Input} from '@angular/core';
+import {AllocationBar, Item} from '../../model/item.model';
 
 @Component({
-  selector: 'gantt-bars',
+  selector: 'arc-gantt-bars',
   templateUrl: './gantt-bars.component.html',
   styleUrls: ['./gantt-bars.component.scss'],
 })
-export class GanttBarsComponent<T extends AnyObject> {
-  item!: GanttTaskValue<T>;
-  allocationTypes: AnyObject;
-  allocationBase = MAX_ALLOCATION;
-  private translate: TranslateService;
-  constructor(private translateSvc: TranslationService) {
-    this.translate = translateSvc.translate;
-  }
+export class GanttBarsComponent {
+  @Input() item: Item;
+  @Input() allocationTypes: any;
+  @Input() allocationBase: number;
+  showTooltip = -1;
 
-  stringify(subAllocation: SubAllocation) {
-    return JSON.stringify(subAllocation);
+  formatAllocation(value: number): string {
+    return `${value} hours`;
   }
-  formatter(rate: number) {
-    return `$${rate}/${this.translate.instant('hr')}`;
+
+  formatter(value: number): string {
+    return `$${value}/hour`;
   }
 
-  formatAllocation(allocation: number) {
-    return `${allocation}${this.translate.instant('h/d')}`;
+  hasSubAllocation(item: Item): boolean {
+    return item.subAllocations && item.subAllocations.length > 0;
   }
 
-  hasSubAllocation(
-    item: GanttTaskValue<T>,
-  ): item is GanttTaskValueWithSubAllocation<T> {
-    return !!(item as GanttTaskValueWithSubAllocation<T>).subAllocations;
+  stringify(allocationBar: AllocationBar): string {
+    return JSON.stringify(allocationBar);
   }
 }
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.module.ts b/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.module.ts
deleted file mode 100644
index bffe28d3..00000000
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-
-import {GanttBarsRoutingModule} from './gantt-bars-routing.module';
-import {GanttBarsComponent} from './gantt-bars.component';
-import {ThemeModule} from '@project-lib/theme/theme.module';
-
-@NgModule({
-  declarations: [GanttBarsComponent],
-  imports: [CommonModule, GanttBarsRoutingModule, ThemeModule],
-  exports: [GanttBarsComponent],
-})
-export class GanttBarsModule {}
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column-routing.module.ts b/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column-routing.module.ts
deleted file mode 100644
index 9ae3f0ff..00000000
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column-routing.module.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-
-const routes: Routes = [];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class GanttColumnRoutingModule {}
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.component.html b/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.component.html
index a6559da9..5e20fe63 100644
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.component.html
+++ b/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.component.html
@@ -1,4 +1,4 @@
-<div class="column-container pl-2" *ngIf="item">
+<div *ngFor="let item of items" class="employee-list-item">
   <nb-icon
     *ngIf="item.hasChildren"
     [icon]="item.$open ? 'chevron-up' : 'chevron-down'"
@@ -17,7 +17,7 @@
   </div>
   <div
     [ngClass]="item.subtitle ? 'with-designation' : 'without-designation'"
-    class="name-container"
+    class="employee-info"
     data-gantt-click="name"
   >
     <div class="name">{{ item.name }}</div>
@@ -32,13 +32,4 @@
     <div>This resource is over allocated</div>
     <nb-icon class="icon" icon="overallocation" pack="svg-boiler"></nb-icon>
   </div>
-  <div class="kebab-container">
-    <nb-icon
-      *ngIf="showKebab"
-      class="cursor-pointer kebab"
-      icon="kebab"
-      pack="svg-boiler"
-      data-gantt-click="kebab"
-    ></nb-icon>
-  </div>
 </div>
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.component.scss b/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.component.scss
index 5a8b7f4d..04386efb 100644
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.component.scss
+++ b/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.component.scss
@@ -1,7 +1,13 @@
-// @use "../../../../theme/styles/variables" as *;
-@use 'projects/arc-lib/src/lib/theme/styles/_variables.scss' as *;
+@use '../../../../theme/styles/variables' as *;
 @use 'sass:map';
-.column-container {
+
+.employee-list-item {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #d9d9d9;
+  padding-bottom: 10px;
   .kebab-container {
     position: absolute;
     background: linear-gradient(
@@ -14,10 +20,12 @@
     opacity: 0;
     transition: opacity 0.2s ease-in;
     height: 100%;
+    width: 70%;
     .kebab {
       padding: 0 2rem;
     }
   }
+
   &:hover,
   &.active {
     .kebab-container {
@@ -32,6 +40,7 @@
 
   .employee-icon {
     min-width: 2.375rem;
+    max-width: 2.375rem;
     height: 2.375rem;
     border-radius: 50%;
     background: map.get($color, 'menu-item-active');
@@ -43,6 +52,7 @@
       margin: auto;
     }
   }
+
   .with-designation {
     overflow: hidden;
     flex-grow: 1;
@@ -72,6 +82,7 @@
       text-overflow: ellipsis;
     }
   }
+
   .without-designation {
     overflow: hidden;
     flex-grow: 1;
@@ -108,6 +119,7 @@
     right: -4.063rem;
     top: -0.313rem;
   }
+
   .overallocation_icon:hover div {
     display: flex;
     line-height: 1;
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.component.spec.ts b/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.component.spec.ts
new file mode 100644
index 00000000..e55dcf7c
--- /dev/null
+++ b/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.component.spec.ts
@@ -0,0 +1,22 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {GanttColumnComponent} from './gantt-column.component';
+
+describe('GColumnComponent', () => {
+  let component: GanttColumnComponent;
+  let fixture: ComponentFixture<GanttColumnComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [GanttColumnComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GanttColumnComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.component.ts b/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.component.ts
index 83e11025..7562c674 100644
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.component.ts
+++ b/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.component.ts
@@ -1,35 +1,21 @@
 import {Component, Input} from '@angular/core';
-import {AnyObject} from '@project-lib/core/api';
-import {NbMenuItem} from '@nebular/theme';
-import {ContextItemFilter, GanttTaskValue} from '../../types';
+import {empData} from '../../model/item.model';
 
 @Component({
-  selector: 'gantt-column',
+  selector: 'arc-gantt-column',
   templateUrl: './gantt-column.component.html',
   styleUrls: ['./gantt-column.component.scss'],
 })
-export class GanttColumnComponent<T extends AnyObject> {
+export class GanttColumnComponent {
   @Input()
-  item!: GanttTaskValue<T>;
+  items: empData[];
 
   @Input()
-  contextItems: NbMenuItem[] = [];
+  showParentInitials: boolean;
 
   @Input()
-  active!: boolean;
+  showChildInitials: boolean;
 
   @Input()
-  showKebab!: boolean;
-
-  @Input()
-  showParentInitials!: boolean;
-
-  @Input()
-  showChildInitials!: boolean;
-
-  @Input()
-  showOverallocatedIcon!: boolean;
-
-  @Input()
-  contextItemFilter!: ContextItemFilter<T>;
+  showOverallocatedIcon: boolean;
 }
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.module.ts b/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.module.ts
deleted file mode 100644
index bbac0283..00000000
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-
-import {GanttColumnRoutingModule} from './gantt-column-routing.module';
-import {GanttColumnComponent} from './gantt-column.component';
-import {ThemeModule} from '@project-lib/theme/theme.module';
-
-@NgModule({
-  declarations: [GanttColumnComponent],
-  imports: [CommonModule, GanttColumnRoutingModule, ThemeModule],
-  exports: [GanttColumnComponent],
-})
-export class GanttColumnModule {}
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header-routing.module.ts b/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header-routing.module.ts
deleted file mode 100644
index f13d934c..00000000
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header-routing.module.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-
-const routes: Routes = [];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class GanttHeaderRoutingModule {}
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 6ee77585..3e3a1c43 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,22 +1,22 @@
-<div class="header-container">
-  <div class="search-bar">
-    <nb-form-field class="gantt-search" *ngIf="showSearch">
-      <nb-icon nbPrefix icon="search-outline"></nb-icon>
-      <input type="text" placeholder="{{ searchPlaceholder }}" nbInput />
-    </nb-form-field>
-    <nb-icon *ngIf="showSearch" icon="menu-arrow-outline"></nb-icon>
-  </div>
-  <div class="title-bar">
-    <div class="title">{{ name }}</div>
-    <div class="sort" data-gantt-click="sort">
-      <nb-icon
-        icon="chevron-up-outline"
-        [status]="desc === true ? 'primary' : 'default'"
-      ></nb-icon>
-      <nb-icon
-        icon="chevron-down-outline"
-        [status]="desc === false ? 'primary' : 'default'"
-      ></nb-icon>
+<div class="header-wrapper">
+  <div class="title-wrapper">
+    <h2 class="project-title">{{ name }}</h2>
+    <div class="desc-wrapper" *ngIf="desc">
+      <p>Description is enabled.</p>
     </div>
   </div>
+
+  <nb-card>
+    <nb-card-body>
+      <div class="search-wrapper" *ngIf="showSearch">
+        <input
+          nbInput
+          fieldSize="medium"
+          type="text"
+          status="basic"
+          [placeholder]="searchPlaceholder"
+        />
+      </div>
+    </nb-card-body>
+  </nb-card>
 </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 3e9aeb60..65ea5714 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
@@ -1,6 +1,7 @@
 // @use "../../../../theme/styles/variables" as *;
-@use 'projects/arc-lib/src/lib/theme/styles/_variables.scss' as *;
+// @use 'projects/arc-lib/src/lib/theme/styles/_variables.scss' as *;
 @use 'sass:map';
+@use '../../../../theme/styles/variables' as *;
 .header-container {
   line-height: 1;
   width: 100%;
@@ -27,6 +28,7 @@
       bottom: 70.83%;
     }
   }
+
   .title-bar {
     display: flex;
     align-items: center;
@@ -50,3 +52,22 @@
     color: map.get($color, icon);
   }
 }
+
+.header-wrapper {
+  display: flex;
+  justify-content: space-between;
+  width: calc(100vw - 1rem);
+}
+
+.project-title {
+  font-size: x-large;
+  margin-bottom: -2px;
+}
+
+.desc-wrapper {
+  margin-top: -8px;
+}
+
+.search-wrapper {
+  margin-top: 32px;
+}
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.spec.ts b/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.spec.ts
index 875fb124..5f3bff98 100644
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.spec.ts
+++ b/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.spec.ts
@@ -1,6 +1,5 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {ThemeModule} from '@project-lib/theme/theme.module';
-import {GanttModule} from '../../gantt.module';
+
 import {GanttHeaderComponent} from './gantt-header.component';
 
 describe('GanttHeaderComponent', () => {
@@ -9,11 +8,9 @@ describe('GanttHeaderComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [GanttModule, ThemeModule.forRoot('boiler')],
+      declarations: [GanttHeaderComponent],
     }).compileComponents();
-  });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(GanttHeaderComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.ts b/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.ts
index 85414a19..d7f11e5d 100644
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.ts
+++ b/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.component.ts
@@ -1,19 +1,12 @@
 import {Component, Input} from '@angular/core';
-
 @Component({
-  selector: 'gantt-header',
+  selector: 'arc-gantt-header',
   templateUrl: './gantt-header.component.html',
   styleUrls: ['./gantt-header.component.scss'],
 })
 export class GanttHeaderComponent {
-  @Input()
-  desc!: boolean;
-
-  @Input()
-  name?: string;
-
+  @Input() desc!: boolean;
+  @Input() name?: string;
   @Input() searchPlaceholder = 'Enter your search here';
-
-  @Input()
-  showSearch!: boolean;
+  @Input() showSearch!: boolean;
 }
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.module.ts b/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.module.ts
deleted file mode 100644
index b3772d10..00000000
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-header/gantt-header.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-
-import {GanttHeaderRoutingModule} from './gantt-header-routing.module';
-import {GanttHeaderComponent} from './gantt-header.component';
-import {ThemeModule} from '@project-lib/theme/theme.module';
-
-@NgModule({
-  declarations: [GanttHeaderComponent],
-  imports: [CommonModule, GanttHeaderRoutingModule, ThemeModule],
-  exports: [GanttHeaderComponent],
-})
-export class GanttHeaderModule {}
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip-routing.module.ts b/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip-routing.module.ts
deleted file mode 100644
index 7be6108f..00000000
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip-routing.module.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-
-const routes: Routes = [];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class GanttTooltipRoutingModule {}
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 49d1c36e..cc38b143 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,41 +1,48 @@
-<div class="gantt-tooltip" gantt-hover="tooltip" *ngIf="item">
-  <div class="key">
-    <div>Start Date</div>
-    <div *ngIf="item.startDate">
-      {{ formatDate(item.startDate) | date: 'dd/MM/YYYY' }}
+<!-- gantt-tooltip.component.html -->
+<div class="tooltip-wrapper">
+  <div class="gantt-tooltip" *ngIf="itemData">
+    <div class="key">
+      <div>Hours Per Day</div>
+      <div>{{ formatAllocation(itemData.allocatedHours) }}</div>
     </div>
-  </div>
-  <div class="key">
-    <div>End Date</div>
-    <div *ngIf="item.endDate">
-      {{ formatDate(item.endDate) | date: 'dd/MM/YYYY' }}
+    <div class="key" *ngIf="itemData.billingRate">
+      <div>Hourly Rate</div>
+      <div>{{ formatter(itemData.billingRate) }}</div>
     </div>
-  </div>
-  <div class="key">
-    <div>Hourly Rate Charged</div>
-    <div>{{ formatter(item.billingRate!) }}</div>
-  </div>
-  <div class="key">
-    <div>Allocated Hours</div>
-    <div>{{ formatAllocation(item.allocatedHours) }}</div>
-  </div>
-  <hr />
-  <div class="key">
-    <div>{{ 'currentAllocationsLbl' | translate }}</div>
-    <div [ngClass]="item.allocation > maxAllocation ? 'over-allocated' : ''">
-      <div *ngIf="item.allocation > maxAllocation">
-        <span class="arrow">&#8593;</span>
-        <span class="overallocated-hours">
-          {{ formatAllocation(item.allocation - maxAllocation) }}
-        </span>
+    <div class="key" *ngIf="itemData.startDate">
+      <div>Start Date</div>
+      <div *ngIf="itemData.startDate">
+        {{ formatDate(itemData.startDate) | date: 'dd/MM/yyyy' }}
       </div>
-      <div>
-        {{ formatAllocation(item.allocation) }}
+    </div>
+    <div class="key" *ngIf="itemData.endDate">
+      <div>End Date</div>
+      <div *ngIf="itemData.endDate">
+        {{ formatDate(itemData.endDate) | date: 'dd/MM/yyyy' }}
+      </div>
+    </div>
+    <hr />
+    <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)">
+          <span class="icon-shadow">
+            <nb-icon icon="shadowResource" pack="svg-bizbook"></nb-icon>
+          </span>
+          <i class="fa fa-icon"></i>
+        </ng-container>
+      </div>
+      <div class="deal-key">
+        <div class="sow-status">
+          <span class="status-circle active"></span>
+          <span class="status-text">{{
+            displayStatus(deal.status) | titlecase
+          }}</span>
+        </div>
+        <div>
+          {{ formatAllocation(deal.allocatedHours) }}
+        </div>
       </div>
     </div>
-  </div>
-  <div class="key" *ngFor="let deal of item.allotedDeals">
-    <div class="deal-name">{{ deal.name }}</div>
-    <div>{{ formatAllocation(deal.allocatedHours) }}</div>
   </div>
 </div>
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.component.scss b/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.component.scss
index a83b0278..3cef4c84 100644
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.component.scss
+++ b/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.component.scss
@@ -1,8 +1,13 @@
 @use '../../../../theme/styles/variables' as *;
 @use 'sass:map';
 
+.tooltip-wrapper {
+  display: flex;
+  justify-content: center;
+}
 .gantt-tooltip {
   background-color: map.get($color, dark);
+  color: white;
   box-shadow: 0 0.25rem 0.375rem map.get($color, tooltip-box-shadow);
   padding: 1.488rem;
   border-radius: 0.5rem;
@@ -10,7 +15,7 @@
   font-weight: map.get($font-weight, light);
   font-size: map.get($font-size, default);
   width: 35rem;
-  max-height: 20rem;
+  max-height: 25rem;
   overflow-y: auto;
 }
 
@@ -80,3 +85,24 @@ hr {
   white-space: nowrap;
   padding-left: 1rem;
 }
+.deal-key {
+  display: flex;
+  gap: 20px;
+  justify-content: end;
+}
+.status-circle {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-right: 10px;
+  &.active {
+    background-color: green;
+  }
+  &.pending {
+    background-color: rgb(255, 153, 0);
+  }
+  &.unapproved {
+    background-color: red;
+  }
+}
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.component.spec.ts b/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.component.spec.ts
index 848f4190..16755f37 100644
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.component.spec.ts
+++ b/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.component.spec.ts
@@ -1,11 +1,4 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {TranslationService} from '@project-lib/core/localization';
-import {
-  TranslateFakeLoader,
-  TranslateLoader,
-  TranslateModule,
-  TranslateService,
-} from '@ngx-translate/core';
 
 import {GanttTooltipComponent} from './gantt-tooltip.component';
 
@@ -16,19 +9,8 @@ describe('GanttTooltipComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [GanttTooltipComponent],
-      providers: [TranslateService, TranslationService],
-      imports: [
-        TranslateModule.forRoot({
-          loader: {
-            provide: TranslateLoader,
-            useClass: TranslateFakeLoader,
-          },
-        }),
-      ],
     }).compileComponents();
-  });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(GanttTooltipComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
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 2cceff2c..339b875e 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
@@ -1,28 +1,39 @@
-import {Component} from '@angular/core';
-import {MAX_ALLOCATION} from '@project-lib/core/constants';
+import {Component, Input} from '@angular/core';
 import {TranslateService} from '@ngx-translate/core';
-import {SubAllocation} from '../../types';
+import {Item} from '../../model/item.model';
 
 @Component({
-  selector: 'gantt-tooltip',
+  selector: 'arc-gantt-tooltip',
   templateUrl: './gantt-tooltip.component.html',
   styleUrls: ['./gantt-tooltip.component.scss'],
 })
 export class GanttTooltipComponent {
-  item!: SubAllocation;
-  maxAllocation = MAX_ALLOCATION;
+  @Input()
+  itemData: Item;
+
+  @Input()
+  allocationMap = new Map<string, boolean>([]);
 
   constructor(private translate: TranslateService) {}
 
-  formatDate(date: Date) {
-    return new Date(date);
+  formatDate(date: Date): string {
+    const options: Intl.DateTimeFormatOptions = {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    };
+    return new Intl.DateTimeFormat('en-GB', options).format(date);
+  }
+
+  formatter(value: number): string {
+    return `$${value}`;
   }
 
-  formatter(rate: number) {
-    return `$${rate}/${this.translate.instant('hr')}`;
+  formatAllocation(hours: number): string {
+    return `${hours} hours`;
   }
 
-  formatAllocation(allocation: number) {
-    return `${allocation}${this.translate.instant('h/d')}`;
+  displayStatus(status: string): string {
+    return status;
   }
 }
diff --git a/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.module.ts b/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.module.ts
deleted file mode 100644
index de659980..00000000
--- a/projects/arc-lib/src/lib/components/gantt/components/gantt-tooltip/gantt-tooltip.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-
-import {GanttTooltipRoutingModule} from './gantt-tooltip-routing.module';
-import {GanttTooltipComponent} from './gantt-tooltip.component';
-import {TranslateModule} from '@ngx-translate/core';
-
-@NgModule({
-  declarations: [GanttTooltipComponent],
-  imports: [CommonModule, GanttTooltipRoutingModule, TranslateModule],
-  exports: [GanttTooltipComponent],
-})
-export class GanttTooltipModule {}
diff --git a/projects/arc-lib/src/lib/components/gantt/components/index.ts b/projects/arc-lib/src/lib/components/gantt/components/index.ts
index c5ebfd07..e92d2fd8 100644
--- a/projects/arc-lib/src/lib/components/gantt/components/index.ts
+++ b/projects/arc-lib/src/lib/components/gantt/components/index.ts
@@ -1,4 +1,4 @@
-export * from './bb-gantt.component';
 export * from './gantt-bars/gantt-bars.component';
 export * from './gantt-column/gantt-column.component';
 export * from './gantt-header/gantt-header.component';
+export * from './gantt-tooltip/gantt-tooltip.component';
diff --git a/projects/arc-lib/src/lib/components/gantt/const.ts b/projects/arc-lib/src/lib/components/gantt/const.ts
index ef0dd91f..e38083f9 100644
--- a/projects/arc-lib/src/lib/components/gantt/const.ts
+++ b/projects/arc-lib/src/lib/components/gantt/const.ts
@@ -29,6 +29,11 @@ export const GANTT_SCROLL_BAR_HEIGHT = 20;
 export const GANTT_COLUMN_WIDTH = 300;
 export const RESIZER_WIDTH = 1;
 export const BUFFER_FOR_TODAY = 5;
-
+export const TOOLTIP_OFFSET = 30;
 export const MONTHS_IN_QUARTER = 3;
 export const RANDOM_SIZE = 36;
+export const ROW_HEIGHT = 35;
+export const BUFFER_FOR_EACH_ROW = 35;
+export const ACTUAL_ROW_SIZE = 24;
+export const COLUMN_WIDTH = 35;
+export const PARENT_ROW_HEIGHT_HEADINGS = 35;
diff --git a/projects/arc-lib/src/lib/components/gantt/gantt-routing.module.ts b/projects/arc-lib/src/lib/components/gantt/gantt-routing.module.ts
index be744e5e..0d17e19a 100644
--- a/projects/arc-lib/src/lib/components/gantt/gantt-routing.module.ts
+++ b/projects/arc-lib/src/lib/components/gantt/gantt-routing.module.ts
@@ -1,43 +1,7 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
-import {BbGanttComponent} from './components';
 
-const routes: Routes = [
-  {
-    path: '',
-    component: BbGanttComponent,
-    children: [
-      {
-        path: 'gantt-bars',
-        loadChildren: () =>
-          import('./components/gantt-bars/gantt-bars.module').then(
-            m => m.GanttBarsModule,
-          ),
-      },
-      {
-        path: 'gantt-columns',
-        loadChildren: () =>
-          import('./components/gantt-column/gantt-column.module').then(
-            m => m.GanttColumnModule,
-          ),
-      },
-      {
-        path: 'gantt-header',
-        loadChildren: () =>
-          import('./components/gantt-header/gantt-header.module').then(
-            m => m.GanttHeaderModule,
-          ),
-      },
-      {
-        path: 'gantt-tootltip',
-        loadChildren: () =>
-          import('./components/gantt-tooltip/gantt-tooltip.module').then(
-            m => m.GanttTooltipModule,
-          ),
-      },
-    ],
-  },
-];
+const routes: Routes = [];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
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 468fdb44..c731dcbc 100644
--- a/projects/arc-lib/src/lib/components/gantt/gantt.module.ts
+++ b/projects/arc-lib/src/lib/components/gantt/gantt.module.ts
@@ -2,25 +2,48 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
 import {ThemeModule} from '@project-lib/theme/theme.module';
-import {BbGanttComponent} from './components';
-import {GANTT_SCALES} from './const';
+import {GANTT, GANTT_SCALES} from './const';
 import {MonthlyScaleService} from './services/timeline-scales/monthly-scale.service';
 import {QuarterlyScaleService} from './services/timeline-scales/quarterly-scale.service';
 import {WeeklyScaleService} from './services/timeline-scales/weekly-scale.service';
 import {GanttRoutingModule} from './gantt-routing.module';
-import {GanttBarsModule} from './components/gantt-bars/gantt-bars.module';
+import {GanttService} from './services';
+import {gantt} from 'dhtmlx-gantt';
+import {
+  CustomGanttAdapter,
+  GanttAdapter,
+  GanttLib,
+  GanttScaleService,
+} from './types';
+
+import {
+  GanttBarsComponent,
+  GanttColumnComponent,
+  GanttHeaderComponent,
+  GanttTooltipComponent,
+} from './components';
+import {NbInputModule} from '@nebular/theme/components/input/input.module';
 
 @NgModule({
-  declarations: [BbGanttComponent],
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    ThemeModule,
-    GanttRoutingModule,
-    GanttBarsModule,
+  declarations: [
+    GanttBarsComponent,
+    GanttColumnComponent,
+    GanttHeaderComponent,
+    GanttTooltipComponent,
+  ],
+  imports: [CommonModule, ReactiveFormsModule, ThemeModule, GanttRoutingModule],
+  exports: [
+    GanttBarsComponent,
+    GanttColumnComponent,
+    GanttHeaderComponent,
+    GanttTooltipComponent,
   ],
-  exports: [BbGanttComponent],
   providers: [
+    GanttService,
+    {
+      provide: GANTT,
+      useValue: gantt,
+    },
     {
       provide: GANTT_SCALES,
       multi: true,
@@ -36,6 +59,10 @@ import {GanttBarsModule} from './components/gantt-bars/gantt-bars.module';
       multi: true,
       useClass: QuarterlyScaleService,
     },
+    {
+      provide: GanttAdapter,
+      useClass: CustomGanttAdapter,
+    },
   ],
 })
 export class GanttModule {}
diff --git a/projects/arc-lib/src/lib/components/gantt/model/item.model.ts b/projects/arc-lib/src/lib/components/gantt/model/item.model.ts
new file mode 100644
index 00000000..8b19fc46
--- /dev/null
+++ b/projects/arc-lib/src/lib/components/gantt/model/item.model.ts
@@ -0,0 +1,34 @@
+export interface Deal {
+  name: string;
+  allocatedHours: number;
+  status: string;
+}
+
+export interface Item {
+  allocatedHours?: number;
+  billingRate?: number;
+  startDate?: Date;
+  endDate?: Date;
+  allotedDeals?: Deal[];
+  type?: string | number;
+  allocation?: number;
+  payload?: {[key: string]: any};
+  classes?: string[];
+  subAllocations?: AllocationBar[];
+}
+
+export interface empData {
+  name: string;
+  subtitle: string;
+  hasChildren: boolean;
+  isParent: boolean;
+  $open: boolean;
+  overallocated: boolean;
+}
+
+export interface AllocationBar {
+  percent: number;
+  allocation: number;
+  allocatedHours: number;
+  classes?: string[];
+}
diff --git a/projects/arc-lib/src/lib/components/selector/select/select.component.html b/projects/arc-lib/src/lib/components/selector/select/select.component.html
index 56648a9a..e00453cf 100644
--- a/projects/arc-lib/src/lib/components/selector/select/select.component.html
+++ b/projects/arc-lib/src/lib/components/selector/select/select.component.html
@@ -38,7 +38,7 @@
       *ngFor="let item of visibleTags"
       [text]="asString(item && item[nameField])"
       [ngStyle]="{
-        maxWidth: 'calc(100% - ' + suffixCount * suffixWidth + 'px)',
+        maxWidth: 'calc(100% - ' + suffixCount * suffixWidth + 'px)'
       }"
       [removable]="!disabled"
       (remove)="toggle(item); toggleDropdown()"
@@ -61,7 +61,7 @@
       (click)="$event.stopPropagation(); !allowInput && toggleDropdown()"
       [ngStyle]="{
         minWidth: inputMinWidth + 'px',
-        marginRight: suffixCount * suffixWidth + 'px',
+        marginRight: suffixCount * suffixWidth + 'px'
       }"
     />
   </nb-tag-list>
diff --git a/projects/arc/src/app/app-routing.module.ts b/projects/arc/src/app/app-routing.module.ts
index 583bf642..80ac72b2 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 24ba47bb..3e380bb3 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,
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 00000000..8f5e367d
--- /dev/null
+++ b/projects/arc/src/app/components/gantt-demo/gantt-demo.component.html
@@ -0,0 +1,39 @@
+<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 class="bar-wrapper">
+      <nb-card-body>
+        <arc-gantt-bars
+          [item]="item"
+          [allocationTypes]="allocationTypes"
+          [allocationBase]="allocationBase"
+          showTooltip="true"
+        ></arc-gantt-bars>
+      </nb-card-body>
+    </nb-card>
+  </nb-layout-column>
+</nb-layout>
+
+<arc-gantt-tooltip [itemData]="itemData" [allocationMap]="allocationMap">
+</arc-gantt-tooltip>
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 00000000..70226f63
--- /dev/null
+++ b/projects/arc/src/app/components/gantt-demo/gantt-demo.component.scss
@@ -0,0 +1,3 @@
+.bar-wrapper {
+  height: calc(100% - 1rem);
+}
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 00000000..b4a78f70
--- /dev/null
+++ b/projects/arc/src/app/components/gantt-demo/gantt-demo.component.spec.ts
@@ -0,0 +1,22 @@
+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 00000000..6ffdfbdd
--- /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;
+}