diff --git a/packages/core/src/components/EndTimeContext.tsx b/packages/core/src/components/EndTimeContext.tsx
index 3f1cbd92..b4c7514a 100644
--- a/packages/core/src/components/EndTimeContext.tsx
+++ b/packages/core/src/components/EndTimeContext.tsx
@@ -1,3 +1,68 @@
-import { createContext } from "react";
+import {
+  ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useTransition,
+} from "react";
 
-export const EndTimeContext = createContext<number>(Infinity);
+const EndTimeContext = createContext<{
+  endTime: number;
+  visibleEndTime: number;
+  changeEndTime: (value: number) => void;
+  isPending: boolean;
+}>({
+  endTime: Infinity,
+  visibleEndTime: Infinity,
+  changeEndTime: () => {},
+  isPending: false,
+});
+
+export function EndTimeProvider({
+  maxEndTime,
+  children,
+}: {
+  maxEndTime: number;
+  children: ReactNode;
+}) {
+  const [endTime, setEndTime] = useState(Infinity);
+  const [visibleEndTime, setVisibleEndTime] = useState(endTime);
+  const [isPending, startTransition] = useTransition();
+
+  const changeEndTime = (value: number) => {
+    setVisibleEndTime(value);
+    startTransition(() => {
+      setEndTime(value);
+    });
+  };
+
+  useEffect(() => {
+    if (endTime !== maxEndTime) {
+      changeEndTime(maxEndTime);
+    }
+  }, [maxEndTime]);
+
+  return (
+    <EndTimeContext.Provider
+      value={{
+        endTime,
+        visibleEndTime,
+        changeEndTime,
+        isPending,
+      }}
+    >
+      <div>{children}</div>
+    </EndTimeContext.Provider>
+  );
+}
+
+export function useEndTime() {
+  const context = useContext(EndTimeContext);
+
+  if (context === undefined) {
+    throw new Error("useEndTime must be used within a EndTimeContext.Provider");
+  }
+
+  return context;
+}
diff --git a/packages/core/src/components/FlightResponse.stories.tsx b/packages/core/src/components/FlightResponse.stories.tsx
deleted file mode 100644
index 20f7b3cf..00000000
--- a/packages/core/src/components/FlightResponse.stories.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { FlightResponse } from "./FlightResponse";
-import {
-  createFlightResponse,
-  processBinaryChunk,
-} from "@rsc-parser/react-client";
-import { alvarDevExampleData } from "../example-data/alvar-dev";
-import { ghFredkissDevExampleData } from "../example-data/gh-fredkiss-dev";
-import { nextjsOrgExampleData } from "../example-data/nextjs-org";
-import { isRscChunkEvent } from "../events";
-
-const meta: Meta<typeof FlightResponse> = {
-  component: FlightResponse,
-};
-
-export default meta;
-type Story = StoryObj<typeof FlightResponse>;
-
-export const alvarDev: Story = {
-  name: "alvar.dev",
-  render: () => {
-    const flightResponse = createFlightResponse();
-    for (const event of alvarDevExampleData.filter(isRscChunkEvent)) {
-      flightResponse._currentTimestamp = event.data.timestamp;
-      processBinaryChunk(
-        flightResponse,
-        Uint8Array.from(event.data.chunkValue),
-      );
-    }
-    return <FlightResponse flightResponse={flightResponse} />;
-  },
-};
-
-export const ghFredKissDev: Story = {
-  name: "gh.fredkiss.dev",
-  render: () => {
-    const flightResponse = createFlightResponse();
-    for (const event of ghFredkissDevExampleData.filter(isRscChunkEvent)) {
-      flightResponse._currentTimestamp = event.data.timestamp;
-      processBinaryChunk(
-        flightResponse,
-        Uint8Array.from(event.data.chunkValue),
-      );
-    }
-    return <FlightResponse flightResponse={flightResponse} />;
-  },
-};
-
-export const nextjsOrg: Story = {
-  name: "nextjs.org",
-  render: () => {
-    const flightResponse = createFlightResponse();
-    for (const event of nextjsOrgExampleData.filter(isRscChunkEvent)) {
-      flightResponse._currentTimestamp = event.data.timestamp;
-      processBinaryChunk(
-        flightResponse,
-        Uint8Array.from(event.data.chunkValue),
-      );
-    }
-    return <FlightResponse flightResponse={flightResponse} />;
-  },
-};
diff --git a/packages/core/src/components/FlightResponse.tsx b/packages/core/src/components/FlightResponse.tsx
deleted file mode 100644
index be91fd14..00000000
--- a/packages/core/src/components/FlightResponse.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from "react";
-import { ErrorBoundary } from "react-error-boundary";
-import { TabList, Tab, TabPanel, TabProvider } from "@ariakit/react";
-
-import { GenericErrorBoundaryFallback } from "./GenericErrorBoundaryFallback";
-import type { FlightResponse } from "@rsc-parser/react-client";
-import { FlightResponseTabSplit } from "./FlightResponseTabSplit";
-import { FlightResponseTabNetwork } from "./FlightResponseTabNetwork";
-import { FlightResponseTabRaw } from "./FlightResponseTabRaw";
-
-export function FlightResponse({
-  flightResponse,
-}: {
-  flightResponse: FlightResponse;
-}) {
-  return (
-    <ErrorBoundary FallbackComponent={GenericErrorBoundaryFallback}>
-      <div className="flex flex-col gap-6">
-        <TabProvider defaultSelectedId="split">
-          <div className="flex flex-row items-center justify-between">
-            {flightResponse._chunks.length === 0 ? (
-              <span>No data for current time frame</span>
-            ) : (
-              <span>
-                Data from {flightResponse._chunks.length} fetch chunk
-                {flightResponse._chunks.length === 1 ? "" : "s"}
-              </span>
-            )}
-
-            <TabList aria-label="Render modes" className="flex flex-row gap-2">
-              <Tab
-                id="split"
-                className="rounded-md px-2 py-0.5 aria-selected:bg-slate-300 dark:aria-selected:text-black"
-              >
-                Split
-              </Tab>
-              <Tab
-                id="rows"
-                className="rounded-md px-2 py-0.5 aria-selected:bg-slate-300 dark:aria-selected:text-black"
-              >
-                Raw
-              </Tab>
-              <Tab
-                id="network"
-                className="text-nowrap rounded-md px-2 py-0.5 aria-selected:bg-slate-300 dark:aria-selected:text-black"
-              >
-                Network (Beta)
-              </Tab>
-            </TabList>
-          </div>
-          <div>
-            <TabPanel tabId="split">
-              <ErrorBoundary FallbackComponent={GenericErrorBoundaryFallback}>
-                <FlightResponseTabSplit flightResponse={flightResponse} />
-              </ErrorBoundary>
-            </TabPanel>
-
-            <TabPanel tabId="rows">
-              <ErrorBoundary FallbackComponent={GenericErrorBoundaryFallback}>
-                <FlightResponseTabRaw flightResponse={flightResponse} />
-              </ErrorBoundary>
-            </TabPanel>
-
-            <TabPanel tabId="network">
-              <ErrorBoundary FallbackComponent={GenericErrorBoundaryFallback}>
-                <FlightResponseTabNetwork
-                  flightResponse={flightResponse}
-                  // TODO: Find a way to remove this reseting key
-                  key={flightResponse._chunks.length}
-                />
-              </ErrorBoundary>
-            </TabPanel>
-          </div>
-        </TabProvider>
-      </div>
-    </ErrorBoundary>
-  );
-}
diff --git a/packages/core/src/components/FlightResponseSelector.stories.tsx b/packages/core/src/components/FlightResponseSelector.stories.tsx
deleted file mode 100644
index 6f5405f0..00000000
--- a/packages/core/src/components/FlightResponseSelector.stories.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-
-import {
-  FlightResponseSelector,
-  useFlightResponseSelector,
-} from "./FlightResponseSelector";
-import { alvarDevExampleData } from "../example-data/alvar-dev";
-import { ghFredkissDevExampleData } from "../example-data/gh-fredkiss-dev";
-import { nextjsOrgExampleData } from "../example-data/nextjs-org";
-
-const meta: Meta<typeof FlightResponseSelector> = {
-  component: FlightResponseSelector,
-};
-
-export default meta;
-type Story = StoryObj<typeof FlightResponseSelector>;
-
-export const alvarDev: Story = {
-  name: "alvar.dev",
-  render: () => {
-    const pathTabs = useFlightResponseSelector(alvarDevExampleData, {
-      follow: false,
-    });
-
-    return (
-      <FlightResponseSelector {...pathTabs}>
-        <p>Tab content goes</p>
-      </FlightResponseSelector>
-    );
-  },
-};
-
-export const ghFredKissDev: Story = {
-  name: "gh.fredkiss.dev",
-  render: () => {
-    const pathTabs = useFlightResponseSelector(ghFredkissDevExampleData, {
-      follow: false,
-    });
-
-    return (
-      <FlightResponseSelector {...pathTabs}>
-        <p>Tab content goes</p>
-      </FlightResponseSelector>
-    );
-  },
-};
-
-export const nextjsOrg: Story = {
-  name: "nextjs.org",
-  render: () => {
-    const pathTabs = useFlightResponseSelector(nextjsOrgExampleData, {
-      follow: false,
-    });
-
-    return (
-      <FlightResponseSelector {...pathTabs}>
-        <p>Tab content goes</p>
-      </FlightResponseSelector>
-    );
-  },
-};
diff --git a/packages/core/src/components/FlightResponseSelector.tsx b/packages/core/src/components/FlightResponseSelector.tsx
deleted file mode 100644
index c7f523c9..00000000
--- a/packages/core/src/components/FlightResponseSelector.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import React, {
-  ReactNode,
-  useEffect,
-  useMemo,
-  useState,
-  useTransition,
-} from "react";
-import { TabList, Tab, TabPanel, useTabStore } from "@ariakit/react";
-import { RscEvent, isRscRequestEvent, isRscResponseEvent } from "../events";
-import { getColorForFetch } from "../color";
-import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-
-export function useFlightResponseSelector(
-  events: RscEvent[],
-  {
-    follow,
-  }: {
-    follow: boolean;
-  },
-) {
-  const tabs = useMemo(() => {
-    const tabs: string[] = [];
-
-    const sorted = events.sort((a, b) => a.data.timestamp - b.data.timestamp);
-
-    for (const event of sorted) {
-      if (tabs.find((tab) => tab === String(event.data.requestId))) {
-        continue;
-      }
-      tabs.push(String(event.data.requestId));
-    }
-
-    return tabs;
-  }, [events]);
-
-  const [isPending, startTransition] = useTransition();
-  const [selectedTab, setSelectedTab] = useState<string | null | undefined>(
-    null,
-  );
-  const [currentTab, setCurrentTab] = useState<string | null | undefined>(null);
-
-  const selectTab = (nextTab: string | null | undefined) => {
-    if (nextTab !== selectedTab) {
-      setSelectedTab(nextTab);
-      startTransition(() => {
-        setCurrentTab(nextTab);
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (follow) {
-      const lastTab = tabs.at(-1);
-      if (lastTab !== selectedTab) {
-        selectTab(String(lastTab));
-      }
-    }
-  }, [tabs]);
-
-  const tabStore = useTabStore({
-    selectedId: selectedTab,
-    setSelectedId: selectTab,
-  });
-
-  return {
-    tabs,
-    events,
-    isPending,
-    currentTab,
-    tabStore,
-  };
-}
-
-export function FlightResponseSelector({
-  isPending,
-  tabStore,
-  tabs,
-  events,
-  currentTab,
-  children,
-}: ReturnType<typeof useFlightResponseSelector> & { children: ReactNode }) {
-  return (
-    <PanelGroup direction="horizontal">
-      <Panel id="sidebar" minSize={20} order={1} defaultSize={35}>
-        <TabList store={tabStore} className="flex flex-col gap-1 pr-3">
-          {tabs.map((tab) => {
-            const eventsForTab = events.filter(
-              (event) => event.data.requestId === tab,
-            );
-            const [requestEvent] = eventsForTab.filter(isRscRequestEvent);
-            const [responseEvent] = eventsForTab.filter(isRscResponseEvent);
-
-            if (!requestEvent) {
-              return null;
-            }
-
-            const { method, url } = requestEvent.data;
-            const { status } = responseEvent?.data ?? {};
-
-            return (
-              <Tab className="group w-full text-left" key={tab} id={tab}>
-                <div className="flex w-full flex-row items-center gap-3 rounded-md border-none px-1.5 py-0.5 group-aria-selected:bg-slate-200 dark:group-aria-selected:bg-slate-700">
-                  <div
-                    className="size-[14px] min-h-[14px] min-w-[14px] rounded-full"
-                    style={{
-                      background: getColorForFetch(
-                        events.find((event) => event.data.requestId === tab)
-                          ?.data.requestId ?? "0",
-                      ),
-                    }}
-                  ></div>
-                  <div>
-                    <span className="inline-block w-[10ch] text-slate-500 dark:text-slate-400">
-                      {method} ({status ?? "..."})
-                    </span>
-                    <span className="text-slate-900 dark:text-white">
-                      {new URL(url).pathname}
-                    </span>
-                    <span className="text-slate-500 dark:text-slate-400">
-                      {new URL(url).search}
-                    </span>
-                  </div>
-                </div>
-              </Tab>
-            );
-          })}
-        </TabList>
-      </Panel>
-
-      <PanelResizeHandle className="w-1 rounded bg-slate-200 dark:bg-slate-800" />
-
-      <Panel order={2} minSize={20} className="">
-        <TabPanel
-          store={tabStore}
-          tabId={currentTab}
-          alwaysVisible={true}
-          className={`flex min-w-0 grow flex-col gap-4 pl-3 transition-opacity delay-75 duration-100 ${
-            isPending ? "opacity-60" : ""
-          }`}
-          aria-label="Paths"
-          aria-busy={isPending}
-        >
-          {children}
-        </TabPanel>
-      </Panel>
-    </PanelGroup>
-  );
-}
diff --git a/packages/core/src/components/FlightResponseTabNetwork.stories.tsx b/packages/core/src/components/FlightResponseTabNetwork.stories.tsx
deleted file mode 100644
index 3c2695c0..00000000
--- a/packages/core/src/components/FlightResponseTabNetwork.stories.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { FlightResponseTabNetwork } from "./FlightResponseTabNetwork";
-import { alvarDevExampleData } from "../example-data/alvar-dev";
-import { ghFredkissDevExampleData } from "../example-data/gh-fredkiss-dev";
-import { nextjsOrgExampleData } from "../example-data/nextjs-org";
-import {
-  createFlightResponse,
-  processBinaryChunk,
-} from "@rsc-parser/react-client";
-import { isRscChunkEvent } from "../events";
-
-const meta: Meta<typeof FlightResponseTabNetwork> = {
-  component: FlightResponseTabNetwork,
-};
-
-export default meta;
-type Story = StoryObj<typeof FlightResponseTabNetwork>;
-
-export const alvarDev: Story = {
-  name: "alvar.dev",
-  render: () => {
-    const flightResponse = createFlightResponse();
-    for (const event of alvarDevExampleData.filter(isRscChunkEvent)) {
-      flightResponse._currentTimestamp = event.data.timestamp;
-      processBinaryChunk(
-        flightResponse,
-        Uint8Array.from(event.data.chunkValue),
-      );
-    }
-    return <FlightResponseTabNetwork flightResponse={flightResponse} />;
-  },
-};
-
-export const ghFredKissDev: Story = {
-  name: "gh.fredkiss.dev",
-  render: () => {
-    const flightResponse = createFlightResponse();
-    for (const event of ghFredkissDevExampleData.filter(isRscChunkEvent)) {
-      flightResponse._currentTimestamp = event.data.timestamp;
-      processBinaryChunk(
-        flightResponse,
-        Uint8Array.from(event.data.chunkValue),
-      );
-    }
-    return <FlightResponseTabNetwork flightResponse={flightResponse} />;
-  },
-};
-
-export const nextjsOrg: Story = {
-  name: "nextjs.org",
-  render: () => {
-    const flightResponse = createFlightResponse();
-    for (const event of nextjsOrgExampleData.filter(isRscChunkEvent)) {
-      flightResponse._currentTimestamp = event.data.timestamp;
-      processBinaryChunk(
-        flightResponse,
-        Uint8Array.from(event.data.chunkValue),
-      );
-    }
-    return <FlightResponseTabNetwork flightResponse={flightResponse} />;
-  },
-};
diff --git a/packages/core/src/components/FlightResponseTabRaw.stories.tsx b/packages/core/src/components/FlightResponseTabRaw.stories.tsx
deleted file mode 100644
index bf5c5ebd..00000000
--- a/packages/core/src/components/FlightResponseTabRaw.stories.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { FlightResponseTabRaw } from "./FlightResponseTabRaw";
-import { alvarDevExampleData } from "../example-data/alvar-dev";
-import { ghFredkissDevExampleData } from "../example-data/gh-fredkiss-dev";
-import { nextjsOrgExampleData } from "../example-data/nextjs-org";
-import {
-  createFlightResponse,
-  processBinaryChunk,
-} from "@rsc-parser/react-client";
-import { isRscChunkEvent } from "../events";
-
-const meta: Meta<typeof FlightResponseTabRaw> = {
-  component: FlightResponseTabRaw,
-};
-
-export default meta;
-type Story = StoryObj<typeof FlightResponseTabRaw>;
-
-export const alvarDev: Story = {
-  name: "alvar.dev",
-  render: () => {
-    const flightResponse = createFlightResponse();
-    for (const event of alvarDevExampleData.filter(isRscChunkEvent)) {
-      flightResponse._currentTimestamp = event.data.timestamp;
-      processBinaryChunk(
-        flightResponse,
-        Uint8Array.from(event.data.chunkValue),
-      );
-    }
-    return <FlightResponseTabRaw flightResponse={flightResponse} />;
-  },
-};
-
-export const ghFredkissDev: Story = {
-  name: "gh.fredkiss.dev",
-  render: () => {
-    const flightResponse = createFlightResponse();
-    for (const event of ghFredkissDevExampleData.filter(isRscChunkEvent)) {
-      flightResponse._currentTimestamp = event.data.timestamp;
-      processBinaryChunk(
-        flightResponse,
-        Uint8Array.from(event.data.chunkValue),
-      );
-    }
-    return <FlightResponseTabRaw flightResponse={flightResponse} />;
-  },
-};
-
-export const nextjsOrg: Story = {
-  name: "nextjs.org",
-  render: () => {
-    const flightResponse = createFlightResponse();
-    for (const event of nextjsOrgExampleData.filter(isRscChunkEvent)) {
-      flightResponse._currentTimestamp = event.data.timestamp;
-      processBinaryChunk(
-        flightResponse,
-        Uint8Array.from(event.data.chunkValue),
-      );
-    }
-    return <FlightResponseTabRaw flightResponse={flightResponse} />;
-  },
-};
diff --git a/packages/core/src/components/FlightResponseTabRaw.tsx b/packages/core/src/components/FlightResponseTabRaw.tsx
deleted file mode 100644
index 872d15ac..00000000
--- a/packages/core/src/components/FlightResponseTabRaw.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { useContext } from "react";
-import { FlightResponse } from "@rsc-parser/react-client";
-import { FlightResponseChunkRaw } from "./FlightResponseChunkRaw";
-import { EndTimeContext } from "./EndTimeContext";
-
-export function FlightResponseTabRaw({
-  flightResponse,
-}: {
-  flightResponse: FlightResponse;
-}) {
-  const endTime = useContext(EndTimeContext);
-
-  const timeFilteredChunks = flightResponse._chunks.filter(
-    (chunk) => chunk.timestamp <= endTime,
-  );
-
-  return (
-    <ul className="flex flex-col gap-4 font-code">
-      {timeFilteredChunks.map((chunk) => (
-        <li key={chunk.id}>
-          <FlightResponseChunkRaw data={chunk} />
-        </li>
-      ))}
-    </ul>
-  );
-}
diff --git a/packages/core/src/components/FlightResponseTabSplit.stories.tsx b/packages/core/src/components/FlightResponseTabSplit.stories.tsx
deleted file mode 100644
index 48ff8c1f..00000000
--- a/packages/core/src/components/FlightResponseTabSplit.stories.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { FlightResponseTabSplit } from "./FlightResponseTabSplit";
-import { alvarDevExampleData } from "../example-data/alvar-dev";
-import { ghFredkissDevExampleData } from "../example-data/gh-fredkiss-dev";
-import { nextjsOrgExampleData } from "../example-data/nextjs-org";
-import {
-  createFlightResponse,
-  processBinaryChunk,
-} from "@rsc-parser/react-client";
-import { isRscChunkEvent } from "../events";
-
-const meta: Meta<typeof FlightResponseTabSplit> = {
-  component: FlightResponseTabSplit,
-};
-
-export default meta;
-type Story = StoryObj<typeof FlightResponseTabSplit>;
-
-export const alvarDev: Story = {
-  name: "alvar.dev",
-  render: () => {
-    const flightResponse = createFlightResponse();
-    for (const event of alvarDevExampleData.filter(isRscChunkEvent)) {
-      flightResponse._currentTimestamp = event.data.timestamp;
-      processBinaryChunk(
-        flightResponse,
-        Uint8Array.from(event.data.chunkValue),
-      );
-    }
-    return <FlightResponseTabSplit flightResponse={flightResponse} />;
-  },
-};
-
-export const ghFredKissDev: Story = {
-  name: "gh.fredkiss.dev",
-  render: () => {
-    const flightResponse = createFlightResponse();
-    for (const event of ghFredkissDevExampleData.filter(isRscChunkEvent)) {
-      flightResponse._currentTimestamp = event.data.timestamp;
-      processBinaryChunk(
-        flightResponse,
-        Uint8Array.from(event.data.chunkValue),
-      );
-    }
-    return <FlightResponseTabSplit flightResponse={flightResponse} />;
-  },
-};
-
-export const nextjsOrg: Story = {
-  name: "nextjs.org",
-  render: () => {
-    const flightResponse = createFlightResponse();
-    for (const event of nextjsOrgExampleData.filter(isRscChunkEvent)) {
-      flightResponse._currentTimestamp = event.data.timestamp;
-      processBinaryChunk(
-        flightResponse,
-        Uint8Array.from(event.data.chunkValue),
-      );
-    }
-    return <FlightResponseTabSplit flightResponse={flightResponse} />;
-  },
-};
diff --git a/packages/core/src/components/RequestDetail.tsx b/packages/core/src/components/RequestDetail.tsx
new file mode 100644
index 00000000..9a3cff4e
--- /dev/null
+++ b/packages/core/src/components/RequestDetail.tsx
@@ -0,0 +1,78 @@
+import { TabList, Tab, TabPanel, TabProvider } from "@ariakit/react";
+import { RscEvent, isRscRequestEvent, isRscResponseEvent } from "../events";
+import { GenericErrorBoundaryFallback } from "./GenericErrorBoundaryFallback";
+import { ErrorBoundary } from "react-error-boundary";
+import { RequestDetailTabRawPayload } from "./RequestDetailTabRawPayload";
+import { RequestDetailTabParsedPayload } from "./RequestDetailTabParsedPayload";
+import { RequestDetailTabNetwork } from "./RequestDetailTabNetwork";
+import { RequestDetailTabHeaders } from "./RequestDetailTabHeaders";
+import { useTabStoreWithTransitions } from "./useTabStoreWithTransitions";
+
+export function RequestDetail({ events }: { events: RscEvent[] }) {
+  const { currentTab, isPending, tabStore } = useTabStoreWithTransitions({
+    defaultSelectedId: "parsedPayload",
+  });
+
+  return (
+    <TabProvider store={tabStore}>
+      <div className="flex w-full flex-col gap-4">
+        <TabList aria-label="Render modes" className="flex flex-row gap-2">
+          <Tab
+            id="headers"
+            className="rounded-md bg-slate-700 px-2 py-0.5 aria-disabled:opacity-50 aria-selected:bg-slate-300 dark:aria-selected:text-black"
+            disabled={
+              !events.some(
+                (event) =>
+                  isRscRequestEvent(event) || isRscResponseEvent(event),
+              )
+            }
+          >
+            Headers
+          </Tab>
+          <Tab
+            id="parsedPayload"
+            className="rounded-md bg-slate-700 px-2 py-0.5 aria-selected:bg-slate-300 dark:aria-selected:text-black"
+          >
+            Parsed payload
+          </Tab>
+          <Tab
+            id="rawPayload"
+            className="rounded-md bg-slate-700 px-2 py-0.5 aria-selected:bg-slate-300 dark:aria-selected:text-black"
+          >
+            Raw payload
+          </Tab>
+          <Tab
+            id="network"
+            className="text-nowrap rounded-md bg-slate-700 px-2 py-0.5 aria-selected:bg-slate-300 dark:aria-selected:text-black"
+          >
+            Network (Beta)
+          </Tab>
+        </TabList>
+
+        <TabPanel
+          tabId={currentTab}
+          className={`flex min-w-0 grow flex-col gap-4 transition-opacity delay-75 duration-100 ${
+            isPending ? "opacity-60" : ""
+          }`}
+          aria-busy={isPending}
+          alwaysVisible={true}
+        >
+          <ErrorBoundary FallbackComponent={GenericErrorBoundaryFallback}>
+            {currentTab === "headers" ? (
+              <RequestDetailTabHeaders events={events} />
+            ) : null}
+            {currentTab === "parsedPayload" ? (
+              <RequestDetailTabParsedPayload events={events} />
+            ) : null}
+            {currentTab === "rawPayload" ? (
+              <RequestDetailTabRawPayload events={events} />
+            ) : null}
+            {currentTab === "network" ? (
+              <RequestDetailTabNetwork events={events} />
+            ) : null}
+          </ErrorBoundary>
+        </TabPanel>
+      </div>
+    </TabProvider>
+  );
+}
diff --git a/packages/core/src/components/RequestDetailTabEmptyState.tsx b/packages/core/src/components/RequestDetailTabEmptyState.tsx
new file mode 100644
index 00000000..b8002ebb
--- /dev/null
+++ b/packages/core/src/components/RequestDetailTabEmptyState.tsx
@@ -0,0 +1,3 @@
+export function RequestDetailTabEmptyState() {
+  return "No data found for the current time frame.";
+}
diff --git a/packages/core/src/components/RequestDetailTabHeaders.stories.tsx b/packages/core/src/components/RequestDetailTabHeaders.stories.tsx
new file mode 100644
index 00000000..ff1f82b8
--- /dev/null
+++ b/packages/core/src/components/RequestDetailTabHeaders.stories.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { RequestDetailTabHeaders } from "./RequestDetailTabHeaders";
+import { alvarDevExampleData } from "../example-data/alvar-dev";
+import { ghFredkissDevExampleData } from "../example-data/gh-fredkiss-dev";
+import { nextjsOrgExampleData } from "../example-data/nextjs-org";
+
+const meta: Meta<typeof RequestDetailTabHeaders> = {
+  component: RequestDetailTabHeaders,
+};
+
+export default meta;
+type Story = StoryObj<typeof RequestDetailTabHeaders>;
+
+export const alvarDev: Story = {
+  name: "alvar.dev",
+  render: () => {
+    return <RequestDetailTabHeaders events={alvarDevExampleData} />;
+  },
+};
+
+export const ghFredKissDev: Story = {
+  name: "gh.fredkiss.dev",
+  render: () => {
+    return <RequestDetailTabHeaders events={ghFredkissDevExampleData} />;
+  },
+};
+
+export const nextjsOrg: Story = {
+  name: "nextjs.org",
+  render: () => {
+    return <RequestDetailTabHeaders events={nextjsOrgExampleData} />;
+  },
+};
diff --git a/packages/core/src/components/RequestDetailTabHeaders.tsx b/packages/core/src/components/RequestDetailTabHeaders.tsx
new file mode 100644
index 00000000..fee3786b
--- /dev/null
+++ b/packages/core/src/components/RequestDetailTabHeaders.tsx
@@ -0,0 +1,44 @@
+import { RscEvent, isRscRequestEvent, isRscResponseEvent } from "../events";
+
+export function RequestDetailTabHeaders({ events }: { events: RscEvent[] }) {
+  const requestEvent = events.filter(isRscRequestEvent)[0];
+  const responseEvent = events.filter(isRscResponseEvent)[0];
+
+  return (
+    <div className="flex flex-col gap-4">
+      <section className="flex flex-col gap-1">
+        <p>Request headers</p>
+        {requestEvent ? (
+          <HeadersTable headers={requestEvent.data.headers} />
+        ) : (
+          "No response headers"
+        )}
+      </section>
+      <section className="flex flex-col gap-1">
+        <p>Response headers</p>
+        {responseEvent ? (
+          <HeadersTable headers={responseEvent.data.headers} />
+        ) : (
+          "No request headers"
+        )}
+      </section>
+    </div>
+  );
+}
+
+function HeadersTable({ headers }: { headers: Record<string, string> }) {
+  return (
+    <table className="w-full max-w-4xl table-fixed border-collapse border border-slate-500 dark:text-white">
+      <tbody>
+        {Object.entries(headers).map(([key, value]) => (
+          <tr key={key}>
+            <td className="border border-slate-500 px-1.5 py-0.5">{key}</td>
+            <td className="whitespace-pre-wrap break-all border border-slate-500 px-1.5 py-0.5">
+              {value}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
diff --git a/packages/core/src/components/RequestDetailTabNetwork.stories.tsx b/packages/core/src/components/RequestDetailTabNetwork.stories.tsx
new file mode 100644
index 00000000..f193702a
--- /dev/null
+++ b/packages/core/src/components/RequestDetailTabNetwork.stories.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { RequestDetailTabNetwork } from "./RequestDetailTabNetwork";
+import { alvarDevExampleData } from "../example-data/alvar-dev";
+import { ghFredkissDevExampleData } from "../example-data/gh-fredkiss-dev";
+import { nextjsOrgExampleData } from "../example-data/nextjs-org";
+
+const meta: Meta<typeof RequestDetailTabNetwork> = {
+  component: RequestDetailTabNetwork,
+};
+
+export default meta;
+type Story = StoryObj<typeof RequestDetailTabNetwork>;
+
+export const alvarDev: Story = {
+  name: "alvar.dev",
+  render: () => {
+    return <RequestDetailTabNetwork events={alvarDevExampleData} />;
+  },
+};
+
+export const ghFredKissDev: Story = {
+  name: "gh.fredkiss.dev",
+  render: () => {
+    return <RequestDetailTabNetwork events={ghFredkissDevExampleData} />;
+  },
+};
+
+export const nextjsOrg: Story = {
+  name: "nextjs.org",
+  render: () => {
+    return <RequestDetailTabNetwork events={nextjsOrgExampleData} />;
+  },
+};
diff --git a/packages/core/src/components/FlightResponseTabNetwork.tsx b/packages/core/src/components/RequestDetailTabNetwork.tsx
similarity index 83%
rename from packages/core/src/components/FlightResponseTabNetwork.tsx
rename to packages/core/src/components/RequestDetailTabNetwork.tsx
index 98007047..716d3df2 100644
--- a/packages/core/src/components/FlightResponseTabNetwork.tsx
+++ b/packages/core/src/components/RequestDetailTabNetwork.tsx
@@ -1,7 +1,15 @@
-import { Chunk, FlightResponse, isReference } from "@rsc-parser/react-client";
-import React, { memo, useContext, useEffect, useRef, useState } from "react";
+import {
+  Chunk,
+  createFlightResponse,
+  isReference,
+  processBinaryChunk,
+} from "@rsc-parser/react-client";
+import React, { memo, useEffect, useRef, useState } from "react";
 import * as d3 from "d3";
-import { EndTimeContext } from "./EndTimeContext";
+import { useEndTime } from "./EndTimeContext";
+import { RscEvent, isRscChunkEvent } from "../events";
+import { eventsFilterByMaxTimestamp } from "../eventArrayHelpers";
+import { RequestDetailTabEmptyState } from "./RequestDetailTabEmptyState";
 
 interface Node extends d3.SimulationNodeDatum {
   chunk: Chunk;
@@ -85,12 +93,21 @@ function getLinks(chunks: Chunk[], id: string) {
   );
 }
 
-export function FlightResponseTabNetwork({
-  flightResponse,
-}: {
-  flightResponse: FlightResponse;
-}) {
-  const endTime = useContext(EndTimeContext);
+export function RequestDetailTabNetwork({ events }: { events: RscEvent[] }) {
+  const { endTime } = useEndTime();
+
+  if (
+    eventsFilterByMaxTimestamp(events, endTime).filter(isRscChunkEvent)
+      .length === 0
+  ) {
+    return <RequestDetailTabEmptyState />;
+  }
+
+  const flightResponse = createFlightResponse();
+  for (const event of events.filter(isRscChunkEvent)) {
+    flightResponse._currentTimestamp = event.data.timestamp;
+    processBinaryChunk(flightResponse, Uint8Array.from(event.data.chunkValue));
+  }
 
   const nodes: Node[] = flightResponse._chunks.map((chunk) => {
     return {
@@ -109,8 +126,11 @@ export function FlightResponseTabNetwork({
       return;
     }
     const resizeObserver = new ResizeObserver(() => {
-      setSvgWidth(svgRef.current!.clientWidth);
-      setSvgHeight(svgRef.current!.clientHeight);
+      if (!svgRef.current) {
+        return;
+      }
+      setSvgWidth(svgRef.current.clientWidth);
+      setSvgHeight(svgRef.current.clientHeight);
       simulation.current = undefined;
     });
     resizeObserver.observe(svgRef.current);
diff --git a/packages/core/src/components/RequestDetailTabParsedPayload.stories.tsx b/packages/core/src/components/RequestDetailTabParsedPayload.stories.tsx
new file mode 100644
index 00000000..cf5f4fd1
--- /dev/null
+++ b/packages/core/src/components/RequestDetailTabParsedPayload.stories.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { RequestDetailTabParsedPayload } from "./RequestDetailTabParsedPayload";
+import { alvarDevExampleData } from "../example-data/alvar-dev";
+import { ghFredkissDevExampleData } from "../example-data/gh-fredkiss-dev";
+import { nextjsOrgExampleData } from "../example-data/nextjs-org";
+
+const meta: Meta<typeof RequestDetailTabParsedPayload> = {
+  component: RequestDetailTabParsedPayload,
+};
+
+export default meta;
+type Story = StoryObj<typeof RequestDetailTabParsedPayload>;
+
+export const alvarDev: Story = {
+  name: "alvar.dev",
+  render: () => {
+    return <RequestDetailTabParsedPayload events={alvarDevExampleData} />;
+  },
+};
+
+export const ghFredKissDev: Story = {
+  name: "gh.fredkiss.dev",
+  render: () => {
+    return <RequestDetailTabParsedPayload events={ghFredkissDevExampleData} />;
+  },
+};
+
+export const nextjsOrg: Story = {
+  name: "nextjs.org",
+  render: () => {
+    return <RequestDetailTabParsedPayload events={nextjsOrgExampleData} />;
+  },
+};
diff --git a/packages/core/src/components/FlightResponseTabSplit.tsx b/packages/core/src/components/RequestDetailTabParsedPayload.tsx
similarity index 92%
rename from packages/core/src/components/FlightResponseTabSplit.tsx
rename to packages/core/src/components/RequestDetailTabParsedPayload.tsx
index 9368fc1d..9e64b9db 100644
--- a/packages/core/src/components/FlightResponseTabSplit.tsx
+++ b/packages/core/src/components/RequestDetailTabParsedPayload.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState, useTransition } from "react";
+import React, { useState, useTransition } from "react";
 import {
   Disclosure,
   DisclosureContent,
@@ -10,21 +10,43 @@ import {
 } from "@ariakit/react";
 import { ErrorBoundary } from "react-error-boundary";
 import { GenericErrorBoundaryFallback } from "./GenericErrorBoundaryFallback";
-import { FlightResponse, Chunk } from "@rsc-parser/react-client";
+import {
+  Chunk,
+  createFlightResponse,
+  processBinaryChunk,
+} from "@rsc-parser/react-client";
 import { FlightResponseChunkModule } from "./FlightResponseChunkModule";
 import { FlightResponseChunkHint } from "./FlightResponseChunkHint";
 import { FlightResponseChunkModel } from "./FlightResponseChunkModel";
 import { DownArrowIcon, RightArrowIcon } from "./FlightResponseIcons";
-import { EndTimeContext } from "./EndTimeContext";
 import { FlightResponseChunkDebugInfo } from "./FlightResponseChunkDebugInfo";
 import { FlightResponseChunkText } from "./FlightResponseChunkText";
 import { FlightResponseChunkUnknown } from "./FlightResponseChunkUnknown";
+import { useEndTime } from "./EndTimeContext";
+import { RscEvent, isRscChunkEvent } from "../events";
+import { RequestDetailTabEmptyState } from "./RequestDetailTabEmptyState";
+import { eventsFilterByMaxTimestamp } from "../eventArrayHelpers";
 
-export function FlightResponseTabSplit({
-  flightResponse,
+export function RequestDetailTabParsedPayload({
+  events,
 }: {
-  flightResponse: FlightResponse;
+  events: RscEvent[];
 }) {
+  const { endTime } = useEndTime();
+
+  if (
+    eventsFilterByMaxTimestamp(events, endTime).filter(isRscChunkEvent)
+      .length === 0
+  ) {
+    return <RequestDetailTabEmptyState />;
+  }
+
+  const flightResponse = createFlightResponse();
+  for (const event of events.filter(isRscChunkEvent)) {
+    flightResponse._currentTimestamp = event.data.timestamp;
+    processBinaryChunk(flightResponse, Uint8Array.from(event.data.chunkValue));
+  }
+
   const [isPending, startTransition] = useTransition();
   const [selectedTab, setSelectedTab] = useState<string | null | undefined>(
     null,
@@ -67,8 +89,6 @@ export function FlightResponseTabSplit({
     setSelectedId: selectTab,
   });
 
-  const endTime = useContext(EndTimeContext);
-
   const timeFilteredChunks = flightResponse._chunks.filter(
     (chunk) => chunk.timestamp <= endTime,
   );
diff --git a/packages/core/src/components/RequestDetailTabRawPayload.stories.tsx b/packages/core/src/components/RequestDetailTabRawPayload.stories.tsx
new file mode 100644
index 00000000..c38a1b86
--- /dev/null
+++ b/packages/core/src/components/RequestDetailTabRawPayload.stories.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { RequestDetailTabRawPayload } from "./RequestDetailTabRawPayload";
+import { alvarDevExampleData } from "../example-data/alvar-dev";
+import { ghFredkissDevExampleData } from "../example-data/gh-fredkiss-dev";
+import { nextjsOrgExampleData } from "../example-data/nextjs-org";
+
+const meta: Meta<typeof RequestDetailTabRawPayload> = {
+  component: RequestDetailTabRawPayload,
+};
+
+export default meta;
+type Story = StoryObj<typeof RequestDetailTabRawPayload>;
+
+export const alvarDev: Story = {
+  name: "alvar.dev",
+  render: () => {
+    return <RequestDetailTabRawPayload events={alvarDevExampleData} />;
+  },
+};
+
+export const ghFredkissDev: Story = {
+  name: "gh.fredkiss.dev",
+  render: () => {
+    return <RequestDetailTabRawPayload events={ghFredkissDevExampleData} />;
+  },
+};
+
+export const nextjsOrg: Story = {
+  name: "nextjs.org",
+  render: () => {
+    return <RequestDetailTabRawPayload events={nextjsOrgExampleData} />;
+  },
+};
diff --git a/packages/core/src/components/RequestDetailTabRawPayload.tsx b/packages/core/src/components/RequestDetailTabRawPayload.tsx
new file mode 100644
index 00000000..a265efea
--- /dev/null
+++ b/packages/core/src/components/RequestDetailTabRawPayload.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { FlightResponseChunkRaw } from "./FlightResponseChunkRaw";
+import { useEndTime } from "./EndTimeContext";
+import { RscEvent, isRscChunkEvent } from "../events";
+import {
+  createFlightResponse,
+  processBinaryChunk,
+} from "@rsc-parser/react-client";
+import { eventsFilterByMaxTimestamp } from "../eventArrayHelpers";
+import { RequestDetailTabEmptyState } from "./RequestDetailTabEmptyState";
+
+export function RequestDetailTabRawPayload({ events }: { events: RscEvent[] }) {
+  const { endTime } = useEndTime();
+
+  if (
+    eventsFilterByMaxTimestamp(events, endTime).filter(isRscChunkEvent)
+      .length === 0
+  ) {
+    return <RequestDetailTabEmptyState />;
+  }
+
+  const flightResponse = createFlightResponse();
+  for (const event of events.filter(isRscChunkEvent)) {
+    flightResponse._currentTimestamp = event.data.timestamp;
+    processBinaryChunk(flightResponse, Uint8Array.from(event.data.chunkValue));
+  }
+
+  const timeFilteredChunks = flightResponse._chunks.filter(
+    (chunk) => chunk.timestamp <= endTime,
+  );
+
+  return (
+    <ul className="flex flex-col gap-4 font-code">
+      {timeFilteredChunks.map((chunk) => (
+        <li key={chunk.id}>
+          <FlightResponseChunkRaw data={chunk} />
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/packages/core/src/components/TimeScrubber.stories.tsx b/packages/core/src/components/TimeScrubber.stories.tsx
index 74201bdf..886de0b3 100644
--- a/packages/core/src/components/TimeScrubber.stories.tsx
+++ b/packages/core/src/components/TimeScrubber.stories.tsx
@@ -1,10 +1,11 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { TimeScrubber, useTimeScrubber } from "./TimeScrubber";
+import { TimeScrubber } from "./TimeScrubber";
 import { alvarDevExampleData } from "../example-data/alvar-dev";
 import { ghFredkissDevExampleData } from "../example-data/gh-fredkiss-dev";
 import { nextjsOrgExampleData } from "../example-data/nextjs-org";
+import { EndTimeProvider } from "./EndTimeContext";
 
 const meta: Meta<typeof TimeScrubber> = {
   component: TimeScrubber,
@@ -16,32 +17,47 @@ type Story = StoryObj<typeof TimeScrubber>;
 export const alvarDev: Story = {
   name: "alvar.dev",
   render: () => {
-    const timeScrubber = useTimeScrubber(alvarDevExampleData, {
-      follow: false,
-    });
-
-    return <TimeScrubber {...timeScrubber} />;
+    return (
+      <EndTimeProvider maxEndTime={Infinity}>
+        <TimeScrubber
+          minStartTime={0}
+          maxEndTime={Infinity}
+          events={alvarDevExampleData}
+        />
+        ;
+      </EndTimeProvider>
+    );
   },
 };
 
 export const ghFredKissDev: Story = {
   name: "gh.fredkiss.dev",
   render: () => {
-    const timeScrubber = useTimeScrubber(ghFredkissDevExampleData, {
-      follow: false,
-    });
-
-    return <TimeScrubber {...timeScrubber} />;
+    return (
+      <EndTimeProvider maxEndTime={Infinity}>
+        <TimeScrubber
+          minStartTime={0}
+          maxEndTime={Infinity}
+          events={ghFredkissDevExampleData}
+        />
+        ;
+      </EndTimeProvider>
+    );
   },
 };
 
 export const nextjsOrg: Story = {
   name: "nextjs.org",
   render: () => {
-    const timeScrubber = useTimeScrubber(nextjsOrgExampleData, {
-      follow: false,
-    });
-
-    return <TimeScrubber {...timeScrubber} />;
+    return (
+      <EndTimeProvider maxEndTime={Infinity}>
+        <TimeScrubber
+          minStartTime={0}
+          maxEndTime={Infinity}
+          events={nextjsOrgExampleData}
+        />
+        ;
+      </EndTimeProvider>
+    );
   },
 };
diff --git a/packages/core/src/components/TimeScrubber.tsx b/packages/core/src/components/TimeScrubber.tsx
index 494af8d9..e36946da 100644
--- a/packages/core/src/components/TimeScrubber.tsx
+++ b/packages/core/src/components/TimeScrubber.tsx
@@ -1,43 +1,8 @@
-import React, { useEffect, useMemo, useState, useTransition } from "react";
+import React, { useMemo } from "react";
 import { RscEvent } from "../events";
 import { getColorForFetch } from "../color";
-
-export function useTimeScrubber(
-  events: RscEvent[],
-  { follow }: { follow: boolean },
-) {
-  const { minStartTime, maxEndTime } = useTimeRange(events);
-  const [endTime, setEndTime] = useState(maxEndTime);
-
-  const [visibleEndTime, setVisibleEndTime] = useState(endTime);
-  const [isPending, startTransition] = useTransition();
-
-  const changeEndTime = (value: number) => {
-    setVisibleEndTime(value);
-    startTransition(() => {
-      setEndTime(value);
-    });
-  };
-
-  useEffect(() => {
-    if (follow) {
-      if (endTime !== maxEndTime) {
-        changeEndTime(maxEndTime);
-      }
-    }
-  }, [events]);
-
-  return {
-    events,
-    endTime,
-    visibleEndTime,
-    changeEndTime,
-    isPending,
-    startTransition,
-    minStartTime,
-    maxEndTime,
-  };
-}
+import { eventsFilterByMaxTimestamp } from "../eventArrayHelpers";
+import { useEndTime } from "./EndTimeContext";
 
 function useTracks(events: RscEvent[]) {
   return useMemo(() => {
@@ -84,14 +49,16 @@ function useTracks(events: RscEvent[]) {
 
 export function TimeScrubber({
   events,
-  endTime,
-  visibleEndTime,
-  changeEndTime,
-  isPending,
   minStartTime,
   maxEndTime,
-}: ReturnType<typeof useTimeScrubber>) {
-  const filteredEvents = useFilterEventsByEndTime(events, endTime);
+}: {
+  events: RscEvent[];
+  minStartTime: number;
+  maxEndTime: number;
+}) {
+  const { endTime, visibleEndTime, changeEndTime, isPending } = useEndTime();
+
+  const filteredEvents = eventsFilterByMaxTimestamp(events, endTime);
   const tracks = useTracks(events);
 
   const eventHeight = 12;
@@ -229,29 +196,3 @@ export function TimeScrubber({
     </div>
   );
 }
-
-function useTimeRange(events: RscEvent[]) {
-  return useMemo(() => {
-    let minStartTime = Number.MAX_SAFE_INTEGER;
-    let maxEndTime = 0;
-
-    for (const event of events) {
-      minStartTime = Math.min(minStartTime, event.data.timestamp);
-      maxEndTime = Math.max(maxEndTime, event.data.timestamp);
-    }
-
-    const timeRange = maxEndTime - minStartTime;
-
-    return {
-      minStartTime,
-      maxEndTime,
-      timeRange,
-    };
-  }, [events]);
-}
-
-export function useFilterEventsByEndTime(events: RscEvent[], endTime: number) {
-  return useMemo(() => {
-    return events.filter((event) => event.data.timestamp <= endTime);
-  }, [events, endTime]);
-}
diff --git a/packages/core/src/components/ViewerPayload.tsx b/packages/core/src/components/ViewerPayload.tsx
index 79fa7b5c..317e25eb 100644
--- a/packages/core/src/components/ViewerPayload.tsx
+++ b/packages/core/src/components/ViewerPayload.tsx
@@ -2,13 +2,9 @@ import React, { ChangeEvent, useEffect, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 import { GenericErrorBoundaryFallback } from "./GenericErrorBoundaryFallback";
-import {
-  createFlightResponse,
-  processBinaryChunk,
-} from "@rsc-parser/react-client";
 import { RscChunkEvent } from "../events";
-import { FlightResponse } from "./FlightResponse";
-import { EndTimeContext } from "./EndTimeContext";
+import { EndTimeProvider } from "./EndTimeContext";
+import { RequestDetail } from "./RequestDetail";
 
 export function ViewerPayload({ defaultPayload }: { defaultPayload: string }) {
   const [payload, setPayload] = useState(defaultPayload);
@@ -63,14 +59,9 @@ export function Viewer({ payload }: { payload: string }) {
     } satisfies RscChunkEvent,
   ];
 
-  const flightResponse = createFlightResponse();
-  for (const event of events) {
-    processBinaryChunk(flightResponse, Uint8Array.from(event.data.chunkValue));
-  }
-
   return (
-    <EndTimeContext.Provider value={Infinity}>
-      <FlightResponse flightResponse={flightResponse} />
-    </EndTimeContext.Provider>
+    <EndTimeProvider maxEndTime={Infinity}>
+      <RequestDetail events={events} />
+    </EndTimeProvider>
   );
 }
diff --git a/packages/core/src/components/ViewerStreams.tsx b/packages/core/src/components/ViewerStreams.tsx
index bf8dad46..49f32e28 100644
--- a/packages/core/src/components/ViewerStreams.tsx
+++ b/packages/core/src/components/ViewerStreams.tsx
@@ -1,122 +1,120 @@
 import React from "react";
-import { TabList, Tab, TabPanel, TabProvider } from "@ariakit/react";
+import { TabList, Tab, TabPanel } from "@ariakit/react";
+import { RscEvent, isRscRequestEvent, isRscResponseEvent } from "../events";
+import { TimeScrubber } from "./TimeScrubber";
+import { EndTimeProvider, useEndTime } from "./EndTimeContext";
 import {
-  createFlightResponse,
-  processBinaryChunk,
-} from "@rsc-parser/react-client";
-import {
-  RscEvent,
-  isRscChunkEvent,
-  isRscRequestEvent,
-  isRscResponseEvent,
-} from "../events";
-import { FlightResponse } from "./FlightResponse";
-import {
-  FlightResponseSelector,
-  useFlightResponseSelector,
-} from "./FlightResponseSelector";
-import { TimeScrubber, useTimeScrubber } from "./TimeScrubber";
-import { useFilterEventsByEndTime } from "./TimeScrubber";
-import { EndTimeContext } from "./EndTimeContext";
+  eventsFilterByMaxTimestamp,
+  eventsFilterByRequestId,
+  eventsGetMinMaxTimestamps,
+  eventsSortByTimestamp,
+  eventsUniqueRequestIds,
+} from "../eventArrayHelpers";
+import { useTabStoreWithTransitions } from "./useTabStoreWithTransitions";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { getColorForFetch } from "../color";
+import { RequestDetail } from "./RequestDetail";
 
 export function ViewerStreams({ events }: { events: RscEvent[] }) {
-  const timeScrubber = useTimeScrubber(events, {
-    follow: true,
-  });
-
-  const timeFilteredEvents = useFilterEventsByEndTime(
-    events,
-    timeScrubber.endTime,
-  );
+  const { minStartTime, maxEndTime } = eventsGetMinMaxTimestamps(events);
 
-  const pathTabs = useFlightResponseSelector(timeFilteredEvents, {
-    follow: false,
-  });
+  return (
+    <EndTimeProvider maxEndTime={maxEndTime}>
+      <div className="flex flex-col gap-4 dark:text-white">
+        <TimeScrubber
+          events={events}
+          minStartTime={minStartTime}
+          maxEndTime={maxEndTime}
+        />
 
-  const eventsForCurrentTab = timeFilteredEvents.filter(
-    (event) => event.data.requestId == pathTabs.currentTab,
+        <Requests events={events} />
+      </div>
+    </EndTimeProvider>
   );
+}
 
-  const flightResponse = createFlightResponse();
-  for (const event of eventsForCurrentTab.filter(isRscChunkEvent)) {
-    flightResponse._currentTimestamp = event.data.timestamp;
-    processBinaryChunk(flightResponse, Uint8Array.from(event.data.chunkValue));
-  }
+function Requests({ events }: { events: RscEvent[] }) {
+  const { endTime } = useEndTime();
+  const { currentTab, isPending, tabStore } =
+    useTabStoreWithTransitions(undefined);
 
-  const requestEvent = eventsForCurrentTab.filter(isRscRequestEvent)[0];
-  const responseEvent = eventsForCurrentTab.filter(isRscResponseEvent)[0];
+  const sortedEvents = eventsSortByTimestamp(events);
+  const timeFilteredEvents = eventsFilterByMaxTimestamp(sortedEvents, endTime);
+  const tabs = eventsUniqueRequestIds(events);
 
   return (
-    <div className="flex flex-col gap-4 dark:text-white">
-      <TimeScrubber {...timeScrubber} />
+    <PanelGroup direction="horizontal">
+      <Panel id="sidebar" minSize={20} order={1} defaultSize={35}>
+        <TabList store={tabStore} className="flex flex-col gap-1 pr-3">
+          {tabs.map((tab) => {
+            return (
+              <Tab key={tab} id={tab} store={tabStore} className="group">
+                <RequestTab
+                  events={eventsFilterByRequestId(timeFilteredEvents, tab)}
+                />
+              </Tab>
+            );
+          })}
+        </TabList>
+      </Panel>
+
+      <PanelResizeHandle className="w-1 rounded bg-slate-200 dark:bg-slate-800" />
 
-      <EndTimeContext.Provider value={timeScrubber.endTime}>
-        <FlightResponseSelector {...pathTabs}>
-          {!pathTabs.currentTab ? (
+      <Panel order={2} minSize={20} className="">
+        <TabPanel
+          store={tabStore}
+          tabId={currentTab}
+          alwaysVisible={true}
+          className={`flex min-w-0 grow pl-3 transition-opacity delay-75 duration-100 ${
+            isPending ? "opacity-60" : ""
+          }`}
+          aria-label="Paths"
+          aria-busy={isPending}
+        >
+          {!currentTab ? (
             <span>Please select a url</span>
           ) : (
-            <TabProvider key={pathTabs.currentTab}>
-              <TabList
-                aria-label="Render modes"
-                className="flex flex-row gap-2"
-              >
-                <Tab
-                  id="flightResponse"
-                  className="rounded-md px-2 py-0.5 aria-selected:bg-slate-300 dark:aria-selected:text-black"
-                >
-                  Flight response
-                </Tab>
-                <Tab
-                  id="headers"
-                  className="rounded-md px-2 py-0.5 aria-selected:bg-slate-300 dark:aria-selected:text-black"
-                >
-                  Headers
-                </Tab>
-              </TabList>
-
-              <TabPanel tabId="flightResponse">
-                <FlightResponse flightResponse={flightResponse} />
-              </TabPanel>
-
-              <TabPanel tabId="headers" className="flex flex-col gap-4">
-                <section className="flex flex-col gap-1">
-                  <p>Request headers</p>
-                  {requestEvent ? (
-                    <HeadersTable headers={requestEvent.data.headers} />
-                  ) : (
-                    "No response headers"
-                  )}
-                </section>
-                <section className="flex flex-col gap-1">
-                  <p>Response headers</p>
-                  {responseEvent ? (
-                    <HeadersTable headers={responseEvent.data.headers} />
-                  ) : (
-                    "No request headers"
-                  )}
-                </section>
-              </TabPanel>
-            </TabProvider>
+            <RequestDetail
+              key={currentTab}
+              events={eventsFilterByRequestId(sortedEvents, currentTab)}
+            />
           )}
-        </FlightResponseSelector>
-      </EndTimeContext.Provider>
-    </div>
+        </TabPanel>
+      </Panel>
+    </PanelGroup>
   );
 }
 
-function HeadersTable({ headers }: { headers: Record<string, string> }) {
+function RequestTab({ events }: { events: RscEvent[] }) {
+  const [requestEvent] = events.filter(isRscRequestEvent);
+  const [responseEvent] = events.filter(isRscResponseEvent);
+
+  if (!requestEvent) {
+    return null;
+  }
+
+  const { method, url } = requestEvent.data;
+  const { status } = responseEvent?.data ?? {};
+
   return (
-    <table className="w-full max-w-4xl table-fixed border-collapse border border-slate-500 dark:text-white">
-      <tbody>
-        {Object.entries(headers).map(([key, value]) => (
-          <tr key={key}>
-            <td className="border border-slate-500 px-1.5 py-0.5">{key}</td>
-            <td className="whitespace-pre-wrap break-all border border-slate-500 px-1.5 py-0.5">
-              {value}
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
+    <div className="flex w-full flex-row items-center gap-3 rounded-md border-none px-1.5 py-0.5 text-left group-aria-selected:bg-slate-200 dark:group-aria-selected:bg-slate-700">
+      <div
+        className="size-[14px] min-h-[14px] min-w-[14px] rounded-full"
+        style={{
+          background: getColorForFetch(events[0].data.requestId),
+        }}
+      ></div>
+      <div>
+        <span className="inline-block w-[10ch] text-slate-500 dark:text-slate-400">
+          {method} ({status ?? "..."})
+        </span>
+        <span className="text-slate-900 dark:text-white">
+          {new URL(url).pathname}
+        </span>
+        <span className="text-slate-500 dark:text-slate-400">
+          {new URL(url).search}
+        </span>
+      </div>
+    </div>
   );
 }
diff --git a/packages/core/src/components/useTabStoreWithTransitions.ts b/packages/core/src/components/useTabStoreWithTransitions.ts
new file mode 100644
index 00000000..dff22bd3
--- /dev/null
+++ b/packages/core/src/components/useTabStoreWithTransitions.ts
@@ -0,0 +1,35 @@
+import { useTabStore } from "@ariakit/react";
+import { useState, useTransition } from "react";
+
+export function useTabStoreWithTransitions(
+  useTabStoreArgs: Parameters<typeof useTabStore>[0],
+) {
+  const [isPending, startTransition] = useTransition();
+  const [selectedTab, setSelectedTab] = useState<string | null | undefined>(
+    useTabStoreArgs?.defaultSelectedId ?? null,
+  );
+  const [currentTab, setCurrentTab] = useState<string | null | undefined>(
+    useTabStoreArgs?.defaultSelectedId ?? null,
+  );
+
+  const selectTab = (nextTab: string | null | undefined) => {
+    if (nextTab !== selectedTab) {
+      setSelectedTab(nextTab);
+      startTransition(() => {
+        setCurrentTab(nextTab);
+      });
+    }
+  };
+
+  const tabStore = useTabStore({
+    selectedId: selectedTab,
+    setSelectedId: selectTab,
+    ...useTabStoreArgs,
+  });
+
+  return {
+    isPending,
+    currentTab,
+    tabStore,
+  };
+}
diff --git a/packages/core/src/eventArrayHelpers.ts b/packages/core/src/eventArrayHelpers.ts
new file mode 100644
index 00000000..cd26d1ec
--- /dev/null
+++ b/packages/core/src/eventArrayHelpers.ts
@@ -0,0 +1,45 @@
+import { RscEvent } from "./events";
+
+export function eventsSortByTimestamp(events: RscEvent[]) {
+  return events.sort((a, b) => a.data.timestamp - b.data.timestamp);
+}
+
+export function eventsFilterByMaxTimestamp(
+  events: RscEvent[],
+  endTime: number,
+) {
+  return events.filter((event) => event.data.timestamp <= endTime);
+}
+
+export function eventsGetMinMaxTimestamps(events: RscEvent[]) {
+  let minStartTime = Number.MAX_SAFE_INTEGER;
+  let maxEndTime = 0;
+
+  for (const event of events) {
+    minStartTime = Math.min(minStartTime, event.data.timestamp);
+    maxEndTime = Math.max(maxEndTime, event.data.timestamp);
+  }
+
+  return {
+    minStartTime,
+    maxEndTime,
+  };
+}
+
+export function eventsUniqueRequestIds(events: RscEvent[]) {
+  const requestIds: string[] = [];
+
+  for (const event of events) {
+    if (requestIds.includes(event.data.requestId)) {
+      continue;
+    }
+
+    requestIds.push(event.data.requestId);
+  }
+
+  return requestIds;
+}
+
+export function eventsFilterByRequestId(events: RscEvent[], requestId: string) {
+  return events.filter((event) => event.data.requestId === requestId);
+}