diff --git a/frontend/__snapshots__/components-networkrequesttiming--basic.png b/frontend/__snapshots__/components-networkrequesttiming--basic.png
index ff34c2d27d479..8247b433f71c8 100644
Binary files a/frontend/__snapshots__/components-networkrequesttiming--basic.png and b/frontend/__snapshots__/components-networkrequesttiming--basic.png differ
diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx
index 4dbd3cd4b3f2c..96c4a9e01a143 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx
+++ b/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx
@@ -317,7 +317,7 @@ export function ItemPerformanceEvent({
                     ) : (
                         <>
                             <FlaggedFeature flag={FEATURE_FLAGS.NETWORK_PAYLOAD_CAPTURE} match={true}>
-                                <StatusRow status={item.response_status} />
+                                <StatusRow item={item} />
                             </FlaggedFeature>
                             <p>
                                 Request started at{' '}
@@ -466,29 +466,44 @@ function HeadersDisplay({
     )
 }
 
-function StatusRow({ status }: { status: number | undefined }): JSX.Element | null {
-    if (status === undefined) {
-        return null
-    }
+function StatusRow({ item }: { item: PerformanceEvent }): JSX.Element | null {
+    let statusRow = null
+    let methodRow = null
+
+    if (item.response_status) {
+        const statusDescription = `${item.response_status} ${friendlyHttpStatus[item.response_status] || ''}`
 
-    const statusDescription = `${status} ${friendlyHttpStatus[status] || ''}`
+        let statusType: LemonTagType = 'success'
+        if (item.response_status >= 400 || item.response_status < 100) {
+            statusType = 'warning'
+        } else if (item.response_status >= 500) {
+            statusType = 'danger'
+        }
 
-    let statusType: LemonTagType = 'success'
-    if (status >= 400 || status < 100) {
-        statusType = 'warning'
-    } else if (status >= 500) {
-        statusType = 'danger'
+        statusRow = (
+            <div className="flex gap-4 items-center justify-between overflow-hidden">
+                <div className="font-semibold">Status code</div>
+                <LemonTag type={statusType}>{statusDescription}</LemonTag>
+            </div>
+        )
     }
 
-    return (
+    if (item.method) {
+        methodRow = (
+            <div className="flex gap-4 items-center justify-between overflow-hidden">
+                <div className="font-semibold">Request method</div>
+                <div className={'uppercase font-semibold'}>{item.method}</div>
+            </div>
+        )
+    }
+
+    return methodRow || statusRow ? (
         <p>
             <div className="text-xs space-y-1 max-w-full">
-                <div className="flex gap-4 items-start justify-between overflow-hidden">
-                    <span className="font-semibold">Status code</span>
-                    <LemonTag type={statusType}>{statusDescription}</LemonTag>
-                </div>
+                {methodRow}
+                {statusRow}
             </div>
             <LemonDivider dashed />
         </p>
-    )
+    ) : null
 }
diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming.tsx
index df65c02326529..f77aeadf524dd 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming.tsx
+++ b/frontend/src/scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming.tsx
@@ -8,35 +8,6 @@ import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { SimpleKeyValueList } from 'scenes/session-recordings/player/inspector/components/SimpleKeyValueList'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 
-function colorForEntry(entryType: string | undefined): string {
-    switch (entryType) {
-        case 'domComplete':
-            return getSeriesColor(1)
-        case 'domInteractive':
-            return getSeriesColor(2)
-        case 'pageLoaded':
-            return getSeriesColor(3)
-        case 'first-contentful-paint':
-            return getSeriesColor(4)
-        case 'css':
-            return getSeriesColor(6)
-        case 'xmlhttprequest':
-            return getSeriesColor(7)
-        case 'fetch':
-            return getSeriesColor(8)
-        case 'other':
-            return getSeriesColor(9)
-        case 'script':
-            return getSeriesColor(10)
-        case 'link':
-            return getSeriesColor(11)
-        case 'first-paint':
-            return getSeriesColor(11)
-        default:
-            return getSeriesColor(13)
-    }
-}
-
 export interface EventPerformanceMeasure {
     start: number
     end: number
@@ -50,7 +21,8 @@ const perfSections = [
     'dns lookup',
     'connection time',
     'tls time',
-    'waiting for first byte (TTFB)',
+    'request queuing time',
+    'waiting for first byte',
     'receiving response',
     'document processing',
 ] as const
@@ -62,7 +34,9 @@ const perfDescriptions: Record<(typeof perfSections)[number], string> = {
     'dns lookup': 'The time taken to complete any DNS lookup for the resource.',
     'connection time': 'The time taken to establish a connection to the server to retrieve the resource.',
     'tls time': 'The time taken for the SSL/TLS handshake.',
-    'waiting for first byte (TTFB)': 'The time taken waiting for the server to start returning a response.',
+    'request queuing time': "The time taken waiting in the browser's task queue once ready to make a request.",
+    'waiting for first byte':
+        'The time taken waiting for the server to start returning a response. Also known as TTFB or time to first byte.',
     'receiving response': 'The time taken to receive the response from the server.',
     'document processing':
         'The time taken to process the document after the response from the server has been received.',
@@ -71,29 +45,36 @@ const perfDescriptions: Record<(typeof perfSections)[number], string> = {
 function colorForSection(section: (typeof perfSections)[number]): string {
     switch (section) {
         case 'redirect':
-            return getSeriesColor(1)
-        case 'app cache':
             return getSeriesColor(2)
-        case 'dns lookup':
+        case 'app cache':
             return getSeriesColor(3)
-        case 'connection time':
+        case 'dns lookup':
             return getSeriesColor(4)
+        case 'connection time':
+            return getSeriesColor(5)
         case 'tls time':
             return getSeriesColor(6)
-        case 'waiting for first byte (TTFB)':
+        case 'request queuing time':
             return getSeriesColor(7)
-        case 'receiving response':
+        case 'waiting for first byte':
             return getSeriesColor(8)
-        case 'document processing':
+        case 'receiving response':
             return getSeriesColor(9)
-        default:
+        case 'document processing':
             return getSeriesColor(10)
+        default:
+            return getSeriesColor(11)
     }
 }
 
 /**
  * There are defined sections to performance measurement. We may have data for some or all of them
  *
+ *
+ * 0) Queueing
+ * - from start_time
+ * - until the first item with activity
+ *
  * 1) Redirect
  *  - from startTime which would also be redirectStart
  *  - until redirect_end
@@ -127,9 +108,6 @@ function colorForSection(section: (typeof perfSections)[number]): string {
  *   - until load_event_end
  *
  * see https://nicj.net/resourcetiming-in-practice/
- *
- * @param perfEntry
- * @param maxTime
  */
 function calculatePerformanceParts(perfEntry: PerformanceEvent): Record<string, EventPerformanceMeasure> {
     const performanceParts: Record<string, EventPerformanceMeasure> = {}
@@ -138,7 +116,7 @@ function calculatePerformanceParts(perfEntry: PerformanceEvent): Record<string,
         performanceParts['redirect'] = {
             start: perfEntry.redirect_start,
             end: perfEntry.redirect_end,
-            color: colorForEntry(perfEntry.initiator_type),
+            color: colorForSection('redirect'),
         }
     }
 
@@ -146,7 +124,7 @@ function calculatePerformanceParts(perfEntry: PerformanceEvent): Record<string,
         performanceParts['app cache'] = {
             start: perfEntry.fetch_start,
             end: perfEntry.domain_lookup_start,
-            color: colorForEntry(perfEntry.initiator_type),
+            color: colorForSection('app cache'),
         }
     }
 
@@ -154,7 +132,7 @@ function calculatePerformanceParts(perfEntry: PerformanceEvent): Record<string,
         performanceParts['dns lookup'] = {
             start: perfEntry.domain_lookup_start,
             end: perfEntry.domain_lookup_end,
-            color: colorForEntry(perfEntry.initiator_type),
+            color: colorForSection('dns lookup'),
         }
     }
 
@@ -162,24 +140,32 @@ function calculatePerformanceParts(perfEntry: PerformanceEvent): Record<string,
         performanceParts['connection time'] = {
             start: perfEntry.connect_start,
             end: perfEntry.connect_end,
-            color: colorForEntry(perfEntry.initiator_type),
+            color: colorForSection('connection time'),
         }
 
         if (perfEntry.secure_connection_start) {
             performanceParts['tls time'] = {
                 start: perfEntry.secure_connection_start,
                 end: perfEntry.connect_end,
-                color: colorForEntry(perfEntry.initiator_type),
+                color: colorForSection('tls time'),
                 reducedHeight: true,
             }
         }
     }
 
+    if (perfEntry.connect_end && perfEntry.request_start && perfEntry.connect_end !== perfEntry.request_start) {
+        performanceParts['request queuing time'] = {
+            start: perfEntry.connect_end,
+            end: perfEntry.request_start,
+            color: colorForSection('request queuing time'),
+        }
+    }
+
     if (perfEntry.response_start && perfEntry.request_start) {
-        performanceParts['waiting for first byte (TTFB)'] = {
+        performanceParts['waiting for first byte'] = {
             start: perfEntry.request_start,
             end: perfEntry.response_start,
-            color: colorForEntry(perfEntry.initiator_type),
+            color: colorForSection('waiting for first byte'),
         }
     }
 
@@ -187,7 +173,7 @@ function calculatePerformanceParts(perfEntry: PerformanceEvent): Record<string,
         performanceParts['receiving response'] = {
             start: perfEntry.response_start,
             end: perfEntry.response_end,
-            color: colorForEntry(perfEntry.initiator_type),
+            color: colorForSection('receiving response'),
         }
     }
 
@@ -195,7 +181,7 @@ function calculatePerformanceParts(perfEntry: PerformanceEvent): Record<string,
         performanceParts['document processing'] = {
             start: perfEntry.response_end,
             end: perfEntry.load_event_end,
-            color: colorForEntry(perfEntry.initiator_type),
+            color: colorForSection('document processing'),
         }
     }
 
@@ -217,7 +203,7 @@ function percentagesWithinEventRange({
     const partStartRelativeToTimeline = partStart - rangeStart
     const partDuration = partEnd - partStart
 
-    const partPercentage = (partDuration / totalDuration) * 100
+    const partPercentage = Math.max(0.1, (partDuration / totalDuration) * 100) //less than 0.1% is not visible
     const partStartPercentage = (partStartRelativeToTimeline / totalDuration) * 100
     return { startPercentage: `${partStartPercentage}%`, widthPercentage: `${partPercentage}%` }
 }
diff --git a/frontend/src/scenes/session-recordings/player/inspector/performance-event-utils.ts b/frontend/src/scenes/session-recordings/player/inspector/performance-event-utils.ts
index fe77868977a11..51d9770d0e41f 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/performance-event-utils.ts
+++ b/frontend/src/scenes/session-recordings/player/inspector/performance-event-utils.ts
@@ -122,6 +122,7 @@ export function matchNetworkEvents(snapshotsByWindowId: Record<string, eventWith
                         matchedStartTime[0].request_body = capturedRequest.requestBody
                         matchedStartTime[0].response_headers = capturedRequest.responseHeaders
                         matchedStartTime[0].response_body = capturedRequest.responseBody
+                        matchedStartTime[0].method = capturedRequest.method
                     } else if (matchedStartTime && matchedStartTime.length > 1) {
                         // find in eventsMapping[capturedRequest.url][capturedRequest.startTime] by matching capturedRequest.endTime and element.response_end
                         const matchedEndTime = matchedStartTime.find(
@@ -135,6 +136,7 @@ export function matchNetworkEvents(snapshotsByWindowId: Record<string, eventWith
                             matchedEndTime.request_body = capturedRequest.requestBody
                             matchedEndTime.response_headers = capturedRequest.responseHeaders
                             matchedEndTime.response_body = capturedRequest.responseBody
+                            matchedEndTime.method = capturedRequest.method
                         } else {
                             const capturedURL = new URL(capturedRequest.url)
                             const capturedPath = capturedURL.pathname
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 7897237258ba5..8c544b57481a4 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -1142,6 +1142,7 @@ export interface PerformanceEvent {
     response_headers?: Record<string, string>
     request_body?: Body
     response_body?: Body
+    method?: string
 }
 
 export interface CurrentBillCycleType {