diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.tsx b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
index 002b7b7fb9..03a2e936df 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.tsx
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
@@ -59,7 +59,7 @@ const RequestTab: React.FunctionComponent<{
   React.useEffect(() => {
     const readResources = async  () => {
       if (resource.request.postData) {
-        const requestContentTypeHeader = resource.request.headers.find(q => q.name === 'Content-Type');
+        const requestContentTypeHeader = resource.request.headers.find(q => q.name.toLowerCase() === 'content-type');
         const requestContentType = requestContentTypeHeader ? requestContentTypeHeader.value : '';
         if (resource.request.postData._sha1) {
           const response = await fetch(`sha1/${resource.request.postData._sha1}`);
diff --git a/tests/assets/network-tab/network.html b/tests/assets/network-tab/network.html
index d46ff846dc..32f7d2cf6c 100644
--- a/tests/assets/network-tab/network.html
+++ b/tests/assets/network-tab/network.html
@@ -13,6 +13,25 @@
     </style>
     <script src='script.js'></script>
     <script>fetch('/api/endpoint')</script>
+    <script>
+      const body = JSON.stringify({
+        data: {
+          key: 'value',
+          array: ['value-1', 'value-2'],
+        },
+      });
+
+      fetch('/post-data-1', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body,
+      });
+      fetch('/post-data-2', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body,
+      });
+    </script>
   </head>
   <body>
     <h1>Network Tab Test</h1>
diff --git a/tests/playwright-test/ui-mode-test-network-tab.spec.ts b/tests/playwright-test/ui-mode-test-network-tab.spec.ts
index 45d77aa528..8fc7a4828e 100644
--- a/tests/playwright-test/ui-mode-test-network-tab.spec.ts
+++ b/tests/playwright-test/ui-mode-test-network-tab.spec.ts
@@ -93,3 +93,45 @@ test('should filter network requests by url', async ({ runUITest, server }) => {
   await expect(networkItems).toHaveCount(1);
   await expect(networkItems.getByText('font.woff2')).toBeVisible();
 });
+
+test('should format JSON request body', async ({ runUITest, server }) => {
+  const { page } = await runUITest({
+    'network-tab.test.ts': `
+      import { test, expect } from '@playwright/test';
+      test('network tab test', async ({ page }) => {
+        await page.goto('${server.PREFIX}/network-tab/network.html');
+      });
+    `,
+  });
+
+  await page.getByText('network tab test').dblclick();
+  await page.getByText('Network', { exact: true }).click();
+
+  await page.getByText('post-data-1').click();
+
+  await expect(page.locator('.CodeMirror-code .CodeMirror-line').allInnerTexts()).resolves.toEqual([
+    '{',
+    '  "data": {',
+    '    "key": "value",',
+    '    "array": [',
+    '      "value-1",',
+    '      "value-2"',
+    '    ]',
+    '  }',
+    '}',
+  ]);
+
+  await page.getByText('post-data-2').click();
+
+  await expect(page.locator('.CodeMirror-code .CodeMirror-line').allInnerTexts()).resolves.toEqual([
+    '{',
+    '  "data": {',
+    '    "key": "value",',
+    '    "array": [',
+    '      "value-1",',
+    '      "value-2"',
+    '    ]',
+    '  }',
+    '}',
+  ]);
+});
