diff --git a/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.scss b/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.scss
index ae9b71b15..da4f6eb03 100644
--- a/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.scss
+++ b/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.scss
@@ -3,7 +3,6 @@
 .call-headers {
   display: flex;
   flex-direction: column;
-  height: 100%;
   padding-top: 24px;
 
   .title {
diff --git a/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.ts b/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.ts
index 8ca600079..da1a24593 100644
--- a/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.ts
+++ b/projects/observability/src/shared/components/span-detail/call/headers/span-detail-call-headers.component.ts
@@ -10,10 +10,10 @@ import { EMPTY, Observable, of } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="call-headers">
-      <ht-label label="Headers" class="title"></ht-label>
+      <ht-label [label]="this.title" class="title"></ht-label>
       <div class="container" data-sensitive-pii>
-        <ng-container *htLoadAsync="this.headerRecords$ as headerRecords">
-          <ht-list-view [records]="headerRecords"></ht-list-view>
+        <ng-container *htLoadAsync="this.records$ as records">
+          <ht-list-view [records]="records"></ht-list-view>
         </ng-container>
       </div>
     </div>
@@ -21,24 +21,29 @@ import { EMPTY, Observable, of } from 'rxjs';
 })
 export class SpanDetailCallHeadersComponent implements OnChanges {
   @Input()
-  public headers?: Dictionary<unknown>;
+  public data?: Dictionary<unknown>;
 
-  public headerRecords$?: Observable<ListViewRecord[]>;
+  @Input()
+  public title?: string;
+
+  public records$?: Observable<ListViewRecord[]>;
+
+  public label?: string;
 
   public ngOnChanges(): void {
-    this.buildHeaderRecords();
+    this.buildRecords();
   }
 
-  private buildHeaderRecords(): void {
-    if (isNil(this.headers)) {
-      this.headerRecords$ = EMPTY;
+  private buildRecords(): void {
+    if (isNil(this.data)) {
+      this.records$ = EMPTY;
     } else {
-      this.headerRecords$ = of(
-        Object.keys(this.headers)
+      this.records$ = of(
+        Object.keys(this.data)
           .sort((key1, key2) => key1.localeCompare(key2))
           .map(key => ({
             key: key,
-            value: this.headers![key] as string | number
+            value: this.data![key] as string | number
           }))
       );
     }
diff --git a/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.test.ts b/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.test.ts
index b649bf085..c22a97a05 100644
--- a/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.test.ts
+++ b/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.test.ts
@@ -18,7 +18,7 @@ describe('Span request detail component', () => {
   });
 
   test('should display headers and body title', () => {
-    spectator = createHost(`<ht-span-request-detail></ht-span-request-detail>`);
+    spectator = createHost(`<ht-span-request-detail title="Headers"></ht-span-request-detail>`);
 
     const headerTitleElement = spectator.query<HTMLElement>('.call-headers > .title');
     expect(headerTitleElement).not.toBeNull();
diff --git a/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.ts b/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.ts
index 3f8953683..2aff3b450 100644
--- a/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.ts
+++ b/projects/observability/src/shared/components/span-detail/request/span-request-detail.component.ts
@@ -9,7 +9,8 @@ import { SpanDetailLayoutStyle } from '../span-detail-layout-style';
   template: `
     <div class="span-request-detail" [ngClass]="this.layout">
       <div class="section">
-        <ht-span-detail-call-headers [headers]="this.requestHeaders"></ht-span-detail-call-headers>
+        <ht-span-detail-call-headers [data]="this.requestHeaders" title="Headers"></ht-span-detail-call-headers>
+        <ht-span-detail-call-headers [data]="this.requestCookies" title="Cookies"></ht-span-detail-call-headers>
       </div>
       <div class="section">
         <ht-span-detail-call-body [body]="this.requestBody"></ht-span-detail-call-body>
@@ -21,6 +22,9 @@ export class SpanRequestDetailComponent {
   @Input()
   public requestHeaders?: Dictionary<unknown>;
 
+  @Input()
+  public requestCookies?: Dictionary<unknown>;
+
   @Input()
   public requestBody?: string;
 
diff --git a/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.test.ts b/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.test.ts
index a4ec0a151..0fd14c572 100644
--- a/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.test.ts
+++ b/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.test.ts
@@ -18,7 +18,7 @@ describe('Span response detail component', () => {
   });
 
   test('should display headers and body title', () => {
-    spectator = createHost(`<ht-span-response-detail></ht-span-response-detail>`);
+    spectator = createHost(`<ht-span-response-detail title="Headers"></ht-span-response-detail>`);
 
     const headerTitleElement = spectator.query<HTMLElement>('.call-headers > .title');
     expect(headerTitleElement).not.toBeNull();
diff --git a/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.ts b/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.ts
index 1243f05d1..edab80fd9 100644
--- a/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.ts
+++ b/projects/observability/src/shared/components/span-detail/response/span-response-detail.component.ts
@@ -9,7 +9,8 @@ import { SpanDetailLayoutStyle } from '../span-detail-layout-style';
   template: `
     <div class="span-response-detail" [ngClass]="this.layout">
       <div class="section">
-        <ht-span-detail-call-headers [headers]="this.responseHeaders"></ht-span-detail-call-headers>
+        <ht-span-detail-call-headers [data]="this.responseHeaders" title="Headers"></ht-span-detail-call-headers>
+        <ht-span-detail-call-headers [data]="this.responseCookies" title="Cookies"></ht-span-detail-call-headers>
       </div>
       <div class="section">
         <ht-span-detail-call-body [body]="this.responseBody"></ht-span-detail-call-body>
@@ -21,6 +22,9 @@ export class SpanResponseDetailComponent {
   @Input()
   public responseHeaders?: Dictionary<unknown>;
 
+  @Input()
+  public responseCookies?: Dictionary<unknown>;
+
   @Input()
   public responseBody?: string;
 
diff --git a/projects/observability/src/shared/components/span-detail/span-data.ts b/projects/observability/src/shared/components/span-detail/span-data.ts
index 1cfbe7686..cd1464222 100644
--- a/projects/observability/src/shared/components/span-detail/span-data.ts
+++ b/projects/observability/src/shared/components/span-detail/span-data.ts
@@ -7,8 +7,10 @@ export interface SpanData {
   apiName?: string;
   protocolName?: string;
   requestHeaders: Dictionary<unknown>;
+  requestCookies: Dictionary<unknown>;
   requestBody: string;
   responseHeaders: Dictionary<unknown>;
+  responseCookies: Dictionary<unknown>;
   responseBody: string;
   tags: Dictionary<unknown>;
   requestUrl: string;
diff --git a/projects/observability/src/shared/components/span-detail/span-detail.component.test.ts b/projects/observability/src/shared/components/span-detail/span-detail.component.test.ts
index 22b8fb71c..bc37289f8 100644
--- a/projects/observability/src/shared/components/span-detail/span-detail.component.test.ts
+++ b/projects/observability/src/shared/components/span-detail/span-detail.component.test.ts
@@ -18,8 +18,10 @@ describe('Span detail component', () => {
       apiName: 'My API Name',
       protocolName: 'My Protocol Name',
       requestHeaders: { header1: 'value1', header2: 'value2' },
+      requestCookies: { cookie1: 'value1', cookie2: 'value2' },
       requestBody: '[{"data": 5000}]',
       responseHeaders: { header1: 'value1', header2: 'value2' },
+      responseCookies: { cookie1: 'value1', cookie2: 'value2' },
       responseBody: '[{"data": 5000}]',
       tags: { tag1: 'value1', tag2: 'value2' },
       requestUrl: 'test-url',
@@ -43,8 +45,10 @@ describe('Span detail component', () => {
       apiName: 'My API Name',
       protocolName: 'My Protocol Name',
       requestHeaders: {},
+      requestCookies: {},
       requestBody: '',
       responseHeaders: { header1: 'value1', header2: 'value2' },
+      responseCookies: { cookie1: 'value1', cookie2: 'value2' },
       responseBody: '[{"data": 5000}]',
       tags: { tag1: 'value1', tag2: 'value2' },
       requestUrl: 'test-url',
@@ -69,8 +73,10 @@ describe('Span detail component', () => {
       apiName: 'My API Name',
       protocolName: 'My Protocol Name',
       requestHeaders: {},
+      requestCookies: {},
       requestBody: '[{"data": 5000}]',
       responseHeaders: { header1: 'value1', header2: 'value2' },
+      responseCookies: { cookie1: 'value1', cookie2: 'value2' },
       responseBody: '[{"data": 5000}]',
       tags: { tag1: 'value1', tag2: 'value2' },
       requestUrl: 'test-url',
@@ -94,8 +100,10 @@ describe('Span detail component', () => {
       apiName: 'My API Name',
       protocolName: 'My Protocol Name',
       requestHeaders: { header1: 'value1', header2: 'value2' },
+      requestCookies: { cookie1: 'value1', cookie2: 'value2' },
       requestBody: '[{"data": 5000}]',
       responseHeaders: {},
+      responseCookies: {},
       responseBody: '',
       tags: { tag1: 'value1', tag2: 'value2' },
       requestUrl: 'test-url',
diff --git a/projects/observability/src/shared/components/span-detail/span-detail.component.ts b/projects/observability/src/shared/components/span-detail/span-detail.component.ts
index 44c67aaf1..9ec042f26 100644
--- a/projects/observability/src/shared/components/span-detail/span-detail.component.ts
+++ b/projects/observability/src/shared/components/span-detail/span-detail.component.ts
@@ -30,6 +30,7 @@ import { SpanDetailTab } from './span-detail-tab';
             class="request"
             [layout]="this.layout"
             [requestHeaders]="this.spanData.requestHeaders"
+            [requestCookies]="this.spanData.requestCookies"
             [requestBody]="this.spanData.requestBody"
           ></ht-span-request-detail>
         </ht-tab>
@@ -38,6 +39,7 @@ import { SpanDetailTab } from './span-detail-tab';
             class="response"
             [layout]="this.layout"
             [responseHeaders]="this.spanData.responseHeaders"
+            [responseCookies]="this.spanData.responseCookies"
             [responseBody]="this.spanData.responseBody"
           ></ht-span-response-detail>
         </ht-tab>
@@ -78,8 +80,14 @@ export class SpanDetailComponent implements OnChanges {
 
   public ngOnChanges(changes: TypedSimpleChanges<this>): void {
     if (changes.spanData) {
-      this.showRequestTab = !isEmpty(this.spanData?.requestHeaders) || !isEmpty(this.spanData?.requestBody);
-      this.showResponseTab = !isEmpty(this.spanData?.responseHeaders) || !isEmpty(this.spanData?.responseBody);
+      this.showRequestTab =
+        !isEmpty(this.spanData?.requestHeaders) ||
+        !isEmpty(this.spanData?.requestCookies) ||
+        !isEmpty(this.spanData?.requestBody);
+      this.showResponseTab =
+        !isEmpty(this.spanData?.responseHeaders) ||
+        !isEmpty(this.spanData?.responseCookies) ||
+        !isEmpty(this.spanData?.responseBody);
       this.showExitCallsTab = !isEmpty(this.spanData?.exitCallsBreakup);
       this.showLogEventsTab = !isEmpty(this.spanData?.logEvents);
       this.totalLogEvents = (this.spanData?.logEvents ?? []).length;
diff --git a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.ts b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.ts
index 0be93223d..be539ae97 100644
--- a/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.ts
+++ b/projects/observability/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.ts
@@ -18,8 +18,10 @@ export interface WaterfallData {
   apiName?: string;
   spanType: SpanType;
   requestHeaders?: Dictionary<unknown>;
+  requestCookies?: Dictionary<unknown>;
   requestBody?: string;
   responseHeaders?: Dictionary<unknown>;
+  responseCookies?: Dictionary<unknown>;
   responseBody?: string;
   tags: Dictionary<unknown>;
   errorCount: number;