diff --git a/site/src/components/AuditLog/TimeCell.stories.tsx b/site/src/components/AuditLog/TimeCell.stories.tsx
new file mode 100644
index 0000000000000..8cbae38585658
--- /dev/null
+++ b/site/src/components/AuditLog/TimeCell.stories.tsx
@@ -0,0 +1,15 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { TimeCell, TimeCellProps } from "./TimeCell"
+
+export default {
+  title: "AuditLog/Cells/TimeCell",
+  component: TimeCell,
+} as ComponentMeta<typeof TimeCell>
+
+const Template: Story<TimeCellProps> = (args) => <TimeCell {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  date: new Date(),
+}
diff --git a/site/src/components/AuditLog/TimeCell.tsx b/site/src/components/AuditLog/TimeCell.tsx
new file mode 100644
index 0000000000000..c281afb8205f3
--- /dev/null
+++ b/site/src/components/AuditLog/TimeCell.tsx
@@ -0,0 +1,25 @@
+import Box from "@material-ui/core/Box"
+import Typography from "@material-ui/core/Typography"
+import React from "react"
+
+export interface TimeCellProps {
+  date: Date
+}
+export namespace TimeCellProps {
+  export const displayTime = (props: TimeCellProps): string => {
+    return props.date.toLocaleTimeString()
+  }
+
+  export const displayDate = (props: TimeCellProps): string => {
+    return props.date.toLocaleDateString().replace(/\//g, ".")
+  }
+}
+
+export const TimeCell: React.FC<TimeCellProps> = (props) => {
+  return (
+    <Box display="flex" flexDirection="column">
+      <Typography>{TimeCellProps.displayTime(props)}</Typography>
+      <Typography variant="caption">{TimeCellProps.displayDate(props)}</Typography>
+    </Box>
+  )
+}