diff --git a/src/components/account.tsx b/src/components/account.tsx
index 7be75fe..47345b9 100644
--- a/src/components/account.tsx
+++ b/src/components/account.tsx
@@ -68,7 +68,7 @@ const AccountManager = () => {
   return (
     <>
       <Modal open={openManager()} onClose={() => setOpenManager(false)}>
-        <div class="dark:bg-dark-800 dark:shadow-dark-800 absolute top-12 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-200 p-4 text-neutral-900 shadow-md transition-opacity duration-300 dark:border-neutral-700 dark:text-neutral-200 starting:opacity-0">
+        <div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-12 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-300 sm:w-[24rem] dark:border-neutral-700 starting:opacity-0">
           <div class="mb-2 flex items-center gap-1 font-semibold">
             <span class="iconify lucide--user-round"></span>
             <span>Manage accounts</span>
@@ -76,7 +76,7 @@ const AccountManager = () => {
           <div class="mb-3 max-h-[20rem] overflow-y-auto md:max-h-[25rem]">
             <For each={Object.keys(sessions)}>
               {(did) => (
-                <div class="flex w-full items-center justify-between gap-x-2 rounded-lg hover:bg-neutral-100 active:bg-neutral-100 dark:hover:bg-neutral-600 dark:active:bg-neutral-600">
+                <div class="flex w-full items-center justify-between gap-x-2 rounded-lg hover:bg-neutral-200 active:bg-neutral-200 dark:hover:bg-neutral-600 dark:active:bg-neutral-600">
                   <button
                     class="flex basis-full items-center justify-between gap-1 truncate p-1"
                     onclick={() => resumeSession(did as Did)}
@@ -113,7 +113,7 @@ const AccountManager = () => {
         class="flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-700"
       >
         {agent() && avatar() ?
-          <img src={avatar()} class="dark:shadow-dark-800 size-5 rounded-full shadow-sm" />
+          <img src={avatar()} class="dark:shadow-dark-800 size-5 rounded-full shadow-xs" />
         : <span class="iconify lucide--circle-user-round text-xl"></span>}
       </button>
     </>
diff --git a/src/components/button.tsx b/src/components/button.tsx
index 34e7bcc..b54320f 100644
--- a/src/components/button.tsx
+++ b/src/components/button.tsx
@@ -13,7 +13,7 @@ export const Button = (props: ButtonProps) => {
       type="button"
       class={
         props.class ??
-        "dark:hover:bg-dark-100 dark:bg-dark-300 dark:shadow-dark-800 dark:active:bg-dark-100 flex items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs font-semibold shadow-sm hover:bg-neutral-100 active:bg-neutral-100 dark:border-neutral-700"
+        "dark:hover:bg-dark-100 dark:bg-dark-300 dark:shadow-dark-800 dark:active:bg-dark-100 flex items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs font-semibold shadow-xs hover:bg-neutral-100 active:bg-neutral-100 dark:border-neutral-700"
       }
       classList={props.classList}
       onClick={props.onClick}
diff --git a/src/components/create.tsx b/src/components/create.tsx
index e135be7..3d1aaf0 100644
--- a/src/components/create.tsx
+++ b/src/components/create.tsx
@@ -164,7 +164,7 @@ export const RecordEditor = (props: { create: boolean; record?: any; refetch?: a
   return (
     <>
       <Modal open={openDialog()} onClose={() => setOpenDialog(false)} closeOnClick={false}>
-        <div class="dark:bg-dark-800 dark:shadow-dark-800 absolute top-12 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-200 p-2 text-neutral-900 shadow-md transition-opacity duration-300 sm:w-xl sm:p-4 lg:w-[48rem] dark:border-neutral-700 dark:text-neutral-200 starting:opacity-0">
+        <div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-12 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 shadow-md transition-opacity duration-300 sm:w-xl sm:p-4 lg:w-[48rem] dark:border-neutral-700 starting:opacity-0">
           <div class="mb-2 flex w-full justify-between">
             <div class="flex items-center gap-1 font-semibold">
               <span class="iconify lucide--square-pen"></span>
@@ -202,7 +202,7 @@ export const RecordEditor = (props: { create: boolean; record?: any; refetch?: a
                 <select
                   name="validate"
                   id="validate"
-                  class="dark:bg-dark-100 dark:shadow-dark-800 rounded-lg border-[0.5px] border-neutral-300 bg-white px-1 py-1 shadow-sm focus:outline-[1.5px] focus:outline-neutral-900 dark:border-neutral-700 dark:focus:outline-neutral-200"
+                  class="dark:bg-dark-100 dark:shadow-dark-800 rounded-lg border-[0.5px] border-neutral-300 bg-white px-1 py-1 shadow-xs focus:outline-[1.5px] focus:outline-neutral-900 dark:border-neutral-700 dark:focus:outline-neutral-200"
                 >
                   <option value="unset">Unset</option>
                   <option value="true">True</option>
@@ -211,7 +211,7 @@ export const RecordEditor = (props: { create: boolean; record?: any; refetch?: a
               </div>
               <div class="flex items-center gap-2">
                 <Show when={!uploading()}>
-                  <div class="dark:hover:bg-dark-100 dark:bg-dark-300 dark:shadow-dark-800 dark:active:bg-dark-100 flex rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 text-xs font-semibold shadow-sm hover:bg-neutral-100 active:bg-neutral-100 dark:border-neutral-700">
+                  <div class="dark:hover:bg-dark-100 dark:shadow-dark-800 dark:bg-dark-300 dark:active:bg-dark-100 flex rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 text-xs font-semibold shadow-xs hover:bg-neutral-100 active:bg-neutral-100 dark:border-neutral-700">
                     <input type="file" id="blob" hidden onChange={() => uploadBlob()} />
                     <label class="flex items-center gap-1 px-2 py-1.5" for="blob">
                       <span class="iconify lucide--upload text-sm"></span>
diff --git a/src/components/editor.tsx b/src/components/editor.tsx
index 5691d40..219c4d8 100644
--- a/src/components/editor.tsx
+++ b/src/components/editor.tsx
@@ -54,7 +54,12 @@ const Editor = (props: { content: string }) => {
     window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", themeEvent),
   );
 
-  return <div ref={editorDiv} class="dark:shadow-dark-800 shadow-sm"></div>;
+  return (
+    <div
+      ref={editorDiv}
+      class="dark:shadow-dark-800 border-[0.5px] border-neutral-300 shadow-xs dark:border-neutral-700"
+    ></div>
+  );
 };
 
 export { Editor };
diff --git a/src/components/modal.tsx b/src/components/modal.tsx
index fa6903b..64add8f 100644
--- a/src/components/modal.tsx
+++ b/src/components/modal.tsx
@@ -27,7 +27,7 @@ export const Modal = (props: ModalProps) => {
           document.body.style.overflow = "auto";
           if (props.onClose) props.onClose();
         }}
-        class="h-full max-h-none w-full max-w-none bg-transparent backdrop:bg-transparent"
+        class="h-full max-h-none w-full max-w-none bg-transparent text-neutral-900 backdrop:bg-transparent dark:text-neutral-200"
       >
         {props.children}
       </dialog>
diff --git a/src/components/search.tsx b/src/components/search.tsx
index c3aaf4e..30384a4 100644
--- a/src/components/search.tsx
+++ b/src/components/search.tsx
@@ -76,7 +76,7 @@ const Search = () => {
         PDS URL, AT URI, or handle
       </label>
       <div class="flex w-full items-center gap-2">
-        <div class="dark:bg-dark-100 dark:shadow-dark-800 flex grow items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-sm focus-within:outline-[1.5px] focus-within:outline-neutral-900 dark:border-neutral-700 dark:focus-within:outline-neutral-200">
+        <div class="dark:bg-dark-100 dark:shadow-dark-800 flex grow items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus-within:outline-[1.5px] focus-within:outline-neutral-900 dark:border-neutral-700 dark:focus-within:outline-neutral-200">
           <input
             type="text"
             spellcheck={false}
diff --git a/src/components/text-input.tsx b/src/components/text-input.tsx
index f3ff5f7..b838e34 100644
--- a/src/components/text-input.tsx
+++ b/src/components/text-input.tsx
@@ -25,7 +25,7 @@ export const TextInput = (props: TextInputProps) => {
       disabled={props.disabled}
       required={props.required}
       class={
-        "dark:bg-dark-100 dark:shadow-dark-800 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-sm placeholder:text-sm focus:outline-[1.5px] focus:outline-neutral-900 dark:border-neutral-700 dark:focus:outline-neutral-200 " +
+        "dark:bg-dark-100 dark:shadow-dark-800 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs placeholder:text-sm focus:outline-[1.5px] focus:outline-neutral-900 dark:border-neutral-700 dark:focus:outline-neutral-200 " +
         props.class
       }
       onInput={props.onInput}
diff --git a/src/views/labels.tsx b/src/views/labels.tsx
index 73cf30d..fd51cff 100644
--- a/src/views/labels.tsx
+++ b/src/views/labels.tsx
@@ -79,7 +79,7 @@ const LabelView = () => {
             spellcheck={false}
             rows={3}
             value={searchParams.uriPatterns ?? "*"}
-            class="dark:bg-dark-100 dark:shadow-dark-800 mb-1 grow rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-[1.5px] focus:outline-neutral-900 dark:focus:outline-neutral-200"
+            class="dark:bg-dark-100 dark:shadow-dark-800 mb-1 grow rounded-lg bg-white px-2 py-1 shadow-xs focus:outline-[1.5px] focus:outline-neutral-900 dark:focus:outline-neutral-200"
           />
           <div class="flex justify-center">
             <Show when={!response.loading}>
diff --git a/src/views/record.tsx b/src/views/record.tsx
index 528a0b6..dea3eea 100644
--- a/src/views/record.tsx
+++ b/src/views/record.tsx
@@ -120,7 +120,7 @@ export const RecordView = () => {
   return (
     <Show when={record()} keyed>
       <div class="flex w-full flex-col items-center">
-        <div class="dark:shadow-dark-800 dark:bg-dark-300 mb-3 flex w-[22rem] justify-between rounded-lg bg-neutral-50 px-2 py-1.5 shadow-sm sm:w-[24rem]">
+        <div class="dark:shadow-dark-800 dark:bg-dark-300 mb-3 flex w-[22rem] justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 shadow-xs sm:w-[24rem] dark:border-neutral-700">
           <div class="flex gap-3 text-sm">
             <A
               classList={{
@@ -157,13 +157,13 @@ export const RecordView = () => {
                 </button>
               </Tooltip>
               <Modal open={openDelete()} onClose={() => setOpenDelete(false)}>
-                <div class="dark:bg-dark-800 dark:shadow-dark-800 absolute top-70 left-[50%] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-200 p-4 text-neutral-900 shadow-md transition-opacity duration-300 dark:border-neutral-700 dark:text-neutral-200 starting:opacity-0">
+                <div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-70 left-[50%] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-300 dark:border-neutral-700 starting:opacity-0">
                   <h2 class="mb-2 font-semibold">Delete this record?</h2>
                   <div class="flex justify-end gap-2">
                     <Button onClick={() => setOpenDelete(false)}>Cancel</Button>
                     <Button
                       onClick={deleteRecord}
-                      class="dark:shadow-dark-800 rounded-lg bg-red-500 px-2 py-1.5 text-xs font-semibold text-neutral-200 shadow-sm hover:bg-red-400 active:bg-red-400"
+                      class="dark:shadow-dark-800 rounded-lg bg-red-500 px-2 py-1.5 text-xs font-semibold text-neutral-200 shadow-xs hover:bg-red-400 active:bg-red-400"
                     >
                       Delete
                     </Button>
diff --git a/src/views/repo.tsx b/src/views/repo.tsx
index 2d12e46..8a4ae73 100644
--- a/src/views/repo.tsx
+++ b/src/views/repo.tsx
@@ -110,7 +110,7 @@ const PlcLogView = (props: {
       <div class="flex items-center justify-between">
         <div class="flex items-center gap-1">
           <div class="iconify lucide--filter" />
-          <div class="dark:shadow-dark-800 dark:bg-dark-300 flex w-fit items-center rounded-full border-[0.5px] border-neutral-300 bg-neutral-50 shadow-sm dark:border-neutral-700">
+          <div class="dark:shadow-dark-800 dark:bg-dark-300 flex w-fit items-center rounded-full border-[0.5px] border-neutral-300 bg-neutral-50 shadow-xs dark:border-neutral-700">
             <FilterButton icon="iconify lucide--at-sign" event="handle" />
             <FilterButton icon="iconify lucide--key-round" event="rotation_key" />
             <FilterButton icon="iconify lucide--hard-drive" event="service" />
@@ -273,7 +273,7 @@ const RepoView = () => {
             {error()}
           </div>
         </Show>
-        <div class="dark:shadow-dark-800 dark:bg-dark-300 flex justify-between rounded-lg bg-neutral-50 px-2 py-1.5 text-sm shadow-sm">
+        <div class="dark:shadow-dark-800 dark:bg-dark-300 flex justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm shadow-xs dark:border-neutral-700">
           <Show when={!error()}>
             <RepoTab tab="collections" label="Collections" icon="lucide--folder-open" />
           </Show>
diff --git a/src/views/stream.tsx b/src/views/stream.tsx
index 75439c9..3f04082 100644
--- a/src/views/stream.tsx
+++ b/src/views/stream.tsx
@@ -194,7 +194,7 @@ const StreamView = () => {
                   spellcheck={false}
                   placeholder="Comma-separated list of collections"
                   value={searchParams.collections ?? ""}
-                  class="dark:bg-dark-100 dark:shadow-dark-800 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-sm focus:outline-[1.5px] focus:outline-neutral-900 dark:border-neutral-700 dark:focus:outline-neutral-200"
+                  class="dark:bg-dark-100 dark:shadow-dark-800 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus:outline-[1.5px] focus:outline-neutral-900 dark:border-neutral-700 dark:focus:outline-neutral-200"
                 />
               </label>
             </Show>
@@ -206,7 +206,7 @@ const StreamView = () => {
                   spellcheck={false}
                   placeholder="Comma-separated list of DIDs"
                   value={searchParams.dids ?? ""}
-                  class="dark:bg-dark-100 dark:shadow-dark-800 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-sm focus:outline-[1.5px] focus:outline-neutral-900 dark:border-neutral-700 dark:focus:outline-neutral-200"
+                  class="dark:bg-dark-100 dark:shadow-dark-800 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus:outline-[1.5px] focus:outline-neutral-900 dark:border-neutral-700 dark:focus:outline-neutral-200"
                 />
               </label>
             </Show>