diff --git a/src/panel/__image_snapshots__/Tick - basic-snap.png b/src/panel/__image_snapshots__/Tick - basic-snap.png
index e2e3bc7e..5584cf41 100644
Binary files a/src/panel/__image_snapshots__/Tick - basic-snap.png and b/src/panel/__image_snapshots__/Tick - basic-snap.png differ
diff --git a/src/panel/pages/events/Timeline.fixture.tsx b/src/panel/pages/events/Timeline.fixture.tsx
index a60b714b..d084243c 100644
--- a/src/panel/pages/events/Timeline.fixture.tsx
+++ b/src/panel/pages/events/Timeline.fixture.tsx
@@ -72,7 +72,7 @@ const defaultEvents: DebugEvent[] = [
   {
     type: "debug",
     data: {
-      type: "fetchResponse",
+      type: "fetchSuccess",
       message: "The fetch request succeeded",
       operation: operation1,
       source: "fetchExchange",
diff --git a/src/panel/pages/events/Timeline.tsx b/src/panel/pages/events/Timeline.tsx
index 24d5ec0c..5ebc45b9 100644
--- a/src/panel/pages/events/Timeline.tsx
+++ b/src/panel/pages/events/Timeline.tsx
@@ -136,9 +136,6 @@ export const Timeline: FC = () => {
   );
 };
 
-const SPACING = 40;
-const ROW_PADDING = 8;
-
 const Page = styled(Background)`
   background-color: ${(p) => p.theme.dark["0"]};
 `;
@@ -155,26 +152,35 @@ const TimelineContainer = styled.div`
 `;
 
 const TimelineIcons = styled.div`
-  background-color: ${(p) => p.theme.dark["-3"]};
-  display: grid;
-  justify-content: center;
-  grid-template-rows: 20px;
-  grid-row-gap: ${ROW_PADDING * 2}px;
-  /* TimelineList outer margin + inner margin + padding */
-  padding: ${SPACING + ROW_PADDING + 30}px 0;
-  position: relative;
-  width: ${SPACING}px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 40px;
   z-index: 1;
+
+  > :first-child {
+    margin-top: 78px;
+  }
+
+  > * {
+    margin-bottom: 16px;
+  }
+
+  > *:after {
+    content: "";
+    width: 200px;
+    height: 200px;
+  }
 `;
 
 const TimelineList = styled.div`
   cursor: grab;
   display: flex;
-  width: calc(100% - ${SPACING}px);
   flex-direction: column;
   flex-grow: 1;
   position: relative;
-  margin: ${SPACING}px 0;
+  padding: 40px 0;
+  overflow: hidden;
   &:active {
     cursor: grabbing;
   }
diff --git a/src/panel/pages/events/components/Tick.tsx b/src/panel/pages/events/components/Tick.tsx
index 04108cb0..c808a5bd 100644
--- a/src/panel/pages/events/components/Tick.tsx
+++ b/src/panel/pages/events/components/Tick.tsx
@@ -16,7 +16,6 @@ export const Tick = styled.div<{ label: string }>`
     display: block;
     text-align: center;
     width: 100px;
-    margin-top: -25px;
     margin-left: -50px;
   }
 
@@ -24,7 +23,7 @@ export const Tick = styled.div<{ label: string }>`
     content: "";
     position: absolute;
     width: 2px;
-    top: 0;
+    top: 25px;
     bottom: 0;
     background: ${(props) => props.theme.dark["+1"]};
     opacity: 0.3;
diff --git a/src/panel/pages/events/components/TimelineRow.fixture.tsx b/src/panel/pages/events/components/TimelineRow.fixture.tsx
index 2274fdc3..b0c182ad 100644
--- a/src/panel/pages/events/components/TimelineRow.fixture.tsx
+++ b/src/panel/pages/events/components/TimelineRow.fixture.tsx
@@ -92,7 +92,7 @@ export default {
                   source: "devtoolsExchange",
                 },
                 {
-                  type: "fetchResponse",
+                  type: "fetchSuccess",
                   message: "A listener was added to the stream",
                   timestamp: Date.now() + 65000,
                   source: "devtoolsExchange",
diff --git a/src/panel/pages/events/components/TimelineRow.tsx b/src/panel/pages/events/components/TimelineRow.tsx
index 0d0e6830..5bc94a3a 100644
--- a/src/panel/pages/events/components/TimelineRow.tsx
+++ b/src/panel/pages/events/components/TimelineRow.tsx
@@ -62,7 +62,7 @@ export const TimelineRow: FC<
       }
 
       // Response
-      if (e.type === "fetchResponse") {
+      if (e.type === "fetchSuccess") {
         return {
           start: undefined,
           elements: [