diff --git a/packages/app/src/LogSidePanel.tsx b/packages/app/src/LogSidePanel.tsx
index 09a88bfbc..cb26be979 100644
--- a/packages/app/src/LogSidePanel.tsx
+++ b/packages/app/src/LogSidePanel.tsx
@@ -21,13 +21,19 @@ import Timestamp from 'timestamp-nano';
 import { useQueryParam } from 'use-query-params';
 import {
   ActionIcon,
+  Box,
+  Card,
   Group,
   Menu,
+  ScrollArea,
   SegmentedControl,
+  SimpleGrid,
+  Stack,
   TextInput,
 } from '@mantine/core';
 
 import HyperJson, { GetLineActions, LineAction } from './components/HyperJson';
+import { KubeTimeline } from './components/KubeComponents';
 import { Table } from './components/Table';
 import api from './api';
 import {
@@ -2293,7 +2299,6 @@ const ExceptionSubpanel = ({
     </div>
   );
 };
-import { Card, SimpleGrid, Stack } from '@mantine/core';
 
 import { convertDateRangeToGranularityString, Granularity } from './ChartUtils';
 
@@ -2465,12 +2470,40 @@ const MetricsSubpanel = ({ logData }: { logData?: any }) => {
   return (
     <Stack my="md" spacing={40}>
       {podUid && (
-        <MetricsSubpanelGroup
-          title="Pod Metrics"
-          where={`k8s.pod.uid:"${podUid}"`}
-          fieldPrefix="k8s.pod."
-          timestamp={timestamp}
-        />
+        <div>
+          <MetricsSubpanelGroup
+            title="Pod Metrics"
+            where={`k8s.pod.uid:"${podUid}"`}
+            fieldPrefix="k8s.pod."
+            timestamp={timestamp}
+          />
+          <Card p="md" mt="xl">
+            <Card.Section p="md" py="xs" withBorder>
+              Pod Timeline
+            </Card.Section>
+            <Card.Section>
+              <ScrollArea
+                viewportProps={{
+                  style: { maxHeight: 280 },
+                }}
+              >
+                <Box p="md" py="sm">
+                  <KubeTimeline
+                    q={`k8s.pod.uid:"${podUid}"`}
+                    dateRange={[
+                      sub(new Date(timestamp), { days: 1 }),
+                      add(new Date(timestamp), { days: 1 }),
+                    ]}
+                    anchorEvent={{
+                      label: <div className="text-success">This Event</div>,
+                      timestamp: new Date(timestamp).toISOString(),
+                    }}
+                  />
+                </Box>
+              </ScrollArea>
+            </Card.Section>
+          </Card>
+        </div>
       )}
       {nodeName && (
         <MetricsSubpanelGroup
diff --git a/packages/app/src/PodDetailsSidePanel.tsx b/packages/app/src/PodDetailsSidePanel.tsx
index 6047d8aef..be68ab4d8 100644
--- a/packages/app/src/PodDetailsSidePanel.tsx
+++ b/packages/app/src/PodDetailsSidePanel.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import Drawer from 'react-modern-drawer';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
-import { Box, Card, Grid, Text } from '@mantine/core';
+import { Box, Card, Grid, ScrollArea, Text } from '@mantine/core';
 
+import { KubeTimeline } from './components/KubeComponents';
 import api from './api';
 import {
   convertDateRangeToGranularityString,
@@ -126,7 +127,7 @@ export default function PodDetailsSidePanel() {
           <Box p="md">
             <Text size="md">Details for {podName}</Text>
           </Box>
-          <Box className="w-100 overflow-auto" px="sm">
+          <Box className="w-100" px="sm">
             <Grid>
               <PodDetails podName={podName} dateRange={dateRange} />
               <Grid.Col span={6}>
@@ -180,19 +181,18 @@ export default function PodDetailsSidePanel() {
               <Grid.Col span={12}>
                 <Card p="md">
                   <Card.Section p="md" py="xs" withBorder>
-                    Latest Kubernetes Events
+                    Latest Pod Events
                   </Card.Section>
-                  <Card.Section p="md" py="sm" h={CHART_HEIGHT}>
-                    <LogTableWithSidePanel
-                      config={{
-                        dateRange,
-                        where: where + ' k8s.resource.name:"events"',
+                  <Card.Section>
+                    <ScrollArea
+                      viewportProps={{
+                        style: { maxHeight: CHART_HEIGHT },
                       }}
-                      isLive={false}
-                      isUTC={false}
-                      setIsUTC={() => {}}
-                      onPropertySearchClick={() => {}}
-                    />
+                    >
+                      <Box p="md" py="sm">
+                        <KubeTimeline q={`k8s.pod.name:"${podName}"`} />
+                      </Box>
+                    </ScrollArea>
                   </Card.Section>
                 </Card>
               </Grid.Col>
diff --git a/packages/app/src/ServiceDashboardPage.tsx b/packages/app/src/ServiceDashboardPage.tsx
index 47a87f90e..413039009 100644
--- a/packages/app/src/ServiceDashboardPage.tsx
+++ b/packages/app/src/ServiceDashboardPage.tsx
@@ -11,6 +11,7 @@ import {
   Flex,
   Grid,
   Group,
+  ScrollArea,
   Select,
   Skeleton,
   Table,
@@ -155,74 +156,80 @@ const InfraPodsStatusTable = ({
         Pods
       </Card.Section>
       <Card.Section>
-        {isError ? (
-          <div className="p-4 text-center text-slate-500 fs-8">
-            Unable to load pod metrics
-          </div>
-        ) : (
-          <Table horizontalSpacing="md" highlightOnHover>
-            <thead className="muted-thead">
-              <tr>
-                <th>Name</th>
-                <th style={{ width: 100 }}>Restarts</th>
-                {/* <th style={{ width: 120 }}>Age</th> */}
-                <th style={{ width: 100 }}>CPU Avg</th>
-                <th style={{ width: 100 }}>Mem Avg</th>
-                <th style={{ width: 130 }}>Status</th>
-              </tr>
-            </thead>
-            {isLoading ? (
-              <tbody>
-                {Array.from({ length: 4 }).map((_, index) => (
-                  <tr key={index}>
-                    <td>
-                      <Skeleton height={8} my={6} />
-                    </td>
-                    <td>
-                      <Skeleton height={8} />
-                    </td>
-                    <td>
-                      <Skeleton height={8} />
-                    </td>
-                    <td>
-                      <Skeleton height={8} />
-                    </td>
-                    <td>
-                      <Skeleton height={8} />
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            ) : (
-              <tbody>
-                {data?.data?.map((row: any) => (
-                  <Link key={row.group} href={getLink(row)}>
-                    <tr className="cursor-pointer">
-                      <td>{row.group}</td>
-                      <td>{row['series_0.data']}</td>
-                      {/* <td>{formatDistanceStrict(row['series_1.data'] * 1000, 0)}</td> */}
+        <ScrollArea
+          viewportProps={{
+            style: { maxHeight: 300 },
+          }}
+        >
+          {isError ? (
+            <div className="p-4 text-center text-slate-500 fs-8">
+              Unable to load pod metrics
+            </div>
+          ) : (
+            <Table horizontalSpacing="md" highlightOnHover>
+              <thead className="muted-thead">
+                <tr>
+                  <th>Name</th>
+                  <th style={{ width: 100 }}>Restarts</th>
+                  {/* <th style={{ width: 120 }}>Age</th> */}
+                  <th style={{ width: 100 }}>CPU Avg</th>
+                  <th style={{ width: 100 }}>Mem Avg</th>
+                  <th style={{ width: 130 }}>Status</th>
+                </tr>
+              </thead>
+              {isLoading ? (
+                <tbody>
+                  {Array.from({ length: 4 }).map((_, index) => (
+                    <tr key={index}>
+                      <td>
+                        <Skeleton height={8} my={6} />
+                      </td>
+                      <td>
+                        <Skeleton height={8} />
+                      </td>
                       <td>
-                        {formatNumber(
-                          row['series_2.data'],
-                          K8S_CPU_PERCENTAGE_NUMBER_FORMAT,
-                        )}
+                        <Skeleton height={8} />
                       </td>
                       <td>
-                        {formatNumber(
-                          row['series_3.data'],
-                          K8S_MEM_NUMBER_FORMAT,
-                        )}
+                        <Skeleton height={8} />
                       </td>
                       <td>
-                        <FormatPodStatus status={row['series_4.data']} />
+                        <Skeleton height={8} />
                       </td>
                     </tr>
-                  </Link>
-                ))}
-              </tbody>
-            )}
-          </Table>
-        )}
+                  ))}
+                </tbody>
+              ) : (
+                <tbody>
+                  {data?.data?.map((row: any) => (
+                    <Link key={row.group} href={getLink(row)}>
+                      <tr className="cursor-pointer">
+                        <td>{row.group}</td>
+                        <td>{row['series_0.data']}</td>
+                        {/* <td>{formatDistanceStrict(row['series_1.data'] * 1000, 0)}</td> */}
+                        <td>
+                          {formatNumber(
+                            row['series_2.data'],
+                            K8S_CPU_PERCENTAGE_NUMBER_FORMAT,
+                          )}
+                        </td>
+                        <td>
+                          {formatNumber(
+                            row['series_3.data'],
+                            K8S_MEM_NUMBER_FORMAT,
+                          )}
+                        </td>
+                        <td>
+                          <FormatPodStatus status={row['series_4.data']} />
+                        </td>
+                      </tr>
+                    </Link>
+                  ))}
+                </tbody>
+              )}
+            </Table>
+          )}
+        </ScrollArea>
       </Card.Section>
     </Card>
   );
diff --git a/packages/app/src/components/KubeComponents.tsx b/packages/app/src/components/KubeComponents.tsx
new file mode 100644
index 000000000..a0d12a142
--- /dev/null
+++ b/packages/app/src/components/KubeComponents.tsx
@@ -0,0 +1,155 @@
+import * as React from 'react';
+import { format, sub } from 'date-fns';
+import { Badge, Group, Text, Timeline } from '@mantine/core';
+
+import api from '../api';
+
+type KubeEvent = {
+  id: string;
+  timestamp: string;
+  severity_text?: string;
+  'object.reason'?: string;
+  'object.note'?: string;
+  'object.type'?: string;
+};
+
+type AnchorEvent = {
+  timestamp: string;
+  label: React.ReactNode;
+};
+
+const FORMAT = 'MMM d HH:mm:ss';
+
+const renderKubeEvent = (event: KubeEvent) => {
+  return (
+    <Timeline.Item key={event.id}>
+      <Text size={11} c="gray.6" title={event.timestamp}>
+        {format(new Date(event.timestamp), FORMAT)}
+      </Text>
+      <Group spacing="xs" my={4}>
+        <Text size={12} color="white" fw="bold">
+          {event['object.reason']}
+        </Text>
+        {event['object.type'] && (
+          <Badge
+            size="xs"
+            fw="normal"
+            color={event['object.type'] === 'Normal' ? 'green' : 'yellow'}
+          >
+            {event['object.type']}
+          </Badge>
+        )}
+      </Group>
+      <Text size="xs">{event['object.note']}</Text>
+    </Timeline.Item>
+  );
+};
+
+export const KubeTimeline = ({
+  q,
+  anchorEvent,
+  dateRange,
+}: {
+  q: string;
+  dateRange?: [Date, Date];
+  anchorEvent?: AnchorEvent;
+}) => {
+  const startDate = React.useMemo(
+    () => dateRange?.[0] ?? sub(new Date(), { days: 7 }),
+    [dateRange],
+  );
+  const endDate = React.useMemo(
+    () => dateRange?.[1] ?? new Date(),
+    [dateRange],
+  );
+
+  const { data, isLoading } = api.useLogBatch({
+    q: `k8s.resource.name:"events" ${q}`,
+    limit: 50,
+    startDate,
+    endDate,
+    extraFields: [
+      'object.metadata.creationTimestamp',
+      'object.reason',
+      'object.note',
+      'object.type',
+      'type',
+    ],
+    order: 'desc',
+  });
+
+  const allPodEvents: KubeEvent[] = React.useMemo(
+    () =>
+      (data?.pages?.[0]?.data || []).sort(
+        (a, b) =>
+          new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
+      ),
+    [data],
+  );
+
+  const podEventsBeforeAnchor = React.useMemo(() => {
+    return anchorEvent
+      ? allPodEvents.filter(event => {
+          return new Date(event.timestamp) < new Date(anchorEvent.timestamp);
+        })
+      : [];
+  }, [allPodEvents, anchorEvent]);
+
+  const podEventsAfterAnchor = React.useMemo(() => {
+    return anchorEvent
+      ? allPodEvents.filter(event => {
+          return new Date(event.timestamp) > new Date(anchorEvent.timestamp);
+        })
+      : [];
+  }, [allPodEvents, anchorEvent]);
+
+  // Scroll to anchor event if it exists
+  const anchorRef = React.useCallback(node => {
+    if (node !== null) {
+      // setting block to center causes the entire view to scroll
+      // todo - figure out how to scroll just the timeline and center the anchor event
+      node.scrollIntoView({ block: 'nearest' });
+    }
+  }, []);
+
+  if (isLoading) {
+    return (
+      <Text color="muted" ta="center">
+        Loading...
+      </Text>
+    );
+  }
+
+  if (allPodEvents.length === 0) {
+    return (
+      <Text color="muted" ta="center">
+        No events
+      </Text>
+    );
+  }
+
+  if (anchorEvent) {
+    return (
+      <Timeline bulletSize={12} lineWidth={1}>
+        {podEventsBeforeAnchor.map(renderKubeEvent)}
+        <Timeline.Item key={anchorEvent.timestamp} ref={anchorRef}>
+          <Text size={11} c="gray.6" title={anchorEvent.timestamp}>
+            {format(new Date(anchorEvent.timestamp), FORMAT)}
+          </Text>
+          <Group spacing="xs" my={4}>
+            <Text size={12} color="white" fw="bold">
+              {anchorEvent.label}
+            </Text>
+          </Group>
+        </Timeline.Item>
+        {podEventsAfterAnchor.map(renderKubeEvent)}
+      </Timeline>
+    );
+  } else {
+    return (
+      <Timeline bulletSize={12} lineWidth={1}>
+        {allPodEvents.map(renderKubeEvent)}
+      </Timeline>
+    );
+  }
+};