diff --git a/apps/studio/components/grid/components/formatter/DateTimeFormatter.tsx b/apps/studio/components/grid/components/formatter/DateTimeFormatter.tsx
new file mode 100644
index 0000000000000..5c8d22067e987
--- /dev/null
+++ b/apps/studio/components/grid/components/formatter/DateTimeFormatter.tsx
@@ -0,0 +1,26 @@
+import { SupaColumn, SupaRow } from 'components/grid/types'
+import { RenderCellProps } from 'react-data-grid'
+import { NullValue } from '../common/NullValue'
+import { EmptyValue } from '../common/EmptyValue'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+dayjs.extend(customParseFormat)
+
+export const DateTimeFormatter = (
+  p: React.PropsWithChildren<RenderCellProps<SupaRow, unknown>> & { columnDef: SupaColumn }
+) => {
+  let value = p.row[p.column.key]
+  if (value === null) return <NullValue />
+  if (value === '') return <EmptyValue />
+
+  const INPUT_FORMAT = 'YYYY-MM-DDTHH:mm:ssZ'
+
+  const OUTPUT_FORMAT = 'YYYY-MM-DD HH:mm:ss'
+
+  if (p.columnDef.format.endsWith('z')) {
+    return dayjs(value, INPUT_FORMAT).format(OUTPUT_FORMAT)
+  } else {
+    return value
+  }
+}
diff --git a/apps/studio/components/grid/components/formatter/TimeFormatter.tsx b/apps/studio/components/grid/components/formatter/TimeFormatter.tsx
new file mode 100644
index 0000000000000..d2512bdb490e4
--- /dev/null
+++ b/apps/studio/components/grid/components/formatter/TimeFormatter.tsx
@@ -0,0 +1,26 @@
+import { SupaColumn, SupaRow } from 'components/grid/types'
+import { RenderCellProps } from 'react-data-grid'
+import { NullValue } from '../common/NullValue'
+import { EmptyValue } from '../common/EmptyValue'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+dayjs.extend(customParseFormat)
+
+export const TimeFormatter = (
+  p: React.PropsWithChildren<RenderCellProps<SupaRow, unknown>> & { columnDef: SupaColumn }
+) => {
+  let value = p.row[p.column.key]
+  if (value === null) return <NullValue />
+  if (value === '') return <EmptyValue />
+
+  const INPUT_FORMAT = 'HH:mm:ssZZ'
+
+  const OUTPUT_FORMAT = 'HH:mm:ss'
+
+  if (p.columnDef.format.endsWith('z')) {
+    return dayjs(value, INPUT_FORMAT).format(OUTPUT_FORMAT)
+  } else {
+    return value
+  }
+}
diff --git a/apps/studio/components/grid/utils/gridColumns.tsx b/apps/studio/components/grid/utils/gridColumns.tsx
index 4e81fe47a070c..57154983c4a14 100644
--- a/apps/studio/components/grid/utils/gridColumns.tsx
+++ b/apps/studio/components/grid/utils/gridColumns.tsx
@@ -13,6 +13,8 @@ import { BooleanFormatter } from '../components/formatter/BooleanFormatter'
 import { DefaultFormatter } from '../components/formatter/DefaultFormatter'
 import { ForeignKeyFormatter } from '../components/formatter/ForeignKeyFormatter'
 import { JsonFormatter } from '../components/formatter/JsonFormatter'
+import { TimeFormatter } from '../components/formatter/TimeFormatter'
+import { DateTimeFormatter } from '../components/formatter/DateTimeFormatter'
 import { AddColumn } from '../components/grid/AddColumn'
 import { ColumnHeader } from '../components/grid/ColumnHeader'
 import { SelectColumn } from '../components/grid/SelectColumn'
@@ -206,6 +208,12 @@ function getCellRenderer(
     case 'json': {
       return JsonFormatter
     }
+    case 'time': {
+      return (p: any) => <TimeFormatter {...p} columnDef={columnDef} />
+    }
+    case 'datetime': {
+      return (p: any) => <DateTimeFormatter {...p} columnDef={columnDef} />
+    }
     default: {
       return DefaultFormatter
     }