diff --git a/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx b/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx
index 15c3b4e214c..4db02f05d25 100644
--- a/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx
+++ b/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx
@@ -3,14 +3,11 @@ import BarChart from 'components/ui/Charts/BarChart'
 import Table from 'components/to-be-cleaned/Table'
 import {
   jsonSyntaxHighlight,
-  ResponseCodeFormatter,
   TextFormatter,
 } from 'components/interfaces/Settings/Logs/LogsFormatters'
 import { Button, Collapsible, IconChevronRight } from 'ui'
 import { queryParamsToObject } from '../Reports.utils'
-import Loading from 'components/ui/Loading'
-import { LoadingLine } from 'ui/src/components/Command/LoadingLine'
-import LoadingOpacity from 'components/ui/LoadingOpacity'
+import { Fragment } from 'react'
 
 export const renderTotalRequests = (
   props: ReportWidgetProps<{
@@ -64,7 +61,7 @@ export const renderTopApiRoutes = (
       body={
         <>
           {props.data.map((datum) => (
-            <>
+            <Fragment key={datum.path + (datum.search || '')}>
               <Table.tr className="p-0">
                 <Table.td className={[cellClasses].join(' ')}>
                   <RouteTdContent {...datum} />
@@ -78,7 +75,7 @@ export const renderTopApiRoutes = (
                   </Table.td>
                 )}
               </Table.tr>
-            </>
+            </Fragment>
           ))}
         </>
       }
@@ -117,7 +114,7 @@ export const renderResponseSpeed = (
 ) => {
   const transformedData = props.data.map((datum) => ({
     timestamp: datum.timestamp,
-    avg: datum.avg
+    avg: datum.avg,
   }))
   const lastAvg = props.data[props.data.length - 1]?.avg
   return (
@@ -145,7 +142,7 @@ const RouteTdContent = (datum: RouteTdContentProps) => (
   <Collapsible>
     <Collapsible.Trigger asChild>
       <div className="flex gap-2">
-        <Button type="text" className=" !py-0 !p-1" title="Show more route details">
+        <Button as="span" type="text" className=" !py-0 !p-1" title="Show more route details">
           <IconChevronRight
             size={14}
             className="transition data-open-parent:rotate-90 data-closed-parent:rotate-0"
diff --git a/studio/tests/pages/projects/reports/api-report.test.js b/studio/tests/pages/projects/reports/api-report.test.js
index 76fb91aa91c..be214ef6b73 100644
--- a/studio/tests/pages/projects/reports/api-report.test.js
+++ b/studio/tests/pages/projects/reports/api-report.test.js
@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event'
 beforeEach(() => {
   // reset mocks between tests
   get.mockReset()
-  get.mockImplementation(async (_url) => [{ data: [] }])
+  get.mockImplementation(async (_url) => [{ result: [] }])
 })
 
 test(`static elements`, async () => {
@@ -27,15 +27,85 @@ test('refresh button', async () => {
   await waitFor(() => expect(get).toBeCalled())
 })
 
-test('expandable tables', async () => {
-  get.mockImplementation(async (_url) => [
-    { data: [{ timestamp: new Date().toISOString(), count: 123 }] },
-  ])
-  const expandables = await screen.findByText('View API requests')
-  const first = expandables[0]
-  get.mockImplementationOnce(async (_url) => [{ data: [{ path: '/my-path', count: 22 }] }])
-  userEvent.click(first)
-  await screen.findByText('Hide API Requests')
-  await screen.findByText(/\/my\-path/)
-  await screen.findByText(/22/)
+test('append - api request routes', async () => {
+  get.mockImplementation(async (url) => {
+    if (decodeURIComponent(url).includes("request.path")) {
+      return { result: [{ path: 'mypath', method: 'GET', status_code: 200, search: 'some-query', count: 22 }] }
+    }
+    return { result: [{ timestamp: new Date().toISOString(), count: 123 }] }
+  })
+  render(<ApiReport />)
+  await waitFor(() => expect(get).toBeCalled())
+  await screen.findAllByText(/mypath/)
+  await screen.findAllByText(/GET/)
+  await screen.findAllByText(/200/)
+  await screen.findAllByText(/some\-query/)
+  await screen.findAllByText(/22/)
 })
+
+
+test('append - error routes', async () => {
+  get.mockImplementation(async (url) => {
+    const uri = decodeURIComponent(url)
+    if (uri.includes("400")) {
+      return { result: [{ path: 'mypath', method: 'GET', status_code: 200, search: 'some-query', count: 22 }] }
+    }
+    return { result: [{ timestamp: new Date().toISOString(), count: 123 }] }
+  })
+  render(<ApiReport />)
+  await waitFor(() => expect(get).toBeCalled())
+  await screen.findAllByText(/mypath/)
+  await screen.findAllByText(/GET/)
+  await screen.findAllByText(/200/)
+  await screen.findAllByText(/some\-query/)
+  await screen.findAllByText(/22/)
+})
+
+
+test('append - error routes', async () => {
+  get.mockImplementation(async (url) => {
+    const uri = decodeURIComponent(url)
+    if (uri.includes("avg") && uri.includes("request.path")) {
+      return { result: [{ path: 'mypath', method: 'GET', status_code: 200, avg: 534, search: 'some-query', count: 22 }] }
+    }
+    return { result: [{ timestamp: new Date().toISOString(), count: 123 }] }
+  })
+  render(<ApiReport />)
+  await waitFor(() => expect(get).toBeCalled())
+  await screen.findAllByText(/mypath/)
+  await screen.findAllByText(/GET/)
+  await screen.findAllByText(/200/)
+  await screen.findAllByText(/some\-query/)
+  await screen.findAllByText(/22/)
+  await screen.findAllByText(/534\.00ms/)
+})
+
+
+
+// test('expandable error routes', async () => {
+//   get.mockImplementation(async (url) => {
+//     if (url.includes('path')) {
+//       return [{ data: [{ path: '/my-path', method: 'GET', search: '?=123', count: 22 }] }]
+//     }
+//     return [{ data: [{ timestamp: new Date().toISOString(), count: 123 }] }]
+//   })
+
+//   render(<ApiReport />)
+//   await screen.findByText(/\/my\-path/)
+//   await screen.findByText(/\?\=123/)
+//   await screen.findByText(/22/)
+// })
+
+// test('expandable high latency routes', async () => {
+//   get.mockImplementation(async (url) => {
+//     if (url.includes('path')) {
+//       return [{ data: [{ path: '/my-path', method: 'GET', search: '?=123', avg_ms: 55, count: 22 }] }]
+//     }
+//     return [{ data: [{ timestamp: new Date().toISOString(), avg_ms: 123  }] }]
+//   })
+//   render(<ApiReport />)
+//   await screen.findByText(/\/my\-path/)
+//   await screen.findByText(/\?\=123/)
+//   await screen.findByText(/22/)
+//   await screen.findByText(/55/)
+// })