diff --git a/src/components/ProfilingControlStack.tsx b/src/components/ProfilingControlStack.tsx
index b2123ca1..b076cdf3 100644
--- a/src/components/ProfilingControlStack.tsx
+++ b/src/components/ProfilingControlStack.tsx
@@ -34,7 +34,7 @@ export function ProfilingControlStack() {
   const [level, setLevel] = useState<ProfilingLevel>()
   const [slowms, setSlowms] = useState(0)
   const [sampleRate, setSampleRate] = useState(0)
-  const { data: profile, revalidate, isValidating } = useCommandProfile()
+  const { data: profile, error, revalidate, isValidating } = useCommandProfile()
   const handleSetProfile = useCallback(
     async () =>
       database && level !== undefined
@@ -141,7 +141,7 @@ export function ProfilingControlStack() {
       styles={{
         root: { height: 52, alignItems: 'center' },
       }}>
-      {hosts.length > 1 ? (
+      {hosts.length > 1 && !error ? (
         <>
           <Label>Host:</Label>
           <DefaultButton
@@ -167,19 +167,23 @@ export function ProfilingControlStack() {
           </DefaultButton>
         </>
       ) : null}
-      <Label>Level:</Label>
-      <Dropdown
-        selectedKey={level}
-        onChange={(_ev, option) => {
-          setLevel(option?.key as ProfilingLevel)
-        }}
-        styles={{ root: { width: 80 } }}
-        options={[
-          { key: ProfilingLevel.OFF, text: 'Off' },
-          { key: ProfilingLevel.SLOW, text: 'Slow' },
-          { key: ProfilingLevel.ALL, text: 'All' },
-        ]}
-      />
+      {error ? null : (
+        <>
+          <Label>Level:</Label>
+          <Dropdown
+            selectedKey={level}
+            onChange={(_ev, option) => {
+              setLevel(option?.key as ProfilingLevel)
+            }}
+            styles={{ root: { width: 80 } }}
+            options={[
+              { key: ProfilingLevel.OFF, text: 'Off' },
+              { key: ProfilingLevel.SLOW, text: 'Slow' },
+              { key: ProfilingLevel.ALL, text: 'All' },
+            ]}
+          />
+        </>
+      )}
       {level === ProfilingLevel.SLOW ? (
         <>
           <SpinButton
@@ -220,7 +224,9 @@ export function ProfilingControlStack() {
         profile?.slowms === slowms &&
         profile?.sampleRate === sampleRate) ||
       isValidating ? null : (
-        <PromiseButton icon="CheckMark" promise={promiseSetProfile} />
+        <div>
+          <PromiseButton icon="CheckMark" promise={promiseSetProfile} />
+        </div>
       )}
       <Stack.Item grow={true}>
         <div />
diff --git a/src/components/ProfilingList.tsx b/src/components/ProfilingList.tsx
index 35eca531..564beb62 100644
--- a/src/components/ProfilingList.tsx
+++ b/src/components/ProfilingList.tsx
@@ -1,15 +1,28 @@
-import { Stack, ContextualMenu, DirectionalHint } from '@fluentui/react'
-import React, { useState } from 'react'
+import { ContextualMenu, DirectionalHint, IColumn } from '@fluentui/react'
+import React, { useState, useCallback } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 
 import { useCommandSystemProfileFind } from '@/hooks/use-command'
 import { actions } from '@/stores'
-import { ProfilingCard } from './ProfilingCard'
+import { DisplayMode, MongoData } from '@/types'
 import { LargeMessage } from './LargeMessage'
-import { EditorModal } from './EditorModal'
+import { Table } from './Table'
+import { TableCell } from './TableCell'
+import { ProfilingModal } from './ProfilingModal'
+
+const order = [
+  'op',
+  'millis',
+  'ts',
+  'keysExamined',
+  'docsExamined',
+  'numYield',
+  'planSummary',
+]
 
 export function ProfilingList() {
   const { data, error } = useCommandSystemProfileFind()
+  const collection = useSelector((state) => state.root.collection)
   const invokedProfiling = useSelector(
     (state) => state.profiling.invokedProfiling,
   )
@@ -17,6 +30,35 @@ export function ProfilingList() {
   const isMenuHidden = useSelector((state) => state.profiling.isMenuHidden)
   const dispatch = useDispatch()
   const [target, setTarget] = useState<MouseEvent>()
+  const handleItemContextMenu = useCallback(
+    (ev: MouseEvent, item?: { [key: string]: MongoData }) => {
+      setTarget(ev)
+      if (item) {
+        dispatch(actions.profiling.setInvokedProfiling(item))
+      }
+      dispatch(actions.profiling.setIsMenuHidden(false))
+    },
+    [dispatch],
+  )
+  const handleItemInvoked = useCallback(
+    (item) => {
+      if (item) {
+        dispatch(actions.profiling.setInvokedProfiling(item))
+      }
+      dispatch(actions.profiling.setIsEditorOpen(true))
+    },
+    [dispatch],
+  )
+  const handleRenderItemColumn = useCallback(
+    (
+      item?: { [key: string]: MongoData },
+      _index?: number,
+      column?: IColumn,
+    ) => {
+      return <TableCell value={item?.[column?.key!]} />
+    },
+    [],
+  )
 
   if (error) {
     return (
@@ -31,15 +73,16 @@ export function ProfilingList() {
   }
   return (
     <>
-      <EditorModal
-        title="View Profile"
-        readOnly={true}
-        value={invokedProfiling}
-        isOpen={isEditorOpen}
-        onDismiss={() => {
-          dispatch(actions.profiling.setIsEditorOpen(false))
-        }}
-      />
+      {invokedProfiling ? (
+        <ProfilingModal
+          title="View Profile"
+          value={invokedProfiling}
+          isOpen={isEditorOpen}
+          onDismiss={() => {
+            dispatch(actions.profiling.setIsEditorOpen(false))
+          }}
+        />
+      ) : null}
       <ContextualMenu
         target={target}
         hidden={isMenuHidden}
@@ -59,24 +102,15 @@ export function ProfilingList() {
           },
         ]}
       />
-      <Stack
-        tokens={{ childrenGap: 20 }}
-        styles={{
-          root: {
-            overflowY: 'scroll',
-            padding: 20,
-            flex: 1,
-            alignItems: 'center',
-          },
-        }}>
-        {data.cursor.firstBatch.map((item, index) => (
-          <ProfilingCard
-            key={index.toString()}
-            value={item}
-            onContectMenu={setTarget}
-          />
-        ))}
-      </Stack>
+      <Table
+        displayMode={DisplayMode.TABLE}
+        items={data.cursor.firstBatch}
+        order={collection === 'system.profile' ? ['ns', ...order] : order}
+        onlyOrder={true}
+        onItemContextMenu={handleItemContextMenu}
+        onItemInvoked={handleItemInvoked}
+        onRenderItemColumn={handleRenderItemColumn}
+      />
     </>
   )
 }
diff --git a/src/components/ProfilingModal.tsx b/src/components/ProfilingModal.tsx
new file mode 100644
index 00000000..e829203d
--- /dev/null
+++ b/src/components/ProfilingModal.tsx
@@ -0,0 +1,124 @@
+/* eslint-disable react/self-closing-comp */
+
+import {
+  Modal,
+  IconButton,
+  getTheme,
+  Text,
+  Stack,
+  DefaultButton,
+} from '@fluentui/react'
+import React, { useState } from 'react'
+import { omit } from 'lodash'
+
+import { MongoData } from '@/types'
+import { ColorizedData } from './ColorizedData'
+import { ExecStage } from './ExecStage'
+
+const tabs = ['execStats', 'command', 'locks']
+
+export function ProfilingModal(props: {
+  title: string
+  value: { [key: string]: MongoData }
+  isOpen: boolean
+  onDismiss(): void
+}) {
+  const theme = getTheme()
+  const [tab, setTab] = useState<string | undefined>(tabs[0])
+
+  return (
+    <>
+      <Modal
+        styles={{
+          scrollableContent: {
+            minWidth: 800,
+            minHeight: 600,
+            width: '80vw',
+            height: '80vh',
+            borderTop: `4px solid ${theme.palette.themePrimary}`,
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+            backgroundColor: theme.palette.neutralLighterAlt,
+          },
+        }}
+        isOpen={props.isOpen}
+        onDismiss={props.onDismiss}
+        onDismissed={() => {
+          setTab(tabs[0])
+        }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: 10,
+            paddingLeft: 20,
+          }}>
+          <Text
+            variant="xLarge"
+            block={true}
+            styles={{
+              root: {
+                alignItems: 'center',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+              },
+            }}>
+            {props.title}
+          </Text>
+          <IconButton
+            styles={{ root: { marginLeft: 10 } }}
+            iconProps={{ iconName: 'Cancel' }}
+            onClick={props.onDismiss}
+          />
+        </div>
+        <Stack
+          horizontal={true}
+          tokens={{ childrenGap: 10 }}
+          styles={{ root: { marginLeft: 20, marginRight: 20 } }}>
+          {tabs.map((t) => (
+            <DefaultButton
+              key={t}
+              text={t}
+              primary={tab === t}
+              onClick={() => {
+                setTab(t)
+              }}
+            />
+          ))}
+          <DefaultButton
+            text="other"
+            primary={tab === undefined}
+            onClick={() => {
+              setTab(undefined)
+            }}
+          />
+        </Stack>
+        <div style={{ flex: 1, margin: 20, overflow: 'scroll' }}>
+          {tab === 'execStats' ? (
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row-reverse',
+                justifyContent: 'flex-end',
+                alignItems: 'center',
+              }}>
+              <ExecStage
+                value={props.value.execStats as { [key: string]: MongoData }}
+              />
+            </div>
+          ) : (
+            <ColorizedData
+              value={
+                tab === undefined ? omit(props.value, tabs) : props.value[tab]
+              }
+              style={{ marginBottom: 20 }}
+            />
+          )}
+        </div>
+      </Modal>
+    </>
+  )
+}
diff --git a/src/components/PromiseButton.tsx b/src/components/PromiseButton.tsx
index f737f8ad..d8543dd8 100644
--- a/src/components/PromiseButton.tsx
+++ b/src/components/PromiseButton.tsx
@@ -22,7 +22,7 @@ export function PromiseButton(props: {
 }) {
   const theme = getTheme()
   const [hidden, setHidden] = useState(true)
-  const { rejected, pending, call } = props.promise
+  const { rejected, pending, call, reset } = props.promise
   useEffect(() => {
     if (rejected) {
       setHidden(false)
@@ -39,9 +39,6 @@ export function PromiseButton(props: {
             title: 'Error',
             subText: rejected?.message,
             showCloseButton: true,
-            onDismiss() {
-              setHidden(true)
-            },
           }}
           modalProps={{
             styles: {
@@ -54,6 +51,9 @@ export function PromiseButton(props: {
             onDismiss() {
               setHidden(true)
             },
+            onDismissed() {
+              reset()
+            },
           }}>
           <DialogFooter>
             <DefaultButton
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 9901380c..44247796 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -25,6 +25,7 @@ export function Table<T extends { [key: string]: MongoData }>(props: {
   displayMode: DisplayMode
   items: T[]
   order?: string[]
+  onlyOrder?: boolean
   onItemInvoked?(item: T): void
   onItemContextMenu?(ev?: MouseEvent, item?: T): void
   onRenderItemColumn(
@@ -40,13 +41,15 @@ export function Table<T extends { [key: string]: MongoData }>(props: {
       return []
     }
     return props.displayMode === DisplayMode.TABLE
-      ? calcHeaders(props.items, props.order).map(({ key, minWidth }) => ({
-          key,
-          name: key,
-          minWidth,
-          columnActionsMode: ColumnActionsMode.disabled,
-          isResizable: true,
-        }))
+      ? calcHeaders(props.items, props.order, props.onlyOrder).map(
+          ({ key, minWidth }) => ({
+            key,
+            name: key,
+            minWidth,
+            columnActionsMode: ColumnActionsMode.disabled,
+            isResizable: true,
+          }),
+        )
       : [
           {
             key: '',
@@ -55,7 +58,7 @@ export function Table<T extends { [key: string]: MongoData }>(props: {
             isMultiline: true,
           },
         ]
-  }, [props.displayMode, props.items, props.order])
+  }, [props.displayMode, props.items, props.order, props.onlyOrder])
   const handleRenderDetailsHeader = useCallback(
     (detailsHeaderProps?: IDetailsHeaderProps) => (
       <Sticky>
diff --git a/src/components/TableCell.tsx b/src/components/TableCell.tsx
new file mode 100644
index 00000000..fbfef5c3
--- /dev/null
+++ b/src/components/TableCell.tsx
@@ -0,0 +1,65 @@
+/* eslint-disable react/no-danger */
+
+import React, { useCallback, useMemo } from 'react'
+import { HoverCard, HoverCardType, getTheme } from '@fluentui/react'
+
+import { stringify } from '@/utils/ejson'
+import { useColorize } from '@/hooks/use-colorize'
+import { MongoData } from '@/types'
+import { ColorizedData } from './ColorizedData'
+
+function PlainCard(props: { value: MongoData }) {
+  const theme = getTheme()
+
+  return (
+    <div
+      style={{
+        padding: 10,
+        maxWidth: 500,
+        maxHeight: 500,
+        overflowY: 'scroll',
+        backgroundColor: theme.palette.neutralLighterAlt,
+      }}>
+      <ColorizedData value={props.value} />
+    </div>
+  )
+}
+
+export const TableCell = React.memo(
+  function TableCell(props: { value: MongoData }) {
+    const theme = getTheme()
+    const str = useMemo(() => stringify(props.value), [props.value])
+    const html = useColorize(str)
+    const onRenderPlainCard = useCallback(() => {
+      return <PlainCard value={props.value} />
+    }, [props.value])
+
+    return str.length > 36 ? (
+      <HoverCard
+        type={HoverCardType.plain}
+        plainCardProps={{
+          onRenderPlainCard,
+        }}
+        styles={{
+          host: {
+            cursor: 'pointer',
+            color: theme.palette.neutralSecondary,
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+          },
+        }}
+        instantOpenOnClick={true}>
+        <span
+          style={{ verticalAlign: 'middle' }}
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </HoverCard>
+    ) : (
+      <span
+        style={{ verticalAlign: 'middle' }}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    )
+  },
+  (prevProps, nextProps) => prevProps.value === nextProps.value,
+)
diff --git a/src/hooks/use-promise.ts b/src/hooks/use-promise.ts
index 45dc4369..24db7333 100644
--- a/src/hooks/use-promise.ts
+++ b/src/hooks/use-promise.ts
@@ -21,6 +21,11 @@ export function usePromise<I extends unknown[], O>(
     },
     [handler],
   )
+  const reset = useCallback(() => {
+    setResolved(undefined)
+    setRejected(undefined)
+    setPending(false)
+  }, [])
   useEffect(() => {
     setResolved(undefined)
     setRejected(undefined)
@@ -31,5 +36,6 @@ export function usePromise<I extends unknown[], O>(
     rejected,
     pending,
     call,
+    reset,
   }
 }
diff --git a/src/utils/table.ts b/src/utils/table.ts
index d46bd775..d142b214 100644
--- a/src/utils/table.ts
+++ b/src/utils/table.ts
@@ -7,22 +7,27 @@ import { stringify } from './ejson'
 
 export function calcHeaders<T extends { [key: string]: MongoData }>(
   items: T[],
-  order?: string[],
+  order: string[] = [],
+  onlyOrder: boolean = false,
 ): { key: string; minWidth: number }[] {
   const keys: { [key: string]: { order: number; minWidth: number } } = {}
   items.forEach((item) => {
     Object.keys(item).forEach((key) => {
       if (!keys[key] && order) {
         const index = order.indexOf(key)
-        keys[key] = {
-          order: index >= 0 ? (order.length - index) << 10 : 0,
-          minWidth: Math.max(
-            100,
-            Math.min(240, stringify(item[key]).length << 3),
-          ),
+        if (index >= 0 || !onlyOrder) {
+          keys[key] = {
+            order: index >= 0 ? (order.length - index) << 10 : 0,
+            minWidth: Math.max(
+              100,
+              Math.min(240, stringify(item[key]).length << 3),
+            ),
+          }
         }
       }
-      keys[key].order += 1
+      if (keys[key]) {
+        keys[key].order += 1
+      }
     })
   })
   return sortBy(Object.entries(keys), (k) => k[1].order)