diff --git a/apps/zui/scripts/start.js b/apps/zui/scripts/start.js
index 1e5314b506..2d90f55f4d 100644
--- a/apps/zui/scripts/start.js
+++ b/apps/zui/scripts/start.js
@@ -10,7 +10,7 @@ async function start() {
   const renderer = sub("yarn", `start:renderer`)
   await Promise.all([
     main.waitForOutput(/watching for changes/),
-    renderer.waitForOutput(/compiled client and server successfully/),
+    renderer.waitForOutput(/started server on/),
   ])
   log("Launching...")
   sub("yarn", `start:electron ${electronArgs}`).p.on("exit", () => {
diff --git a/apps/zui/src/app/features/right-pane/history/history-item.tsx b/apps/zui/src/app/features/right-pane/history/history-item.tsx
index 7606e748a6..89db93d39b 100644
--- a/apps/zui/src/app/features/right-pane/history/history-item.tsx
+++ b/apps/zui/src/app/features/right-pane/history/history-item.tsx
@@ -36,6 +36,7 @@ const BG = styled.div`
 
 const Text = styled.p`
   font-family: var(--mono-font);
+  font-size: var(--step--1);
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
diff --git a/apps/zui/src/app/features/sidebar/item.tsx b/apps/zui/src/app/features/sidebar/item.tsx
index a5c48d1f96..95723f837f 100644
--- a/apps/zui/src/app/features/sidebar/item.tsx
+++ b/apps/zui/src/app/features/sidebar/item.tsx
@@ -68,7 +68,7 @@ const BG = styled.div`
   &[aria-selected="true"] {
     border-radius: 0;
     outline: none;
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow-s);
     background: var(--selected-bg);
 
     svg {
diff --git a/apps/zui/src/app/features/sidebar/lake-picker.tsx b/apps/zui/src/app/features/sidebar/lake-picker.tsx
index 6926eea01d..36d0948fb7 100644
--- a/apps/zui/src/app/features/sidebar/lake-picker.tsx
+++ b/apps/zui/src/app/features/sidebar/lake-picker.tsx
@@ -21,32 +21,12 @@ const LakeNameGroup = styled.div`
   border-radius: 6px;
   min-width: 0;
   position: relative;
-
+  transition: all var(--dur-s);
   &:hover {
-    background: var(--sidebar-item-hover);
+    background: var(--emphasis-bg);
   }
   &:active {
-    background: var(--sidebar-item-active);
-    box-shadow: var(--sidebar-item-active-shadow);
-  }
-`
-
-const NameColumn = styled.div`
-  overflow: hidden;
-  label {
-    display: block;
-    font-size: 15px;
-    font-weight: bold;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  label:last-child {
-    font-size: 12px;
-    font-weight: normal;
-    font-family: var(--mono-font);
-    opacity: 0.5;
+    background: var(--emphasis-bg-more);
   }
 `
 
@@ -85,10 +65,10 @@ export default function LakePicker() {
 
   return (
     <LakeNameGroup onClick={() => dispatch(showLakeSelectMenu())}>
-      <NameColumn>
-        <label>{`${current?.name}`}</label>
-        <label>{`${current?.getAddress()}`}</label>
-      </NameColumn>
+      <div className="overflow:hidden">
+        <p className="overflow:ellipsis weight:bold">{`${current?.name}`}</p>
+        <p className="overflow:ellipsis font:mono font-size:-2 color:fg-less">{`${current?.getAddress()}`}</p>
+      </div>
     </LakeNameGroup>
   )
 }
diff --git a/apps/zui/src/app/features/sidebar/queries-section/empty.tsx b/apps/zui/src/app/features/sidebar/queries-section/empty.tsx
deleted file mode 100644
index a9f8485dec..0000000000
--- a/apps/zui/src/app/features/sidebar/queries-section/empty.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react"
-import {Icon} from "src/components/icon"
-import EmptySection from "src/js/components/common/EmptySection"
-import styled from "styled-components"
-
-export const Empty = styled(EmptySection).attrs({
-  icon: <Icon name="query" />,
-})``
diff --git a/apps/zui/src/app/features/sidebar/queries-section/index.tsx b/apps/zui/src/app/features/sidebar/queries-section/index.tsx
index f8fc789b34..aab06dfca0 100644
--- a/apps/zui/src/app/features/sidebar/queries-section/index.tsx
+++ b/apps/zui/src/app/features/sidebar/queries-section/index.tsx
@@ -19,6 +19,7 @@ export function QueriesSection() {
       </Content>
       <Toolbar>
         <ToolbarTabs
+          name="querySource"
           options={[
             {
               label: "Local",
diff --git a/apps/zui/src/app/features/sidebar/queries-section/queries-tree.tsx b/apps/zui/src/app/features/sidebar/queries-section/queries-tree.tsx
index dacfb5aaf7..00b4c31787 100644
--- a/apps/zui/src/app/features/sidebar/queries-section/queries-tree.tsx
+++ b/apps/zui/src/app/features/sidebar/queries-section/queries-tree.tsx
@@ -16,9 +16,9 @@ import {FillFlexParent} from "src/components/fill-flex-parent"
 import QueryItem from "./query-item"
 import {selectQuery} from "src/app/events/select-query-event"
 import Appearance from "src/js/state/Appearance"
-import {Empty} from "./empty"
 import {TREE_ITEM_HEIGHT} from "../item"
 import {showMenu} from "src/core/menu"
+import EmptySection from "src/js/components/common/EmptySection"
 
 type Props = {
   source: "local" | "remote"
@@ -41,7 +41,9 @@ function LocalQueriesTree({searchTerm}: Props) {
   if (queries.length) {
     return <QueryTree queries={queries} searchTerm={searchTerm} type="local" />
   } else {
-    return <Empty message="Local queries you've saved will be listed here." />
+    return (
+      <EmptySection message="Local queries you've saved will be listed here." />
+    )
   }
 }
 
@@ -54,7 +56,9 @@ function RemoteQueriesTree({searchTerm}) {
   if (queries.length) {
     return <QueryTree queries={queries} searchTerm={searchTerm} type="remote" />
   } else {
-    return <Empty message="Remove queries from the lake will be listed here." />
+    return (
+      <EmptySection message="Remote queries from the lake will be listed here." />
+    )
   }
 }
 
diff --git a/apps/zui/src/app/router/routes.ts b/apps/zui/src/app/router/routes.ts
index aa16057a2a..5d38d39a5b 100644
--- a/apps/zui/src/app/router/routes.ts
+++ b/apps/zui/src/app/router/routes.ts
@@ -8,51 +8,53 @@ import {IconName} from "../../components/icon"
  */
 
 export const root: Route = {
+  name: "root",
   path: "/",
   title: "Zui",
 }
 
 export const poolShow: Route = {
+  name: "poolShow",
   title: "<pool>",
   path: `/pools/:poolId`,
   icon: "pool",
 }
 
 export const query: Route = {
+  name: "querySession",
   title: "<query>",
   path: `/queries/:queryId`,
   icon: "query",
 }
+
 export const queryVersion: Route = {
+  name: "querySession",
   title: "<query>",
   path: `${query.path}/versions/:version`,
   icon: "query",
 }
-export const lakeReleaseNotes: Route = {
+export const releaseNotes: Route = {
+  name: "releaseNotes",
   title: "Release Notes",
   path: `/release-notes`,
   icon: "doc_plain",
 }
 
-export const releaseNotes: Route = {
-  title: "Release Notes",
-  path: "/release-notes",
-}
-
 export const welcome: Route = {
+  name: "welcome",
   title: "Welcome to Zui",
   path: "/welcome",
   icon: "zui",
 }
 
 type Route = {
+  name: string
   title: string
   path: string
   icon?: IconName
 }
 
 export const allRoutes: Route[] = [
-  lakeReleaseNotes,
   poolShow,
   query,
   queryVersion,
diff --git a/apps/zui/src/app/routes/app-wrapper/app-modals.tsx b/apps/zui/src/app/routes/app-wrapper/app-modals.tsx
index 9a13b033c1..40c4bf9c08 100644
--- a/apps/zui/src/app/routes/app-wrapper/app-modals.tsx
+++ b/apps/zui/src/app/routes/app-wrapper/app-modals.tsx
@@ -4,19 +4,15 @@ import {Tooltip} from "src/components/tooltip"
 import ErrorNotice from "src/js/components/ErrorNotice"
 import HTMLContextMenu from "src/js/components/HTMLContextMenu"
 import {Modals} from "src/js/components/Modals"
-import {PreferencesModal} from "src/views/preferences-modal"
-import {LoadPane} from "src/views/load-pane"
 
 export function AppModals() {
   return (
     <>
       <ErrorNotice />
-      <PreferencesModal />
       <Modals />
       <HTMLContextMenu />
       <Toaster />
       <Tooltip />
-      <LoadPane />
     </>
   )
 }
diff --git a/apps/zui/src/app/routes/app-wrapper/main-area.tsx b/apps/zui/src/app/routes/app-wrapper/main-area.tsx
index a92117d60d..6c34d6dc62 100644
--- a/apps/zui/src/app/routes/app-wrapper/main-area.tsx
+++ b/apps/zui/src/app/routes/app-wrapper/main-area.tsx
@@ -18,7 +18,7 @@ const BG = styled.main`
   margin: 10px;
   margin-top: 0;
   border-radius: 6px;
-  box-shadow: var(--shadow-small);
+  box-shadow: var(--shadow-s);
   border: 1px solid var(--border-color);
 
   @media (prefers-color-scheme: light) {
diff --git a/apps/zui/src/components/case.tsx b/apps/zui/src/components/case.tsx
new file mode 100644
index 0000000000..23b142f71c
--- /dev/null
+++ b/apps/zui/src/components/case.tsx
@@ -0,0 +1,7 @@
+export function Case(props: {if: boolean; true: any; false: any}) {
+  if (props.if) {
+    return props.true
+  } else {
+    return props.false
+  }
+}
diff --git a/apps/zui/src/components/dialog/index.tsx b/apps/zui/src/components/dialog/index.tsx
index 0cd9fc1c6f..4de0d212fa 100644
--- a/apps/zui/src/components/dialog/index.tsx
+++ b/apps/zui/src/components/dialog/index.tsx
@@ -1,15 +1,17 @@
-import {HTMLAttributes, MouseEventHandler} from "react"
+import {MouseEventHandler, forwardRef} from "react"
 import {useOpener} from "./use-opener"
 import {useOutsideClick} from "./use-outside-click"
 import useCallbackRef from "src/js/components/hooks/useCallbackRef"
 import {omit} from "lodash"
-import {call} from "src/util/call"
 import {useFixedPosition} from "src/util/hooks/use-fixed-position"
+import mergeRefs from "src/app/core/utils/merge-refs"
+import useListener from "src/js/components/hooks/useListener"
+import {call} from "src/util/call"
 
 export type DialogProps = {
   isOpen: boolean
-  onClose?: () => void
-  onCancel?: () => void
+  onClose?: (e: any) => any
+  onCancel?: (e: any) => any
   modal?: boolean
   onOutsideClick?: (e: globalThis.MouseEvent) => void
   onClick?: MouseEventHandler<HTMLDialogElement>
@@ -20,7 +22,7 @@ export type DialogProps = {
   dialogPoint?: string
   dialogMargin?: string
   keepOnScreen?: boolean
-} & HTMLAttributes<HTMLDialogElement>
+}
 
 const nonHTMLProps: (keyof DialogProps)[] = [
   "isOpen",
@@ -34,10 +36,12 @@ const nonHTMLProps: (keyof DialogProps)[] = [
   "keepOnScreen",
 ]
 
-export function Dialog(props: DialogProps) {
+export const Dialog = forwardRef(function Dialog(props: DialogProps, ref) {
   const [node, setNode] = useCallbackRef<HTMLDialogElement>()
   useOpener(node, props) // Make sure we open it before positioning it
   useOutsideClick(node, props)
+
+  // Get this out of here
   const style = useFixedPosition({
     anchor: props.anchor,
     anchorPoint: props.anchorPoint,
@@ -46,27 +50,23 @@ export function Dialog(props: DialogProps) {
     targetMargin: props.dialogMargin,
   })
 
-  function onClose(e) {
-    e.preventDefault()
-    call(props.onClose)
-  }
+  // When you click escape, "cancel" is fired, then close
+  useListener(node, "cancel", (e) => {
+    call(props.onCancel, e)
+  })
 
-  function onCancel(e) {
-    e.preventDefault()
-    call(props.onCancel)
-    call(props.onClose)
-  }
+  // When you call .close() "close" fires
+  useListener(node, "close", (e) => {
+    call(props.onClose, e)
+  })
 
   return (
     <dialog
-      // @ts-ignore
-      onClose={onClose}
-      onCancel={onCancel}
-      ref={setNode}
+      ref={mergeRefs(setNode, ref)}
       style={{...style, position: "fixed"}}
       {...omit(props, ...nonHTMLProps)}
     >
       {props.children}
     </dialog>
   )
-}
+})
diff --git a/apps/zui/src/components/drag-anchor.tsx b/apps/zui/src/components/drag-anchor.tsx
index d07c21e93a..d1c8cf92de 100644
--- a/apps/zui/src/components/drag-anchor.tsx
+++ b/apps/zui/src/components/drag-anchor.tsx
@@ -82,20 +82,37 @@ type Props = {
 export default class DragAnchor extends React.Component<Props> {
   private startX: number
   private startY: number
+  private cleanup = () => {}
 
   componentWillUnmount() {
     this.up()
   }
 
   down = (e: React.MouseEvent) => {
+    const body = document.body
+    const el = e.currentTarget
     this.startX = e.clientX
     this.startY = e.clientY
-    const body = document.body
     body.style.cursor = this.getCursor()
     body.style.userSelect = "none"
     body.classList.add("is-dragging")
+    el.classList.add("is-dragging")
     document.addEventListener("mousemove", this.move)
     document.addEventListener("mouseup", this.up)
+
+    this.cleanup = () => {
+      document.removeEventListener("mousemove", this.move)
+      document.removeEventListener("mouseup", this.up)
+      if (body) {
+        body.style.cursor = ""
+        body.style.userSelect = ""
+        body.classList.remove("is-dragging")
+      }
+      if (el) {
+        el.classList.remove("is-dragging")
+      }
+    }
+
     call(this.props.onStart, e)
   }
 
@@ -106,14 +123,7 @@ export default class DragAnchor extends React.Component<Props> {
   }
 
   up = () => {
-    const body = document.body
-    if (body) {
-      body.style.cursor = ""
-      body.style.userSelect = ""
-      body.classList.remove("is-dragging")
-      document.removeEventListener("mousemove", this.move)
-      document.removeEventListener("mouseup", this.up)
-    }
+    this.cleanup()
     call(this.props.onEnd)
   }
 
diff --git a/apps/zui/src/components/forms.module.css b/apps/zui/src/components/forms.module.css
index 9e4e5b344c..8a187facb5 100644
--- a/apps/zui/src/components/forms.module.css
+++ b/apps/zui/src/components/forms.module.css
@@ -1,27 +1,19 @@
-.form label {
-  display: block;
-  font-weight: bold;
-  padding-left: var(--form-border-radius);
-}
-
 .form input,
 .form textarea,
 .form select {
   display: block;
   width: 100%;
   max-width: 100%;
-  overflow: hidden;
-  height: var(--form-height);
   border-radius: var(--form-border-radius);
   background: var(--form-bg-color);
   border: var(--form-border);
   line-height: var(--form-line-height);
-  padding: var(--form-padding);
+  padding: var(--s-2);
 }
 
-.form input:focus-visible {
-  outline: none;
-  border-color: var(--primary-color);
+.form select {
+  width: auto;
+  padding-inline-end: var(--s3);
 }
 
 .form input:disabled {
@@ -156,16 +148,42 @@
 }
 
 .form .radioInput {
-  display: grid;
-  grid-template-columns: 1.1em auto;
+  display: inline-flex;
   align-items: center;
-  padding-top: 0;
-  padding: var(--form-padding);
-  height: 1.6em;
+  cursor: pointer;
+  padding-inline: var(--s-4);
+  border-radius: var(--form-border-radius);
+  transition: all 200ms;
+}
+
+.form .radioInput:hover:has(input:not(:checked)) {
+  background: var(--form-bg-color);
+}
+
+.form .radioInput:hover label {
+  color: var(--fg-color);
+}
+
+.form .radioInput input {
+  min-height: auto;
+  height: var(--s1);
+  width: var(--s1);
+  cursor: pointer;
 }
 
 .form .radioInput label {
-  font-weight: 400;
+  font-size: var(--s0);
+  text-transform: none;
+  color: var(--fg-color-less);
+  letter-spacing: 0;
+  font-weight: 700;
+  cursor: pointer;
+  user-select: none;
+  padding: var(--s-2);
+}
+
+.form .radioInput:has(input:checked) label {
+  color: var(--fg-color);
 }
 
 .form .submission {
@@ -183,8 +201,3 @@
   flex-direction: column;
   gap: 10px;
 }
-
-.form input[readonly] {
-  border: none;
-  padding: 0 var(--form-border-radius);
-}
diff --git a/apps/zui/src/components/full-modal.tsx b/apps/zui/src/components/full-modal.tsx
new file mode 100644
index 0000000000..2aa6602f54
--- /dev/null
+++ b/apps/zui/src/components/full-modal.tsx
@@ -0,0 +1,43 @@
+import {Ref, forwardRef} from "react"
+import {useDialog} from "./use-dialog"
+import {useDebut} from "src/modules/debut/react"
+import {hideModal} from "src/domain/window/handlers"
+
+export function useFullModal() {
+  const debut = useDebut("full-modal")
+  const dialog = useDialog({
+    onMount: async () => {
+      dialog.showModal()
+      debut.enter()
+    },
+    beforeClose: () => debut.exit(),
+    onClose: () => hideModal(),
+  })
+  return dialog
+}
+
+type Props = {
+  children: any
+}
+
+export const FullModal = forwardRef(function FullModal(
+  props: Props,
+  ref: Ref<any>
+) {
+  return (
+    <dialog
+      ref={ref}
+      className="full-modal size:viewport bg:normal z:2"
+      data-debut="full-modal:shrink-in"
+      style={
+        {
+          "--dur": "800ms",
+          "--ease": "var(--emphasis-easing)",
+          "--scale-from": 1.2,
+        } as any
+      }
+    >
+      {props.children}
+    </dialog>
+  )
+})
diff --git a/apps/zui/src/components/icon-button.tsx b/apps/zui/src/components/icon-button.tsx
index b541183a1a..df87f38827 100644
--- a/apps/zui/src/components/icon-button.tsx
+++ b/apps/zui/src/components/icon-button.tsx
@@ -49,7 +49,6 @@ const BG = styled.button`
     padding: 0 8px;
     border: 1px solid var(--border-color-more);
     font-weight: 500;
-    font-size: 14px;
     height: 28px;
   }
 `
diff --git a/apps/zui/src/components/modal.tsx b/apps/zui/src/components/modal.tsx
deleted file mode 100644
index 894db0485a..0000000000
--- a/apps/zui/src/components/modal.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import styles from "./modals.module.css"
-import {Debut, useDebut} from "src/components/debut"
-import {Dialog} from "src/components/dialog"
-
-export function Modal(props: {children: any; onClose: () => any}) {
-  const debut = useDebut({afterExit: props.onClose})
-
-  return (
-    <Debut {...debut.props} classNames="modal">
-      <Dialog
-        onClose={() => debut.exit()}
-        dialogPoint="center center"
-        isOpen={true}
-        className={styles.modal}
-        modal
-      >
-        {props.children}
-      </Dialog>
-    </Debut>
-  )
-}
diff --git a/apps/zui/src/components/modals.module.css b/apps/zui/src/components/modals.module.css
deleted file mode 100644
index 55c4f45e58..0000000000
--- a/apps/zui/src/components/modals.module.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.modal {
-    background: var(--bg-color);
-    box-shadow: 0 20px 50px 10px rgb(0 0 0 /0.25);
-    border-radius: 8px;
-    border: none;
-    padding: 0;
-    will-change: opacity, transform;
-    color: var(--fg-color);
-}
-
-.modal::backdrop {
-    background-color: black;
-    opacity: 0.25;
-    will-change: opacity;
-}
-
-@media (prefers-color-scheme: dark) {
-    .modal::backdrop {
-        opacity: 0.8;
-    }
-
-    .modal {
-        border: 1px solid var(--border-color);
-    }
-}
-
-.modal .form {
-    padding: 0 30px 30px 30px;
-    width: 360px;
-}
-
-.modal .fields {
-    display: flex;
-    flex-direction: column;
-    gap: 18px;
-}
-
-.modal .submission {
-    margin-top: calc(var(--form-field-gap) * 4);
-}
-
-.modal .title {
-    text-align: center;
-    margin: 20px 0 30px 0;
-}
-
-.modal .pre {
-    overflow-x: visible;
-    overflow-y: visible;
-    padding: 12px var(--form-border-radius);
-}
diff --git a/apps/zui/src/components/popover-modal.tsx b/apps/zui/src/components/popover-modal.tsx
new file mode 100644
index 0000000000..df12d6c18b
--- /dev/null
+++ b/apps/zui/src/components/popover-modal.tsx
@@ -0,0 +1,48 @@
+import {CSSProperties, Ref, forwardRef} from "react"
+import {hideModal} from "src/domain/window/handlers"
+import {useDialog} from "./use-dialog"
+import {useDebut} from "src/modules/debut/react"
+import classNames from "classnames"
+
+export function usePopoverModal() {
+  const debut = useDebut("popover")
+  const dialog = useDialog({
+    onMount: async () => {
+      dialog.showModal()
+      debut.enter()
+    },
+    beforeClose: () => debut.exit(),
+    onClose: () => hideModal(),
+  })
+  return dialog
+}
+
+type Props = {
+  children: any
+  className?: string
+  style?: CSSProperties
+}
+
+export const PopoverModal = forwardRef(function PopoverModal(
+  props: Props,
+  ref: Ref<any>
+) {
+  return (
+    <dialog
+      ref={ref}
+      data-debut="popover:overlay"
+      className="with-popover size:viewport bg:backdrop z:2 box-s"
+    >
+      <div
+        style={props.style}
+        data-debut="popover:drop-in"
+        className={classNames(
+          props.className,
+          "width:full bg:normal shadow:l radius:l border:solid"
+        )}
+      >
+        {props.children}
+      </div>
+    </dialog>
+  )
+})
diff --git a/apps/zui/src/components/show.tsx b/apps/zui/src/components/show.tsx
new file mode 100644
index 0000000000..d7b38605e8
--- /dev/null
+++ b/apps/zui/src/components/show.tsx
@@ -0,0 +1,18 @@
+import {useEffect, useState} from "react"
+
+export function Show(props: {when: boolean; children: any; delay?: number}) {
+  const [show, setShow] = useState(props.when)
+  useEffect(() => {
+    let id = null
+    if (props.when !== show) {
+      id = setTimeout(() => {
+        setShow(props.when)
+      }, props.delay)
+    }
+    return () => {
+      clearTimeout(id)
+    }
+  }, [props.when, props.delay, show])
+  if (show) return props.children
+  else return null
+}
diff --git a/apps/zui/src/components/toolbar-tabs.module.css b/apps/zui/src/components/toolbar-tabs.module.css
index 41c18a2a70..c57749261d 100644
--- a/apps/zui/src/components/toolbar-tabs.module.css
+++ b/apps/zui/src/components/toolbar-tabs.module.css
@@ -1,7 +1,6 @@
 .tabs {
-  height: 26px;
-  display: flex;
-  align-items: center;
+  min-height: 26px;
+  display: inline-flex;
   position: relative;
   background: var(--chrome-color);
   border-radius: 6px;
@@ -12,7 +11,7 @@
   align-items: center;
   min-width: 0;
   padding: 2px;
-  height: 100%;
+  min-height: 100%;
   gap: 0.25rem;
 }
 
diff --git a/apps/zui/src/components/toolbar-tabs.tsx b/apps/zui/src/components/toolbar-tabs.tsx
index 440f265fef..fbe941542d 100644
--- a/apps/zui/src/components/toolbar-tabs.tsx
+++ b/apps/zui/src/components/toolbar-tabs.tsx
@@ -1,13 +1,43 @@
-import React, {useLayoutEffect, useRef, useState} from "react"
+import React, {
+  CSSProperties,
+  Fragment,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react"
 import {MenuItem} from "src/core/menu"
 import styles from "./toolbar-tabs.module.css"
 import {Icon} from "src/components/icon"
 import {call} from "src/util/call"
 
+function isScaled(el) {
+  const diff = el.clientWidth - el.getBoundingClientRect().width
+  return Math.floor(Math.abs(diff)) !== 0
+}
+
+let time = null
+function startTimer() {
+  if (time === null) time = new Date()
+}
+
+function cancelTimer() {
+  time = null
+}
+
+function checkTimer() {
+  const ellapsed = new Date().getTime() - time.getTime()
+  console.log(ellapsed)
+  if (ellapsed > 10 * 1000) {
+    throw new Error("Expected Scaling to Be Finished After 10 Seconds")
+  }
+}
+
 export function ToolbarTabs(props: {
   onlyIcon?: boolean
   labelClassName?: string
+  name: string
   options: MenuItem[]
+  style?: CSSProperties
 }) {
   const changeCount = useRef(0)
   const ref = useRef<HTMLDivElement>()
@@ -17,6 +47,16 @@ export function ToolbarTabs(props: {
   function run() {
     const el = ref.current
     if (el) {
+      if (isScaled(el)) {
+        // Warn the developer if this remains scaled for longer than 10s
+        startTimer()
+        checkTimer()
+        // We're being scaled, run this again after the transition completes
+        requestAnimationFrame(run)
+      } else {
+        cancelTimer()
+      }
+
       const parent = el.getBoundingClientRect()
       const pressed = el.querySelector(`[aria-pressed="true"]`)
       if (pressed) {
@@ -31,27 +71,38 @@ export function ToolbarTabs(props: {
   useLayoutEffect(run, [pressedIndex, props.onlyIcon])
 
   return (
-    <div className={styles.tabs}>
+    <div className={styles.tabs} style={props.style}>
       <nav className={styles.nav} ref={ref}>
         {props.options.map((opts, i) => (
-          <button
-            data-tooltip={props.onlyIcon ? opts.label : null}
-            className={styles.button}
-            key={opts.id ?? i}
-            onClick={() => {
-              changeCount.current += 1
-              call(opts.click)
-            }}
-            aria-pressed={opts.checked}
-            aria-label={opts.label}
-            data-section-tab-value={opts.label.toLowerCase()}
-            disabled={opts.enabled === false}
-          >
-            {opts.iconName && <Icon name={opts.iconName} size="14px" />}
-            {!props.onlyIcon && (
-              <span className={props.labelClassName}>{opts.label}</span>
-            )}
-          </button>
+          <Fragment key={opts.id ?? i}>
+            <input
+              type="radio"
+              name={props.name}
+              id={props.name + "_" + opts.label}
+              value={opts.label}
+              style={{display: "none"}}
+              checked={opts.checked}
+              readOnly
+            />
+            <button
+              type="button"
+              data-tooltip={props.onlyIcon ? opts.label : null}
+              className={styles.button}
+              onClick={() => {
+                changeCount.current += 1
+                call(opts.click)
+              }}
+              aria-pressed={opts.checked}
+              aria-label={opts.label}
+              data-section-tab-value={opts.label.toLowerCase()}
+              disabled={opts.enabled === false}
+            >
+              {opts.iconName && <Icon name={opts.iconName} size="14px" />}
+              {!props.onlyIcon && (
+                <span className={props.labelClassName}>{opts.label}</span>
+              )}
+            </button>
+          </Fragment>
         ))}
       </nav>
       <div
diff --git a/apps/zui/src/components/tooltip.tsx b/apps/zui/src/components/tooltip.tsx
index c3263360df..9270aa94c4 100644
--- a/apps/zui/src/components/tooltip.tsx
+++ b/apps/zui/src/components/tooltip.tsx
@@ -32,7 +32,7 @@ export function Tooltip() {
   useListener(document.body, "mouseover", (e: any) => {
     const node = findAncestor(e.target, needsTooltip)
     if (node) set(node)
-    else debut.exit()
+    else if (!debut.isExiting) debut.exit()
   })
 
   const style = useFixedPosition({
diff --git a/apps/zui/src/components/use-dialog.ts b/apps/zui/src/components/use-dialog.ts
new file mode 100644
index 0000000000..b212887e65
--- /dev/null
+++ b/apps/zui/src/components/use-dialog.ts
@@ -0,0 +1,52 @@
+import {useCallback, useLayoutEffect, useRef} from "react"
+import {call} from "src/util/call"
+import {useDocListener} from "src/util/hooks/use-doc-listener"
+import {useRefListener} from "src/util/hooks/use-ref-listener"
+
+type Options = {
+  onMount?: () => any
+  beforeClose?: () => any
+  onClose?: (e: CloseEvent) => any
+  onCancel?: () => any
+}
+
+export function useDialog(opts: Options = {}) {
+  const ref = useRef<HTMLDialogElement>()
+
+  async function close() {
+    const result = await call(opts.beforeClose)
+    if (result === false) return
+    ref.current?.close()
+  }
+
+  useLayoutEffect(() => {
+    call(opts.onMount)
+  }, [])
+
+  useRefListener(
+    ref,
+    "close",
+    useCallback((e) => call(opts.onClose, e), [opts.onClose])
+  )
+
+  useDocListener(
+    "keydown",
+    useCallback((e: any) => {
+      // The "cancel" does not fire when the dialog is not focused
+      // The "keydown" event also doesn't fire if the dialog is not focused
+      // Listening for the escape key is more reliable
+      if (e.key === "Escape") {
+        e.preventDefault()
+        call(opts.onCancel)
+        close()
+      }
+    }, [])
+  )
+
+  return {
+    ref,
+    close,
+    showModal: () => ref.current?.showModal(),
+    show: () => ref.current?.show(),
+  }
+}
diff --git a/apps/zui/src/core/loader/types.ts b/apps/zui/src/core/loader/types.ts
deleted file mode 100644
index 797f8d7a33..0000000000
--- a/apps/zui/src/core/loader/types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {LoadFormat} from "@brimdata/zed-js"
-
-export type LoadOptions = {
-  windowId: string
-  lakeId: string
-  poolId: string
-  branch: string
-  files: string[]
-  shaper: string
-  format?: LoadFormat
-  author: string
-  body: string
-}
-
-export interface Loader {
-  when(): PromiseLike<boolean> | boolean
-  run(): PromiseLike<void> | void
-  rollback?(): PromiseLike<void> | void
-}
diff --git a/apps/zui/src/css/_about-window.scss b/apps/zui/src/css/_about-window.scss
index 6746e3eeca..335d29becb 100644
--- a/apps/zui/src/css/_about-window.scss
+++ b/apps/zui/src/css/_about-window.scss
@@ -16,16 +16,19 @@
     margin-bottom: 12px;
   }
 
+  .about-grid {
+    display: grid;
+    grid-template-columns: auto auto;
+    column-gap: var(--s1);
+    row-gap: var(--s-2);
+  }
+
   .about-content {
     display: flex;
     flex-direction: column;
     padding-top: 24px;
     @include label-normal;
 
-    p {
-      margin: 0;
-    }
-
     a {
       color: var(--primary-color);
       cursor: pointer;
@@ -36,13 +39,6 @@
       padding: 3px;
     }
 
-    label {
-      margin-right: 12px;
-      @include label-bold;
-      user-select: none;
-      width: 60px;
-    }
-
     hr {
       border: none;
       box-shadow: 0 0 0 0.5px var(--border-color);
diff --git a/apps/zui/src/css/_blocks.scss b/apps/zui/src/css/_blocks.scss
index f71a1e52fa..f28d61b060 100644
--- a/apps/zui/src/css/_blocks.scss
+++ b/apps/zui/src/css/_blocks.scss
@@ -1,11 +1,37 @@
 .field {
     &>*+* {
-        margin-block-start: var(--s-3);
+        margin-block-start: var(--space-2xs);
     }
 }
 
 .field-stack {
     &>*+* {
-        margin-block-start: var(--s1);
+        margin-block-start: var(--space-s);
+    }
+}
+
+.modal {
+    background: var(--bg-color);
+    box-shadow: 0 20px 50px 10px rgb(0 0 0 /0.25);
+    border-radius: 8px;
+    border: none;
+    padding: 0;
+    will-change: opacity, transform;
+    color: var(--fg-color);
+}
+
+.modal::backdrop {
+    background-color: black;
+    opacity: 0.25;
+    will-change: opacity;
+}
+
+@media (prefers-color-scheme: dark) {
+    .modal::backdrop {
+        opacity: 0.8;
+    }
+
+    .modal {
+        border: 1px solid var(--border-color);
     }
 }
diff --git a/apps/zui/src/css/_global.scss b/apps/zui/src/css/_global.scss
index e87eeefb53..f35091db39 100644
--- a/apps/zui/src/css/_global.scss
+++ b/apps/zui/src/css/_global.scss
@@ -9,6 +9,12 @@
   margin: 0;
 }
 
+*:focus-visible {
+  outline-offset: 4px;
+  outline-color: var(--primary-color);
+  outline-width: 2px;
+}
+
 html,
 body {
   height: 100%;
@@ -17,16 +23,17 @@ body {
 
 body {
   line-height: 1.5;
+  font-size: var(--step-0);
   -webkit-font-smoothing: antialiased;
   font-family: var(--body-font);
   color: var(--fg-color);
-  font-size: 14px;
 
   &:not(.is-mac) {
     background-color: var(--window-color);
   }
 }
 
+
 input,
 button,
 textarea,
@@ -45,6 +52,24 @@ h6 {
   overflow-wrap: break-word;
 }
 
+h4 {
+  font-size: var(--step-1);
+}
+
+h3 {
+  font-size: var(--step-2);
+}
+
+h2 {
+  font-size: var(--step-3);
+}
+
+h1 {
+  font-size: var(--step-4);
+}
+
+
+
 pre,
 code {
   border-radius: 3px;
@@ -103,3 +128,34 @@ dt {
 dd {
   font-family: var(--mono-font);
 }
+
+.is-dragging {
+  user-select: none;
+}
+
+label {
+  display: block;
+  font-weight: bold;
+  color: var(--fg-color-less);
+  opacity: 0.9;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  font-size: var(--step--1);
+}
+
+input {
+  font-size: inherit;
+}
+
+dialog {
+  color: var(--fg-color);
+  max-height: none;
+  max-width: none;
+  border: none;
+  padding: 0;
+
+  &::backdrop {
+    background: transparent;
+  }
+}
diff --git a/apps/zui/src/css/_histogram-tooltip.scss b/apps/zui/src/css/_histogram-tooltip.scss
index 10c19033a2..593dfcc655 100644
--- a/apps/zui/src/css/_histogram-tooltip.scss
+++ b/apps/zui/src/css/_histogram-tooltip.scss
@@ -12,7 +12,7 @@
   pointer-events: none;
   color: var(--fg-color);
   background: var(--bg-color);
-  box-shadow: var(--shadow-small);
+  box-shadow: var(--shadow-s);
   font-family: var(--mono-font);
   font-size: 11px;
   border-radius: 8px;
diff --git a/apps/zui/src/css/_layouts.scss b/apps/zui/src/css/_layouts.scss
index 7d83ba628d..eb57894726 100644
--- a/apps/zui/src/css/_layouts.scss
+++ b/apps/zui/src/css/_layouts.scss
@@ -115,6 +115,10 @@
     margin-block-start: var(--s8);
 }
 
+.box-s {
+    padding: var(--s1);
+}
+
 .box-1 {
     padding: var(--s1);
 }
@@ -126,3 +130,10 @@
 .flex {
     display: flex;
 }
+
+.with-popover {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-block-start: 10vh;
+}
diff --git a/apps/zui/src/css/_list-item.scss b/apps/zui/src/css/_list-item.scss
index 7a04dd5c91..d8916a1b75 100644
--- a/apps/zui/src/css/_list-item.scss
+++ b/apps/zui/src/css/_list-item.scss
@@ -28,7 +28,6 @@
   width: 100%;
   height: 100%;
   border-radius: 6px;
-  font-size: 15px;
 
   &:hover:not(.dragging) {
     background: rgb(0 0 0 / 0.03);
diff --git a/apps/zui/src/css/_progress-indicator.scss b/apps/zui/src/css/_progress-indicator.scss
index f46e662237..11caba4eb0 100644
--- a/apps/zui/src/css/_progress-indicator.scss
+++ b/apps/zui/src/css/_progress-indicator.scss
@@ -2,17 +2,6 @@
   display: flex;
   align-items: center;
   width: 100%;
-
-  .close-button {
-    margin-left: 8px;
-    width: 12px;
-    height: 12px;
-
-    svg {
-      width: 8px;
-      height: 8px;
-    }
-  }
 }
 
 .progress-track {
@@ -32,48 +21,25 @@
   transition: width 1000ms;
 }
 
-@keyframes fake-loading {
-  from {
-    width: 5%;
-  }
-
-  10% {
-    width: 8%;
-  }
-
-  20% {
-    width: 30%;
-  }
-
-  30% {
-    width: 32%;
-  }
-
-  40% {
-    width: 38%;
-  }
-
-  50% {
-    width: 45%;
-  }
-
-  60% {
-    width: 55%;
-  }
 
-  70% {
-    width: 89%;
-  }
+.progress-indeterminate {
+  width: 30%;
+  animation-name: indeterminate;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+  box-sizing: content-box;
+  animation-direction: alternate;
 
-  80% {
-    width: 90%;
-  }
+  transform: translateX(-80%);
+}
 
-  90% {
-    width: 98%;
+@keyframes indeterminate {
+  from {
+    transform: translateX(-80%);
   }
 
   to {
-    width: 100%;
+    transform: translateX(310%);
   }
 }
diff --git a/apps/zui/src/css/_transitions.scss b/apps/zui/src/css/_transitions.scss
new file mode 100644
index 0000000000..be27d197da
--- /dev/null
+++ b/apps/zui/src/css/_transitions.scss
@@ -0,0 +1,190 @@
+/**
+ * Overlay content with transparent bg-color
+ */
+.overlay--before-enter {
+    background-color: rgba(0, 0, 0, 0)
+}
+
+.overlay--enter {
+    transition: background-color 300ms;
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.overlay--after-enter {
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.overlay--before-exit {
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.overlay--exit {
+    transition: background-color 300ms;
+    background-color: rgba(0, 0, 0, 0);
+}
+
+.overlay--after-exit {
+    background-color: rgba(0, 0, 0, 0);
+}
+
+/**
+ * Fade in content with opacity
+ */
+.fade {
+    --dur: 300ms;
+    --ease: ease-out;
+    --enter-delay: 0s;
+    --exit-delay: 0s;
+}
+
+.fade--before-enter {
+    opacity: 0;
+}
+
+.fade--enter {
+    transition: all var(--dur);
+    transition-delay: var(--enter-delay);
+    opacity: 1;
+}
+
+.fade--after-enter {
+    opacity: 1;
+}
+
+.fade--before-exit {
+    opacity: 1;
+}
+
+.fade--exit {
+    transition: all var(--dur);
+    transition-delay: var(--exit-delay);
+    opacity: 0;
+}
+
+.fade--after-exit {
+    opacity: 0;
+}
+
+/**
+ * Modal Transitions
+ */
+
+.drop-in {
+    --scale: 0.9;
+    --t-start: translateY(-100px) scale(1);
+    transition-timing-function: var(--emphasis-easing);
+    transition-duration: 800ms;
+    transition-property: none;
+}
+
+.drop-in--before-enter {
+    transform: var(--t-start);
+    opacity: 0;
+}
+
+.drop-in--enter {
+    transition-property: all;
+    opacity: 1;
+}
+
+.drop-in--exit {
+    transition-property: all;
+    transition-duration: 300ms;
+    transform: var(--t-start);
+    opacity: 0;
+}
+
+.drop-in--after-exit {
+    transform: var(--t-start);
+    opacity: 0;
+}
+
+/* Shrink In */
+
+.shrink-in {
+    --dur: 500ms;
+    --ease: var(--pop-easing);
+    --enter-delay: 0s;
+    --exit-delay: 0s;
+    --scale-from: 1.5;
+    --scale-to: 1;
+    --fade-from: 0;
+    --fade-to: 1;
+}
+
+.shrink-in--before-enter {
+    transform: scale(var(--scale-from));
+    opacity: var(--fade-from);
+}
+
+.shrink-in--enter {
+    transition: all var(--dur) var(--ease) var(--enter-delay);
+    transform: scale(var(--scale-to));
+    opacity: var(--fade-to);
+}
+
+.shrink-in--after-enter {
+    transform: scale(var(--scale-to));
+    opacity: var(--fade-to);
+}
+
+.shrink-in--before-exit {
+    transform: scale(var(--scale-to));
+    opacity: var(--fade-to);
+}
+
+.shrink-in--exit {
+    transition: all var(--dur) var(--ease) var(--exit-delay);
+    transform: scale(var(--scale-from));
+    opacity: var(--fade-from);
+}
+
+.shrink-in--after-exit {
+    transform: scale(var(--scale-from));
+    opacity: var(--fade-from);
+}
+
+/* Shrink Out */
+
+.shrink-out {
+    --dur: var(--dur-l);
+    --ease: ease-out;
+    --enter-delay: 0s;
+    --exit-delay: 0s;
+    --scale-from: 1;
+    --scale-to: 0.5;
+    --fade-from: 1;
+    --fade-to: 0;
+}
+
+.shrink-out--before-enter {
+    transform: scale(var(--scale-from));
+    opacity: var(--fade-from);
+}
+
+.shrink-out--enter {
+    transition: all var(--dur) var(--ease) var(--enter-delay);
+    transform: scale(var(--scale-to));
+    opacity: var(--fade-to);
+}
+
+.shrink-out--after-enter {
+    transform: scale(var(--scale-to));
+    opacity: var(--fade-to);
+}
+
+.shrink-out--before-exit {
+    transform: scale(var(--scale-to));
+    opacity: var(--fade-to);
+}
+
+.shrink-out--exit {
+    transition: all var(--dur) var(--ease) var(--exit-delay);
+    transform: scale(var(--scale-from));
+    opacity: var(--fade-from);
+}
+
+.shrink-out--after-exit {
+    transform: scale(var(--scale-from));
+    opacity: var(--fade-from);
+}
diff --git a/apps/zui/src/css/_utilities.scss b/apps/zui/src/css/_utilities.scss
index dfd80adc07..97bda19d89 100644
--- a/apps/zui/src/css/_utilities.scss
+++ b/apps/zui/src/css/_utilities.scss
@@ -14,14 +14,35 @@
     align-items: center;
 }
 
+.align\:start {
+    align-items: flex-start;
+}
+
 .width\:viewport {
     width: 100vw;
 }
 
+.width\:full {
+    width: 100%;
+}
+
+.width\:fit {
+    width: fit-content;
+}
+
+.width\:max-content {
+    width: max-content;
+}
+
 .height\:viewport {
     height: 100vh;
 }
 
+.size\:viewport {
+    width: 100vw;
+    height: 100vh;
+}
+
 .z\:1 {
     z-index: 1;
 }
@@ -30,7 +51,8 @@
     z-index: 2;
 }
 
-.bg\:bg {
+
+.bg\:normal {
     background-color: var(--bg-color);
 }
 
@@ -46,6 +68,10 @@
     inline-size: fit-content;
 }
 
+.max-width\:fit {
+    max-inline-size: fit-content;
+}
+
 .max-height\:viewport {
     max-block-size: 100vh;
 }
@@ -70,6 +96,72 @@
     border-bottom: 1px solid var(--border-color);
 }
 
+.border\:solid {
+    border: 1px solid var(--border-color);
+}
+
 .min-height\:full {
     min-height: 100%;
 }
+
+.display\:none {
+    display: none;
+}
+
+.shadow\:s {
+    box-shadow: var(--shadow-s);
+}
+
+.shadow\:m {
+    box-shadow: var(--shadow-m);
+}
+
+.shadow\:l {
+    box-shadow: var(--shadow-l);
+}
+
+.radius\:s {
+    border-radius: var(--radius-s);
+}
+
+.radius\:m {
+    border-radius: var(--radius-m);
+}
+
+.radius\:l {
+    border-radius: var(--radius-l);
+}
+
+.overflow\:ellipsis {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.overflow\:hidden {
+    overflow: hidden;
+}
+
+.font\:mono {
+    font-family: var(--mono-font);
+}
+
+.color\:fg-less {
+    color: var(--fg-color-less);
+}
+
+.font-size\:-2 {
+    font-size: var(--step--2);
+}
+
+.font-size\:-1 {
+    font-size: var(--step--1);
+}
+
+.font-size\:0 {
+    font-size: var(--step-0);
+}
+
+.weight\:bold {
+    font-weight: bold;
+}
diff --git a/apps/zui/src/css/main.scss b/apps/zui/src/css/main.scss
index 49a0fb8b08..13ec08df37 100644
--- a/apps/zui/src/css/main.scss
+++ b/apps/zui/src/css/main.scss
@@ -77,3 +77,4 @@
 @import "layouts";
 @import "blocks";
 @import "utilities";
+@import "transitions";
diff --git a/apps/zui/src/css/settings/_colors.scss b/apps/zui/src/css/settings/_colors.scss
index 66cfeac140..65d83967a3 100644
--- a/apps/zui/src/css/settings/_colors.scss
+++ b/apps/zui/src/css/settings/_colors.scss
@@ -1,3 +1,40 @@
+/* @link https://utopia.fyi/type/calculator?c=320,13,1.067,1240,15,1.125,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+
+:root {
+  --step--2: clamp(0.7137rem, 0.7042rem + 0.0471vi, 0.7407rem);
+  --step--1: clamp(0.7615rem, 0.7365rem + 0.125vi, 0.8333rem);
+  --step-0: clamp(0.8125rem, 0.769rem + 0.2174vi, 0.9375rem);
+  --step-1: clamp(0.8669rem, 0.8016rem + 0.3265vi, 1.0547rem);
+  --step-2: clamp(0.925rem, 0.8341rem + 0.4548vi, 1.1865rem);
+  --step-3: clamp(0.987rem, 0.866rem + 0.6049vi, 1.3348rem);
+  --step-4: clamp(1.0531rem, 0.8971rem + 0.7801vi, 1.5017rem);
+  --step-5: clamp(1.1237rem, 0.9269rem + 0.9839vi, 1.6894rem);
+}
+
+/* @link https://utopia.fyi/space/calculator?c=320,14,1.2,1240,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,&g=s,l,xl,12 */
+
+:root {
+  --space-3xs: clamp(0.25rem, 0.25rem + 0vi, 0.25rem);
+  --space-2xs: clamp(0.4375rem, 0.4158rem + 0.1087vi, 0.5rem);
+  --space-xs: clamp(0.6875rem, 0.6658rem + 0.1087vi, 0.75rem);
+  --space-s: clamp(0.875rem, 0.8315rem + 0.2174vi, 1rem);
+  --space-m: clamp(1.3125rem, 1.2473rem + 0.3261vi, 1.5rem);
+  --space-l: clamp(1.75rem, 1.663rem + 0.4348vi, 2rem);
+  --space-xl: clamp(2.625rem, 2.4946rem + 0.6522vi, 3rem);
+  --space-2xl: clamp(3.5rem, 3.3261rem + 0.8696vi, 4rem);
+  --space-3xl: clamp(5.25rem, 4.9891rem + 1.3043vi, 6rem);
+
+  /* One-up pairs */
+  --space-3xs-2xs: clamp(0.25rem, 0.163rem + 0.4348vi, 0.5rem);
+  --space-2xs-xs: clamp(0.4375rem, 0.3288rem + 0.5435vi, 0.75rem);
+  --space-xs-s: clamp(0.6875rem, 0.5788rem + 0.5435vi, 1rem);
+  --space-s-m: clamp(0.875rem, 0.6576rem + 1.087vi, 1.5rem);
+  --space-m-l: clamp(1.3125rem, 1.0734rem + 1.1957vi, 2rem);
+  --space-l-xl: clamp(1.75rem, 1.3152rem + 2.1739vi, 3rem);
+  --space-xl-2xl: clamp(2.625rem, 2.1467rem + 2.3913vi, 4rem);
+  --space-2xl-3xl: clamp(3.5rem, 2.6304rem + 4.3478vi, 6rem);
+}
+
 /**
  * Constants
  */
@@ -14,15 +51,29 @@
   --form-line-height: 20px;
   --form-border-radius: 6px;
   --form-padding: 3px 10px;
-  --form-height: 2rem;
+  --form-height: var(--s3);
   --form-field-gap: 12px;
 
   /*  Easings */
   --pop-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --spring-easing: linear(0, 0.0022, 0.0087 1.01%, 0.0346 2.07%, 0.0782 3.2%, 0.1407 4.43%,
+      0.2809 6.65%, 0.7229 12.91%, 0.9383 16.72%, 1.0168, 1.0774 20.43%,
+      1.1213 22.33%, 1.1493 24.31%, 1.159 25.6%, 1.1629 26.95%, 1.1611 28.38%,
+      1.1536 29.93%, 1.1289 32.78%, 1.0506 39.61%, 1.0168 43.09%, 0.9906 46.97%,
+      0.9766 51%, 0.9735 53.84%, 0.9749 57.06%, 0.9966 69.83%, 1.0033 76.88%,
+      1.0042 83.81%, 1);
+  --emphasis-easing: linear(0, 0.0025 1.75%, 0.0099 3.55%, 0.0341 6.4%, 0.0738 9.06%, 0.1281 11.41%,
+      0.194 13.37%, 0.2714 14.97%, 0.344 16.05%, 0.5443 18.34%, 0.6069 19.39%,
+      0.6604 20.61%, 0.7167 22.4%, 0.7653 24.59%, 0.8083 27.28%, 0.8448 30.42%,
+      0.8833 35.06%, 0.9155 40.62%, 0.9421 47.24%, 0.9633 54.99%, 0.9795 64.01%,
+      0.9909 74.43%, 0.9977 86.37%, 1);
+  --dur-s: 150ms;
+  --dur-m: 300ms;
+  --dur-l: 500ms;
+
   --quick: 150ms;
   --medium: 300ms;
   --slow: 450ms;
-
   --measure: 45ch;
 }
 
@@ -36,10 +87,12 @@
   --window-color: #F3F3F3;
 
 
+
   @media (prefers-color-scheme: dark) {
     --fg-color: white;
     --fg-color-less: rgba(255, 255, 255, 0.7);
     --bg-color: hsl(44deg 8% 10%);
+    --backdrop-color: rgba(0, 0, 0, 0.5);
     --window-color: #303231;
   }
 }
@@ -122,10 +175,9 @@
 :root {
   --editor-background: white;
   --input-background: hsl(240, 15%, 92%);
-  --form-bg-color: white;
+  --form-bg-color: hsl(0 0% 93%);
   --form-bg-color-dark: #f8f8f8;
   --form-bg-color-darker: #e6e6e6;
-  --form-border: 1px solid var(--border-color);
 
   @media (prefers-color-scheme: dark) {
     --form-bg-color: var(--emphasis-bg);
@@ -138,11 +190,21 @@
  * Shadows
  */
 :root {
-  --shadow-small: 0px 0px 3px 0px rgb(0 0 0 / 30%);
-  --shadow-medium: 0px 3px 3px 6px rgb(0 0 0 / 30%);
+  --shadow-s: 0px 0px 3px 0px rgb(0 0 0 / 30%);
+  --shadow-m: 0px 3px 3px 6px rgb(0 0 0 / 30%);
+  --shadow-l: 12px 12px 48px rgba(0, 0, 0, 0.45);
 }
 
 
+/**
+ * Radius
+ */
+:root {
+  --radius-s: 3px;
+  --radius-m: 6px;
+  --radius-l: 12px;
+}
+
 
 /**
  * Selection
@@ -167,3 +229,14 @@
     --table-stripe-bg: rgba(255, 255, 255, 0.01);
   }
 }
+
+/** 
+ * Backdrops
+ */
+*::backdrop {
+  --backdrop-color: rgba(0, 0, 0, 0.6);
+
+  @media (prefers-color-scheme: dark) {
+    --backdrop-color: rgba(0, 0, 0, 0.7);
+  }
+}
diff --git a/apps/zui/src/domain/handlers.ts b/apps/zui/src/domain/handlers.ts
index 33add04859..5d1a46bbf9 100644
--- a/apps/zui/src/domain/handlers.ts
+++ b/apps/zui/src/domain/handlers.ts
@@ -1,7 +1,7 @@
 // Entry point to fire up all the handlers
 // This gets imported in an initializer
 
-import "./results/handlers"
+import "./results/handlers/view"
 import "./panes/handlers"
 import "./window/handlers"
 import "./session/handlers/navigation"
diff --git a/apps/zui/src/domain/legacy-ops/messages.ts b/apps/zui/src/domain/legacy-ops/messages.ts
index 53abf8637f..ced84c05af 100644
--- a/apps/zui/src/domain/legacy-ops/messages.ts
+++ b/apps/zui/src/domain/legacy-ops/messages.ts
@@ -6,7 +6,6 @@ import {Config} from "../configurations/plugin-api"
 import {CompiledCorrelation} from "../correlations/plugin-api"
 import {MenuItem} from "src/core/menu"
 import {AnyAction} from "@reduxjs/toolkit"
-import {LoadOptions} from "src/core/loader/types"
 import {MainArgs} from "src/electron/run-main/args"
 import {
   MenuItemConstructorOptions,
@@ -20,6 +19,7 @@ import {
 import {SearchAppMenuState} from "src/electron/windows/search/app-menu"
 import {Pool} from "src/app/core/pools/pool"
 import {Command} from "src/app/commands/command"
+import {LoadOptions} from "../loads/types"
 
 export type LegacyOperations = {
   autosaveOp: (windowId: string, windowState: State) => void
diff --git a/apps/zui/src/domain/loads/default-loaders.ts b/apps/zui/src/domain/loads/default-loaders.ts
new file mode 100644
index 0000000000..1298b8bd0f
--- /dev/null
+++ b/apps/zui/src/domain/loads/default-loaders.ts
@@ -0,0 +1,15 @@
+import {FileLoader} from "./file-loader"
+import {LoadContext} from "./load-context"
+import {QueryLoader} from "./query-loader"
+import {LoaderRef} from "./types"
+
+export const DEFAULT_LOADERS = [
+  {
+    name: "fileLoader",
+    initialize: (ctx: LoadContext) => new FileLoader(ctx),
+  },
+  {
+    name: "queryLoader",
+    initialize: (ctx: LoadContext) => new QueryLoader(ctx),
+  },
+] as LoaderRef[]
diff --git a/apps/zui/src/domain/loads/default-loader.ts b/apps/zui/src/domain/loads/file-loader.ts
similarity index 95%
rename from apps/zui/src/domain/loads/default-loader.ts
rename to apps/zui/src/domain/loads/file-loader.ts
index 89c20ce1d1..220eb96de9 100644
--- a/apps/zui/src/domain/loads/default-loader.ts
+++ b/apps/zui/src/domain/loads/file-loader.ts
@@ -6,11 +6,11 @@ import {createReadableStream} from "src/core/zq"
 import {throttle} from "lodash"
 import {errorToString} from "src/util/error-to-string"
 
-export class DefaultLoader implements Loader {
+export class FileLoader implements Loader {
   constructor(private ctx: LoadContext) {}
 
   when() {
-    return true
+    return this.ctx.files.length > 0
   }
 
   async run() {
diff --git a/apps/zui/src/domain/loads/handlers/preview-load-files.ts b/apps/zui/src/domain/loads/handlers/preview-load-files.ts
index 0824b18a8b..66f8fa16d8 100644
--- a/apps/zui/src/domain/loads/handlers/preview-load-files.ts
+++ b/apps/zui/src/domain/loads/handlers/preview-load-files.ts
@@ -3,6 +3,7 @@ import Current from "src/js/state/Current"
 import LoadDataForm from "src/js/state/LoadDataForm"
 import Pools from "src/js/state/Pools"
 import {quickLoadFiles} from "./quick-load-files"
+import Modal from "src/js/state/Modal"
 
 export const previewLoadFiles = createHandler(
   "loads.previewLoadFiles",
@@ -23,8 +24,8 @@ export const previewLoadFiles = createHandler(
         dispatch(LoadDataForm.addFiles(opts.files))
       } else {
         dispatch(LoadDataForm.setFiles(opts.files))
-        dispatch(LoadDataForm.setShow(true))
         dispatch(LoadDataForm.setPoolId(poolId))
+        dispatch(Modal.show("preview-load"))
       }
     }
   }
diff --git a/apps/zui/src/domain/loads/load-context.ts b/apps/zui/src/domain/loads/load-context.ts
index a764262dfd..1fd5fdc3dc 100644
--- a/apps/zui/src/domain/loads/load-context.ts
+++ b/apps/zui/src/domain/loads/load-context.ts
@@ -26,7 +26,14 @@ export class LoadContext {
     this.window.loadsInProgress++
     this.main.abortables.add({id: this.id, abort: () => this.ctl.abort()})
     this.main.dispatch(
-      Loads.create(createLoadRef(this.id, this.opts.poolId, this.opts.files))
+      Loads.create(
+        createLoadRef(
+          this.id,
+          this.opts.poolId,
+          this.opts.files,
+          this.opts.query
+        )
+      )
     )
   }
 
@@ -74,7 +81,11 @@ export class LoadContext {
   }
 
   get files() {
-    return this.opts.files
+    return this.opts.files || []
+  }
+
+  get query() {
+    return this.opts.query
   }
 
   get lakeId() {
diff --git a/apps/zui/src/domain/loads/load-model.ts b/apps/zui/src/domain/loads/load-model.ts
index 5e5c67f372..cd72b0b7a6 100644
--- a/apps/zui/src/domain/loads/load-model.ts
+++ b/apps/zui/src/domain/loads/load-model.ts
@@ -8,7 +8,13 @@ export class LoadModel {
     return this.ref.id
   }
 
+  get title() {
+    if (this.ref.files.length) return this.humanizeFiles
+    else return this.ref.query
+  }
+
   get humanizeFiles() {
+    if (!this.ref.files) return "No files"
     return this.ref.files.map(basename).join(", ")
   }
 
diff --git a/apps/zui/src/domain/loads/load-ref.ts b/apps/zui/src/domain/loads/load-ref.ts
index d0d27796c8..5ddc976fb7 100644
--- a/apps/zui/src/domain/loads/load-ref.ts
+++ b/apps/zui/src/domain/loads/load-ref.ts
@@ -3,12 +3,14 @@ import {LoadReference} from "src/js/state/Loads/types"
 export function createLoadRef(
   id: string,
   poolId: string,
-  files: string[]
+  files: string[],
+  query: string
 ): LoadReference {
   return {
     id,
     poolId,
     progress: 0,
+    query,
     files,
     startedAt: new Date().toISOString(),
     finishedAt: null,
diff --git a/apps/zui/src/domain/loads/messages.ts b/apps/zui/src/domain/loads/messages.ts
index 3a705c1ce2..0e7d33fe0d 100644
--- a/apps/zui/src/domain/loads/messages.ts
+++ b/apps/zui/src/domain/loads/messages.ts
@@ -8,15 +8,16 @@ export type LoadFormData = {
   name?: string | null
   key?: string | null
   order?: "asc" | "desc" | null
+  query?: string
+  shaper?: string
+  format?: LoadFormat
   files: string[]
   author: string
   body: string
-  shaper?: string
-  format?: LoadFormat
 }
 
 export type LoadsOperations = {
-  "loads.create": typeof ops.submit
+  "loads.create": typeof ops.create
   "loads.preview": typeof ops.preview
   "loads.getFileTypes": typeof ops.getFileTypes
   "loads.abortPreview": typeof ops.abortPreview
diff --git a/apps/zui/src/domain/loads/operations/cancel.ts b/apps/zui/src/domain/loads/operations/cancel.ts
index a010e46922..7220ad71b7 100644
--- a/apps/zui/src/domain/loads/operations/cancel.ts
+++ b/apps/zui/src/domain/loads/operations/cancel.ts
@@ -4,7 +4,7 @@ import {createOperation} from "src/core/operations"
 
 export const cancel = createOperation(
   "loads.cancel",
-  (ctx, poolId: string, files: string[]) => {
-    loads.emit("abort", createLoadRef("new", poolId, files))
+  (ctx, poolId: string, files: string[], query: string) => {
+    loads.emit("abort", createLoadRef("new", poolId, files, query))
   }
 )
diff --git a/apps/zui/src/domain/loads/operations/create.ts b/apps/zui/src/domain/loads/operations/create.ts
index 90627de839..2a55cc4039 100644
--- a/apps/zui/src/domain/loads/operations/create.ts
+++ b/apps/zui/src/domain/loads/operations/create.ts
@@ -9,7 +9,7 @@ import {poolPath} from "src/app/router/utils/paths"
 import {isAbortError} from "src/util/is-abort-error"
 
 /* Called when the user submits the preview & load form */
-export const submit = createOperation(
+export const create = createOperation(
   "loads.create",
   async (ctx, data: LoadFormData) => {
     const pool = await createPool(data)
@@ -23,6 +23,7 @@ export const submit = createOperation(
         poolId: pool.id,
         lakeId: zui.window.lakeId,
         branch: "main",
+        query: data.query,
         files: data.files,
         shaper: script.isEmpty() ? "*" : data.shaper,
         author: data.author,
@@ -33,6 +34,7 @@ export const submit = createOperation(
       })
       .catch((e) => {
         if (isAbortError(e)) return
+        console.log(e)
         zui.window.showErrorMessage("Load error " + errorToString(e))
       })
 
@@ -45,7 +47,7 @@ async function createPool(data: LoadFormData): Promise<Pool> {
     const poolNames = zui.pools.all.map((pool) => pool.name)
     const derivedName = await deriveName(data.files, poolNames)
     const name = data.name?.trim() || derivedName
-    const key = data.key
+    const key = data.key?.trim() || "ts"
     const order = data.order
     return zui.pools.create(name, {key, order})
   } else {
diff --git a/apps/zui/src/domain/loads/plugin-api.ts b/apps/zui/src/domain/loads/plugin-api.ts
index 8f66bc6b0d..7d39bc4d7a 100644
--- a/apps/zui/src/domain/loads/plugin-api.ts
+++ b/apps/zui/src/domain/loads/plugin-api.ts
@@ -1,20 +1,11 @@
-import {DefaultLoader} from "./default-loader"
 import {LoadContext} from "./load-context"
-import {Loader} from "src/core/loader/types"
 import Loads from "src/js/state/Loads"
 import {select} from "src/core/main/select"
 import {TypedEmitter} from "src/util/typed-emitter"
-import {LoadReference} from "src/js/state/Loads/types"
+import {DEFAULT_LOADERS} from "./default-loaders"
+import {LoadEvents, Loader, LoaderRef} from "./types"
 
-type Events = {
-  success: (load: LoadReference) => void
-  abort: (load: LoadReference) => void
-  error: (load: LoadReference) => void
-}
-
-type LoaderRef = {name: string; initialize: (ctx: LoadContext) => Loader}
-
-export class LoadsApi extends TypedEmitter<Events> {
+export class LoadsApi extends TypedEmitter<LoadEvents> {
   private list: LoaderRef[] = []
 
   addLoader(name: string, initialize: (ctx: LoadContext) => Loader) {
@@ -22,11 +13,15 @@ export class LoadsApi extends TypedEmitter<Events> {
   }
 
   async initialize(context: LoadContext) {
-    for (const ref of this.list) {
-      const customLoader = ref.initialize(context)
-      if (await customLoader.when()) return customLoader
+    for (const {initialize} of this.loaders) {
+      const loader = initialize(context)
+      if (await loader.when()) return loader
     }
-    return new DefaultLoader(context)
+    throw new Error("Loader not found")
+  }
+
+  private get loaders() {
+    return [...this.list, ...DEFAULT_LOADERS]
   }
 
   get all() {
diff --git a/apps/zui/src/domain/loads/query-loader.ts b/apps/zui/src/domain/loads/query-loader.ts
new file mode 100644
index 0000000000..9904fa7b83
--- /dev/null
+++ b/apps/zui/src/domain/loads/query-loader.ts
@@ -0,0 +1,35 @@
+import {LoadContext} from "./load-context"
+import {Loader} from "./types"
+
+export class QueryLoader implements Loader {
+  constructor(private ctx: LoadContext) {}
+
+  when() {
+    return this.ctx.files.length === 0 && !!this.ctx.query
+  }
+
+  async run() {
+    this.ctx.setProgress(Infinity)
+    const client = await this.ctx.createClient()
+    await client
+      .query(this.loadQuery, {signal: this.ctx.signal})
+      .then((r) => r.js())
+    this.ctx.setProgress(1)
+  }
+
+  private get loadQuery() {
+    // This is the load op syntax
+    // load <pool>[@<branch>] [author <author>] [message <message>] [meta <meta>]
+    return [
+      this.ctx.query,
+      "| load",
+      this.ctx.poolId + "@" + this.ctx.branch,
+      "author " + JSON.stringify(this.ctx.author),
+      "message " + JSON.stringify(this.ctx.body),
+    ].join(" ")
+  }
+}
+
+export function addLoad(query: string, poolId) {
+  return query + " | load " + poolId
+}
diff --git a/apps/zui/src/domain/loads/types.ts b/apps/zui/src/domain/loads/types.ts
index bc66980f9e..483445f999 100644
--- a/apps/zui/src/domain/loads/types.ts
+++ b/apps/zui/src/domain/loads/types.ts
@@ -1,20 +1,33 @@
 import {LoadFormat} from "@brimdata/zed-js"
 import {LoadContext} from "./load-context"
+import {LoadReference} from "src/js/state/Loads/types"
 
 export type LoadOptions = {
   windowId: string
   lakeId: string
   poolId: string
-  branch: string
+  branch?: string
   files: string[]
-  shaper: string
+  query?: string
+  shaper?: string
   format?: LoadFormat
   author: string
   body: string
 }
 
 export interface Loader {
-  when(context: LoadContext): PromiseLike<boolean> | boolean
-  run(context: LoadContext): PromiseLike<void> | void
-  rollback(context: LoadContext): PromiseLike<void> | void
+  when(): PromiseLike<boolean> | boolean
+  run(): PromiseLike<void> | void
+  rollback?(): PromiseLike<void> | void
+}
+
+export type LoadEvents = {
+  success: (load: LoadReference) => void
+  abort: (load: LoadReference) => void
+  error: (load: LoadReference) => void
+}
+
+export type LoaderRef = {
+  name: string
+  initialize: (ctx: LoadContext) => Loader
 }
diff --git a/apps/zui/src/domain/pools/handlers.ts b/apps/zui/src/domain/pools/handlers.ts
index 0346ae43d6..87109a15e1 100644
--- a/apps/zui/src/domain/pools/handlers.ts
+++ b/apps/zui/src/domain/pools/handlers.ts
@@ -4,3 +4,22 @@ import Modal from "src/js/state/Modal"
 export const newPool = createHandler("pools.new", ({dispatch}) => {
   dispatch(Modal.show("new-pool"))
 })
+
+type PoolFormData = {
+  poolId: string
+  name?: string
+  key?: string
+  order?: string
+}
+export const getOrCreatePool = createHandler(
+  async ({invoke}, data: PoolFormData) => {
+    if (data.poolId === "new") {
+      return await invoke("pools.create", data.name, {
+        key: data.key,
+        order: data.order as "desc" | "asc",
+      })
+    } else {
+      return data.poolId
+    }
+  }
+)
diff --git a/apps/zui/src/domain/pools/operations.ts b/apps/zui/src/domain/pools/operations.ts
index b0f6de93cf..47c717064e 100644
--- a/apps/zui/src/domain/pools/operations.ts
+++ b/apps/zui/src/domain/pools/operations.ts
@@ -11,15 +11,10 @@ import {Update} from "@reduxjs/toolkit"
 
 export const create = createOperation(
   "pools.create",
-  async (
-    {main},
-    lakeId: string,
-    name: string,
-    opts: Partial<CreatePoolOpts> = {}
-  ) => {
-    const client = await main.createClient(lakeId)
-    const {pool} = await client.createPool(name, opts)
-    main.dispatch(Pools.setData({lakeId, data: pool}))
+  async ({main}, name: string, opts: Partial<CreatePoolOpts> = {}) => {
+    if (name.trim().length === 0) throw new Error("Pool name missing")
+    const {pool} = await lake.client.createPool(name, opts)
+    main.dispatch(Pools.setData({lakeId: lake.id, data: pool}))
     pools.emit("create", {pool})
     return pool.id as string
   }
diff --git a/apps/zui/src/domain/pools/plugin-api.ts b/apps/zui/src/domain/pools/plugin-api.ts
index 96474f9c58..109becd642 100644
--- a/apps/zui/src/domain/pools/plugin-api.ts
+++ b/apps/zui/src/domain/pools/plugin-api.ts
@@ -6,10 +6,11 @@ import {loads, window} from "src/zui"
 import * as ops from "./operations"
 import {LoadContext} from "src/domain/loads/load-context"
 import {syncPoolOp} from "src/electron/ops/sync-pool-op"
-import {LoadOptions} from "src/core/loader/types"
 import {getMainObject} from "src/core/main"
 import {TypedEmitter} from "src/util/typed-emitter"
 import {call} from "src/util/call"
+import {LoadOptions} from "../loads/types"
+import {debug} from "src/core/log"
 
 type Events = {
   create: (event: {pool: Pool}) => void
@@ -29,7 +30,7 @@ export class PoolsApi extends TypedEmitter<Events> {
   }
 
   async create(name: string, opts: Partial<CreatePoolOpts> = {}) {
-    const id = await ops.create(window.lakeId, name, opts)
+    const id = await ops.create(name, opts)
     return this.get(id)
   }
 
@@ -41,6 +42,7 @@ export class PoolsApi extends TypedEmitter<Events> {
     const main = getMainObject()
     const context = new LoadContext(main, opts)
     const loader = await loads.initialize(context)
+    debug("Using Loader", loader)
     try {
       await context.setup()
       await loader.run()
diff --git a/apps/zui/src/domain/results/handlers/export.ts b/apps/zui/src/domain/results/handlers/export.ts
new file mode 100644
index 0000000000..58e4b253f0
--- /dev/null
+++ b/apps/zui/src/domain/results/handlers/export.ts
@@ -0,0 +1,82 @@
+import {addFuse, cutColumns} from "../utils"
+import Results from "src/js/state/Results"
+import {RESULTS_QUERY} from "src/views/results-pane/run-results-query"
+import {ResponseFormat} from "@brimdata/zed-js"
+import {errorToString} from "src/util/error-to-string"
+import {createHandler} from "src/core/handlers"
+import Layout from "src/js/state/Layout"
+import Table from "src/js/state/Table"
+
+export const exportToPool = createHandler(async ({invoke, toast}, data) => {
+  const query = getExportQuery(null)
+
+  try {
+    await invoke("loads.create", {
+      query,
+      poolId: data.poolId,
+      name: data.name,
+      order: data.order,
+      key: data.key,
+      windowId: globalThis.windowId,
+      files: [],
+      author: "Zui",
+      body: "Export to Pool",
+    })
+  } catch (e) {
+    toast.error(errorToString(e))
+  }
+})
+
+export const exportToFile = createHandler(
+  async (ctx, format: ResponseFormat) => {
+    const {canceled, filePath} = await ctx.invoke("showSaveDialogOp", {
+      title: `Export Results as ${format.toUpperCase()}`,
+      buttonLabel: "Export",
+      defaultPath: `results.${format}`,
+      properties: ["createDirectory"],
+      showsTagField: false,
+    })
+    if (canceled) return false
+
+    const query = getExportQuery(format)
+    const promise = ctx.invoke("results.exportToFile", query, format, filePath)
+    ctx.toast
+      .promise(promise, {
+        loading: "Exporting...",
+        success: "Export Completed: " + filePath,
+        error: "Error Exporting",
+      })
+      .catch((e) => {
+        console.error(e)
+      })
+    return true
+  }
+)
+
+export const exportToClipboard = createHandler(
+  async (ctx, format: ResponseFormat) => {
+    const query = getExportQuery(format)
+    const promise = ctx.invoke("results.copyToClipboard", query, format)
+    return ctx.toast.promise(promise, {
+      loading: "Copying...",
+      error: errorToString,
+      success: (result) => {
+        if (result === "success") return `Copied ${format} data to clipboard.`
+        return "Copy Cancelled"
+      },
+    })
+  }
+)
+
+export const getExportQuery = createHandler((ctx, format: ResponseFormat) => {
+  const formatNeedsFuse = ["csv", "tsv", "arrows"]
+  const query = ctx.select(Results.getQuery(RESULTS_QUERY))
+  const isTable = ctx.select(Layout.getEffectiveResultsView) == "TABLE"
+  const hiddenColCount = ctx.select(Table.getHiddenColumnCount)
+  const columns = ctx.select(Table.getVisibleColumns).map((c) => c.name)
+
+  let q = query
+  if (isTable && hiddenColCount > 0) q = cutColumns(q, columns)
+  if (formatNeedsFuse.includes(format)) q = addFuse(q)
+  return q
+})
diff --git a/apps/zui/src/domain/results/handlers/index.ts b/apps/zui/src/domain/results/handlers/index.ts
new file mode 100644
index 0000000000..9e3a9b2a92
--- /dev/null
+++ b/apps/zui/src/domain/results/handlers/index.ts
@@ -0,0 +1,2 @@
+export * from "./export"
+export * from "./view"
diff --git a/apps/zui/src/domain/results/handlers.ts b/apps/zui/src/domain/results/handlers/view.ts
similarity index 100%
rename from apps/zui/src/domain/results/handlers.ts
rename to apps/zui/src/domain/results/handlers/view.ts
diff --git a/apps/zui/src/domain/results/messages.ts b/apps/zui/src/domain/results/messages.ts
index 0e1d3d1cdd..dce21c99c3 100644
--- a/apps/zui/src/domain/results/messages.ts
+++ b/apps/zui/src/domain/results/messages.ts
@@ -1,10 +1,15 @@
+import * as ops from "./operations"
+import * as hands from "./handlers/view"
+
 export type ResultsHandlers = {
-  "results.expandAll": () => void
-  "results.collapseAll": () => void
-  "results.showExportDialog": () => void
-  "results.toggleHistogram": () => void
+  "results.expandAll": typeof hands.expandAllHandler
+  "results.collapseAll": typeof hands.collapseAllHandler
+  "results.showExportDialog": typeof hands.showExportDialog
+  "results.toggleHistogram": typeof hands.toggleHistogram
 }
 
 export type ResultsOperations = {
-  "results.export": (query: string, format: string, filePath: string) => string
+  "results.exportToFile": typeof ops.exportToFile
+  "results.copyToClipboard": typeof ops.copyToClipboard
+  "results.cancelCopyToClipboard": typeof ops.cancelCopyToClipboard
 }
diff --git a/apps/zui/src/domain/results/operations.ts b/apps/zui/src/domain/results/operations.ts
index c4d6984721..20ed641c1a 100644
--- a/apps/zui/src/domain/results/operations.ts
+++ b/apps/zui/src/domain/results/operations.ts
@@ -1,15 +1,17 @@
 import {createOperation} from "src/core/operations"
-import {QueryFormat} from "@brimdata/zed-js"
+import {ResponseFormat} from "@brimdata/zed-js"
 import fs from "fs"
 import {pipeline} from "stream"
 import util from "util"
 import {lake} from "src/zui"
+import {clipboard} from "electron"
+import {isAbortError} from "src/util/is-abort-error"
 
 const pipe = util.promisify(pipeline)
 
-export const resultsExport = createOperation(
-  "results.export",
-  async (ctx, query: string, format: QueryFormat, outPath: string) => {
+export const exportToFile = createOperation(
+  "results.exportToFile",
+  async (ctx, query: string, format: ResponseFormat, outPath: string) => {
     const res = await lake.query(query, {
       format,
       controlMessages: false,
@@ -27,3 +29,32 @@ export const resultsExport = createOperation(
     return outPath
   }
 )
+
+const CLIPBOARD_ID = "copy-to-clipboard"
+export const copyToClipboard = createOperation(
+  "results.copyToClipboard",
+  async (ctx, query: string, format: ResponseFormat) => {
+    try {
+      const ctl = ctx.main.abortables.create(CLIPBOARD_ID)
+      const res = await lake.query(query, {
+        format,
+        controlMessages: false,
+        timeout: Infinity,
+        signal: ctl.signal,
+      })
+      const result = await res.resp.text()
+      clipboard.writeText(result)
+      return "success"
+    } catch (e) {
+      if (isAbortError(e)) return "aborted"
+      throw e
+    }
+  }
+)
+
+export const cancelCopyToClipboard = createOperation(
+  "results.cancelCopyToClipboard",
+  (ctx) => {
+    ctx.main.abortables.abort({id: CLIPBOARD_ID})
+  }
+)
diff --git a/apps/zui/src/domain/results/utils.ts b/apps/zui/src/domain/results/utils.ts
new file mode 100644
index 0000000000..1b358a52be
--- /dev/null
+++ b/apps/zui/src/domain/results/utils.ts
@@ -0,0 +1,11 @@
+import program from "src/js/models/program"
+
+export function cutColumns(query: string, names: string[]) {
+  return program(query)
+    .quietCut(...names)
+    .string()
+}
+
+export function addFuse(query: string) {
+  return query + " | fuse"
+}
diff --git a/apps/zui/src/domain/results/utils/prep-export-query.ts b/apps/zui/src/domain/results/utils/prep-export-query.ts
deleted file mode 100644
index 27b5a1ce3d..0000000000
--- a/apps/zui/src/domain/results/utils/prep-export-query.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import ZuiApi from "src/js/api/zui-api"
-import program from "src/js/models/program"
-import Results from "src/js/state/Results"
-import {RESULTS_QUERY} from "src/views/results-pane/run-results-query"
-
-export function prepExportQuery(api: ZuiApi, format: string) {
-  let query = Results.getQuery(RESULTS_QUERY)(api.getState())
-  query = cutColumns(query, api)
-  query = maybeFuse(query, format)
-  return query
-}
-
-function cutColumns(query: string, api: ZuiApi) {
-  if (api.table && api.table.hiddenColumnCount > 0) {
-    const names = api.table.columns.map((c) => c.columnDef.header as string)
-    return program(query)
-      .quietCut(...names)
-      .string()
-  } else {
-    return query
-  }
-}
-
-function maybeFuse(query: string, format: string) {
-  if (format === "csv" || format == "tsv" || format === "arrows")
-    query += " | fuse"
-  return query
-}
diff --git a/apps/zui/src/domain/window/handlers.ts b/apps/zui/src/domain/window/handlers.ts
index 0e199d6766..1b12c3675b 100644
--- a/apps/zui/src/domain/window/handlers.ts
+++ b/apps/zui/src/domain/window/handlers.ts
@@ -6,6 +6,7 @@ import {QueryParams} from "src/js/api/queries/types"
 import {PaneName} from "src/js/state/Layout/types"
 import Appearance from "src/js/state/Appearance"
 import Layout from "src/js/state/Layout"
+import Modal from "src/js/state/Modal"
 
 export const showErrorMessage = createHandler(
   "window.showErrorMessage",
@@ -69,3 +70,7 @@ export const togglePane = createHandler(
     }
   }
 )
+
+export const hideModal = createHandler(({dispatch}) => {
+  dispatch(Modal.hide())
+})
diff --git a/apps/zui/src/electron/ops/update-plugin-lake-op.ts b/apps/zui/src/electron/ops/update-plugin-lake-op.ts
index 48e6e8038f..1e1e98c5ee 100644
--- a/apps/zui/src/electron/ops/update-plugin-lake-op.ts
+++ b/apps/zui/src/electron/ops/update-plugin-lake-op.ts
@@ -4,6 +4,7 @@ import {createOperation} from "../../core/operations"
 export const updatePluginLakeOp = createOperation(
   "updatePluginLakeOp",
   async ({main}, state: {lakeId: string}) => {
+    lake.id = state.lakeId
     lake.client = await main.createClient(state.lakeId)
   }
 )
diff --git a/apps/zui/src/electron/windows/search/app-menu.ts b/apps/zui/src/electron/windows/search/app-menu.ts
index 22a1661b00..de1503538c 100644
--- a/apps/zui/src/electron/windows/search/app-menu.ts
+++ b/apps/zui/src/electron/windows/search/app-menu.ts
@@ -18,6 +18,7 @@ export const defaultAppMenuState = () => ({
   showRightPane: true,
   showLeftPane: true,
   showHistogram: true,
+  routeName: null as null | string,
 })
 
 export type SearchAppMenuState = ReturnType<typeof defaultAppMenuState>
@@ -27,6 +28,7 @@ export function compileTemplate(
   state: SearchAppMenuState = defaultAppMenuState()
 ) {
   const mac = env.isMac
+  const querySessionActive = state.routeName === "querySession"
   const __: MenuItemConstructorOptions = {type: "separator"}
 
   const newWindow: MenuItemConstructorOptions = {
@@ -70,7 +72,9 @@ export function compileTemplate(
 
   const exportResults: MenuItemConstructorOptions = {
     label: "Export Results As...",
+    accelerator: "CmdOrCtrl+Shift+E",
     click: () => window.send("showExportResults"),
+    enabled: querySessionActive,
   }
 
   const checkForUpdates: MenuItemConstructorOptions = {
diff --git a/apps/zui/src/js/api/pools/pools-api.ts b/apps/zui/src/js/api/pools/pools-api.ts
index e3b3473678..93e0103578 100644
--- a/apps/zui/src/js/api/pools/pools-api.ts
+++ b/apps/zui/src/js/api/pools/pools-api.ts
@@ -48,7 +48,7 @@ export class PoolsApi extends ApiDomain {
   }
 
   async create(name: string, opts: Partial<CreatePoolOpts> = {}) {
-    const id = await invoke("pools.create", this.lakeId, name, opts)
+    const id = await invoke("pools.create", name, opts)
     await this.sync(id)
     return id
   }
diff --git a/apps/zui/src/js/components/AboutWindow.tsx b/apps/zui/src/js/components/AboutWindow.tsx
index 585e4da03d..429e426e68 100644
--- a/apps/zui/src/js/components/AboutWindow.tsx
+++ b/apps/zui/src/js/components/AboutWindow.tsx
@@ -23,22 +23,18 @@ export function Content(props: EnvAboutApp) {
       </div>
       <TextContent>
         <div className="about-content">
-          <section>
-            <label>Version</label>
+          <div className="about-grid">
+            <p className="weight:bold">Version</p>
             <p>{props.version}</p>
-          </section>
-          <section>
-            <label>Website</label>
+            <p className="weight:bold">Website</p>
             <a onClick={() => invoke("openLinkOp", props.website)}>
               {props.website}
             </a>
-          </section>
-          <section>
-            <label>Source</label>
+            <p className="weight:bold">Source</p>
             <a onClick={() => invoke("openLinkOp", props.repository)}>
               {props.repository}
             </a>
-          </section>
+          </div>
           <hr />
           <footer>
             <section>
diff --git a/apps/zui/src/js/components/ErrorNotice.tsx b/apps/zui/src/js/components/ErrorNotice.tsx
index a43dd347b5..3f1e63aa0b 100644
--- a/apps/zui/src/js/components/ErrorNotice.tsx
+++ b/apps/zui/src/js/components/ErrorNotice.tsx
@@ -6,8 +6,8 @@ import {ErrorData} from "../errors/types"
 import NetworkErrorNotice from "./NetworkErrorNotice"
 import Notice from "../state/Notice"
 import NoticeBanner from "./NoticeBanner"
-import useEscapeKey from "./hooks/useEscapeKey"
 
+// Remove This
 export default function ErrorNotice() {
   const error = useSelector(Notice.getError)
   const visible = useSelector(Notice.getVisible)
@@ -21,8 +21,6 @@ export default function ErrorNotice() {
 
 function ErrorMessage({error}: {error: ErrorData}) {
   const Component = getComponent(error)
-  const dispatch = useDispatch()
-  useEscapeKey(() => dispatch(Notice.dismiss()))
   return <Component error={error} />
 }
 
diff --git a/apps/zui/src/js/components/ExportModal.tsx b/apps/zui/src/js/components/ExportModal.tsx
deleted file mode 100644
index cb15be72b4..0000000000
--- a/apps/zui/src/js/components/ExportModal.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import React from "react"
-import {ChangeEvent, useState} from "react"
-import {toast} from "react-hot-toast"
-import {invoke} from "src/core/invoke"
-import {useZuiApi} from "src/app/core/context"
-import {prepExportQuery} from "src/domain/results/utils/prep-export-query"
-import classNames from "classnames"
-import forms from "src/components/forms.module.css"
-import modals from "src/components/modals.module.css"
-import {H1} from "src/components/h1"
-
-const showDialog = (format) => {
-  return invoke("showSaveDialogOp", {
-    title: `Export Results as ${format.toUpperCase()}`,
-    buttonLabel: "Export",
-    defaultPath: `results.${format}`,
-    properties: ["createDirectory"],
-    showsTagField: false,
-  })
-}
-
-const ExportModal = ({onClose}) => {
-  const api = useZuiApi()
-  const [format, setFormat] = useState("zng")
-
-  const onExport = async () => {
-    const {canceled, filePath} = await showDialog(format)
-    if (canceled) return
-    const query = prepExportQuery(api, format)
-    const promise = invoke("results.export", query, format, filePath)
-    toast
-      .promise(promise, {
-        loading: "Exporting...",
-        success: "Export Completed: " + filePath,
-        error: "Error Exporting",
-      })
-      .catch((e) => {
-        console.error(e)
-      })
-
-    onClose()
-  }
-
-  function preventDefault(e) {
-    e.preventDefault()
-  }
-
-  return (
-    <form
-      className={classNames(modals.form, forms.form)}
-      onSubmit={preventDefault}
-    >
-      <H1 className={modals.title}>Export Results</H1>
-      <section className={forms.fields}>
-        <div>
-          <label>Format</label>
-          <div
-            onChange={(e: ChangeEvent<HTMLInputElement>) => {
-              setFormat(e.target.value)
-            }}
-          >
-            <div className={forms.radioInput}>
-              <input type="radio" id="arrows" value="arrows" name="format" />
-              <label htmlFor="arrows">Arrow IPC Stream</label>
-            </div>
-            <div className={forms.radioInput}>
-              <input type="radio" id="csv" value="csv" name="format" />
-              <label htmlFor="csv">CSV</label>
-            </div>
-            <div className={forms.radioInput}>
-              <input type="radio" id="json" value="json" name="format" />
-              <label htmlFor="json">JSON</label>
-            </div>
-            <div className={forms.radioInput}>
-              <input type="radio" id="ndjson" value="ndjson" name="format" />
-              <label htmlFor="ndjson">NDJSON</label>
-            </div>
-            <div className={forms.radioInput}>
-              <input type="radio" id="tsv" value="tsv" name="format" />
-              <label htmlFor="tsv">TSV</label>
-            </div>
-            <div className={forms.radioInput}>
-              <input type="radio" id="vng" value="vng" name="format" />
-              <label htmlFor="vng">VNG</label>
-            </div>
-            <div className={forms.radioInput}>
-              <input type="radio" id="zeek" value="zeek" name="format" />
-              <label htmlFor="zeek">Zeek</label>
-            </div>
-            <div className={forms.radioInput}>
-              <input type="radio" id="zjson" value="zjson" name="format" />
-              <label htmlFor="zjson">ZJSON</label>
-            </div>
-            <div className={forms.radioInput}>
-              <input
-                type="radio"
-                id="zng"
-                value="zng"
-                name="format"
-                defaultChecked
-              />
-              <label htmlFor="zng">ZNG</label>
-            </div>
-            <div className={forms.radioInput}>
-              <input type="radio" id="zson" value="zson" name="format" />
-              <label htmlFor="zson">ZSON</label>
-            </div>
-          </div>
-        </div>
-      </section>
-      <div className={classNames(modals.submission, forms.submission)}>
-        <button type="button" onClick={onClose} className={forms.button}>
-          Close
-        </button>
-        <button type="submit" onClick={onExport} className={forms.submit}>
-          Export
-        </button>
-      </div>
-    </form>
-  )
-}
-
-export default ExportModal
diff --git a/apps/zui/src/js/components/LakeModals/EditLakeModal.tsx b/apps/zui/src/js/components/LakeModals/EditLakeModal.tsx
index 2635ca82da..f8682c1527 100644
--- a/apps/zui/src/js/components/LakeModals/EditLakeModal.tsx
+++ b/apps/zui/src/js/components/LakeModals/EditLakeModal.tsx
@@ -1,7 +1,6 @@
 import React from "react"
 import LakeForm from "./LakeForm"
 
-import modals from "src/components/modals.module.css"
 import {H1} from "src/components/h1"
 import {useSelector} from "react-redux"
 import Current from "src/js/state/Current"
@@ -10,9 +9,11 @@ const EditLakeModal = ({onClose}) => {
   const lake = useSelector(Current.getLake)
 
   return (
-    <div className={modals.form}>
-      <H1 className={modals.title}>Edit Lake</H1>
-      <LakeForm onClose={onClose} lake={lake} />
+    <div className="box-s">
+      <div className="stack-3">
+        <H1>Edit Lake</H1>
+        <LakeForm onClose={onClose} lake={lake} />
+      </div>
     </div>
   )
 }
diff --git a/apps/zui/src/js/components/LakeModals/LakeForm.tsx b/apps/zui/src/js/components/LakeModals/LakeForm.tsx
index 1b010a1d4c..de9d40466f 100644
--- a/apps/zui/src/js/components/LakeModals/LakeForm.tsx
+++ b/apps/zui/src/js/components/LakeModals/LakeForm.tsx
@@ -11,8 +11,6 @@ import useEventListener from "../hooks/useEventListener"
 import {isDefaultLake} from "../../initializers/initLakeParams"
 import {LakeModel} from "src/js/models/lake"
 import forms from "src/components/forms.module.css"
-import modals from "src/components/modals.module.css"
-import classNames from "classnames"
 import {ErrorWell} from "src/components/error-well"
 
 type Props = {
@@ -147,8 +145,8 @@ const LakeForm = ({onClose, lake}: Props) => {
 
   return (
     <form ref={setFormRef} className={forms.form}>
-      <section className={modals.fields}>
-        <div>
+      <section className="stack-1">
+        <div className="field">
           <label>{config.name.label}</label>
           <input
             type="text"
@@ -158,7 +156,7 @@ const LakeForm = ({onClose, lake}: Props) => {
             autoFocus
           />
         </div>
-        <div>
+        <div className="field">
           <label>{config.host.label}</label>
           <input
             type="text"
@@ -169,7 +167,7 @@ const LakeForm = ({onClose, lake}: Props) => {
         </div>
         <FormErrors errors={errors} />
       </section>
-      <section className={classNames(modals.submission, forms.submission)}>
+      <section className={forms.submission}>
         <button
           type="button"
           onClick={isSubmitting ? onCancel : onClickClose}
diff --git a/apps/zui/src/js/components/LakeModals/NewLakeModal.tsx b/apps/zui/src/js/components/LakeModals/NewLakeModal.tsx
index b7597257cb..1499424b4f 100644
--- a/apps/zui/src/js/components/LakeModals/NewLakeModal.tsx
+++ b/apps/zui/src/js/components/LakeModals/NewLakeModal.tsx
@@ -1,14 +1,19 @@
 import React from "react"
 import {H1} from "src/components/h1"
 import LakeForm from "./LakeForm"
-import modals from "src/components/modals.module.css"
+import {PopoverModal, usePopoverModal} from "src/components/popover-modal"
 
-const NewLakeModal = ({onClose}) => {
+const NewLakeModal = () => {
+  const modal = usePopoverModal()
   return (
-    <div className={modals.form}>
-      <H1 className={modals.title}>New Lake</H1>
-      <LakeForm onClose={onClose} />
-    </div>
+    <PopoverModal ref={modal.ref} className="max-width:measure">
+      <div className="box-s">
+        <div className="stack-3">
+          <H1>New Lake</H1>
+          <LakeForm onClose={modal.close} />
+        </div>
+      </div>
+    </PopoverModal>
   )
 }
 export default NewLakeModal
diff --git a/apps/zui/src/js/components/LakeModals/ViewLakeModal.tsx b/apps/zui/src/js/components/LakeModals/ViewLakeModal.tsx
index b88a3317b6..10c71c7129 100644
--- a/apps/zui/src/js/components/LakeModals/ViewLakeModal.tsx
+++ b/apps/zui/src/js/components/LakeModals/ViewLakeModal.tsx
@@ -12,11 +12,11 @@ import removeLake from "../../flows/lake/removeLake"
 import {useDispatch} from "src/app/core/state"
 import {showMessageBox} from "src/js/lib/System"
 import forms from "src/components/forms.module.css"
-import modals from "src/components/modals.module.css"
 import {H1} from "src/components/h1"
 import classNames from "classnames"
 import styles from "./lake-modal.module.css"
 import {capitalize} from "lodash"
+import {PopoverModal, usePopoverModal} from "src/components/popover-modal"
 
 const ViewLake = ({onClose, onEdit}) => {
   const dispatch = useDispatch()
@@ -54,51 +54,51 @@ const ViewLake = ({onClose, onEdit}) => {
   }
 
   return (
-    <div className={classNames(forms.form, modals.form)}>
-      <H1 className={modals.title}>{name}</H1>
-
-      <section className={forms.fields}>
-        <div>
-          <label>Lake URL</label>
-          <input
-            type="text"
-            readOnly
-            value={port ? [host, port].join(":") : host}
-          />
-        </div>
-        <div>
-          <label>Status</label>
-          <input type="text" readOnly value={capitalize(status)} />
-        </div>
-        <div>
-          <label>Zed Version</label>
-          <input type="text" readOnly value={version} />
+    <div className={classNames(forms.form, "box-s")}>
+      <div className="stack-3">
+        <H1>{name}</H1>
+        <section className="stack-1">
+          <div className="field">
+            <label>Lake URL</label>
+            <input
+              type="text"
+              readOnly
+              value={port ? [host, port].join(":") : host}
+            />
+          </div>
+          <div className="field">
+            <label>Status</label>
+            <input type="text" readOnly value={capitalize(status)} />
+          </div>
+          <div className="field">
+            <label>Zed Version</label>
+            <input type="text" readOnly value={version} />
+          </div>
+          <div className="field">
+            <label>Pool Count</label>
+            <input type="text" readOnly value={poolCount.toString()} />
+          </div>
+        </section>
+        <div className={forms.submission}>
+          <button type="button" onClick={onClose} className={forms.button}>
+            OK
+          </button>
+          <button type="submit" onClick={onEdit} className={forms.submit}>
+            Edit
+          </button>
         </div>
-        <div>
-          <label>Pool Count</label>
-          <input type="text" readOnly value={poolCount.toString()} />
-        </div>
-      </section>
-      <div className={classNames(forms.submission, modals.submission)}>
-        <button type="button" onClick={onClose} className={forms.button}>
-          OK
-        </button>
-        <button type="submit" onClick={onEdit} className={forms.submit}>
-          Edit
-        </button>
+        {!isDefault && (
+          <div className={styles.logout}>
+            <Link onClick={onRemove}>Logout</Link>
+          </div>
+        )}
       </div>
-      {!isDefault && (
-        <div className={styles.logout}>
-          <Link onClick={onRemove}>Logout</Link>
-        </div>
-      )}
     </div>
   )
 }
 
-const ViewLakeModal = ({onClose}) => {
+const Content = ({onClose}) => {
   const [editing, setEditing] = useState(false)
-
   if (editing) {
     return <EditLakeModal onClose={() => setEditing(false)} />
   } else {
@@ -106,4 +106,11 @@ const ViewLakeModal = ({onClose}) => {
   }
 }
 
-export default ViewLakeModal
+export function ViewLakeModal() {
+  const modal = usePopoverModal()
+  return (
+    <PopoverModal ref={modal.ref} className="max-width:measure">
+      <Content onClose={modal.close} />
+    </PopoverModal>
+  )
+}
diff --git a/apps/zui/src/js/components/Modals.tsx b/apps/zui/src/js/components/Modals.tsx
index bad489bc40..2ab758e7b7 100644
--- a/apps/zui/src/js/components/Modals.tsx
+++ b/apps/zui/src/js/components/Modals.tsx
@@ -1,41 +1,27 @@
-import {useSelector, useDispatch} from "react-redux"
+import {useSelector} from "react-redux"
 import Modal from "../state/Modal"
 import WhoisModal from "./WhoisModal"
 import React from "react"
 import NewLakeModal from "./LakeModals/NewLakeModal"
-import ViewLakeModal from "./LakeModals/ViewLakeModal"
-import ExportModal from "./ExportModal"
+import {ViewLakeModal} from "./LakeModals/ViewLakeModal"
 import {NewPoolModal} from "src/views/new-pool-modal"
-import {Debut, useDebut} from "src/components/debut"
-import {Dialog} from "src/components/dialog"
-import modalStyle from "src/components/modals.module.css"
+import {ExportModal} from "src/views/export-modal"
+import {PreviewLoadModal} from "src/views/preview-load-modal"
+import {SettingsModal} from "src/views/preferences-modal"
 
-const MODALS = {
+export const MODALS = {
+  settings: SettingsModal,
   whois: WhoisModal,
   "new-lake": NewLakeModal,
   "view-lake": ViewLakeModal,
   export: ExportModal,
   "new-pool": NewPoolModal,
+  "preview-load": PreviewLoadModal,
 }
 
 export function Modals() {
   const name = useSelector(Modal.getName)
-  const dispatch = useDispatch()
   const Component = MODALS[name]
-  const debut = useDebut({afterExit: () => dispatch(Modal.hide())})
-
   if (!Component) return null
-  return (
-    <Debut {...debut.props} classNames="modal">
-      <Dialog
-        onClose={() => debut.exit()}
-        dialogPoint="center center"
-        isOpen={true}
-        className={modalStyle.modal}
-        modal
-      >
-        <Component onClose={() => debut.exit()} />
-      </Dialog>
-    </Debut>
-  )
+  return <Component />
 }
diff --git a/apps/zui/src/js/components/ProgressIndicator.tsx b/apps/zui/src/js/components/ProgressIndicator.tsx
index da5d65c73f..761edf5f9d 100644
--- a/apps/zui/src/js/components/ProgressIndicator.tsx
+++ b/apps/zui/src/js/components/ProgressIndicator.tsx
@@ -1,5 +1,6 @@
 import classNames from "classnames"
 import React from "react"
+import {Case} from "src/components/case"
 
 type Props = {
   percent: number
@@ -13,7 +14,11 @@ export default function ProgressIndicator({percent, ...rest}: Props) {
   return (
     <div {...rest} className={classNames("progress-indicator", rest.className)}>
       <div className="progress-track">
-        <div className="progress-fill" style={style} />
+        <Case
+          if={percent === Infinity}
+          true={<div className="progress-fill progress-indeterminate" />}
+          false={<div className="progress-fill" style={style} />}
+        />
       </div>
     </div>
   )
diff --git a/apps/zui/src/js/components/Toaster.tsx b/apps/zui/src/js/components/Toaster.tsx
index 5544db32c6..6b187f6e37 100644
--- a/apps/zui/src/js/components/Toaster.tsx
+++ b/apps/zui/src/js/components/Toaster.tsx
@@ -15,6 +15,9 @@ const Toaster = () => {
         success: {
           duration: 6000,
         },
+        error: {
+          duration: 15_000,
+        },
       }}
     />
   )
diff --git a/apps/zui/src/js/components/WhoisModal.tsx b/apps/zui/src/js/components/WhoisModal.tsx
index f0d4ea5266..db3cc5dca0 100644
--- a/apps/zui/src/js/components/WhoisModal.tsx
+++ b/apps/zui/src/js/components/WhoisModal.tsx
@@ -1,18 +1,19 @@
 import {useSelector} from "react-redux"
 import React, {useEffect, useState} from "react"
 
-import modal from "../state/Modal"
+import Modal from "../state/Modal"
 import whois from "../services/whois"
 import useEnterKey from "./hooks/useEnterKey"
-import modals from "src/components/modals.module.css"
 import {H1} from "src/components/h1"
 import forms from "src/components/forms.module.css"
 import classNames from "classnames"
+import {PopoverModal, usePopoverModal} from "src/components/popover-modal"
 
-export default function WhoisModal({onClose}) {
-  useEnterKey(onClose)
+export default function WhoisModal() {
+  const modal = usePopoverModal()
+  useEnterKey(modal.close)
   const [text, setText] = useState("...Fetching...")
-  const {addr} = useSelector(modal.getArgs)
+  const {addr} = useSelector(Modal.getArgs)
 
   useEffect(() => {
     setTimeout(() => {
@@ -21,23 +22,29 @@ export default function WhoisModal({onClose}) {
   }, [])
 
   return (
-    <div style={{width: 600}} className={classNames(modals.form, forms.form)}>
-      <H1 className={modals.title}>Whois Lookup</H1>
-      <div>
-        <label>Address</label>
-        <input type="text" readOnly value={addr} />
+    <PopoverModal ref={modal.ref} className="box-s" style={{maxWidth: "75ch"}}>
+      <div className={forms.form + " stack-3"}>
+        <H1>Whois Lookup</H1>
+        <div className="field">
+          <label>Address</label>
+          <input type="text" readOnly value={addr} />
+        </div>
+        <div className="field">
+          <label>Whois Result</label>
+          <div style={{overflow: "auto"}}>
+            <pre>{text}</pre>
+          </div>
+        </div>
+        <div className={classNames(forms.submission)}>
+          <button
+            type="button"
+            onClick={modal.close}
+            style={{marginLeft: "auto"}}
+          >
+            Done
+          </button>
+        </div>
       </div>
-      <div>
-        <label>Whois Result</label>
-      </div>
-      <div style={{overflow: "auto"}}>
-        <pre className={modals.pre}>{text}</pre>
-      </div>
-      <div className={classNames(forms.submission, modals.submission)}>
-        <button type="button" onClick={onClose} style={{marginLeft: "auto"}}>
-          Done
-        </button>
-      </div>
-    </div>
+    </PopoverModal>
   )
 }
diff --git a/apps/zui/src/js/components/common/EmptySection.tsx b/apps/zui/src/js/components/common/EmptySection.tsx
index a3ac714898..e6625b8cad 100644
--- a/apps/zui/src/js/components/common/EmptySection.tsx
+++ b/apps/zui/src/js/components/common/EmptySection.tsx
@@ -9,16 +9,11 @@ const EmptyWrapper = styled.div`
   margin: 26px 0;
   user-select: none;
 
-  svg {
-    fill: var(--fg-color);
-    opacity: 0.1;
-  }
-
   p {
-    ${(props) => props.theme.typography.labelSmall};
     color: var(--fg-color-less);
     text-align: center;
     margin: 16px 14px 0;
+    text-wrap: pretty;
   }
 ` as ComponentType<React.PropsWithChildren<any>>
 
@@ -27,10 +22,9 @@ type EmptySectionProps = {
   message: string
 }
 
-const EmptySection = ({icon, message}: EmptySectionProps) => {
+const EmptySection = ({message}: EmptySectionProps) => {
   return (
     <EmptyWrapper>
-      {icon || null}
       <p>{message}</p>
     </EmptyWrapper>
   )
diff --git a/apps/zui/src/js/components/hooks/useListener.ts b/apps/zui/src/js/components/hooks/useListener.ts
index 3df2fbd72b..5a24256bdd 100644
--- a/apps/zui/src/js/components/hooks/useListener.ts
+++ b/apps/zui/src/js/components/hooks/useListener.ts
@@ -14,7 +14,9 @@ export default function useListener<T>(
 
   useEffect(() => {
     const listener = (e) => savedCallback.current(e)
-    et && et.addEventListener(event, listener, opts)
+    if (et) {
+      et.addEventListener(event, listener, opts)
+    }
     return () => {
       if (et) et.removeEventListener(event, listener, opts)
     }
diff --git a/apps/zui/src/js/state/Current/selectors.ts b/apps/zui/src/js/state/Current/selectors.ts
index 19ffa0fcd5..caaf7c89da 100644
--- a/apps/zui/src/js/state/Current/selectors.ts
+++ b/apps/zui/src/js/state/Current/selectors.ts
@@ -7,7 +7,7 @@ import {Pool} from "src/app/core/pools/pool"
 import Queries from "../Queries"
 import {QueryModel} from "src/js/models/query-model"
 import QueryVersions from "../QueryVersions"
-import {query, queryVersion} from "src/app/router/routes"
+import {query, queryVersion, whichRoute} from "src/app/router/routes"
 import SessionHistories from "../SessionHistories"
 import {createSelector} from "@reduxjs/toolkit"
 import {QueryVersion} from "../QueryVersions/types"
@@ -183,3 +183,9 @@ export const getPoolFromQuery = createSelector(
     return pools.find((p) => p.data.name === name) ?? null
   }
 )
+
+export const getRouteName = createSelector(getLocation, (location) => {
+  const route = whichRoute(location.pathname)
+  if (route) return route.name
+  else return null
+})
diff --git a/apps/zui/src/js/state/LoadDataForm/reducer.ts b/apps/zui/src/js/state/LoadDataForm/reducer.ts
index 855404b25e..b4b75bcaeb 100644
--- a/apps/zui/src/js/state/LoadDataForm/reducer.ts
+++ b/apps/zui/src/js/state/LoadDataForm/reducer.ts
@@ -12,12 +12,8 @@ const slice = createSlice({
     sidebarSize: 360,
     resultsRatio: 0.5,
     poolId: null,
-    show: false,
   },
   reducers: {
-    setShow: (state, action: PayloadAction<boolean>) => {
-      state.show = action.payload
-    },
     setPoolId: (state, action: PayloadAction<string>) => {
       state.poolId = action.payload
     },
@@ -43,7 +39,6 @@ const slice = createSlice({
       state.resultsRatio = action.payload
     },
     reset: (state) => {
-      state.show = false
       state.format = "auto"
       state.files = []
       state.shaper = ""
diff --git a/apps/zui/src/js/state/LoadDataForm/selectors.ts b/apps/zui/src/js/state/LoadDataForm/selectors.ts
index 2d45b56b7b..bec04e0cd8 100644
--- a/apps/zui/src/js/state/LoadDataForm/selectors.ts
+++ b/apps/zui/src/js/state/LoadDataForm/selectors.ts
@@ -8,7 +8,7 @@ export const getSidebarSize = (state: State) => state.loadDataForm.sidebarSize
 export const getFormat = (state: State) => state.loadDataForm.format
 export const getResultsRatio = (state: State) => state.loadDataForm.resultsRatio
 export const getPoolId = (state: State) => state.loadDataForm.poolId
-export const getShow = (state: State) => state.loadDataForm.show
+export const getShow = (state: State) => state.modal.name === "preview-load"
 
 export const getMainStyle = createSelector(getEditorSize, (editorSize) => {
   return {
diff --git a/apps/zui/src/js/state/Loads/types.ts b/apps/zui/src/js/state/Loads/types.ts
index 15739adcfb..5d6f18277c 100644
--- a/apps/zui/src/js/state/Loads/types.ts
+++ b/apps/zui/src/js/state/Loads/types.ts
@@ -5,6 +5,7 @@ export type LoadReference = {
   poolId: string
   progress: number
   files: string[]
+  query: string
   startedAt: string
   finishedAt: string | null
   abortedAt: string | null
diff --git a/apps/zui/src/js/state/Modal/types.ts b/apps/zui/src/js/state/Modal/types.ts
index 3e39ee4807..ec22baf504 100644
--- a/apps/zui/src/js/state/Modal/types.ts
+++ b/apps/zui/src/js/state/Modal/types.ts
@@ -1,3 +1,5 @@
+import {MODALS} from "src/js/components/Modals"
+
 export type ModalState = {name: string; args: Object}
 export type ModalAction = MODAL_SHOW | MODAL_HIDE
 
@@ -10,11 +12,4 @@ export type MODAL_HIDE = {
   type: "MODAL_HIDE"
 }
 
-export type ModalName =
-  | "settings"
-  | "export"
-  | "ingest-warnings"
-  | "new-lake"
-  | "view-lake"
-  | "new-pool"
-  | "whois"
+export type ModalName = keyof typeof MODALS
diff --git a/apps/zui/src/modules/debut/classes.ts b/apps/zui/src/modules/debut/classes.ts
new file mode 100644
index 0000000000..572071febd
--- /dev/null
+++ b/apps/zui/src/modules/debut/classes.ts
@@ -0,0 +1,32 @@
+export class DebutClasses {
+  constructor(public prefix) {}
+
+  get beforeEnter() {
+    return this.prefix + "--before-enter"
+  }
+  get enter() {
+    return this.prefix + "--enter"
+  }
+  get afterEnter() {
+    return this.prefix + "--after-enter"
+  }
+  get beforeExit() {
+    return this.prefix + "--before-exit"
+  }
+  get exit() {
+    return this.prefix + "--exit"
+  }
+  get afterExit() {
+    return this.prefix + "--after-exit"
+  }
+  get all() {
+    return [
+      this.beforeEnter,
+      this.enter,
+      this.afterEnter,
+      this.beforeExit,
+      this.exit,
+      this.afterExit,
+    ]
+  }
+}
diff --git a/apps/zui/src/modules/debut/config.ts b/apps/zui/src/modules/debut/config.ts
new file mode 100644
index 0000000000..d1c2424945
--- /dev/null
+++ b/apps/zui/src/modules/debut/config.ts
@@ -0,0 +1,23 @@
+export class DebutConfig {
+  effect: string
+  group: string = null
+
+  constructor(s: string) {
+    const parts = s.split(":")
+    if (parts.length === 1) {
+      this.effect = parts[0]
+    } else if (parts.length === 2) {
+      this.group = parts[0]
+      this.effect = parts[1]
+    } else {
+      throw new Error("Unable to parse data-debut attribute value: " + s)
+    }
+  }
+
+  static parseAll(string: string) {
+    return string
+      .trim()
+      .split(/\s+/)
+      .map((s) => new DebutConfig(s))
+  }
+}
diff --git a/apps/zui/src/modules/debut/dom.ts b/apps/zui/src/modules/debut/dom.ts
new file mode 100644
index 0000000000..ab9c4de93f
--- /dev/null
+++ b/apps/zui/src/modules/debut/dom.ts
@@ -0,0 +1,16 @@
+import {DebutConfig} from "./config"
+import {DebutElement} from "./element"
+import {DebutGroup} from "./group"
+
+export function selectGroup(name: string) {
+  const elements = []
+  const nodes = document.querySelectorAll("[data-debut*=" + name + "]") as any
+
+  for (const el of nodes) {
+    const val = el.dataset.debut
+    const configs = DebutConfig.parseAll(val)
+    const config = configs.find((c) => c.group === name)
+    if (config) elements.push(new DebutElement(el, config.effect, config.group))
+  }
+  return new DebutGroup(elements)
+}
diff --git a/apps/zui/src/modules/debut/element.ts b/apps/zui/src/modules/debut/element.ts
new file mode 100644
index 0000000000..a359f6d918
--- /dev/null
+++ b/apps/zui/src/modules/debut/element.ts
@@ -0,0 +1,37 @@
+import {transitionsComplete} from "src/util/watch-transition"
+import {DebutClasses} from "./classes"
+
+export class DebutElement {
+  classes: DebutClasses
+
+  constructor(public el, public effect: string, public group: string = null) {
+    this.classes = new DebutClasses(this.effect)
+  }
+
+  set(name: string) {
+    this.className(name)
+  }
+
+  reset() {
+    this.el.classList.remove(...this.classes.all, this.effect)
+  }
+
+  async setOnEnd(name: string) {
+    if (await transitionsComplete(this.el)) {
+      this.set(name)
+    }
+  }
+
+  get isEntering() {
+    return this.el.classList.contains(this.classes.enter)
+  }
+
+  get isExiting() {
+    return this.el.classList.contains(this.classes.exit)
+  }
+
+  className(name) {
+    this.el.classList.remove(...this.classes.all)
+    this.el.classList.add(this.classes[name], this.effect)
+  }
+}
diff --git a/apps/zui/src/modules/debut/group.ts b/apps/zui/src/modules/debut/group.ts
new file mode 100644
index 0000000000..ef740735eb
--- /dev/null
+++ b/apps/zui/src/modules/debut/group.ts
@@ -0,0 +1,42 @@
+import {DebutElement} from "./element"
+import {nextAnimationFrame} from "./utils"
+
+export class DebutGroup {
+  constructor(public elements: DebutElement[]) {}
+
+  async enter() {
+    if (this.isEntering) return
+    if (!this.isExiting) this.set("beforeEnter")
+    await nextAnimationFrame()
+    this.set("enter")
+    return this.setOnEnd("afterEnter")
+  }
+
+  async exit() {
+    if (this.isExiting) return
+    if (!this.isEntering) this.set("beforeExit")
+    await nextAnimationFrame()
+    this.set("exit")
+    return this.setOnEnd("afterExit")
+  }
+
+  set(state) {
+    this.elements.map((m) => m.set(state))
+  }
+
+  reset() {
+    this.elements.map((m) => m.reset())
+  }
+
+  setOnEnd(state) {
+    return Promise.allSettled(this.elements.map((e) => e.setOnEnd(state)))
+  }
+
+  get isExiting() {
+    return this.elements.some((e) => e.isExiting)
+  }
+
+  get isEntering() {
+    return this.elements.some((e) => e.isEntering)
+  }
+}
diff --git a/apps/zui/src/modules/debut/react.ts b/apps/zui/src/modules/debut/react.ts
new file mode 100644
index 0000000000..92c4037fa9
--- /dev/null
+++ b/apps/zui/src/modules/debut/react.ts
@@ -0,0 +1,17 @@
+import {selectGroup} from "./dom"
+
+class ReactApi {
+  constructor(public group: string) {}
+
+  enter() {
+    return selectGroup(this.group).enter()
+  }
+
+  exit() {
+    return selectGroup(this.group).exit()
+  }
+}
+
+export function useDebut(group: string) {
+  return new ReactApi(group)
+}
diff --git a/apps/zui/src/modules/debut/utils.ts b/apps/zui/src/modules/debut/utils.ts
new file mode 100644
index 0000000000..716d840c9a
--- /dev/null
+++ b/apps/zui/src/modules/debut/utils.ts
@@ -0,0 +1,3 @@
+export function nextAnimationFrame() {
+  return new Promise((resolve) => requestAnimationFrame(resolve))
+}
diff --git a/apps/zui/src/plugins/brimcap/loader.ts b/apps/zui/src/plugins/brimcap/loader.ts
index 1b0f07832d..31061223a9 100644
--- a/apps/zui/src/plugins/brimcap/loader.ts
+++ b/apps/zui/src/plugins/brimcap/loader.ts
@@ -1,5 +1,4 @@
 import fs from "fs"
-import {Loader} from "src/core/loader/types"
 import {LoadContext} from "src/domain/loads/load-context"
 import {isPcap} from "./packets/is-pcap"
 import {loads} from "src/zui"
@@ -10,6 +9,7 @@ import {createAnalyzeProcess, monitorAnalyzeProgress} from "./analyze"
 import {createCli} from "./cli"
 import errors from "src/js/errors"
 import {errorToString} from "src/util/error-to-string"
+import {Loader} from "src/domain/loads/types"
 
 class BrimcapLoader implements Loader {
   constructor(private ctx: LoadContext, private root: string) {}
diff --git a/apps/zui/src/test/system/boot.tsx b/apps/zui/src/test/system/boot.tsx
index cb5c636219..88c8bf2180 100644
--- a/apps/zui/src/test/system/boot.tsx
+++ b/apps/zui/src/test/system/boot.tsx
@@ -10,7 +10,7 @@ import {Store} from "src/js/state/types"
 import ZuiApi from "src/js/api/zui-api"
 import {MainObject} from "src/core/main/main-object"
 import Current from "src/js/state/Current"
-import {window} from "src/zui"
+import {lake, window} from "src/zui"
 
 const defaults = () => ({
   page: "search",
@@ -56,10 +56,11 @@ export async function boot(name: string, args: Partial<BootArgs> = {}) {
   })
   const windowId = mainObject.windows.byName("search")[0].id
   const brimRenderer = await initialize(windowId, "search")
-  window.sync({
-    id: windowId,
-    lakeId: Current.getLakeId(mainObject.store.getState()),
-  })
+  const lakeId = Current.getLakeId(mainObject.store.getState())
+  // This syncing could maybe be one function
+  window.sync({id: windowId, lakeId})
+  lake.id = lakeId
+  lake.client = await mainObject.createClient(lakeId)
   return {
     main: mainObject,
     store: brimRenderer.store,
diff --git a/apps/zui/src/util/array-wrap.ts b/apps/zui/src/util/array-wrap.ts
index fcbb5a3ad5..a8cf9dc527 100644
--- a/apps/zui/src/util/array-wrap.ts
+++ b/apps/zui/src/util/array-wrap.ts
@@ -1,4 +1,5 @@
 export function arrayWrap<T>(value: T | T[]): T[] {
   if (Array.isArray(value)) return value
+  if (value instanceof NodeList) return Array.from(value) as T[]
   else return [value]
 }
diff --git a/apps/zui/src/util/get-form-data.ts b/apps/zui/src/util/get-form-data.ts
new file mode 100644
index 0000000000..72dc05e838
--- /dev/null
+++ b/apps/zui/src/util/get-form-data.ts
@@ -0,0 +1,9 @@
+export function getFormData(e: any): any {
+  const form = e.currentTarget as HTMLFormElement
+  const data = Object.fromEntries(new FormData(form).entries())
+  const submit = e.nativeEvent.submitter.getAttribute("name")
+  return {
+    ...data,
+    submit,
+  }
+}
diff --git a/apps/zui/src/util/hooks/use-doc-listener.ts b/apps/zui/src/util/hooks/use-doc-listener.ts
new file mode 100644
index 0000000000..1336cf557f
--- /dev/null
+++ b/apps/zui/src/util/hooks/use-doc-listener.ts
@@ -0,0 +1,7 @@
+import {useRef} from "react"
+import {useRefListener} from "./use-ref-listener"
+
+export function useDocListener(event, callback) {
+  const ref = useRef(document)
+  return useRefListener(ref, event, callback)
+}
diff --git a/apps/zui/src/util/hooks/use-memory-form.ts b/apps/zui/src/util/hooks/use-memory-form.ts
new file mode 100644
index 0000000000..b7b662045d
--- /dev/null
+++ b/apps/zui/src/util/hooks/use-memory-form.ts
@@ -0,0 +1,67 @@
+import {MutableRefObject, useLayoutEffect} from "react"
+
+export function useMemoryForm(
+  ref: MutableRefObject<HTMLFormElement>,
+  formName: string
+) {
+  function getKey(e) {
+    return formName + ":" + e.name + ":" + e.type
+  }
+
+  function getVal(key) {
+    return localStorage.getItem(key)
+  }
+
+  function setVal(key, val) {
+    localStorage.setItem(key, val)
+  }
+
+  function optOut(element) {
+    return element.dataset.memory === "false"
+  }
+
+  function onInput(e) {
+    if (optOut(e.target)) return
+    const key = getKey(e.target)
+    const val = e.target.value
+    setVal(key, val)
+  }
+
+  function setInput(el: HTMLFormElement, val: string) {
+    switch (el.type) {
+      case "radio":
+        if (el.value == val) el.checked = true
+        break
+      case "select-one":
+        if (selectHasOption(el, val)) el.value = val
+        break
+      default:
+        el.value = val
+        break
+    }
+  }
+
+  function init() {
+    for (const e of ref.current.elements) {
+      if (optOut(e)) continue
+      const key = getKey(e)
+      const val = getVal(key)
+      if (val) setInput(e as HTMLFormElement, val)
+    }
+  }
+
+  useLayoutEffect(() => {
+    if (!ref.current) return
+    init()
+    ref.current.addEventListener("input", onInput)
+    return () => {
+      ref.current.removeEventListener("input", onInput)
+    }
+  }, [])
+}
+
+function selectHasOption(select, value) {
+  return Array.from(select.options)
+    .map((opt: HTMLOptionElement) => opt.value)
+    .includes(value)
+}
diff --git a/apps/zui/src/util/hooks/use-ref-listener.ts b/apps/zui/src/util/hooks/use-ref-listener.ts
new file mode 100644
index 0000000000..d92d6bd97f
--- /dev/null
+++ b/apps/zui/src/util/hooks/use-ref-listener.ts
@@ -0,0 +1,10 @@
+import {useEffect} from "react"
+
+export function useRefListener(ref, event, callback) {
+  useEffect(() => {
+    ref.current?.addEventListener(event, callback)
+    return () => {
+      ref.current?.removeEventListener(event, callback)
+    }
+  }, [callback])
+}
diff --git a/apps/zui/src/util/hooks/use-show-when.ts b/apps/zui/src/util/hooks/use-show-when.ts
new file mode 100644
index 0000000000..908daaa4aa
--- /dev/null
+++ b/apps/zui/src/util/hooks/use-show-when.ts
@@ -0,0 +1,104 @@
+import {MutableRefObject, useEffect, useLayoutEffect} from "react"
+import {cmdOrCtrl} from "src/app/core/utils/keyboard"
+
+// This should be called use form conditionals
+
+function createHook(keyword, callback) {
+  const attr = "data-" + keyword + "-when"
+  const selector = "[" + attr + "]"
+
+  return function useFormConditional(ref: MutableRefObject<HTMLFormElement>) {
+    function run() {
+      if (!ref.current) return
+      const form = ref.current
+      const data = new FormData(form)
+      const elements = form.querySelectorAll<HTMLElement>(selector)
+      for (const element of elements) {
+        const code = element.getAttribute(attr)
+        const isTrue = condition(code, data)
+        callback(element, isTrue)
+      }
+    }
+
+    useLayoutEffect(() => {
+      run()
+      ref.current.addEventListener("input", run)
+      return () => {
+        ref.current.addEventListener("input", run)
+      }
+    }, [])
+  }
+}
+
+function condition(code, data) {
+  const exprs = code.split("&&")
+  const result = exprs.every((expr) => {
+    const [left, right] = expr.trim().split("==")
+    return data.get(left) === right
+  })
+  return result
+}
+
+export const useRequiredWhen = createHook("required", (element, isTrue) => {
+  if (isTrue) {
+    element.setAttribute("required", "true")
+  } else {
+    element.removeAttribute("required")
+  }
+})
+
+export const useDisabledWhen = createHook("disabled", (element, isTrue) => {
+  if (isTrue) {
+    element.setAttribute("disabled", "true")
+  } else {
+    element.removeAttribute("disabled")
+  }
+})
+
+export const useShowWhen = createHook("show", (element, isTrue) => {
+  element.style.display = isTrue ? "" : "none"
+})
+
+function keyMatch(event, expr) {
+  return expr.split("+").every((token) => {
+    switch (token) {
+      case "Enter":
+        return true
+      case "CmdOrCtrl":
+        return cmdOrCtrl(event)
+      default:
+        throw new Error("Unknown key token in data-submit-key")
+    }
+  })
+}
+
+export function useSubmitKey(ref) {
+  const attr = "data-submit-key"
+  const selector = "[" + attr + "]:not([disabled])"
+
+  useEffect(() => {
+    function run(event) {
+      if (!ref.current) return
+      if (event.key === "Enter") {
+        const buttons = Array.from(
+          ref.current.querySelectorAll(selector)
+        ) as HTMLElement[]
+
+        const button = buttons.find((button) => {
+          const expr = button.getAttribute(attr)
+          const match = keyMatch(event, expr)
+          return match
+        })
+
+        if (button) {
+          event.preventDefault()
+          button.click()
+        }
+      }
+    }
+    ref.current?.addEventListener("keydown", run)
+    return () => {
+      ref.current?.addEventListener("keydown", run)
+    }
+  }, [])
+}
diff --git a/apps/zui/src/util/prevent-default.ts b/apps/zui/src/util/prevent-default.ts
new file mode 100644
index 0000000000..4121d4b120
--- /dev/null
+++ b/apps/zui/src/util/prevent-default.ts
@@ -0,0 +1,3 @@
+export function preventDefault(e) {
+  e.preventDefault()
+}
diff --git a/apps/zui/src/util/watch-transition.ts b/apps/zui/src/util/watch-transition.ts
new file mode 100644
index 0000000000..3dac3ce0fc
--- /dev/null
+++ b/apps/zui/src/util/watch-transition.ts
@@ -0,0 +1,89 @@
+class Signal {
+  resolve: (value?: any) => any
+  reject: () => any
+  promise: Promise<any>
+
+  constructor() {
+    this.promise = new Promise((res, rej) => {
+      this.resolve = res
+      this.reject = rej
+    })
+  }
+}
+
+class SetStack {
+  map = new Map<any, Set<any>>()
+
+  has(key, item) {
+    if (this.map.has(key)) {
+      return this.map.get(key).has(item)
+    }
+    return false
+  }
+
+  push(key, item) {
+    if (this.map.has(key)) {
+      this.map.get(key).add(item)
+    } else {
+      this.map.set(key, new Set([item]))
+    }
+  }
+
+  pop(key, item) {
+    const set = this.map.get(key)
+    if (!set) return
+    set.delete(item)
+    if (set.size === 0) this.map.delete(key)
+  }
+
+  get empty() {
+    return this.map.size === 0
+  }
+}
+
+export function transitionsComplete(node) {
+  let allEnded = true
+  const transitions = new SetStack()
+  const signal = new Signal()
+
+  function checkDone() {
+    if (transitions.empty) {
+      off()
+      signal.resolve(allEnded)
+    }
+  }
+
+  function onRun(e) {
+    transitions.push(e.currentTarget, e.propertyName)
+  }
+
+  function onEnd(e) {
+    if (transitions.has(e.currentTarget, e.propertyName)) {
+      transitions.pop(e.currentTarget, e.propertyName)
+      checkDone()
+    }
+  }
+
+  function onCancel(e) {
+    if (transitions.has(e.currentTarget, e.propertyName)) {
+      allEnded = false
+      transitions.pop(e.currentTarget, e.propertyName)
+      checkDone()
+    }
+  }
+
+  function off() {
+    node.removeEventListener("transitionrun", onRun)
+    node.removeEventListener("transitionend", onEnd)
+    node.removeEventListener("transitioncancel", onCancel)
+  }
+
+  // add an expectation that a transition run will start in a few milliseconds,
+  // otherwise throw an error indicating that the transition is maybe not working.
+
+  node.addEventListener("transitionrun", onRun)
+  node.addEventListener("transitionend", onEnd)
+  node.addEventListener("transitioncancel", onCancel)
+
+  return signal.promise
+}
diff --git a/apps/zui/src/views/application/index.tsx b/apps/zui/src/views/application/index.tsx
index 21d6e8cc7b..b8a8591492 100644
--- a/apps/zui/src/views/application/index.tsx
+++ b/apps/zui/src/views/application/index.tsx
@@ -18,7 +18,7 @@ import {NoTabsPane} from "src/views/no-tabs-pane"
 function AppRoutes() {
   return (
     <Switch>
-      <Route path={routes.lakeReleaseNotes.path}>
+      <Route path={routes.releaseNotes.path}>
         <ReleaseNotes />
       </Route>
       <Route path={routes.poolShow.path}>
@@ -29,9 +29,6 @@ function AppRoutes() {
       <Route path={routes.query.path}>
         <SessionRoute />
       </Route>
-      <Route path={routes.releaseNotes.path}>
-        <ReleaseNotes />
-      </Route>
       <Route path={routes.welcome.path}>
         <WelcomePage />
       </Route>
diff --git a/apps/zui/src/views/application/use-app-menu.ts b/apps/zui/src/views/application/use-app-menu.ts
index e111d37e43..ff96a7b2c2 100644
--- a/apps/zui/src/views/application/use-app-menu.ts
+++ b/apps/zui/src/views/application/use-app-menu.ts
@@ -4,6 +4,7 @@ import {useSelector} from "react-redux"
 import {invoke} from "src/core/invoke"
 import {SearchAppMenuState} from "src/electron/windows/search/app-menu"
 import Appearance from "src/js/state/Appearance"
+import Current from "src/js/state/Current"
 import Layout from "src/js/state/Layout"
 import {State} from "src/js/state/types"
 
@@ -19,11 +20,13 @@ const getAppMenuState = createSelector(
   Appearance.sidebarIsOpen,
   Appearance.secondarySidebarIsOpen,
   tryShowHistogram,
-  (showLeftPane, showRightPane, showHistogram) => {
+  Current.getRouteName,
+  (showLeftPane, showRightPane, showHistogram, routeName) => {
     return {
       showLeftPane,
       showRightPane,
       showHistogram,
+      routeName,
     } as SearchAppMenuState
   }
 )
diff --git a/apps/zui/src/views/export-modal/controller.ts b/apps/zui/src/views/export-modal/controller.ts
new file mode 100644
index 0000000000..8390ae93e2
--- /dev/null
+++ b/apps/zui/src/views/export-modal/controller.ts
@@ -0,0 +1,60 @@
+import {
+  exportToClipboard,
+  exportToFile,
+  exportToPool,
+} from "src/domain/results/handlers"
+import {getFormData} from "src/util/get-form-data"
+import {useExportModalState} from "./state"
+import {pluralize} from "src/util/pluralize"
+import {invoke} from "src/core/invoke"
+import {isAbortError} from "src/util/is-abort-error"
+
+type ExportModalState = ReturnType<typeof useExportModalState>
+
+export class ExportModalController {
+  constructor(private onClose: () => void, private state: ExportModalState) {}
+
+  async submit(e) {
+    e.preventDefault()
+    const data = getFormData(e)
+    switch (data.submit) {
+      case "toPool":
+        exportToPool(data)
+        this.close()
+        return
+      case "toFile":
+        if (await exportToFile(data.format)) this.close()
+        return
+      case "toClipboard":
+        this.state.setIsCopying(true)
+        try {
+          await exportToClipboard(data.format)
+        } catch (e) {
+          if (isAbortError(e)) return
+        } finally {
+          this.state.setIsCopying(false)
+        }
+        return
+    }
+  }
+
+  close() {
+    this.onClose()
+  }
+
+  cancelCopyToClipboard() {
+    invoke("results.cancelCopyToClipboard")
+  }
+
+  get summary() {
+    const {count, countStatus} = this.state
+    if (countStatus === "FETCHING") {
+      return "Calculating number of rows..."
+    } else {
+      return `This export will include ${count?.toLocaleString()} ${pluralize(
+        "row",
+        count
+      )}.`
+    }
+  }
+}
diff --git a/apps/zui/src/views/export-modal/index.tsx b/apps/zui/src/views/export-modal/index.tsx
new file mode 100644
index 0000000000..2bc1204189
--- /dev/null
+++ b/apps/zui/src/views/export-modal/index.tsx
@@ -0,0 +1,146 @@
+import React, {useRef} from "react"
+import classNames from "classnames"
+import forms from "src/components/forms.module.css"
+import {H1} from "src/components/h1"
+import {ExportModalController} from "./controller"
+import {PoolSelect} from "../pool-select"
+import {PoolForm} from "../pool-form"
+import {FormatSelect} from "../format-select"
+import {useExportModalState} from "./state"
+import {
+  useDisabledWhen,
+  useRequiredWhen,
+  useShowWhen,
+  useSubmitKey,
+} from "src/util/hooks/use-show-when"
+import {useMemoryForm} from "src/util/hooks/use-memory-form"
+import {PopoverModal, usePopoverModal} from "src/components/popover-modal"
+import {Show} from "src/components/show"
+
+export function ExportModal() {
+  const popover = usePopoverModal()
+  const state = useExportModalState()
+  const ctl = new ExportModalController(() => popover.close(), state)
+  const ref = useRef<HTMLFormElement>()
+  useMemoryForm(ref, "export-form")
+  useShowWhen(ref)
+  useRequiredWhen(ref)
+  useDisabledWhen(ref)
+  useSubmitKey(ref)
+
+  return (
+    <PopoverModal ref={popover.ref} className="max-width:fit">
+      <div className="stack-3 box-1">
+        <div className="stack--2">
+          <H1>Export Results</H1>
+          <p style={{fontSize: "16px"}}>{ctl.summary}</p>
+        </div>
+        <form
+          ref={ref}
+          className={classNames(forms.form, "stack-4")}
+          onSubmit={(e) => ctl.submit(e)}
+        >
+          <section className="stack-1 max-width:measure">
+            <div className="field">
+              <label>Export To</label>
+              <div className="cluster">
+                <div className={forms.radioInput}>
+                  <input
+                    type="radio"
+                    name="dest"
+                    id="dest_file"
+                    value="file"
+                    defaultChecked
+                  ></input>
+                  <label htmlFor="dest_file">File</label>
+                </div>
+                <div className={forms.radioInput}>
+                  <input
+                    type="radio"
+                    name="dest"
+                    id="dest_pool"
+                    value="pool"
+                  ></input>
+                  <label htmlFor="dest_pool">Pool</label>
+                </div>
+              </div>
+            </div>
+            <div className="stack-1" data-show-when="dest==file">
+              <FormatSelect defaultValue="zng" />
+            </div>
+            <div className="stack-1" data-show-when="dest==pool">
+              <PoolSelect />
+              <div className="stack-1" data-show-when="poolId==new">
+                <PoolForm
+                  nameInput={{
+                    autoFocus: true,
+                    "data-memory": false,
+                    "data-required-when": "poolId==new && dest==pool",
+                  }}
+                  keyInput={{
+                    "data-memory": false,
+                  }}
+                />
+              </div>
+            </div>
+          </section>
+
+          <div className="cluster justify:between">
+            <button
+              type="button"
+              name="close"
+              className={forms.button}
+              onClick={() => ctl.close()}
+            >
+              Close
+            </button>
+
+            <button
+              data-show-when="dest==pool"
+              type="submit"
+              name="toPool"
+              className={forms.submit}
+              data-disabled-when="dest==file"
+            >
+              Export To Pool
+            </button>
+
+            <div className="cluster--1" data-show-when="dest==file">
+              <Show when={state.isCopying} delay={150}>
+                <p>Copying to Clipboard...</p>
+                <button
+                  type="button"
+                  className={forms.button}
+                  onClick={ctl.cancelCopyToClipboard}
+                  data-disabled-when="dest==pool"
+                >
+                  Cancel
+                </button>
+              </Show>
+              <Show when={!state.isCopying} delay={150}>
+                <button
+                  type="submit"
+                  name="toClipboard"
+                  className={forms.submit}
+                  data-disabled-when="dest==pool"
+                  data-submit-key="CmdOrCtrl+Enter"
+                >
+                  Copy to Clipboard {globalThis.env.isMac ? "⌘" : "^"}↩
+                </button>
+                <button
+                  type="submit"
+                  name="toFile"
+                  className={forms.submit}
+                  data-disabled-when="dest==pool"
+                  data-submit-key="Enter"
+                >
+                  Export to File ↩
+                </button>
+              </Show>
+            </div>
+          </div>
+        </form>
+      </div>
+    </PopoverModal>
+  )
+}
diff --git a/apps/zui/src/views/export-modal/state.ts b/apps/zui/src/views/export-modal/state.ts
new file mode 100644
index 0000000000..e257ae9338
--- /dev/null
+++ b/apps/zui/src/views/export-modal/state.ts
@@ -0,0 +1,17 @@
+import {useState} from "react"
+import {useSelector} from "react-redux"
+import Results from "src/js/state/Results"
+import {RESULTS_QUERY_COUNT} from "../results-pane/run-results-query"
+
+export function useExportModalState() {
+  const countStatus = useSelector(Results.getStatus(RESULTS_QUERY_COUNT))
+  const count = useSelector(Results.getValues(RESULTS_QUERY_COUNT))[0]?.toJS()
+  const [isCopying, setIsCopying] = useState(false)
+
+  return {
+    isCopying,
+    setIsCopying,
+    count,
+    countStatus,
+  }
+}
diff --git a/apps/zui/src/views/format-select/index.tsx b/apps/zui/src/views/format-select/index.tsx
new file mode 100644
index 0000000000..8540d43016
--- /dev/null
+++ b/apps/zui/src/views/format-select/index.tsx
@@ -0,0 +1,16 @@
+import {FORMAT_OPTIONS} from "./options"
+
+export function FormatSelect(props: any) {
+  return (
+    <div className="field">
+      <label htmlFor="format">Format</label>
+      <select name="format" id="format" {...props}>
+        {FORMAT_OPTIONS.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
diff --git a/apps/zui/src/views/format-select/options.ts b/apps/zui/src/views/format-select/options.ts
new file mode 100644
index 0000000000..0502a0fe50
--- /dev/null
+++ b/apps/zui/src/views/format-select/options.ts
@@ -0,0 +1,12 @@
+export const FORMAT_OPTIONS = [
+  {value: "arrows", label: "Arrow IPC Stream"},
+  {value: "csv", label: "CSV"},
+  {value: "json", label: "JSON"},
+  {value: "ndjson", label: "NDJSON"},
+  {value: "tsv", label: "TSV"},
+  {value: "vng", label: "VNG"},
+  {value: "zeek", label: "Zeek"},
+  {value: "zjson", label: "ZJSON"},
+  {value: "zng", label: "ZNG"},
+  {value: "zson", label: "ZSON"},
+]
diff --git a/apps/zui/src/views/histogram-pane/histogram-pane.module.css b/apps/zui/src/views/histogram-pane/histogram-pane.module.css
index b39a34971f..459821fcb0 100644
--- a/apps/zui/src/views/histogram-pane/histogram-pane.module.css
+++ b/apps/zui/src/views/histogram-pane/histogram-pane.module.css
@@ -4,8 +4,6 @@
   border-bottom: 1px solid var(--border-color-more);
 }
 
-
-
 .dialog {
   z-index: 99999;
   position: fixed;
@@ -76,7 +74,6 @@ div.toolbar {
 }
 
 .title {
-  font-size: 0.7rem;
+  font-size: var(--step--2);
   color: var(--fg-color-less);
-  /* color: var(--border-color); */
 }
diff --git a/apps/zui/src/views/histogram-pane/settings-form.tsx b/apps/zui/src/views/histogram-pane/settings-form.tsx
index 406b72e342..f26369e7c9 100644
--- a/apps/zui/src/views/histogram-pane/settings-form.tsx
+++ b/apps/zui/src/views/histogram-pane/settings-form.tsx
@@ -43,8 +43,8 @@ export function SettingsForm(props: Props) {
       onSubmit={form.handleSubmit(onSubmit)}
       className={classNames(styles.settingsForm, forms.form)}
     >
-      <section className={forms.fields}>
-        <div>
+      <section className="stack-1">
+        <div className="field">
           <label>Time Field</label>
           <input
             type="text"
@@ -52,7 +52,7 @@ export function SettingsForm(props: Props) {
             placeholder={defaults.timeField}
           />
         </div>
-        <div>
+        <div className="field">
           <label>Color Field</label>
           <input
             type="text"
diff --git a/apps/zui/src/views/load-pane/form.module.css b/apps/zui/src/views/load-pane/form.module.css
deleted file mode 100644
index d4d99e2638..0000000000
--- a/apps/zui/src/views/load-pane/form.module.css
+++ /dev/null
@@ -1,142 +0,0 @@
-.form {
-    display: contents;
-    --side-padding: 16px;
-}
-
-.formBody {
-    display: flex;
-    flex-direction: column;
-    padding-bottom: var(--side-padding);
-}
-
-.formBody>* {
-    padding: 0 var(--side-padding);
-}
-
-.well {
-    padding: 1em var(--form-border-radius);
-    border-radius: var(--form-border-radius);
-    margin: var(--side-padding);
-    margin-top: auto;
-    margin-bottom: 1em;
-    color: var(--fg-color-less);
-    text-align: center;
-    font-size: 13px;
-    box-shadow: inset 0 0 6px -2px rgb(0 0 0 / 0.15);
-    border: 1px solid var(--border-color-more);
-    background: transparent;
-}
-
-.well p {
-    margin-bottom: 0.5rem;
-}
-
-.well p:last-child {
-    margin-bottom: 0;
-}
-
-.files {
-    padding: 0;
-    background: var(--form-bg-color);
-    border: var(--form-border);
-    border-radius: var(--form-border-radius);
-    overflow: hidden auto;
-    max-height: 400px;
-    min-height: var(--form-height);
-}
-
-.fileItem {
-    height: var(--form-height);
-    font-weight: normal;
-    padding: 0 2px 0 8px;
-    margin: 0;
-    display: grid;
-    grid-template-columns: max-content 1fr max-content;
-    align-items: center;
-}
-
-.fileName {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding-left: 8px;
-    direction: rtl;
-}
-
-.submission {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    bottom: 0;
-    padding: var(--side-padding);
-    background: var(--chrome-color);
-    padding-bottom: 10px;
-}
-
-.fields {
-    display: flex;
-    flex-direction: column;
-    gap: var(--form-field-gap);
-    margin-bottom: calc(var(--form-field-gap) * 2);
-}
-
-
-.form summary {
-    cursor: pointer;
-    letter-spacing: 0.3px;
-    color: var(--fg-color-less);
-    padding: calc(var(--form-field-gap) / 3) 6px;
-    padding-right: 0;
-    font-weight: 500;
-    user-select: none;
-    transition: none;
-    white-space: nowrap;
-}
-
-.form summary::marker {
-    display: inline-block;
-    width: 3em;
-    outline: 1px solid blue;
-}
-
-.form summary * {
-    pointer-events: none;
-}
-
-.form summary label {
-    font-weight: 500;
-}
-
-.summaryRule {
-    display: inline-flex;
-    align-items: center;
-    width: calc(100% - 1em);
-    /* The em is the marker */
-    gap: 0.5em;
-}
-
-.summaryRule hr {
-    flex: 0;
-    height: 1px;
-    border: none;
-    border-top: 1px solid var(--border-color-more);
-    transition: all 200ms;
-}
-
-.form details[open] .summaryRule hr {
-    transition: all 400ms;
-    flex: 1;
-}
-
-.form details[open]>summary {
-    margin-bottom: 10px;
-    transition: all 400ms;
-}
-
-.form details[open] {
-    padding-bottom: calc(var(--form-field-gap));
-}
-
-.form details>*:not(summary) {
-    margin-left: var(--side-padding);
-}
diff --git a/apps/zui/src/views/load-pane/form.tsx b/apps/zui/src/views/load-pane/form.tsx
deleted file mode 100644
index 434b0747ce..0000000000
--- a/apps/zui/src/views/load-pane/form.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-import baseForm from "src/components/forms.module.css"
-import {ScrollShadow} from "./scroll-shadow"
-import {Icon} from "src/components/icon"
-import Current from "src/js/state/Current"
-import {useForm} from "react-hook-form"
-import {useSelector} from "react-redux"
-import {invoke} from "src/core/invoke"
-import {useDispatch} from "src/app/core/state"
-import LoadDataForm from "src/js/state/LoadDataForm"
-import useSelect from "src/app/core/hooks/use-select"
-import classNames from "classnames"
-import styles from "./form.module.css"
-import forms from "src/components/forms.module.css"
-import {ChangeEvent, useRef, useState} from "react"
-import {IconButton} from "src/components/icon-button"
-import {DataFormatOptions} from "src/components/data-format-select"
-import {LoadFormat} from "@brimdata/zed-js"
-import {ErrorWell} from "src/components/error-well"
-import {errorToString} from "src/util/error-to-string"
-import {basename} from "src/util/basename"
-
-export function Form(props: {
-  onClose: () => any
-  onCancel: () => any
-  isValid: boolean
-}) {
-  const dispatch = useDispatch()
-  const select = useSelect()
-  const pools = useSelector(Current.getPools)
-  const lake = useSelector(Current.getLake)
-  const files = useSelector(LoadDataForm.getFiles)
-  const poolId = useSelector(LoadDataForm.getPoolId)
-  const format = useSelector(LoadDataForm.getFormat)
-  const fileInput = useRef(null)
-  const defaultUser = globalThis.appMeta.userName
-  const {register, handleSubmit, watch} = useForm<any>({
-    defaultValues: {
-      poolId: poolId || "new",
-    },
-  })
-
-  const [error, setError] = useState(null)
-
-  const onSubmit = async (data) => {
-    const shaper = select(LoadDataForm.getShaper)
-    // @ts-ignore
-    const windowId = window.windowId
-    try {
-      await invoke("loads.create", {
-        ...data,
-        files,
-        shaper,
-        windowId,
-      })
-      props.onClose()
-    } catch (e) {
-      setError(humanizeFormError(e))
-    }
-  }
-
-  const onFileInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const paths = Array.from(e.currentTarget.files).map((f) => f.path)
-    dispatch(LoadDataForm.addFiles(paths))
-  }
-
-  const onFormatChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    dispatch(LoadDataForm.setFormat(e.currentTarget.value as LoadFormat))
-  }
-
-  function removeFile(path: string) {
-    dispatch(LoadDataForm.setFiles(files.filter((p) => p !== path)))
-  }
-
-  function formSubmit(e) {
-    console.log("Form Submitted")
-    return handleSubmit(onSubmit)(e)
-  }
-  return (
-    <form
-      onSubmit={formSubmit}
-      className={classNames(styles.form, baseForm.form)}
-    >
-      <ScrollShadow threshold={45} className={styles.formBody}>
-        <section className={styles.fields}>
-          <div>
-            <div className={baseForm.actionLabel}>
-              <label>Files</label>
-              <a onClick={() => fileInput.current?.click()}>
-                + Add
-                <input
-                  ref={fileInput}
-                  type="file"
-                  style={{display: "none"}}
-                  onChange={onFileInputChange}
-                />
-              </a>
-            </div>
-            <ul className={styles.files}>
-              {files.map((f: string, i) => (
-                <li
-                  key={i}
-                  className={styles.fileItem}
-                  aria-label={basename(f)}
-                >
-                  <Icon
-                    name="doc_plain"
-                    size={"16px"}
-                    fill="var(--primary-color)"
-                  />
-                  <span title={f} className={styles.fileName}>
-                    {basename(f)}
-                  </span>
-                  <IconButton iconName="close" onClick={() => removeFile(f)} />
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div>
-            <label htmlFor="format">Data Format</label>
-            <select
-              id="format"
-              {...register("format")}
-              onChange={onFormatChange}
-              defaultValue={format}
-            >
-              <DataFormatOptions />
-            </select>
-          </div>
-          <div>
-            <label htmlFor="poolId">Pool</label>
-            <select {...register("poolId")} id="poolId">
-              <option value="new">+ New Pool</option>
-              {pools.map((pool) => (
-                <option key={pool.id} value={pool.id}>
-                  {pool.name}
-                </option>
-              ))}
-            </select>
-          </div>
-        </section>
-        {watch("poolId") === "new" && (
-          <details>
-            <summary role="button" aria-label="Pool Settings">
-              <div className={styles.summaryRule}>
-                <label>Pool Settings</label>
-                <hr />
-              </div>
-            </summary>
-            <section className={styles.fields}>
-              <div>
-                <label htmlFor="name">Name</label>
-                <input
-                  type="text"
-                  id="name"
-                  {...register("name")}
-                  placeholder="Derive from filenames..."
-                />
-              </div>
-              <div>
-                <label htmlFor="key">Pool Key</label>
-                <input
-                  id="key"
-                  type="text"
-                  {...register("key")}
-                  defaultValue={"ts"}
-                />
-              </div>
-              <div>
-                <label>Sort Order</label>
-                <div className={baseForm.radioInput}>
-                  <input
-                    id="ascending"
-                    name="order"
-                    type="radio"
-                    value="asc"
-                    {...register("order")}
-                  />
-                  <label htmlFor="ascending">Ascending</label>
-                </div>
-                <div className={baseForm.radioInput}>
-                  <input
-                    id="descending"
-                    name="order"
-                    type="radio"
-                    value="desc"
-                    defaultChecked
-                    {...register("order")}
-                  />
-                  <label htmlFor="descending">Descending</label>
-                </div>
-              </div>
-            </section>
-          </details>
-        )}
-        <details>
-          <summary>
-            <div className={styles.summaryRule}>
-              <label>Commit Settings</label>
-              <hr />
-            </div>
-          </summary>
-          <section className={styles.fields}>
-            <div>
-              <label htmlFor="author">Author</label>
-              <input
-                type="text"
-                defaultValue={defaultUser}
-                {...register("author")}
-              />
-            </div>
-            <div>
-              <label htmlFor="body">Message</label>
-              <textarea {...register("body")} defaultValue="Import from Zui" />
-            </div>
-          </section>
-        </details>
-        <section className={styles.well}>
-          <p>
-            Data will be loaded into{" "}
-            <b title={lake.getAddress()}>{lake.name}</b>.
-          </p>
-        </section>
-      </ScrollShadow>
-      <div>
-        {error && <ErrorWell error={error} />}
-        <div className={classNames(styles.submission)}>
-          <button
-            type="button"
-            onClick={() => {
-              props.onCancel()
-              props.onClose()
-            }}
-            className={forms.button}
-          >
-            Cancel
-          </button>
-          <button
-            type="submit"
-            disabled={!props.isValid}
-            className={forms.submit}
-          >
-            Load
-          </button>
-        </div>
-      </div>
-    </form>
-  )
-}
-
-function humanizeFormError(e: unknown) {
-  const error = errorToString(e)
-  if (/pool already exist/.test(error)) {
-    return "A pool with this name already exists."
-  }
-
-  return error
-}
diff --git a/apps/zui/src/views/load-pane/shaper.module.css b/apps/zui/src/views/load-pane/shaper.module.css
deleted file mode 100644
index 0b0f7b4ba1..0000000000
--- a/apps/zui/src/views/load-pane/shaper.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 18px;
-}
-
-.toolbar .title {
-    font-size: 14px;
-    font-weight: 600;
-    text-align: center;
-    color: var(--fg-color-less);
-}
-
-.toolbarActions {
-    margin-left: auto;
-    display: flex;
-    gap: 10px;
-    justify-content: flex-end;
-}
-
-.shaper {
-    position: relative;
-    min-width: 0;
-    display: grid;
-    grid-template-rows: 44px 1fr;
-    background: var(--bg-color);
-    border-radius: 6px;
-    box-shadow: var(--shadow-elevation-low);
-}
-
-.editor {
-    min-width: 0;
-    min-height: 0;
-    border-radius: 0 0 6px 6px;
-    overflow: hidden;
-}
diff --git a/apps/zui/src/views/new-pool-modal/controller.ts b/apps/zui/src/views/new-pool-modal/controller.ts
new file mode 100644
index 0000000000..6223ebe51c
--- /dev/null
+++ b/apps/zui/src/views/new-pool-modal/controller.ts
@@ -0,0 +1,24 @@
+import {poolPath} from "src/app/router/utils/paths"
+import {createHandler} from "src/core/handlers"
+import Tabs from "src/js/state/Tabs"
+import {getFormData} from "src/util/get-form-data"
+
+const createPool = createHandler(async ({invoke, dispatch, toast}, data) => {
+  const id = await invoke("pools.create", data.name, data)
+  dispatch(Tabs.activateUrl(poolPath(id)))
+  toast.success("Pool Created")
+})
+
+export class NewPoolModalController {
+  constructor(private close, private state) {}
+
+  async onSubmit(e) {
+    try {
+      const data = getFormData(e)
+      createPool(data)
+      this.close()
+    } catch (e) {
+      this.state.setError(e)
+    }
+  }
+}
diff --git a/apps/zui/src/views/new-pool-modal/index.module.css b/apps/zui/src/views/new-pool-modal/index.module.css
deleted file mode 100644
index fba3e43a46..0000000000
--- a/apps/zui/src/views/new-pool-modal/index.module.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.form {
-    padding: 0 30px 30px 30px;
-    width: 360px;
-}
-
-.fields {
-    display: flex;
-    flex-direction: column;
-    gap: 18px;
-}
-
-.submission {
-    margin-top: calc(var(--form-field-gap) * 2) ;
-}
-
-.title {
-    text-align: center;
-    margin: 20px 0 ;
-}
diff --git a/apps/zui/src/views/new-pool-modal/index.tsx b/apps/zui/src/views/new-pool-modal/index.tsx
index bce5de930c..f1e94a8524 100644
--- a/apps/zui/src/views/new-pool-modal/index.tsx
+++ b/apps/zui/src/views/new-pool-modal/index.tsx
@@ -1,86 +1,42 @@
-import {useForm} from "react-hook-form"
 import forms from "src/components/forms.module.css"
-import styles from "./index.module.css"
-import classNames from "classnames"
 import {H1} from "src/components/h1"
-import {useZuiApi} from "src/app/core/context"
-import {poolPath} from "src/app/router/utils/paths"
-import Tabs from "src/js/state/Tabs"
-import {useDispatch} from "src/app/core/state"
 import {useState} from "react"
 import {formatError} from "./format-error"
+import {PoolForm} from "../pool-form"
+import {NewPoolModalController} from "./controller"
+import {PopoverModal, usePopoverModal} from "src/components/popover-modal"
 
-export function NewPoolModal(props) {
-  const {register, handleSubmit} = useForm()
-  const api = useZuiApi()
-  const dispatch = useDispatch()
+export function NewPoolModal() {
   const [error, setError] = useState("")
-  const onSubmit = handleSubmit(async (data: any) => {
-    try {
-      const id = await api.pools.create(data.name, data)
-      dispatch(Tabs.activateUrl(poolPath(id)))
-      api.toast.success("Pool Created")
-      props.onClose()
-    } catch (e) {
-      setError(e)
-    }
-  })
+  const state = {error, setError}
+  const modal = usePopoverModal()
+  const ctl = new NewPoolModalController(modal.close, state)
 
   return (
-    <form className={classNames(forms.form, styles.form)} onSubmit={onSubmit}>
-      <H1 className={styles.title}>New Pool</H1>
-      <section className={styles.fields}>
-        <div>
-          <label>Name</label>
-          <input type="text" {...register("name")} autoFocus required />
-        </div>
-        <div>
-          <label>Pool Key</label>
-          <input
-            type="text"
-            {...register("key")}
-            defaultValue={"ts"}
-            required
-          />
-        </div>
-        <div>
-          <label>Sort Order</label>
-          <div className={forms.radioInput}>
-            <input
-              id="ascending"
-              name="order"
-              type="radio"
-              value="asc"
-              {...register("order")}
-            />
-            <label htmlFor="ascending">Ascending</label>
+    <PopoverModal ref={modal.ref} className="max-width:measure">
+      <div className="box-s">
+        <form className={forms.form} onSubmit={(e) => ctl.onSubmit(e)}>
+          <div className="stack-3">
+            <H1>New Pool</H1>
+            <section className="stack-1">
+              <PoolForm nameInput={{required: true, autoFocus: true}} />
+              {error && <div className={forms.error}>{formatError(error)}</div>}
+              <div className={forms.submission}>
+                <button
+                  type="button"
+                  onClick={modal.close}
+                  className={forms.button}
+                >
+                  Cancel
+                </button>
+                <button type="submit" className={forms.submit}>
+                  Create
+                </button>
+              </div>
+            </section>
           </div>
-          <div className={forms.radioInput}>
-            <input
-              id="descending"
-              name="order"
-              type="radio"
-              value="desc"
-              defaultChecked
-              {...register("order")}
-            />
-            <label htmlFor="descending">Descending</label>
-          </div>
-        </div>
-        {error && <div className={forms.error}>{formatError(error)}</div>}
-        <div className={classNames(forms.submission, styles.submission)}>
-          <button
-            type="button"
-            onClick={props.onClose}
-            className={forms.button}
-          >
-            Cancel
-          </button>
-          <button type="submit" className={forms.submit}>
-            Create
-          </button>
-        </div>
-      </section>
-    </form>
+        </form>
+      </div>
+    </PopoverModal>
   )
 }
diff --git a/apps/zui/src/views/pool-form/data.ts b/apps/zui/src/views/pool-form/data.ts
new file mode 100644
index 0000000000..efebefc9e4
--- /dev/null
+++ b/apps/zui/src/views/pool-form/data.ts
@@ -0,0 +1,8 @@
+export function getPoolFormData(form: HTMLFormElement) {
+  const data = new FormData(form)
+  return {
+    name: data.get("name"),
+    key: data.get("key"),
+    order: data.get("order"),
+  }
+}
diff --git a/apps/zui/src/views/pool-form/index.tsx b/apps/zui/src/views/pool-form/index.tsx
new file mode 100644
index 0000000000..39d4a6b239
--- /dev/null
+++ b/apps/zui/src/views/pool-form/index.tsx
@@ -0,0 +1,54 @@
+import forms from "src/components/forms.module.css"
+
+type Props = {
+  nameInput?: any
+  keyInput?: any
+}
+
+export function PoolForm(props: Props) {
+  return (
+    <>
+      <div className="field">
+        <label htmlFor="name">Pool Name</label>
+        <input
+          type="text"
+          name="name"
+          id="name"
+          placeholder="my_pool"
+          {...props.nameInput}
+        />
+      </div>
+
+      <div className="field">
+        <label htmlFor="key">Pool Key</label>
+        <input
+          id="key"
+          name="key"
+          type="text"
+          placeholder="id, ts, primary_key "
+          {...props.keyInput}
+        />
+      </div>
+
+      <div className="field">
+        <label>Sort Order</label>
+        <div className="cluster">
+          <div className={forms.radioInput}>
+            <input id="ascending" name="order" type="radio" value="asc" />
+            <label htmlFor="ascending">Ascending</label>
+          </div>
+          <div className={forms.radioInput}>
+            <input
+              id="descending"
+              name="order"
+              type="radio"
+              value="desc"
+              defaultChecked
+            />
+            <label htmlFor="descending">Descending</label>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/apps/zui/src/views/pool-page/details.module.css b/apps/zui/src/views/pool-page/details.module.css
index 38de5cf621..1c881ab741 100644
--- a/apps/zui/src/views/pool-page/details.module.css
+++ b/apps/zui/src/views/pool-page/details.module.css
@@ -1,17 +1,6 @@
-.details {
-    padding: var(--page-padding);
-    max-width: var(--page-max-width);
-    width: 100%;
-    margin: 0 auto;
-}
-
-.title {
-    margin-bottom: 1em;
-}
-
 .list {
-    background: var(--chrome-color);
-    padding: 1rem;
-    border-radius: 16px;
-    max-width: max-content;
+  background: var(--chrome-color);
+  padding: 1rem;
+  border-radius: 16px;
+  max-width: max-content;
 }
diff --git a/apps/zui/src/views/pool-page/details.tsx b/apps/zui/src/views/pool-page/details.tsx
index 14ffab9715..8a2ec1e700 100644
--- a/apps/zui/src/views/pool-page/details.tsx
+++ b/apps/zui/src/views/pool-page/details.tsx
@@ -6,8 +6,8 @@ import classNames from "classnames"
 export function Details({pool}: {pool: Pool}) {
   const keys = pool.keys.map((k) => (k ? k.join(".") : "null"))
   return (
-    <section className={styles.details}>
-      <h2 className={styles.title}>Pool Details</h2>
+    <section className="stack-0">
+      <h3>Pool Details</h3>
       <div className={classNames(styles.list, "stack--1")}>
         <dl>
           <dt>ID </dt>
diff --git a/apps/zui/src/views/pool-page/index.tsx b/apps/zui/src/views/pool-page/index.tsx
index 6eca43e8ad..d60de2dfeb 100644
--- a/apps/zui/src/views/pool-page/index.tsx
+++ b/apps/zui/src/views/pool-page/index.tsx
@@ -23,8 +23,8 @@ const Toolbar = styled.div`
 `
 
 const Subtitle = styled.p`
-  font-size: 13px;
-  opacity: 0.5;
+  font-size: var(--step-0);
+  color: var(--fg-color-less);
   margin: 0;
 `
 
@@ -65,7 +65,7 @@ export const Show = () => {
           </Toolbar>
         </div>
       </header>
-      <div className="box-1">
+      <div className="box-1 stack-3">
         <RecentLoads id={pool.id} />
         <Details pool={pool} />
       </div>
diff --git a/apps/zui/src/views/pool-page/job.module.css b/apps/zui/src/views/pool-page/job.module.css
index 178b7116ef..0c23ab41af 100644
--- a/apps/zui/src/views/pool-page/job.module.css
+++ b/apps/zui/src/views/pool-page/job.module.css
@@ -1,111 +1,111 @@
 .job {
-    display: grid;
-    grid-template-columns: 3rem 1fr min-content;
-    grid-template-rows: min-content min-content;
-    align-content: center;
-    align-items: center;
-    column-gap: 1em;
-    grid-template-areas: "icon info actions"
-        ". details .";
-    min-height: 86px;
+  display: grid;
+  grid-template-columns: 3rem 1fr min-content;
+  grid-template-rows: min-content min-content;
+  align-content: center;
+  align-items: center;
+  column-gap: 1em;
+  grid-template-areas:
+    "icon info actions"
+    ". details .";
+  min-height: 86px;
 }
 
 .icon {
-    grid-area: icon;
+  grid-area: icon;
 }
 
 .info {
-    grid-area: info;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    gap: 0.25em;
+  grid-area: info;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
 }
 
 .actions {
-    grid-area: actions;
+  grid-area: actions;
 }
 
 .name {
-    font-weight: bold;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+  font-weight: bold;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .progress {
-    grid-area: progress;
-    display: flex;
-    gap: 0.25em;
+  grid-area: progress;
+  display: flex;
+  gap: 0.25em;
 }
 
 .status {
-    grid-area: status;
-    color: var(--fg-color-less);
-    font-size: 0.8rem;
+  grid-area: status;
+  color: var(--fg-color-less);
+  font-size: var(--step--1);
 }
 
 .loadingIcon,
 .successIcon,
 .errorIcon {
-    width: 3rem;
-    height: 3rem;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .loadingIcon path:nth-child(1) {
-    animation: upload 1.6s 532ms infinite var(--pop-easing);
+  animation: upload 1.6s 532ms infinite var(--pop-easing);
 }
 
 .loadingIcon path:nth-child(2) {
-    animation: upload 1.6s 266ms infinite var(--pop-easing);
+  animation: upload 1.6s 266ms infinite var(--pop-easing);
 }
 
 .loadingIcon path:nth-child(3) {
-    animation: upload 1.6s infinite var(--pop-easing);
+  animation: upload 1.6s infinite var(--pop-easing);
 }
 
 @keyframes upload {
-    from {
-        transform: translateY(80%);
-        opacity: 0;
-    }
+  from {
+    transform: translateY(80%);
+    opacity: 0;
+  }
 
-    50% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-
-    to {
-        opacity: 0;
-        transform: translateY(-80%);
-    }
+  50% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 
+  to {
+    opacity: 0;
+    transform: translateY(-80%);
+  }
 }
 
 .loadingIcon {
-    color: var(--fg-color-less);
-    color: var(--blue);
-    background: var(--chrome-color-more);
+  color: var(--fg-color-less);
+  color: var(--blue);
+  background: var(--chrome-color-more);
 }
 
 .successIcon {
-    color: white;
-    background: var(--success-color);
+  color: white;
+  background: var(--success-color);
 }
 
 .errorIcon {
-    color: white;
-    background: var(--error-color);
+  color: white;
+  background: var(--error-color);
 }
 
 .details {
-    border-top: 1px solid var(--border-color);
-    margin-top: 0.5rem;
-    padding-top: 0.75rem;
-    color: var(--fg-color-less);
-    grid-area: details;
+  border-top: 1px solid var(--border-color);
+  margin-top: 0.5rem;
+  padding-top: 0.75rem;
+  color: var(--fg-color-less);
+  grid-area: details;
 }
diff --git a/apps/zui/src/views/pool-page/recent-loads.module.css b/apps/zui/src/views/pool-page/recent-loads.module.css
index 23bc63813f..ff6e165095 100644
--- a/apps/zui/src/views/pool-page/recent-loads.module.css
+++ b/apps/zui/src/views/pool-page/recent-loads.module.css
@@ -1,28 +1,10 @@
-.recentLoads {
-    padding: var(--page-padding);
-    padding-top: calc(var(--page-padding) * 1.5);
-    max-width: var(--page-max-width);
-    margin: 0 auto;
-    border-radius: 10px;
+.list > * {
+  padding: var(--s1);
+  border-radius: 16px;
+  cursor: default;
+  background: var(--chrome-color);
 }
 
-.title {
-    margin-bottom: 1em;
-}
-
-.list {
-    display: flex;
-    flex-direction: column;
-    gap: .5rem;
-}
-
-.list>* {
-    padding: 1rem;
-    border-radius: 16px;
-    cursor: default;
-    background: var(--chrome-color);
-}
-
-.list>*:hover {
-    background: var(--emphasis-bg-less);
+.list > *:hover {
+  background: var(--emphasis-bg-less);
 }
diff --git a/apps/zui/src/views/pool-page/recent-loads.tsx b/apps/zui/src/views/pool-page/recent-loads.tsx
index 7337eef1da..731d3e67b5 100644
--- a/apps/zui/src/views/pool-page/recent-loads.tsx
+++ b/apps/zui/src/views/pool-page/recent-loads.tsx
@@ -8,17 +8,17 @@ import {invoke} from "src/core/invoke"
 import {LoadModel} from "src/domain/loads/load-model"
 import * as fmt from "date-fns"
 import {ErrorLines} from "src/components/errors-lines"
+import classNames from "classnames"
 
 export function RecentLoads(props: {id: string}) {
   const loads = useSelector((s: State) => Loads.wherePoolId(s, props.id))
   const dispatch = useDispatch()
 
   const cancelLoad = async (load) => {
-    if (
-      load.status == "loading" &&
-      confirm("Are you sure you want to abort this load?")
-    ) {
-      await invoke("loads.abort", load.id)
+    if (load.status == "loading") {
+      if (confirm("Are you sure you want to abort this load?")) {
+        await invoke("loads.abort", load.id)
+      }
     } else {
       dispatch(Loads.delete(load.id))
     }
@@ -27,16 +27,16 @@ export function RecentLoads(props: {id: string}) {
   if (loads.length === 0) return null
 
   return (
-    <section className={styles.recentLoads}>
-      <h2 className={styles.title}>Recent Loads</h2>
-      <div className={styles.list}>
+    <section className="stack-0">
+      <h3>Recent Loads</h3>
+      <div className={classNames(styles.list, "stack-0")}>
         {loads
           .map((ref) => new LoadModel(ref))
           .sort((a, b) => b.startedAt.getTime() - a.startedAt.getTime())
           .map((load) => (
             <Job
               key={load.id}
-              name={load.humanizeFiles}
+              name={load.title}
               message={statusMessage(load)}
               status={load.status}
               progress={load.progress}
diff --git a/apps/zui/src/views/pool-select/index.tsx b/apps/zui/src/views/pool-select/index.tsx
new file mode 100644
index 0000000000..300a7f536c
--- /dev/null
+++ b/apps/zui/src/views/pool-select/index.tsx
@@ -0,0 +1,21 @@
+import {useSelector} from "react-redux"
+import Current from "src/js/state/Current"
+
+export function PoolSelect(props: any) {
+  const pools = useSelector(Current.getPools)
+  return (
+    <div className="field">
+      <label htmlFor="poolId">Pool</label>
+      <select name="poolId" id="poolId" {...props}>
+        <>
+          <option value="new">+ New Pool</option>
+          {pools.map((pool) => (
+            <option key={pool.id} value={pool.id}>
+              {pool.name}
+            </option>
+          ))}
+        </>
+      </select>
+    </div>
+  )
+}
diff --git a/apps/zui/src/views/preferences-modal/index.tsx b/apps/zui/src/views/preferences-modal/index.tsx
index 1c2c23a714..dd06ff1f8d 100644
--- a/apps/zui/src/views/preferences-modal/index.tsx
+++ b/apps/zui/src/views/preferences-modal/index.tsx
@@ -5,35 +5,22 @@ import useCallbackRef from "src/js/components/hooks/useCallbackRef"
 import {Form} from "./form"
 import forms from "src/components/forms.module.css"
 import classNames from "classnames"
-import {Dialog} from "src/components/dialog"
-import {Debut, useDebut} from "src/components/debut"
-import modals from "src/components/modals.module.css"
 import styles from "./index.module.css"
-import Modal from "src/js/state/Modal"
-import {useSelector} from "react-redux"
-import {useDispatch} from "src/app/core/state"
 import {H1} from "src/components/h1"
 import {useFields} from "./use-fields"
 import {objectIsEmpty} from "src/util/object-is-empty"
+import {PopoverModal, usePopoverModal} from "src/components/popover-modal"
 
-export function PreferencesModal() {
-  const name = useSelector(Modal.getName)
-  if (name !== "settings") return null
-
-  return <ModalWithFields />
-}
-
-export function ModalWithFields() {
+export function SettingsModal() {
   const fields = useFields()
   if (objectIsEmpty(fields)) return null
-  return <ModalDialog fields={fields} />
+  return <Content fields={fields} />
 }
 
-export function ModalDialog(props: {fields: FormConfig}) {
-  const dispatch = useDispatch()
+function Content(props: {fields: FormConfig}) {
+  const modal = usePopoverModal()
   const [formEl, setForm] = useCallbackRef<HTMLFormElement>()
   const [errors, setErrors] = useState([])
-  const debut = useDebut({afterExit: () => dispatch(Modal.hide())})
 
   const onSubmit = useCallback(
     async (e) => {
@@ -44,7 +31,7 @@ export function ModalDialog(props: {fields: FormConfig}) {
       if (await f.isValid()) {
         setErrors([])
         f.submit()
-        debut.exit()
+        modal.close()
       } else {
         setErrors(f.getErrors())
       }
@@ -52,39 +39,35 @@ export function ModalDialog(props: {fields: FormConfig}) {
     [formEl, props.fields]
   )
 
-  const onCancel = () => {
-    debut.exit()
-  }
-
   return (
-    <Debut classNames="modal" {...debut.props}>
-      <Dialog
-        modal
-        isOpen={true}
-        onClose={() => debut.exit()}
-        className={classNames(styles.modal, modals.modal)}
-        dialogPoint="center center"
-      >
+    <PopoverModal ref={modal.ref} style={{maxWidth: "75ch"}}>
+      <div className="box-s">
         <FormErrors errors={errors} />
         <form
           ref={setForm}
           onSubmit={onSubmit}
-          className={classNames(forms.form, "settings-form")}
+          className={classNames(forms.form)}
         >
-          <H1 className={classNames(forms.title, styles.title)}>Settings</H1>
-          <div className={forms.horizontalFields}>
-            <Form configs={props.fields} />
-          </div>
-          <div className={forms.submission}>
-            <button type="button" onClick={onCancel} className={forms.button}>
-              Cancel
-            </button>
-            <button type="submit" className={forms.submit}>
-              Save
-            </button>
+          <div className="stack-3">
+            <H1 className={classNames(forms.title, styles.title)}>Settings</H1>
+            <div className={forms.horizontalFields}>
+              <Form configs={props.fields} />
+            </div>
+            <div className={forms.submission}>
+              <button
+                type="button"
+                onClick={modal.close}
+                className={forms.button}
+              >
+                Cancel
+              </button>
+              <button type="submit" className={forms.submit}>
+                Save
+              </button>
+            </div>
           </div>
         </form>
-      </Dialog>
-    </Debut>
+      </div>
+    </PopoverModal>
   )
 }
diff --git a/apps/zui/src/views/load-pane/file-list.tsx b/apps/zui/src/views/preview-load-modal/file-list.tsx
similarity index 100%
rename from apps/zui/src/views/load-pane/file-list.tsx
rename to apps/zui/src/views/preview-load-modal/file-list.tsx
diff --git a/apps/zui/src/views/preview-load-modal/form/controller.ts b/apps/zui/src/views/preview-load-modal/form/controller.ts
new file mode 100644
index 0000000000..42c4e432b5
--- /dev/null
+++ b/apps/zui/src/views/preview-load-modal/form/controller.ts
@@ -0,0 +1,43 @@
+import {FormEvent} from "react"
+import {createHandler} from "src/core/handlers"
+import LoadDataForm from "src/js/state/LoadDataForm"
+import {errorToString} from "src/util/error-to-string"
+import {getFormData} from "src/util/get-form-data"
+import {LoadFormState} from "./state"
+import {LoadFormProps} from "."
+
+const beginLoad = createHandler(async ({invoke, select}, data) => {
+  const shaper = select(LoadDataForm.getShaper)
+  const files = select(LoadDataForm.getFiles)
+  // @ts-ignore
+  const windowId = window.windowId
+  await invoke("loads.create", {
+    ...data,
+    files,
+    shaper,
+    windowId,
+  })
+})
+
+export class LoadFormController {
+  constructor(private props: LoadFormProps, private state: LoadFormState) {}
+
+  onSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    try {
+      beginLoad(getFormData(e))
+      this.props.onClose()
+    } catch (e) {
+      this.state.setError(this.humanizeFormError(e))
+    }
+  }
+
+  private humanizeFormError(e: unknown) {
+    const error = errorToString(e)
+    if (/pool already exist/.test(error)) {
+      return "A pool with this name already exists."
+    }
+
+    return error
+  }
+}
diff --git a/apps/zui/src/views/preview-load-modal/form/form.module.css b/apps/zui/src/views/preview-load-modal/form/form.module.css
new file mode 100644
index 0000000000..04135f843a
--- /dev/null
+++ b/apps/zui/src/views/preview-load-modal/form/form.module.css
@@ -0,0 +1,137 @@
+.form {
+  display: contents;
+  --side-padding: 16px;
+}
+
+.formBody {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: var(--side-padding);
+}
+
+.formBody > * {
+  padding: 0 var(--side-padding);
+}
+
+.well {
+  padding: 1em var(--form-border-radius);
+  border-radius: var(--form-border-radius);
+  color: var(--fg-color-less);
+  text-align: center;
+  box-shadow: inset 0 0 6px -2px rgb(0 0 0 / 0.15);
+  border: 1px solid var(--border-color-more);
+  background: transparent;
+}
+
+.well p {
+  margin-bottom: 0.5rem;
+}
+
+.well p:last-child {
+  margin-bottom: 0;
+}
+
+.files {
+  padding: 0;
+  background: var(--form-bg-color);
+  border: var(--form-border);
+  border-radius: var(--form-border-radius);
+  overflow: hidden auto;
+  max-height: 400px;
+  min-height: var(--form-height);
+}
+
+.fileItem {
+  height: var(--form-height);
+  font-weight: normal;
+  padding: 0 2px 0 8px;
+  margin: 0;
+  display: grid;
+  grid-template-columns: max-content 1fr max-content;
+  align-items: center;
+}
+
+.fileName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 8px;
+  direction: rtl;
+}
+
+.submission {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  bottom: 0;
+  padding: var(--side-padding);
+  padding-bottom: 10px;
+}
+
+.fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-field-gap);
+  margin-bottom: calc(var(--form-field-gap) * 2);
+}
+
+.form summary {
+  cursor: pointer;
+  letter-spacing: 0.3px;
+  color: var(--fg-color-less);
+  padding: calc(var(--form-field-gap) / 3) 0;
+  padding-right: 0;
+  font-weight: 500;
+  user-select: none;
+  transition: none;
+  white-space: nowrap;
+}
+
+.form summary::marker {
+  display: inline-block;
+  width: 3em;
+  outline: 1px solid blue;
+}
+
+.form summary * {
+  pointer-events: none;
+}
+
+.form summary label {
+  font-weight: 500;
+}
+
+.summaryRule {
+  display: inline-flex;
+  align-items: center;
+  width: calc(100% - 1em);
+  padding-left: var(--s-5);
+  /* The em is the marker */
+  gap: var(--s0);
+}
+
+.summaryRule hr {
+  flex: 0;
+  height: 1px;
+  border: none;
+  border-top: 1px solid var(--border-color-more);
+  transition: all 200ms;
+}
+
+.form details[open] .summaryRule hr {
+  transition: all 400ms;
+  flex: 1;
+}
+
+.form details[open] > summary {
+  margin-bottom: 10px;
+  transition: all 400ms;
+}
+
+.form details[open] {
+  padding-bottom: calc(var(--form-field-gap));
+}
+
+.form details > *:not(summary) {
+  /* margin-left: var(--side-padding); */
+}
diff --git a/apps/zui/src/views/preview-load-modal/form/index.tsx b/apps/zui/src/views/preview-load-modal/form/index.tsx
new file mode 100644
index 0000000000..5795f5f031
--- /dev/null
+++ b/apps/zui/src/views/preview-load-modal/form/index.tsx
@@ -0,0 +1,168 @@
+import baseForm from "src/components/forms.module.css"
+import {ScrollShadow} from "../scroll-shadow"
+import {Icon} from "src/components/icon"
+import classNames from "classnames"
+import styles from "./form.module.css"
+import forms from "src/components/forms.module.css"
+import {useRef} from "react"
+import {IconButton} from "src/components/icon-button"
+import {DataFormatOptions} from "src/components/data-format-select"
+import {ErrorWell} from "src/components/error-well"
+import {basename} from "src/util/basename"
+import {Show} from "src/components/show"
+import {PoolForm} from "../../pool-form"
+import {LoadFormController} from "./controller"
+import {useLoadFormState} from "./state"
+import {LoadFormat} from "@brimdata/zed-js"
+
+export type LoadFormProps = Parameters<typeof Form>[0]
+
+export function Form(props: {
+  onClose: () => any
+  onCancel: () => any
+  isValid: boolean
+}) {
+  const state = useLoadFormState()
+  const ctl = new LoadFormController(props, state)
+  const fileInput = useRef(null)
+
+  return (
+    <form
+      onSubmit={(e) => ctl.onSubmit(e)}
+      className={classNames(styles.form, baseForm.form)}
+    >
+      <ScrollShadow threshold={45} className={styles.formBody}>
+        <section className="stack-1">
+          <p>
+            Data will be loaded into{" "}
+            <b title={state.lake.getAddress()}>{state.lake.name}</b>.
+          </p>
+          <div className="field">
+            <div className={baseForm.actionLabel}>
+              <label>Files</label>
+              <a onClick={() => fileInput.current?.click()}>
+                + Add
+                <input
+                  ref={fileInput}
+                  type="file"
+                  style={{display: "none"}}
+                  onChange={(e) => {
+                    state.addFiles(
+                      Array.from(e.currentTarget.files).map((f) => f.path)
+                    )
+                  }}
+                />
+              </a>
+            </div>
+            <ul className={styles.files}>
+              {state.files.map((f: string, i) => (
+                <li
+                  key={i}
+                  className={styles.fileItem}
+                  aria-label={basename(f)}
+                >
+                  <Icon
+                    name="doc_plain"
+                    size={"16px"}
+                    fill="var(--primary-color)"
+                  />
+                  <span title={f} className={styles.fileName}>
+                    {basename(f)}
+                  </span>
+                  <IconButton
+                    iconName="close"
+                    onClick={() => {
+                      state.setFiles(state.files.filter((p) => p !== f))
+                    }}
+                  />
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="field">
+            <label htmlFor="format">Data Format</label>
+            <select
+              id="format"
+              name="format"
+              onChange={(e) =>
+                state.setFormat(e.currentTarget.value as LoadFormat)
+              }
+              defaultValue={state.format}
+            >
+              <DataFormatOptions />
+            </select>
+          </div>
+          <div className="field">
+            <label htmlFor="poolId">Pool</label>
+            <select
+              name="poolId"
+              value={state.poolId}
+              id="poolId"
+              onChange={(e) => state.setPoolId(e.currentTarget.value)}
+            >
+              <option value="new">+ New Pool</option>
+              {state.pools.map((pool) => (
+                <option key={pool.id} value={pool.id}>
+                  {pool.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <Show when={state.newPool}>
+            <PoolForm
+              nameInput={{
+                placeholder: "Defaults to name of file(s)",
+              }}
+              keyInput={{
+                placeholder: "Defaults to 'ts'",
+              }}
+            />
+          </Show>
+          <div className="field">
+            <label htmlFor="author">Author</label>
+            <input
+              type="text"
+              defaultValue={state.defaultUser}
+              name="author"
+              id="author"
+            />
+          </div>
+          <div className="field">
+            <label htmlFor="body">Message</label>
+            <textarea
+              name="body"
+              id="body"
+              defaultValue={state.defaultMessage}
+            />
+          </div>
+        </section>
+      </ScrollShadow>
+      <div>
+        <Show when={state.error}>
+          <ErrorWell error={state.error} />
+        </Show>
+
+        <div className={classNames(styles.submission)}>
+          <button
+            type="button"
+            onClick={() => {
+              props.onCancel()
+              props.onClose()
+            }}
+            className={forms.button}
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={!props.isValid}
+            className={forms.submit}
+          >
+            Load
+          </button>
+        </div>
+      </div>
+    </form>
+  )
+}
diff --git a/apps/zui/src/views/preview-load-modal/form/state.ts b/apps/zui/src/views/preview-load-modal/form/state.ts
new file mode 100644
index 0000000000..a86123947b
--- /dev/null
+++ b/apps/zui/src/views/preview-load-modal/form/state.ts
@@ -0,0 +1,36 @@
+import {LoadFormat} from "@brimdata/zed-js"
+import {useState} from "react"
+import {useDispatch, useSelector} from "react-redux"
+import Current from "src/js/state/Current"
+import LoadDataForm from "src/js/state/LoadDataForm"
+
+export type LoadFormState = ReturnType<typeof useLoadFormState>
+export function useLoadFormState() {
+  const dispatch = useDispatch()
+  const pools = useSelector(Current.getPools)
+  const lake = useSelector(Current.getLake)
+  const files = useSelector(LoadDataForm.getFiles)
+  const poolId = useSelector(LoadDataForm.getPoolId) || "new"
+  const format = useSelector(LoadDataForm.getFormat)
+  const defaultUser = globalThis.appMeta.userName
+  const defaultMessage = "Import from Zui"
+  const [error, setError] = useState(null)
+  const newPool = poolId === "new"
+
+  return {
+    files,
+    addFiles: (paths: string[]) => dispatch(LoadDataForm.addFiles(paths)),
+    setFiles: (paths: string[]) => dispatch(LoadDataForm.setFiles(paths)),
+    format,
+    setFormat: (f: LoadFormat) => dispatch(LoadDataForm.setFormat(f)),
+    pools,
+    lake,
+    poolId: poolId || "new",
+    setPoolId: (id: string) => dispatch(LoadDataForm.setPoolId(id)),
+    newPool,
+    defaultUser,
+    defaultMessage,
+    error,
+    setError,
+  }
+}
diff --git a/apps/zui/src/views/load-pane/index.module.css b/apps/zui/src/views/preview-load-modal/index.module.css
similarity index 73%
rename from apps/zui/src/views/load-pane/index.module.css
rename to apps/zui/src/views/preview-load-modal/index.module.css
index e119caaf08..44ecf1cc9a 100644
--- a/apps/zui/src/views/load-pane/index.module.css
+++ b/apps/zui/src/views/preview-load-modal/index.module.css
@@ -1,12 +1,11 @@
 .grid {
-  width: 92vw;
-  height: 92vh;
+  height: 100%;
+  width: 100%;
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 1fr 360px;
-  border-radius: 8px 8px 0 0;
   overflow: hidden;
-  background-color: var(--chrome-color);
+  background-color: var(--bg-color);
 }
 
 .main {
@@ -20,8 +19,7 @@
   width: 100%;
   grid-row: 1 / 2;
   grid-column: 1 / 2;
-  padding: 10px;
-  padding-right: 0px;
+  border-right: 1px solid var(--border-color);
 }
 
 .error {
diff --git a/apps/zui/src/views/load-pane/index.tsx b/apps/zui/src/views/preview-load-modal/index.tsx
similarity index 69%
rename from apps/zui/src/views/load-pane/index.tsx
rename to apps/zui/src/views/preview-load-modal/index.tsx
index 311bba4915..9079125cdd 100644
--- a/apps/zui/src/views/load-pane/index.tsx
+++ b/apps/zui/src/views/preview-load-modal/index.tsx
@@ -5,32 +5,17 @@ import {useSelector} from "react-redux"
 import styles from "./index.module.css"
 import * as _ from "lodash"
 import LoadDataForm from "src/js/state/LoadDataForm"
-import {useDispatch} from "src/app/core/state"
 import {useCallback, useEffect, useRef} from "react"
 import {ResultsControl, useResultsControl} from "./results"
-import modal from "src/components/modals.module.css"
 import {Shaper} from "./shaper"
 import {Sidebar} from "./sidebar"
 import {ResultsGroup} from "./results-group"
 import useSelect from "src/app/core/hooks/use-select"
-import {Debut, useDebut} from "src/components/debut"
-import {Dialog} from "src/components/dialog"
 import {ErrorWell} from "src/components/error-well"
 import {errorToString} from "src/util/error-to-string"
 import {call} from "src/util/call"
 import {invoke} from "src/core/invoke"
-
-export function LoadPane() {
-  const dispatch = useDispatch()
-  const show = useSelector(LoadDataForm.getShow)
-
-  const hide = () => {
-    dispatch(LoadDataForm.reset())
-  }
-
-  if (!show) return null
-  else return <Pane onClose={hide} />
-}
+import {FullModal, useFullModal} from "src/components/full-modal"
 
 function Main(props: {
   original: ResultsControl
@@ -63,13 +48,14 @@ function Grid(props: {children: any}) {
   )
 }
 
-function Pane(props: {onClose: any}) {
+export function PreviewLoadModal() {
+  // Too much in here. We need a ctl
   const select = useSelect()
-  const debut = useDebut({afterExit: props.onClose})
   const files = useSelector(LoadDataForm.getFiles)
   const format = useSelector(LoadDataForm.getFormat)
   const original = useResultsControl(files, format)
   const preview = useResultsControl(files, format)
+  const modal = useFullModal()
 
   const abortSubmit = useRef(null)
   const cancelSubmit = () => call(abortSubmit.current)
@@ -81,10 +67,10 @@ function Pane(props: {onClose: any}) {
   }, [files, format])
 
   const onCancel = () => {
+    // Cleanup the tmp files created by paste if you cancel
     const files = select(LoadDataForm.getFiles)
     const poolId = select(LoadDataForm.getPoolId)
-    invoke("loads.cancel", poolId, files)
-    debut.exit()
+    invoke("loads.cancel", poolId, files, "")
   }
 
   useEffect(() => onSubmit(), [files, format])
@@ -95,26 +81,16 @@ function Pane(props: {onClose: any}) {
   }, [files, format])
 
   return (
-    <Debut {...debut.props} classNames="modal">
-      <Dialog
-        aria-label="preview-load"
-        onClose={debut.exit}
-        onCancel={onCancel}
-        dialogPoint="center center"
-        isOpen={true}
-        className={modal.modal}
-        modal
-      >
-        <Grid>
-          <Main original={original} preview={preview} onSubmit={onSubmit} />
-          <Sidebar
-            onClose={debut.exit}
-            onCancel={onCancel}
-            isValid={!original.error && !preview.error}
-          />
-        </Grid>
-      </Dialog>
-    </Debut>
+    <FullModal ref={modal.ref}>
+      <Grid>
+        <Main original={original} preview={preview} onSubmit={onSubmit} />
+        <Sidebar
+          onClose={() => modal.close()}
+          onCancel={onCancel}
+          isValid={!original.error && !preview.error}
+        />
+      </Grid>
+    </FullModal>
   )
 }
 
diff --git a/apps/zui/src/views/load-pane/results-group.module.css b/apps/zui/src/views/preview-load-modal/results-group.module.css
similarity index 77%
rename from apps/zui/src/views/load-pane/results-group.module.css
rename to apps/zui/src/views/preview-load-modal/results-group.module.css
index 980460e263..406d88e498 100644
--- a/apps/zui/src/views/load-pane/results-group.module.css
+++ b/apps/zui/src/views/preview-load-modal/results-group.module.css
@@ -3,8 +3,11 @@
     grid-template-columns: 0.2fr 0.8fr;
     grid-template-rows: 1fr;
     min-height: 0;
-    padding-top: 10px;
-    gap: 10px;
+    border-top: 1px solid var(--border-color);
+}
+
+.resultsGroup > *+* {
+    border-left: 1px solid var(--border-color);
 }
 
 .resultsContainer {
diff --git a/apps/zui/src/views/load-pane/results-group.tsx b/apps/zui/src/views/preview-load-modal/results-group.tsx
similarity index 98%
rename from apps/zui/src/views/load-pane/results-group.tsx
rename to apps/zui/src/views/preview-load-modal/results-group.tsx
index 6ee53992d9..2e5c8ed083 100644
--- a/apps/zui/src/views/load-pane/results-group.tsx
+++ b/apps/zui/src/views/preview-load-modal/results-group.tsx
@@ -50,7 +50,6 @@ export const ResultsGroup = memo(function ResultsGroup(props: {
         />
         <DragAnchor
           position="right"
-          showOnHover
           {...resultsDrag.anchorProps}
           style={{right: -8}}
         />
diff --git a/apps/zui/src/views/load-pane/results.module.css b/apps/zui/src/views/preview-load-modal/results.module.css
similarity index 94%
rename from apps/zui/src/views/load-pane/results.module.css
rename to apps/zui/src/views/preview-load-modal/results.module.css
index ce1887954d..7892d4d5a7 100644
--- a/apps/zui/src/views/load-pane/results.module.css
+++ b/apps/zui/src/views/preview-load-modal/results.module.css
@@ -3,8 +3,6 @@
     grid-template-rows: 38px 1fr 30px;
     background: var(--bg-color);
     margin-top: 0;
-    box-shadow: var(--shadow-elevation-low);
-    border-radius: 6px;
     min-width: 0;
     min-height: 0;
     overflow: hidden;
@@ -51,7 +49,7 @@
     justify-content: flex-end;
     background-color: var(--bg-color);
     gap: 12px;
-    border-radius: 0 0 6px 6px;
+    border-top: 1px solid var(--border-color);
 }
 
 .results footer button {
diff --git a/apps/zui/src/views/load-pane/results.tsx b/apps/zui/src/views/preview-load-modal/results.tsx
similarity index 99%
rename from apps/zui/src/views/load-pane/results.tsx
rename to apps/zui/src/views/preview-load-modal/results.tsx
index a61c0ac7f3..a75c916943 100644
--- a/apps/zui/src/views/load-pane/results.tsx
+++ b/apps/zui/src/views/preview-load-modal/results.tsx
@@ -83,6 +83,7 @@ function Toolbar(props: {
       </div>
       <div className={styles.middle}>
         <ToolbarTabs
+          name="resultsView"
           onlyIcon={props.smallWidth}
           options={[
             {
diff --git a/apps/zui/src/views/load-pane/scroll-shadow.module.css b/apps/zui/src/views/preview-load-modal/scroll-shadow.module.css
similarity index 100%
rename from apps/zui/src/views/load-pane/scroll-shadow.module.css
rename to apps/zui/src/views/preview-load-modal/scroll-shadow.module.css
diff --git a/apps/zui/src/views/load-pane/scroll-shadow.tsx b/apps/zui/src/views/preview-load-modal/scroll-shadow.tsx
similarity index 100%
rename from apps/zui/src/views/load-pane/scroll-shadow.tsx
rename to apps/zui/src/views/preview-load-modal/scroll-shadow.tsx
diff --git a/apps/zui/src/views/preview-load-modal/shaper.module.css b/apps/zui/src/views/preview-load-modal/shaper.module.css
new file mode 100644
index 0000000000..5a54371278
--- /dev/null
+++ b/apps/zui/src/views/preview-load-modal/shaper.module.css
@@ -0,0 +1,39 @@
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 18px;
+}
+
+:global(.is-mac) .toolbar {
+  padding-left: 85px;
+}
+
+.toolbar .title {
+  font-size: 14px;
+  font-weight: 600;
+  text-align: center;
+  color: var(--fg-color-less);
+}
+
+.toolbarActions {
+  margin-left: auto;
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+.shaper {
+  position: relative;
+  min-width: 0;
+  display: grid;
+  grid-template-rows: 44px 1fr;
+  background: var(--bg-color);
+}
+
+.editor {
+  min-width: 0;
+  min-height: 0;
+  border-radius: 0 0 6px 6px;
+  overflow: hidden;
+}
diff --git a/apps/zui/src/views/load-pane/shaper.tsx b/apps/zui/src/views/preview-load-modal/shaper.tsx
similarity index 99%
rename from apps/zui/src/views/load-pane/shaper.tsx
rename to apps/zui/src/views/preview-load-modal/shaper.tsx
index 361fd8d9ca..b1e50c11b5 100644
--- a/apps/zui/src/views/load-pane/shaper.tsx
+++ b/apps/zui/src/views/preview-load-modal/shaper.tsx
@@ -57,7 +57,6 @@ export const Shaper = memo(function Shaper(props: {onSubmit: () => any}) {
       </div>
       <DragAnchor
         position="bottom"
-        showOnHover
         style={{bottom: -8}}
         {...drag.anchorProps}
       />
diff --git a/apps/zui/src/views/load-pane/sidebar.module.css b/apps/zui/src/views/preview-load-modal/sidebar.module.css
similarity index 100%
rename from apps/zui/src/views/load-pane/sidebar.module.css
rename to apps/zui/src/views/preview-load-modal/sidebar.module.css
diff --git a/apps/zui/src/views/load-pane/sidebar.tsx b/apps/zui/src/views/preview-load-modal/sidebar.tsx
similarity index 98%
rename from apps/zui/src/views/load-pane/sidebar.tsx
rename to apps/zui/src/views/preview-load-modal/sidebar.tsx
index 48e3582b95..8601e53499 100644
--- a/apps/zui/src/views/load-pane/sidebar.tsx
+++ b/apps/zui/src/views/preview-load-modal/sidebar.tsx
@@ -47,7 +47,6 @@ export function Sidebar(props: {
       <DragAnchor
         position="left"
         {...sidebarDrag.anchorProps}
-        showOnHover
         style={{left: 0}}
       />
     </aside>
diff --git a/apps/zui/src/views/load-pane/use-results-display.ts b/apps/zui/src/views/preview-load-modal/use-results-display.ts
similarity index 100%
rename from apps/zui/src/views/load-pane/use-results-display.ts
rename to apps/zui/src/views/preview-load-modal/use-results-display.ts
diff --git a/apps/zui/src/views/load-pane/use-zq.ts b/apps/zui/src/views/preview-load-modal/use-zq.ts
similarity index 100%
rename from apps/zui/src/views/load-pane/use-zq.ts
rename to apps/zui/src/views/preview-load-modal/use-zq.ts
diff --git a/apps/zui/src/views/results-pane/run-results-query.tsx b/apps/zui/src/views/results-pane/run-results-query.tsx
index 92b564c112..213cacc96e 100644
--- a/apps/zui/src/views/results-pane/run-results-query.tsx
+++ b/apps/zui/src/views/results-pane/run-results-query.tsx
@@ -1,14 +1,21 @@
+import {createHandler} from "src/core/handlers"
 import {firstPage} from "src/core/query/run"
 import {QueryModel} from "src/js/models/query-model"
 import Current from "src/js/state/Current"
-import {Thunk} from "src/js/state/types"
 
 export const RESULTS_QUERY = "zui-results/main"
+export const RESULTS_QUERY_COUNT = "zui-results/main-count"
 
-export function runResultsQuery(): Thunk {
-  return (dispatch, getState) => {
-    const version = Current.getVersion(getState())
-    const query = QueryModel.versionToZed(version)
-    dispatch(firstPage({id: RESULTS_QUERY, query}))
-  }
-}
+export const runResultsMain = createHandler(({select, dispatch}) => {
+  const version = select(Current.getVersion)
+  const query = QueryModel.versionToZed(version)
+
+  dispatch(firstPage({id: RESULTS_QUERY, query}))
+})
+
+export const runResultsCount = createHandler(({select, dispatch}) => {
+  const version = select(Current.getVersion)
+  const query = QueryModel.versionToZed(version) + "\n | count()"
+
+  dispatch(firstPage({id: RESULTS_QUERY_COUNT, query}))
+})
diff --git a/apps/zui/src/views/session-page/footer.tsx b/apps/zui/src/views/session-page/footer.tsx
index 996679fda1..578d77c221 100644
--- a/apps/zui/src/views/session-page/footer.tsx
+++ b/apps/zui/src/views/session-page/footer.tsx
@@ -13,7 +13,10 @@ import {
   toggleHistogram,
 } from "src/domain/results/handlers"
 import React from "react"
-import {RESULTS_QUERY} from "src/views/results-pane/run-results-query"
+import {
+  RESULTS_QUERY,
+  RESULTS_QUERY_COUNT,
+} from "src/views/results-pane/run-results-query"
 import styled from "styled-components"
 import Results from "src/js/state/Results"
 import {pluralize} from "src/util/pluralize"
@@ -44,6 +47,7 @@ export function Footer() {
   return (
     <footer className={styles.footer}>
       <ToolbarTabs
+        name="resultsView"
         onlyIcon={true}
         options={[
           {
@@ -68,6 +72,7 @@ export function Footer() {
       <div className={styles.counts}>
         <ShapeCount />
         <RowCount />
+        <TotalCount />
       </div>
     </footer>
   )
@@ -91,19 +96,19 @@ export function RowCount() {
   } else if (status === "COMPLETE") {
     return (
       <span role="status" aria-label="results">
-        {count} {pluralize("Row", count)}
+        {count?.toLocaleString()} {pluralize("Row", count)}
       </span>
     )
   } else if (status === "INCOMPLETE") {
     return (
       <span role="status" aria-label="results">
-        First {count} {pluralize("Row", count)}
+        First {count?.toLocaleString()} {pluralize("Row", count)}
       </span>
     )
   } else if (status === "LIMIT") {
     return (
       <span role="status" aria-label="results">
-        Limited to {count} {pluralize("Row", count)}
+        Limited to {count?.toLocaleString()} {pluralize("Row", count)}
       </span>
     )
   }
@@ -116,10 +121,25 @@ function ShapeCount() {
   if (["COMPLETE", "LIMIT", "INCOMPLETE"].includes(status)) {
     return (
       <span aria-label="shapes">
-        {count} {pluralize("Shape", count)}
+        {count?.toLocaleString()} {pluralize("Shape", count)}
       </span>
     )
   } else {
     return null
   }
 }
+
+function TotalCount() {
+  const status = useSelector(Results.getStatus(RESULTS_QUERY_COUNT))
+  const values = useSelector(Results.getValues(RESULTS_QUERY_COUNT))
+  const count = values[0]?.toJS()
+  if (["COMPLETE", "LIMIT", "INCOMPLETE"].includes(status)) {
+    return (
+      <span>
+        {count?.toLocaleString()} Total {pluralize("Row", count)}
+      </span>
+    )
+  } else {
+    return <span>Fetching Total Rows...</span>
+  }
+}
diff --git a/apps/zui/src/views/session-page/loader.ts b/apps/zui/src/views/session-page/loader.ts
index 1d2f67bafc..946d452e00 100644
--- a/apps/zui/src/views/session-page/loader.ts
+++ b/apps/zui/src/views/session-page/loader.ts
@@ -9,7 +9,10 @@ import {Location} from "history"
 import Pools from "src/js/state/Pools"
 import {invoke} from "src/core/invoke"
 import {runHistogramQuery} from "src/views/histogram-pane/run-query"
-import {runResultsQuery} from "src/views/results-pane/run-results-query"
+import {
+  runResultsCount,
+  runResultsMain,
+} from "src/views/results-pane/run-results-query"
 import Layout from "src/js/state/Layout"
 import {syncPool} from "src/app/core/pools/sync-pool"
 
@@ -51,7 +54,8 @@ function fetchData() {
 
     startTransition(() => {
       if (version) {
-        dispatch(runResultsQuery())
+        runResultsMain()
+        runResultsCount()
         if (histogramVisible) {
           runHistogramQuery(api)
         }
diff --git a/apps/zui/src/views/session-page/pins.module.css b/apps/zui/src/views/session-page/pins.module.css
index 667aa20265..a741acdb54 100644
--- a/apps/zui/src/views/session-page/pins.module.css
+++ b/apps/zui/src/views/session-page/pins.module.css
@@ -12,7 +12,7 @@
   display: relative;
   font-family: var(--mono-font);
   font-weight: 500;
-  font-size: 0.75rem;
+  font-size: var(--step--1);
   background: var(--chrome-color);
   border: none;
   padding: var(--s-5) var(--s-1);
diff --git a/apps/zui/src/views/session-page/pins/dialog.tsx b/apps/zui/src/views/session-page/pins/dialog.tsx
index 83a75daed1..7271cee854 100644
--- a/apps/zui/src/views/session-page/pins/dialog.tsx
+++ b/apps/zui/src/views/session-page/pins/dialog.tsx
@@ -23,7 +23,7 @@ export type DialogProps = {
 
 const BG = styled.dialog`
   border: none;
-  box-shadow: var(--shadow-medium);
+  box-shadow: var(--shadow-elevation-medium);
   border-radius: 6px;
   background: var(--bg-color);
   color: var(--fg-color);
diff --git a/apps/zui/src/views/session-page/pins/generic-pin-form.tsx b/apps/zui/src/views/session-page/pins/generic-pin-form.tsx
index bdcccd1a72..aabb88f163 100644
--- a/apps/zui/src/views/session-page/pins/generic-pin-form.tsx
+++ b/apps/zui/src/views/session-page/pins/generic-pin-form.tsx
@@ -1,16 +1,7 @@
 import React from "react"
 import {GenericQueryPin} from "src/js/state/Editor/types"
 import {PinFormProps} from "./base-pin"
-import {
-  Actions,
-  Field,
-  getFormData,
-  Input,
-  Label,
-  TextArea,
-  RedLink,
-  ActionsGroup,
-} from "./form-helpers"
+import {getFormData, TextArea, RedLink} from "./form-helpers"
 import forms from "src/components/forms.module.css"
 
 export function GenericPinForm(props: PinFormProps<GenericQueryPin>) {
@@ -21,33 +12,35 @@ export function GenericPinForm(props: PinFormProps<GenericQueryPin>) {
       onSubmit={(e) => props.onSubmit(getFormData(e))}
       onReset={props.onReset}
     >
-      <Field>
-        <Label htmlFor="value">Zed Snippet</Label>
-        <TextArea autoFocus name="value" defaultValue={props.pin.value} />
-      </Field>
-      <Field>
-        <Label htmlFor="label">Label</Label>
-        <Input
-          name="label"
-          placeholder="Same as Zed Snippet text"
-          defaultValue={props.pin.label}
-          style={{width: "66%"}}
-        />
-      </Field>
-      <Actions>
-        <ActionsGroup>
+      <div className="stack-1">
+        <div className="field">
+          <label htmlFor="value">Zed Snippet</label>
+          <TextArea autoFocus name="value" defaultValue={props.pin.value} />
+        </div>
+        <div className="field">
+          <label htmlFor="label">Label</label>
+          <input
+            type="text"
+            name="label"
+            placeholder="Same as Zed Snippet text"
+            defaultValue={props.pin.label}
+            style={{width: "66%"}}
+          />
+        </div>
+
+        <div className="cluster-1 justify:between">
           <RedLink onClick={props.onDelete}>Delete</RedLink>
-        </ActionsGroup>
 
-        <ActionsGroup>
-          <button className={forms.button} type="reset">
-            Cancel
-          </button>
-          <button className={forms.submit} type="submit">
-            OK
-          </button>
-        </ActionsGroup>
-      </Actions>
+          <div className="cluster">
+            <button className={forms.button} type="reset">
+              Cancel
+            </button>
+            <button className={forms.submit} type="submit">
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
     </form>
   )
 }
diff --git a/apps/zui/src/zui-kit/react/list-view.tsx b/apps/zui/src/zui-kit/react/list-view.tsx
index 233e8d7c8c..8a6bce5c57 100644
--- a/apps/zui/src/zui-kit/react/list-view.tsx
+++ b/apps/zui/src/zui-kit/react/list-view.tsx
@@ -17,7 +17,10 @@ import {useStateControllers} from "./use-state-controllers"
 import {mergeRefs, useInitialScrollPosition, useOnScroll} from "./utils"
 import classNames from "classnames"
 import {useParentSize} from "src/app/core/hooks/use-parent-size"
-import {TopShadow, useScrollShadow} from "src/views/load-pane/scroll-shadow"
+import {
+  TopShadow,
+  useScrollShadow,
+} from "src/views/preview-load-modal/scroll-shadow"
 import {call} from "src/util/call"
 import {config} from "src/components/zed-table/config"
 
diff --git a/apps/zui/src/zui/lake.ts b/apps/zui/src/zui/lake.ts
index 77f9e160f6..20f16c6950 100644
--- a/apps/zui/src/zui/lake.ts
+++ b/apps/zui/src/zui/lake.ts
@@ -3,6 +3,7 @@ import {Client} from "@brimdata/zed-node"
 
 class LakeApi {
   public client: Client | null = null
+  public id: string | null
 
   query(program: string, options?: QueryOpts) {
     if (!this.client) throw new Error("No client configured for this lake")
diff --git a/packages/zui-player/helpers/test-app.ts b/packages/zui-player/helpers/test-app.ts
index d8d1c266c0..514621a2d7 100644
--- a/packages/zui-player/helpers/test-app.ts
+++ b/packages/zui-player/helpers/test-app.ts
@@ -194,6 +194,10 @@ export default class TestApp {
     return this.page.keyboard.press(key);
   }
 
+  async select(label: string, value: string) {
+    return this.page.getByLabel(label).selectOption(value);
+  }
+
   locate(role: Role | RegExp, name?: string) {
     if (role instanceof RegExp) {
       return this.mainWin.getByText(role).first();
@@ -226,7 +230,10 @@ export default class TestApp {
   }
 
   async takeScreenshot(filename: string) {
-    return await this.page.screenshot({ path: path.join('run', 'screenshots', filename), fullPage: true });
+    return await this.page.screenshot({
+      path: path.join('run', 'screenshots', filename),
+      fullPage: true,
+    });
   }
 }
 
diff --git a/packages/zui-player/tests/export.spec.ts b/packages/zui-player/tests/export.spec.ts
index f9bcd64c87..f98e2c3794 100644
--- a/packages/zui-player/tests/export.spec.ts
+++ b/packages/zui-player/tests/export.spec.ts
@@ -23,7 +23,6 @@ test.describe('Export tests', () => {
   const app = new TestApp('Export tests');
 
   test.beforeAll(async () => {
-
     // Increase timeout due to observed long load times on test data in CI.
     // See https://github.com/brimdata/zui/pull/2967
     test.setTimeout(60000);
@@ -48,10 +47,11 @@ test.describe('Export tests', () => {
       await app.click('button', 'Export Results');
       await app.attached('dialog');
       const dialog = app.mainWin.getByRole('dialog');
+      await app.select('Format', label);
       await dialog
-        .getByRole('radio', { name: `${label}`, exact: true })
+        .getByRole('button')
+        .filter({ hasText: 'Export To File' })
         .click();
-      await dialog.getByRole('button').filter({ hasText: 'Export' }).click();
       await app.detached('dialog');
       await app.mainWin
         .getByText(new RegExp('Export Completed: .*results\\.' + label))
@@ -60,4 +60,28 @@ test.describe('Export tests', () => {
       expect(fsExtra.statSync(file).size).toBe(expectedSize);
     });
   });
+
+  test('Copy to clipboard', async () => {
+    await app.click('button', 'Export Results');
+    await app.attached('dialog');
+    await app.select('Format', 'JSON');
+    await app.click(/Copy to Clipboard/i);
+    await app.attached(/copied JSON data to clipboard/i);
+    await app.click('button', 'Close');
+  });
+
+  test('Export to Pool', async () => {
+    await app.query('head 5');
+    await app.click('button', 'Export Results');
+    await app.attached('dialog');
+    await app.locate('radio', 'Pool').check();
+    await app.fill('Name', 'five_row_pool');
+    await app.click('button', 'Export To Pool');
+    // Redirected to the new pool page
+    await app.attached(/from 'sample.zeektsv' | head 5/);
+    await app.attached('heading', 'five_row_pool');
+    // Ensure the records are present
+    await app.click('button', 'Query Pool');
+    await app.attached(/5 Total Rows/);
+  });
 });
diff --git a/packages/zui-player/tests/preview-and-load.spec.ts b/packages/zui-player/tests/preview-and-load.spec.ts
index 667f307d1d..b3ea6d84f8 100644
--- a/packages/zui-player/tests/preview-and-load.spec.ts
+++ b/packages/zui-player/tests/preview-and-load.spec.ts
@@ -4,7 +4,6 @@ import { getPath } from 'zui-test-data';
 play('Preview & Load', (app, test) => {
   test('create new pool, change key, type <enter>', async () => {
     await app.dropFile(getPath('sample.zeektsv'));
-    await app.click('button', 'Pool Settings');
     await app.fill('Pool Key', 'my_new_key');
     await app.press('Enter');