diff --git a/apps/webapp/app/components/ErrorDisplay.tsx b/apps/webapp/app/components/ErrorDisplay.tsx
index ecd19c97b6..fb2be3cfeb 100644
--- a/apps/webapp/app/components/ErrorDisplay.tsx
+++ b/apps/webapp/app/components/ErrorDisplay.tsx
@@ -5,6 +5,7 @@ import { friendlyErrorDisplay } from "~/utils/httpErrors";
 import { LinkButton } from "./primitives/Buttons";
 import { Header1 } from "./primitives/Headers";
 import { Paragraph } from "./primitives/Paragraph";
+import Spline from "@splinetool/react-spline";
 
 type ErrorDisplayOptions = {
   button?: {
@@ -55,18 +56,13 @@ export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
           {button ? button.title : "Go to homepage"}
         </LinkButton>
       </div>
-      <div className="pointer-events-none absolute bottom-4 right-4 z-10 h-[70px] w-[200px] bg-[rgb(24,26,30)]" />
       <motion.div
         className="pointer-events-none absolute inset-0 overflow-hidden"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 0.5, duration: 2, ease: "easeOut" }}
       >
-        <iframe
-          src="https://my.spline.design/untitled-a6f70b5ebc46bdb2dcc0f21d5397e8ac/"
-          className="pointer-events-none absolute inset-0 h-full w-full object-cover"
-          style={{ border: "none" }}
-        />
+        <Spline scene="https://prod.spline.design/wRly8TZN-e0Twb8W/scene.splinecode" />
       </motion.div>
     </div>
   );
diff --git a/apps/webapp/app/components/Feedback.tsx b/apps/webapp/app/components/Feedback.tsx
index 5a5472a976..814f7bc047 100644
--- a/apps/webapp/app/components/Feedback.tsx
+++ b/apps/webapp/app/components/Feedback.tsx
@@ -18,6 +18,7 @@ import { Paragraph } from "./primitives/Paragraph";
 import { Select, SelectItem } from "./primitives/Select";
 import { TextArea } from "./primitives/TextArea";
 import { TextLink } from "./primitives/TextLink";
+import { DialogClose } from "@radix-ui/react-dialog";
 
 type FeedbackProps = {
   button: ReactNode;
@@ -120,16 +121,18 @@ export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) {
                 <FormError id={message.errorId}>{message.error}</FormError>
               </InputGroup>
               <FormError>{form.error}</FormError>
-              <div className="flex w-full justify-end">
-                <FormButtons
-                  className="m-0 w-max"
-                  confirmButton={
-                    <Button type="submit" variant="tertiary/medium">
-                      Send message
-                    </Button>
-                  }
-                />
-              </div>
+              <FormButtons
+                confirmButton={
+                  <Button type="submit" variant="primary/medium">
+                    Send message
+                  </Button>
+                }
+                cancelButton={
+                  <DialogClose asChild>
+                    <Button variant="tertiary/medium">Cancel</Button>
+                  </DialogClose>
+                }
+              />
             </Fieldset>
           </Form>
         </div>
diff --git a/apps/webapp/app/components/ListPagination.tsx b/apps/webapp/app/components/ListPagination.tsx
index c62b749722..7ac60cd283 100644
--- a/apps/webapp/app/components/ListPagination.tsx
+++ b/apps/webapp/app/components/ListPagination.tsx
@@ -26,7 +26,7 @@ function NextButton({ cursor }: { cursor?: string }) {
     <LinkButton
       to={path ?? "#"}
       variant={"minimal/small"}
-      TrailingIcon="arrow-right"
+      TrailingIcon="chevron-right"
       trailingIconClassName="text-text-dimmed"
       className={cn(
         "flex items-center",
@@ -47,7 +47,7 @@ function PreviousButton({ cursor }: { cursor?: string }) {
     <LinkButton
       to={path ?? "#"}
       variant={"minimal/small"}
-      LeadingIcon="arrow-left"
+      LeadingIcon="chevron-left"
       leadingIconClassName="text-text-dimmed"
       className={cn(
         "flex items-center",
diff --git a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx
index 08d2667705..ff94af7b01 100644
--- a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx
+++ b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx
@@ -1,18 +1,16 @@
-import { ArrowPathIcon, ArrowRightIcon } from "@heroicons/react/20/solid";
-import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
+import { ArrowPathIcon } from "@heroicons/react/20/solid";
 import { useFetcher } from "@remix-run/react";
 import { useState } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components/primitives/Dialog";
 import { generateTwoRandomWords } from "~/utils/randomWords";
 import { Button } from "../primitives/Buttons";
-import { Header1 } from "../primitives/Headers";
-import { Input } from "../primitives/Input";
-import { Paragraph } from "../primitives/Paragraph";
-import { Spinner } from "../primitives/Spinner";
 import { Callout } from "../primitives/Callout";
 import { Fieldset } from "../primitives/Fieldset";
-import { InputGroup } from "../primitives/InputGroup";
 import { FormButtons } from "../primitives/FormButtons";
+import { Input } from "../primitives/Input";
+import { InputGroup } from "../primitives/InputGroup";
+import { Paragraph } from "../primitives/Paragraph";
+import { Spinner } from "../primitives/Spinner";
 
 type ModalProps = {
   id: string;
@@ -31,15 +29,17 @@ export function RegenerateApiKeyModal({ id, title }: ModalProps) {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button
-          variant="minimal/small"
-          leadingIconClassName="text-text-dimmed"
+          variant="small-menu-item"
+          fullWidth
+          textAlignLeft
+          leadingIconClassName="text-success"
           LeadingIcon={ArrowPathIcon}
         >
-          Regenerate
+          Regenerate…
         </Button>
       </DialogTrigger>
       <DialogContent>
-        <DialogHeader>{`Regenerate ${title} Environment Key`}</DialogHeader>
+        <DialogHeader>{`Regenerate ${title.toUpperCase()} environment key`}</DialogHeader>
         <RegenerateApiKeyModalContent
           id={id}
           title={title}
@@ -62,10 +62,10 @@ const RegenerateApiKeyModalContent = ({ id, randomWord, title, closeModal }: Mod
   }
 
   return (
-    <div className="flex flex-col items-center gap-y-5 py-4">
+    <div className="flex flex-col items-center gap-y-4 pt-4">
       <Callout variant="warning">
-        {`Regenerating the keys for this environment will temporarily break any live Jobs in the
-        ${title} Environmentuntil the new API keys are set in the relevant environment variables.`}
+        {`Regenerating the keys for this environment will temporarily break any live tasks in the
+        ${title} environment until the new API keys are set in the relevant environment variables.`}
       </Callout>
       <fetcher.Form
         method="post"
@@ -73,7 +73,7 @@ const RegenerateApiKeyModalContent = ({ id, randomWord, title, closeModal }: Mod
         className="mt-2 w-full"
       >
         <Fieldset className="w-full">
-          <InputGroup>
+          <InputGroup className="max-w-full">
             <Paragraph variant="small/bright">Enter this text below to confirm:</Paragraph>
             <Paragraph
               variant="small"
@@ -93,14 +93,14 @@ const RegenerateApiKeyModalContent = ({ id, randomWord, title, closeModal }: Mod
             confirmButton={
               <Button
                 type="submit"
-                variant={"primary/small"}
+                variant={"primary/medium"}
                 LeadingIcon={isSubmitting ? Spinner : undefined}
                 disabled={confirmationText !== randomWord}
               >
                 Regenerate
               </Button>
             }
-            cancelButton={<Button variant={"tertiary/small"}>Cancel</Button>}
+            cancelButton={<Button variant={"tertiary/medium"}>Cancel</Button>}
           />
         </Fieldset>
       </fetcher.Form>
diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx
index e8db5a4008..f3b1ba1ecc 100644
--- a/apps/webapp/app/components/primitives/Buttons.tsx
+++ b/apps/webapp/app/components/primitives/Buttons.tsx
@@ -41,40 +41,53 @@ type Size = keyof typeof sizes;
 const theme = {
   primary: {
     textColor:
-      "text-charcoal-900 group-hover:text-charcoal-900 transition group-disabled:text-charcoal-900",
+      "text-charcoal-900 group-hover/button:text-charcoal-900 transition group-disabled/button:text-charcoal-900",
     button:
-      "bg-primary group-hover:bg-apple-200 group-disabled:opacity-50 group-disabled:bg-primary group-disabled:pointer-events-none",
+      "bg-primary group-hover/button:bg-apple-200 group-disabled/button:opacity-50 group-disabled/button:bg-primary group-disabled/button:pointer-events-none",
     shortcut:
-      "border-black/40 text-charcoal-900 group-hover:border-black/60 group-hover:text-charcoal-900",
+      "border-black/40 text-charcoal-900 group-hover/button:border-black/60 group-hover/button:text-charcoal-900",
+    icon: "text-charcoal-900",
   },
   secondary: {
-    textColor: "text-text-bright transition group-disabled:text-text-dimmed/80",
+    textColor: "text-text-bright transition group-disabled/button:text-text-dimmed/80",
     button:
-      "bg-secondary group-hover:bg-charcoal-600 group-hover:border-charcoal-650 border border-charcoal-600 group-disabled:bg-secondary group-disabled:opacity-60 group-disabled:pointer-events-none",
+      "bg-secondary group-hover/button:bg-charcoal-600 group-hover/button:border-charcoal-650 border border-charcoal-600 group-disabled/button:bg-secondary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
     shortcut:
-      "border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright group-hover:border-text-dimmed",
+      "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
+    icon: "text-text-bright",
   },
   tertiary: {
-    textColor: "text-text-bright transition group-disabled:text-text-dimmed/80",
+    textColor: "text-text-bright transition group-disabled/button:text-text-dimmed/80",
     button:
-      "bg-tertiary group-hover:bg-charcoal-600 group-disabled:bg-tertiary group-disabled:opacity-60 group-disabled:pointer-events-none",
+      "bg-tertiary group-hover/button:bg-charcoal-600 group-disabled/button:bg-tertiary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
     shortcut:
-      "border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright group-hover:border-text-dimmed",
+      "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
+    icon: "text-text-bright",
   },
   minimal: {
     textColor:
-      "text-text-dimmed group-hover:text-text-bright transition group-disabled:text-text-dimmed/80",
+      "text-text-dimmed group-hover/button:text-text-bright transition group-disabled/button:text-text-dimmed/80",
     button:
-      "bg-transparent group-hover:bg-tertiary disabled:opacity-50 group-disabled:bg-transparent group-disabled:pointer-events-none",
+      "bg-transparent group-hover/button:bg-tertiary disabled:opacity-50 group-disabled/button:bg-transparent group-disabled/button:pointer-events-none",
     shortcut:
-      "border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60",
+      "border-dimmed/40 text-text-dimmed group-hover/button:text-text-bright/80 group-hover/button:border-dimmed/60",
+    icon: "text-text-dimmed",
   },
   danger: {
     textColor:
-      "text-text-bright group-hover:text-white transition group-disabled:text-text-bright/80",
+      "text-text-bright group-hover/button:text-white transition group-disabled/button:text-text-bright/80",
     button:
-      "bg-error group-hover:bg-rose-500 disabled:opacity-50 group-disabled:bg-error group-disabled:pointer-events-none",
-    shortcut: "border-text-bright text-text-bright group-hover:border-bright/60",
+      "bg-error group-hover/button:bg-rose-500 disabled:opacity-50 group-disabled/button:bg-error group-disabled/button:pointer-events-none",
+    shortcut: "border-text-bright text-text-bright group-hover/button:border-bright/60",
+    icon: "text-text-bright",
+  },
+  docs: {
+    textColor: "text-blue-200/70 transition group-disabled/button:text-text-dimmed/80",
+    button:
+      "bg-charcoal-700 border border-charcoal-600/50 shadow group-hover/button:bg-charcoal-650 group-disabled/button:bg-tertiary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
+    shortcut:
+      "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
+    icon: "text-blue-500",
   },
 };
 
@@ -84,7 +97,7 @@ function createVariant(sizeName: Size, themeName: Theme) {
   return {
     textColor: theme[themeName].textColor,
     button: cn(sizes[sizeName].button, theme[themeName].button),
-    icon: sizes[sizeName].icon,
+    icon: cn(sizes[sizeName].icon, theme[themeName].icon),
     iconSpacing: sizes[sizeName].iconSpacing,
     shortcutVariant: sizes[sizeName].shortcutVariant,
     shortcut: cn(sizes[sizeName].shortcut, theme[themeName].shortcut),
@@ -112,9 +125,14 @@ const variant = {
   "danger/medium": createVariant("medium", "danger"),
   "danger/large": createVariant("large", "danger"),
   "danger/extra-large": createVariant("extra-large", "danger"),
+  "docs/small": createVariant("small", "docs"),
+  "docs/medium": createVariant("medium", "docs"),
+  "docs/large": createVariant("large", "docs"),
+  "docs/extra-large": createVariant("extra-large", "docs"),
   "menu-item": {
     textColor: "text-text-bright px-1",
-    button: "h-9 px-[0.475rem] text-sm rounded-sm bg-transparent group-hover:bg-charcoal-750",
+    button:
+      "h-9 px-[0.475rem] text-sm rounded-sm bg-transparent group-hover/button:bg-charcoal-750",
     icon: "h-5",
     iconSpacing: "gap-x-0.5",
     shortcutVariant: undefined,
@@ -123,7 +141,7 @@ const variant = {
   "small-menu-item": {
     textColor: "text-text-bright",
     button:
-      "h-[1.8rem] px-[0.4rem] text-2sm rounded-sm text-text-dimmed bg-transparent group-hover:bg-charcoal-750",
+      "h-[1.8rem] px-[0.4rem] text-2sm rounded-sm text-text-dimmed bg-transparent group-hover/button:bg-charcoal-750",
     icon: "h-4",
     iconSpacing: "gap-x-1.5",
     shortcutVariant: undefined,
@@ -132,7 +150,7 @@ const variant = {
   "small-menu-sub-item": {
     textColor: "text-text-dimmed",
     button:
-      "h-[1.8rem] px-[0.5rem] ml-5 text-2sm rounded-sm text-text-dimmed bg-transparent group-hover:bg-charcoal-750 focus-custom",
+      "h-[1.8rem] px-[0.5rem] ml-5 text-2sm rounded-sm text-text-dimmed bg-transparent group-hover/button:bg-charcoal-750 focus-custom",
     icon: undefined,
     iconSpacing: undefined,
     shortcutVariant: undefined,
@@ -141,7 +159,7 @@ const variant = {
 };
 
 const allVariants = {
-  $all: "font-normal text-center font-sans justify-center items-center shrink-0 transition duration-150 rounded-[3px] select-none group-focus:outline-none group-disabled:opacity-75 group-disabled:pointer-events-none focus-custom",
+  $all: "font-normal text-center font-sans justify-center items-center shrink-0 transition duration-150 rounded-[3px] select-none group-focus/button:outline-none group-disabled/button:opacity-75 group-disabled/button:pointer-events-none focus-custom",
   variant: variant,
 };
 
@@ -192,13 +210,18 @@ export function ButtonContent(props: ButtonContentPropsType) {
           (typeof LeadingIcon === "string" ? (
             <NamedIcon
               name={LeadingIcon}
-              className={cn(iconClassName, leadingIconClassName, "shrink-0 justify-start")}
+              className={cn(
+                iconClassName,
+                leadingIconClassName,
+                "shrink-0 justify-start",
+                variation.icon
+              )}
             />
           ) : (
             <LeadingIcon
               className={cn(
                 iconClassName,
-                textColorClassName,
+                variation.icon,
                 leadingIconClassName,
                 "shrink-0 justify-start"
               )}
@@ -218,13 +241,18 @@ export function ButtonContent(props: ButtonContentPropsType) {
           (typeof TrailingIcon === "string" ? (
             <NamedIcon
               name={TrailingIcon}
-              className={cn(iconClassName, trailingIconClassName, "shrink-0 justify-end")}
+              className={cn(
+                iconClassName,
+                trailingIconClassName,
+                "shrink-0 justify-end",
+                variation.icon
+              )}
             />
           ) : (
             <TrailingIcon
               className={cn(
                 iconClassName,
-                textColorClassName,
+                variation.icon,
                 trailingIconClassName,
                 "shrink-0 justify-end"
               )}
@@ -267,7 +295,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonPropsType>(
 
     return (
       <button
-        className={cn("group outline-none focus-custom", props.fullWidth ? "w-full" : "")}
+        className={cn("group/button outline-none focus-custom", props.fullWidth ? "w-full" : "")}
         type={type}
         disabled={disabled}
         onClick={onClick}
@@ -313,7 +341,7 @@ export const LinkButton = ({
     return (
       <div
         className={cn(
-          "group pointer-events-none cursor-default opacity-40 outline-none",
+          "group/button pointer-events-none cursor-default opacity-40 outline-none",
           props.fullWidth ? "w-full" : ""
         )}
       >
@@ -327,7 +355,7 @@ export const LinkButton = ({
       <ExtLink
         href={to.toString()}
         ref={innerRef}
-        className={cn("group focus-custom", props.fullWidth ? "w-full" : "")}
+        className={cn("group/button focus-custom", props.fullWidth ? "w-full" : "")}
         onClick={onClick}
         onMouseDown={onMouseDown}
         onMouseEnter={onMouseEnter}
@@ -342,7 +370,7 @@ export const LinkButton = ({
       <Link
         to={to}
         ref={innerRef}
-        className={cn("group focus-custom", props.fullWidth ? "w-full" : "")}
+        className={cn("group/button focus-custom", props.fullWidth ? "w-full" : "")}
         onClick={onClick}
         onMouseDown={onMouseDown}
         onMouseEnter={onMouseEnter}
@@ -363,7 +391,7 @@ export const NavLinkButton = ({ to, className, target, ...props }: NavLinkPropsT
   return (
     <NavLink
       to={to}
-      className={cn("group outline-none", props.fullWidth ? "w-full" : "")}
+      className={cn("group/button outline-none", props.fullWidth ? "w-full" : "")}
       target={target}
     >
       {({ isActive, isPending }) => (
diff --git a/apps/webapp/app/components/primitives/DetailCell.tsx b/apps/webapp/app/components/primitives/DetailCell.tsx
index 4c1c7ec264..2ff4040b54 100644
--- a/apps/webapp/app/components/primitives/DetailCell.tsx
+++ b/apps/webapp/app/components/primitives/DetailCell.tsx
@@ -34,6 +34,7 @@ type DetailCellProps = {
   description?: string | React.ReactNode;
   className?: string;
   variant?: keyof typeof variations;
+  boxClassName?: string;
 };
 
 export function DetailCell({
@@ -45,6 +46,7 @@ export function DetailCell({
   description,
   className,
   variant = "small",
+  boxClassName,
 }: DetailCellProps) {
   const variation = variations[variant];
 
@@ -53,6 +55,7 @@ export function DetailCell({
       <IconInBox
         icon={leadingIcon}
         className={cn("flex-none transition group-hover:border-charcoal-750", leadingIconClassName)}
+        boxClassName={boxClassName}
       />
       <div className="flex flex-1 flex-col">
         <Paragraph
diff --git a/apps/webapp/app/components/primitives/Dialog.tsx b/apps/webapp/app/components/primitives/Dialog.tsx
index 58b6bb1bb9..5e67afab77 100644
--- a/apps/webapp/app/components/primitives/Dialog.tsx
+++ b/apps/webapp/app/components/primitives/Dialog.tsx
@@ -82,7 +82,7 @@ DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-between sm:space-x-2", className)}
+    className={cn("flex justify-between border-t border-grid-bright pt-4", className)}
     {...props}
   />
 );
@@ -106,7 +106,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-muted-foreground pt-4 text-sm", className)}
+    className={cn("pt-2 text-base text-text-dimmed", className)}
     {...props}
   />
 ));
diff --git a/apps/webapp/app/components/primitives/FormButtons.tsx b/apps/webapp/app/components/primitives/FormButtons.tsx
index 9175290e42..e7d6db75d2 100644
--- a/apps/webapp/app/components/primitives/FormButtons.tsx
+++ b/apps/webapp/app/components/primitives/FormButtons.tsx
@@ -10,7 +10,12 @@ export function FormButtons({
   className?: string;
 }) {
   return (
-    <div className={cn("flex w-full items-center justify-between", className)}>
+    <div
+      className={cn(
+        "flex w-full items-center justify-between border-t border-grid-bright pt-4",
+        className
+      )}
+    >
       {cancelButton ? cancelButton : <div />} {confirmButton}
     </div>
   );
diff --git a/apps/webapp/app/components/primitives/InfoPanel.tsx b/apps/webapp/app/components/primitives/InfoPanel.tsx
index 73faf2feb7..42b67254fe 100644
--- a/apps/webapp/app/components/primitives/InfoPanel.tsx
+++ b/apps/webapp/app/components/primitives/InfoPanel.tsx
@@ -5,10 +5,13 @@ import { Paragraph } from "./Paragraph";
 
 const variants = {
   info: {
-    panelStyle: "border-grid-bright bg-background-bright",
+    panelStyle: "border-grid-bright bg-background-bright rounded-md border p-4 gap-3",
   },
   upgrade: {
-    panelStyle: "border-indigo-400/20 bg-indigo-800/10",
+    panelStyle: "border-indigo-400/20 bg-indigo-800/10 rounded-md border p-4 gap-3",
+  },
+  minimal: {
+    panelStyle: "max-w-full w-full py-3 px-3 gap-2",
   },
 };
 
@@ -43,7 +46,7 @@ export function InfoPanel({
       className={cn(
         variantStyle.panelStyle,
         title ? "flex-col" : "",
-        "flex h-fit items-start gap-3 rounded-md border p-4",
+        "flex h-fit items-start",
         panelClassName
       )}
     >
diff --git a/apps/webapp/app/components/primitives/Pagination.tsx b/apps/webapp/app/components/primitives/Pagination.tsx
index a885fd323b..974eeca90c 100644
--- a/apps/webapp/app/components/primitives/Pagination.tsx
+++ b/apps/webapp/app/components/primitives/Pagination.tsx
@@ -20,14 +20,14 @@ export function PaginationControls({
   }
 
   return (
-    <nav className="flex items-center gap-1" aria-label="Pagination">
+    <nav className="flex items-center gap-0.5" aria-label="Pagination">
       <LinkDisabled
         to={pageUrl(location, currentPage - 1)}
         className={currentPage > 1 ? "group" : ""}
         disabled={currentPage === 1}
         disabledClassName="opacity-30 cursor-default"
       >
-        <ButtonContent variant="minimal/medium" LeadingIcon={ChevronLeftIcon}>
+        <ButtonContent variant="minimal/small" LeadingIcon={ChevronLeftIcon}>
           Previous
         </ButtonContent>
       </LinkDisabled>
@@ -44,7 +44,7 @@ export function PaginationControls({
         disabled={currentPage === totalPages}
         disabledClassName="opacity-30 cursor-default"
       >
-        <ButtonContent variant="minimal/medium" TrailingIcon={ChevronRightIcon}>
+        <ButtonContent variant="minimal/small" TrailingIcon={ChevronRightIcon}>
           Next
         </ButtonContent>
       </LinkDisabled>
@@ -61,9 +61,9 @@ function pageUrl(location: ReturnType<typeof useLocation>, page: number): string
 }
 
 const baseClass =
-  "flex items-center justify-center border border-transparent h-8 w-8 text-xs font-medium transition text-text-dimmed rounded-sm";
+  "flex items-center justify-center border border-transparent min-w-6 h-6 px-1 text-xs font-medium transition text-text-dimmed rounded-sm";
 const unselectedClass = "hover:bg-tertiary hover:text-text-bright";
-const selectedClass = "border-text-dimmed text-text-bright hover:bg-tertiary";
+const selectedClass = "border-charcoal-600 bg-tertiary text-text-bright hover:bg-charcoal-600/50";
 
 function PageLinkComponent({
   page,
diff --git a/apps/webapp/app/components/primitives/Popover.tsx b/apps/webapp/app/components/primitives/Popover.tsx
index 2deab69c62..95c4d92e8a 100644
--- a/apps/webapp/app/components/primitives/Popover.tsx
+++ b/apps/webapp/app/components/primitives/Popover.tsx
@@ -190,11 +190,11 @@ function PopoverVerticalEllipseTrigger({
     <PopoverTrigger
       {...props}
       className={cn(
-        "group flex items-center justify-end gap-1 rounded px-1.5 py-1.5 text-text-dimmed transition focus-custom hover:bg-charcoal-750 hover:text-text-bright",
+        "group flex items-center justify-end gap-1 rounded-[3px] p-0.5 text-text-dimmed transition focus-custom hover:bg-tertiary hover:text-text-bright",
         className
       )}
     >
-      <EllipsisVerticalIcon className={cn("h-5 w-5 transition group-hover:text-text-bright")} />
+      <EllipsisVerticalIcon className={cn("size-5 transition group-hover:text-text-bright")} />
     </PopoverTrigger>
   );
 }
diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index 65921adec2..e27f48c12f 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -17,7 +17,7 @@ export const Table = forwardRef<HTMLTableElement, TableProps>(
     return (
       <div
         className={cn(
-          "overflow-x-auto whitespace-nowrap rounded-md border border-grid-bright scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
+          "overflow-x-auto whitespace-nowrap border-t border-grid-bright scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
           containerClassName,
           fullWidth && "w-full"
         )}
@@ -41,7 +41,7 @@ export const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>
       <thead
         ref={ref}
         className={cn(
-          "sticky top-0 z-10 divide-y divide-grid-dimmed rounded-t-md bg-background-dimmed after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-dimmed",
+          "sticky top-0 z-10 bg-background-dimmed after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-bright",
           className
         )}
       >
@@ -59,10 +59,7 @@ type TableBodyProps = {
 export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
   ({ className, children }, ref) => {
     return (
-      <tbody
-        ref={ref}
-        className={cn("relative divide-y divide-grid-dimmed overflow-y-auto", className)}
-      >
+      <tbody ref={ref} className={cn("relative overflow-y-auto", className)}>
         {children}
       </tbody>
     );
@@ -78,7 +75,14 @@ type TableRowProps = {
 export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
   ({ className, disabled, children }, ref) => {
     return (
-      <tr ref={ref} className={cn(disabled && "opacity-50", "group/table-row w-full", className)}>
+      <tr
+        ref={ref}
+        className={cn(
+          disabled && "opacity-50",
+          "group/table-row relative w-full after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed",
+          className
+        )}
+      >
         {children}
       </tr>
     );
@@ -114,7 +118,7 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
         ref={ref}
         scope="col"
         className={cn(
-          "px-3 py-2 align-middle text-xxs font-normal uppercase tracking-wider text-text-dimmed",
+          "px-3 py-2.5 pb-3 align-middle text-sm font-medium text-text-bright",
           alignmentClassName,
           className
         )}
@@ -145,13 +149,16 @@ type TableCellProps = TableCellBasicProps & {
 };
 
 const rowHoverStyles = {
-  default: "group-hover/table-row:bg-charcoal-800",
-  dimmed: "group-hover/table-row:bg-charcoal-850",
-  bright: "group-hover/table-row:bg-charcoal-750",
+  default:
+    "group-hover/table-row:bg-charcoal-800 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-750 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-750 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3",
+  dimmed:
+    "group-hover/table-row:bg-charcoal-850 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-800 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-800 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3",
+  bright:
+    "group-hover/table-row:bg-charcoal-750 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-700 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-700 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3",
 };
 
 const stickyStyles =
-  "sticky right-0 w-[2.8rem] min-w-[2.8rem] bg-background-dimmed before:absolute before:pointer-events-none before:-left-8 before:top-0 before:h-full before:min-w-[2rem]";
+  "sticky right-0 bg-background-dimmed group-hover/table-row:bg-charcoal-750 w-[--sticky-width] [&:has(.group-hover\\/table-row\\:block)]:w-auto";
 
 export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
   (
@@ -192,7 +199,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       <td
         ref={ref}
         className={cn(
-          "text-xs text-charcoal-400 transition-colors",
+          "text-xs text-charcoal-400",
           to || onClick || hasAction ? "cursor-pointer" : "px-3 py-3 align-middle",
           !to && !onClick && alignmentClassName,
           isSticky && stickyStyles,
@@ -237,7 +244,7 @@ export const TableCellChevron = forwardRef<
       alignment="right"
     >
       {children}
-      <ChevronRightIcon className="h-4 w-4 text-text-dimmed transition group-hover:text-text-bright" />
+      <ChevronRightIcon className="size-4 text-text-dimmed transition group-hover:text-text-bright" />
     </TableCell>
   );
 });
@@ -246,33 +253,72 @@ export const TableCellMenu = forwardRef<
   HTMLTableCellElement,
   {
     className?: string;
-    children?: ReactNode;
     isSticky?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    visibleButtons?: ReactNode;
+    hiddenButtons?: ReactNode;
+    popoverContent?: ReactNode;
+    children?: ReactNode;
   }
->(({ className, children, isSticky, onClick }, ref) => {
-  const [isOpen, setIsOpen] = useState(false);
-  return (
-    <TableCell
-      className={className}
-      isSticky={isSticky}
-      onClick={onClick}
-      ref={ref}
-      alignment="right"
-      hasAction={true}
-    >
-      <Popover onOpenChange={(open) => setIsOpen(open)}>
-        <PopoverVerticalEllipseTrigger isOpen={isOpen} />
-        <PopoverContent
-          className="w-fit max-w-[10rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
-          align="end"
-        >
-          <div className="flex flex-col gap-1 p-1">{children}</div>
-        </PopoverContent>
-      </Popover>
-    </TableCell>
-  );
-});
+>(
+  (
+    { className, isSticky, onClick, visibleButtons, hiddenButtons, popoverContent, children },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <TableCell
+        className={className}
+        isSticky={isSticky}
+        onClick={onClick}
+        ref={ref}
+        alignment="right"
+        hasAction={true}
+      >
+        <div className="relative p-1">
+          <div className="absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 bg-background-dimmed p-0.5 group-hover/table-row:rounded-[0.25rem] group-hover/table-row:bg-background-bright group-hover/table-row:ring-1 group-hover/table-row:ring-grid-bright">
+            {/* Hidden buttons that show on hover */}
+            {hiddenButtons && (
+              <div className="hidden pr-0.5 group-hover/table-row:block group-hover/table-row:border-r group-hover/table-row:border-grid-dimmed">
+                {hiddenButtons}
+              </div>
+            )}
+            {/* Always visible buttons  */}
+            {visibleButtons}
+            {/* Always visible popover with ellipsis trigger */}
+            {popoverContent && (
+              <Popover onOpenChange={(open) => setIsOpen(open)}>
+                <PopoverVerticalEllipseTrigger
+                  isOpen={isOpen}
+                  className="duration-0 group-hover/table-row:text-text-bright"
+                />
+                <PopoverContent
+                  className="min-w-[10rem] max-w-[20rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+                  align="end"
+                >
+                  <div className="flex flex-col gap-1 p-1">{popoverContent}</div>
+                </PopoverContent>
+              </Popover>
+            )}
+            {/* Optionally pass in children to render in a popover */}
+            {!visibleButtons && !hiddenButtons && !popoverContent && (
+              <Popover onOpenChange={(open) => setIsOpen(open)}>
+                <PopoverVerticalEllipseTrigger isOpen={isOpen} />
+                <PopoverContent
+                  className="w-fit max-w-[10rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+                  align="end"
+                >
+                  <div className="flex flex-col gap-1 p-1">{children}</div>
+                </PopoverContent>
+              </Popover>
+            )}
+          </div>
+        </div>
+      </TableCell>
+    );
+  }
+);
 
 type TableBlankRowProps = {
   className?: string;
diff --git a/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx b/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx
index 40be25ec74..d4264886b7 100644
--- a/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx
+++ b/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx
@@ -1,4 +1,6 @@
 import { StopCircleIcon } from "@heroicons/react/20/solid";
+import { NoSymbolIcon } from "@heroicons/react/24/solid";
+import { DialogClose } from "@radix-ui/react-dialog";
 import { Form, useFetcher, useNavigation } from "@remix-run/react";
 import { Button } from "~/components/primitives/Buttons";
 import {
@@ -7,6 +9,8 @@ import {
   DialogFooter,
   DialogHeader,
 } from "~/components/primitives/Dialog";
+import { FormButtons } from "~/components/primitives/FormButtons";
+import { Paragraph } from "~/components/primitives/Paragraph";
 
 type CancelRunDialogProps = {
   runFriendlyId: string;
@@ -22,24 +26,33 @@ export function CancelRunDialog({ runFriendlyId, redirectPath }: CancelRunDialog
   return (
     <DialogContent key="cancel">
       <DialogHeader>Cancel this run?</DialogHeader>
-      <DialogDescription>
-        Canceling a run will stop execution, along with any executing subtasks.
-      </DialogDescription>
-      <DialogFooter>
-        <Form action={`/resources/taskruns/${runFriendlyId}/cancel`} method="post">
-          <Button
-            type="submit"
-            name="redirectUrl"
-            value={redirectPath}
-            variant="danger/small"
-            LeadingIcon={isLoading ? "spinner-white" : StopCircleIcon}
-            disabled={isLoading}
-            shortcut={{ modifiers: ["meta"], key: "enter" }}
-          >
-            {isLoading ? "Canceling..." : "Cancel run"}
-          </Button>
-        </Form>
-      </DialogFooter>
+      <div className="flex flex-col gap-3 pt-3">
+        <Paragraph>
+          Canceling a run will stop execution, along with any executing subtasks.
+        </Paragraph>
+        <FormButtons
+          confirmButton={
+            <Form action={`/resources/taskruns/${runFriendlyId}/cancel`} method="post">
+              <Button
+                type="submit"
+                name="redirectUrl"
+                value={redirectPath}
+                variant="danger/medium"
+                LeadingIcon={isLoading ? "spinner-white" : NoSymbolIcon}
+                disabled={isLoading}
+                shortcut={{ modifiers: ["meta"], key: "enter" }}
+              >
+                {isLoading ? "Canceling..." : "Cancel run"}
+              </Button>
+            </Form>
+          }
+          cancelButton={
+            <DialogClose asChild>
+              <Button variant={"tertiary/medium"}>Close</Button>
+            </DialogClose>
+          }
+        />
+      </div>
     </DialogContent>
   );
 }
diff --git a/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
index b8af3646f8..589b686a5c 100644
--- a/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
+++ b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx
@@ -129,12 +129,12 @@ function ReplayForm({
           defaultValue={environment.id}
           items={environments}
           dropdownIcon
-          variant="tertiary/small"
+          variant="tertiary/medium"
           className="w-fit pl-1"
           text={(value) => {
             const env = environments.find((env) => env.id === value)!;
             return (
-              <div className="flex items-center pr-2">
+              <div className="flex items-center pl-1 pr-2">
                 <EnvironmentLabel environment={env} userName={env.userName} />
               </div>
             );
@@ -152,11 +152,11 @@ function ReplayForm({
       <input type="hidden" name="failedRedirect" value={failedRedirect} />
       <div className="mt-3 flex items-center justify-between gap-2 border-t border-grid-dimmed pt-3.5">
         <DialogClose asChild>
-          <Button variant="tertiary/small">Cancel</Button>
+          <Button variant="tertiary/medium">Cancel</Button>
         </DialogClose>
         <Button
           type="submit"
-          variant="primary/small"
+          variant="primary/medium"
           LeadingIcon={isSubmitting ? ButtonSpinner : undefined}
           disabled={isSubmitting}
           shortcut={{ modifiers: ["meta"], key: "enter", enabledOnInputElements: true }}
diff --git a/apps/webapp/app/components/runs/v3/RetryDeploymentIndexingDialog.tsx b/apps/webapp/app/components/runs/v3/RetryDeploymentIndexingDialog.tsx
index 7169ef85a9..d689a874e8 100644
--- a/apps/webapp/app/components/runs/v3/RetryDeploymentIndexingDialog.tsx
+++ b/apps/webapp/app/components/runs/v3/RetryDeploymentIndexingDialog.tsx
@@ -1,4 +1,5 @@
 import { ArrowPathIcon } from "@heroicons/react/20/solid";
+import { DialogClose } from "@radix-ui/react-dialog";
 import { Form, useNavigation } from "@remix-run/react";
 import { Button } from "~/components/primitives/Buttons";
 import {
@@ -33,6 +34,9 @@ export function RetryDeploymentIndexingDialog({
         any errors and re-deploy.
       </DialogDescription>
       <DialogFooter>
+        <DialogClose asChild>
+          <Button variant="tertiary/medium">Cancel</Button>
+        </DialogClose>
         <Form
           action={`/resources/${projectId}/deployments/${deploymentShortCode}/retry-indexing`}
           method="post"
@@ -41,7 +45,7 @@ export function RetryDeploymentIndexingDialog({
             type="submit"
             name="redirectUrl"
             value={redirectPath}
-            variant="primary/small"
+            variant="primary/medium"
             LeadingIcon={isLoading ? "spinner-white" : ArrowPathIcon}
             disabled={isLoading}
             shortcut={{ modifiers: ["meta"], key: "enter" }}
diff --git a/apps/webapp/app/components/runs/v3/RollbackDeploymentDialog.tsx b/apps/webapp/app/components/runs/v3/RollbackDeploymentDialog.tsx
index 8ec9670969..aeb2f61cc0 100644
--- a/apps/webapp/app/components/runs/v3/RollbackDeploymentDialog.tsx
+++ b/apps/webapp/app/components/runs/v3/RollbackDeploymentDialog.tsx
@@ -1,4 +1,5 @@
 import { ArrowPathIcon } from "@heroicons/react/20/solid";
+import { DialogClose } from "@radix-ui/react-dialog";
 import { Form, useNavigation } from "@remix-run/react";
 import { Button } from "~/components/primitives/Buttons";
 import {
@@ -33,6 +34,9 @@ export function RollbackDeploymentDialog({
         with these tasks included.
       </DialogDescription>
       <DialogFooter>
+        <DialogClose asChild>
+          <Button variant="tertiary/medium">Cancel</Button>
+        </DialogClose>
         <Form
           action={`/resources/${projectId}/deployments/${deploymentShortCode}/rollback`}
           method="post"
@@ -41,7 +45,7 @@ export function RollbackDeploymentDialog({
             type="submit"
             name="redirectUrl"
             value={redirectPath}
-            variant="primary/small"
+            variant="primary/medium"
             LeadingIcon={isLoading ? "spinner-white" : ArrowPathIcon}
             disabled={isLoading}
             shortcut={{ modifiers: ["meta"], key: "enter" }}
diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
index e31b30f0c5..03d2e822f5 100644
--- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
+++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
@@ -1,9 +1,10 @@
 import {
   ArrowPathIcon,
+  ArrowRightIcon,
   ClockIcon,
   CpuChipIcon,
+  NoSymbolIcon,
   RectangleStackIcon,
-  StopCircleIcon,
 } from "@heroicons/react/20/solid";
 import { BeakerIcon, BookOpenIcon, CheckIcon } from "@heroicons/react/24/solid";
 import { useLocation } from "@remix-run/react";
@@ -14,6 +15,7 @@ import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Checkbox } from "~/components/primitives/Checkbox";
 import { Dialog, DialogTrigger } from "~/components/primitives/Dialog";
 import { Header3 } from "~/components/primitives/Headers";
+import { PopoverMenuItem } from "~/components/primitives/Popover";
 import { useSelectedItems } from "~/components/primitives/SelectedItemsProvider";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { useEnvironments } from "~/hooks/useEnvironments";
@@ -102,11 +104,11 @@ export function TaskRunsTable({
   );
 
   return (
-    <Table>
+    <Table className="max-h-full overflow-y-auto">
       <TableHeader>
         <TableRow>
           {allowSelection && (
-            <TableHeaderCell className="pl-2 pr-0">
+            <TableHeaderCell className="pl-3 pr-0">
               {runs.length > 0 && (
                 <Checkbox
                   checked={hasAll(runs.map((r) => r.id))}
@@ -210,8 +212,9 @@ export function TaskRunsTable({
                 </Paragraph>
                 <LinkButton
                   to={docsPath("v3/triggering")}
-                  variant="tertiary/small"
+                  variant="docs/small"
                   LeadingIcon={BookOpenIcon}
+                  className="mt-3"
                 >
                   Read docs
                 </LinkButton>
@@ -233,8 +236,9 @@ export function TaskRunsTable({
                 </Paragraph>
                 <LinkButton
                   to={docsPath("v3/triggering")}
-                  variant="tertiary/small"
+                  variant="docs/small"
                   LeadingIcon={BookOpenIcon}
+                  className="mt-3"
                 >
                   Read docs
                 </LinkButton>
@@ -254,8 +258,9 @@ export function TaskRunsTable({
                 </Paragraph>
                 <LinkButton
                   to={docsPath("v3/tags")}
-                  variant="tertiary/small"
+                  variant="docs/small"
                   LeadingIcon={BookOpenIcon}
+                  className="mt-3"
                 >
                   Read docs
                 </LinkButton>
@@ -282,7 +287,7 @@ export function TaskRunsTable({
             return (
               <TableRow key={run.id}>
                 {allowSelection && (
-                  <TableCell className="pl-2 pr-0">
+                  <TableCell className="pl-3 pr-0">
                     <Checkbox
                       checked={has(run.id)}
                       onChange={(element) => {
@@ -367,7 +372,7 @@ export function TaskRunsTable({
                   </TableCell>
                 )}
                 <TableCell to={path}>
-                  {run.isTest ? <CheckIcon className="h-4 w-4 text-charcoal-400" /> : "–"}
+                  {run.isTest ? <CheckIcon className="size-4 text-charcoal-400" /> : "–"}
                 </TableCell>
                 <TableCell to={path}>
                   {run.createdAt ? <DateTime date={run.createdAt} /> : "–"}
@@ -405,34 +410,114 @@ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) {
   if (!run.isCancellable && !run.isReplayable) return <TableCell to={path}>{""}</TableCell>;
 
   return (
-    <TableCellMenu isSticky>
-      {run.isCancellable && (
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="small-menu-item" LeadingIcon={StopCircleIcon}>
-              Cancel run
-            </Button>
-          </DialogTrigger>
-          <CancelRunDialog
-            runFriendlyId={run.friendlyId}
-            redirectPath={`${location.pathname}${location.search}`}
+    <TableCellMenu
+      isSticky
+      popoverContent={
+        <>
+          <PopoverMenuItem
+            to={path}
+            icon={ArrowRightIcon}
+            leadingIconClassName="text-blue-500"
+            title="View run"
           />
-        </Dialog>
-      )}
-      {run.isReplayable && (
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="small-menu-item" LeadingIcon={ArrowPathIcon}>
-              Replay run
-            </Button>
-          </DialogTrigger>
-          <ReplayRunDialog
-            runFriendlyId={run.friendlyId}
-            failedRedirect={`${location.pathname}${location.search}`}
-          />
-        </Dialog>
-      )}
-    </TableCellMenu>
+          {run.isCancellable && (
+            <Dialog>
+              <DialogTrigger
+                asChild
+                className="size-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
+              >
+                <Button
+                  variant="small-menu-item"
+                  LeadingIcon={NoSymbolIcon}
+                  leadingIconClassName="text-error"
+                  fullWidth
+                  textAlignLeft
+                  className="w-full px-1.5 py-[0.9rem]"
+                >
+                  Cancel run
+                </Button>
+              </DialogTrigger>
+              <CancelRunDialog
+                runFriendlyId={run.friendlyId}
+                redirectPath={`${location.pathname}${location.search}`}
+              />
+            </Dialog>
+          )}
+          {run.isReplayable && (
+            <Dialog>
+              <DialogTrigger
+                asChild
+                className="h-6 w-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
+              >
+                <Button
+                  variant="small-menu-item"
+                  LeadingIcon={ArrowPathIcon}
+                  leadingIconClassName="text-success"
+                  fullWidth
+                  textAlignLeft
+                  className="w-full px-1.5 py-[0.9rem]"
+                >
+                  Replay run…
+                </Button>
+              </DialogTrigger>
+              <ReplayRunDialog
+                runFriendlyId={run.friendlyId}
+                failedRedirect={`${location.pathname}${location.search}`}
+              />
+            </Dialog>
+          )}
+        </>
+      }
+      hiddenButtons={
+        <div className="flex items-center">
+          {run.isCancellable && (
+            <SimpleTooltip
+              button={
+                <Dialog>
+                  <DialogTrigger
+                    asChild
+                    className="size-6 rounded-sm p-1 text-text-bright transition hover:bg-charcoal-700"
+                  >
+                    <NoSymbolIcon className="size-3" />
+                  </DialogTrigger>
+                  <CancelRunDialog
+                    runFriendlyId={run.friendlyId}
+                    redirectPath={`${location.pathname}${location.search}`}
+                  />
+                </Dialog>
+              }
+              content="Cancel run"
+              side="left"
+              disableHoverableContent
+            />
+          )}
+          {run.isCancellable && run.isReplayable && (
+            <div className="mx-0.5 h-6 w-px bg-grid-dimmed" />
+          )}
+          {run.isReplayable && (
+            <SimpleTooltip
+              button={
+                <Dialog>
+                  <DialogTrigger
+                    asChild
+                    className="h-6 w-6 rounded-sm p-1 text-text-bright transition hover:bg-charcoal-700"
+                  >
+                    <ArrowPathIcon className="size-3" />
+                  </DialogTrigger>
+                  <ReplayRunDialog
+                    runFriendlyId={run.friendlyId}
+                    failedRedirect={`${location.pathname}${location.search}`}
+                  />
+                </Dialog>
+              }
+              content="Replay run"
+              side="left"
+              disableHoverableContent
+            />
+          )}
+        </div>
+      }
+    />
   );
 }
 
@@ -503,19 +588,29 @@ function BlankState({ isLoading, filters }: Pick<RunsTableProps, "isLoading" | "
 
   return (
     <TableBlankRow colSpan={14}>
-      <div className="flex flex-col items-center justify-center gap-2">
-        <Paragraph className="w-auto" variant="small">
-          No runs currently match your filters. Try refreshing or modifying your filters.
+      <div className="flex flex-col items-center justify-center gap-6">
+        <Paragraph className="w-auto" variant="base/bright">
+          No runs match your filters. Try refreshing, modifying your filters or run a test.
         </Paragraph>
-        <Button
-          LeadingIcon={ArrowPathIcon}
-          variant="tertiary/small"
-          onClick={() => {
-            window.location.reload();
-          }}
-        >
-          Refresh
-        </Button>
+        <div className="flex items-center gap-2">
+          <Button
+            LeadingIcon={ArrowPathIcon}
+            variant="tertiary/medium"
+            onClick={() => {
+              window.location.reload();
+            }}
+          >
+            Refresh
+          </Button>
+          <Paragraph>or</Paragraph>
+          <LinkButton
+            LeadingIcon={BeakerIcon}
+            variant="tertiary/medium"
+            to={v3TestPath(organization, project)}
+          >
+            Run a test
+          </LinkButton>
+        </div>
       </div>
     </TableBlankRow>
   );
diff --git a/apps/webapp/app/presenters/v3/TaskListPresenter.server.ts b/apps/webapp/app/presenters/v3/TaskListPresenter.server.ts
index 90441e5073..cb1aa77b04 100644
--- a/apps/webapp/app/presenters/v3/TaskListPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/TaskListPresenter.server.ts
@@ -31,6 +31,7 @@ export type Task = {
   environments: {
     id: string;
     type: RuntimeEnvironmentType;
+    slug: string;
     userName?: string;
   }[];
 };
diff --git a/apps/webapp/app/presenters/v3/TestPresenter.server.ts b/apps/webapp/app/presenters/v3/TestPresenter.server.ts
index 328534e056..541a45512f 100644
--- a/apps/webapp/app/presenters/v3/TestPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/TestPresenter.server.ts
@@ -113,10 +113,10 @@ export class TestPresenter extends BasePresenter {
           triggerSource: TaskTriggerSource;
         }[]
       >`WITH workers AS (
-          SELECT 
+          SELECT
                 bw.*,
                 ROW_NUMBER() OVER(ORDER BY string_to_array(bw.version, '.')::int[] DESC) AS rn
-          FROM 
+          FROM
                 ${sqlDatabaseSchema}."BackgroundWorker" bw
           WHERE "runtimeEnvironmentId" = ${envId}
         ),
diff --git a/apps/webapp/app/presenters/v3/TestTaskPresenter.server.ts b/apps/webapp/app/presenters/v3/TestTaskPresenter.server.ts
index 2b90b53706..779b904263 100644
--- a/apps/webapp/app/presenters/v3/TestTaskPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/TestTaskPresenter.server.ts
@@ -1,13 +1,15 @@
 import { ScheduledTaskPayload, parsePacket, prettyPrintPacket } from "@trigger.dev/core/v3";
-import { RuntimeEnvironmentType, TaskRunStatus } from "@trigger.dev/database";
+import { BackgroundWorkerTask, RuntimeEnvironmentType, TaskRunStatus } from "@trigger.dev/database";
 import { PrismaClient, prisma, sqlDatabaseSchema } from "~/db.server";
 import { getTimezones } from "~/utils/timezones.server";
 import { getUsername } from "~/utils/username";
+import { findCurrentWorkerDeployment } from "~/v3/models/workerDeployment.server";
 
 type TestTaskOptions = {
   userId: string;
   projectSlug: string;
-  taskFriendlyId: string;
+  environmentSlug: string;
+  taskIdentifier: string;
 };
 
 type Task = {
@@ -37,6 +39,15 @@ export type TestTask =
       runs: ScheduledRun[];
     };
 
+export type TestTaskResult =
+  | {
+      foundTask: true;
+      task: TestTask;
+    }
+  | {
+      foundTask: false;
+    };
+
 type RawRun = {
   id: string;
   number: BigInt;
@@ -71,55 +82,79 @@ export class TestTaskPresenter {
     this.#prismaClient = prismaClient;
   }
 
-  public async call({ userId, projectSlug, taskFriendlyId }: TestTaskOptions): Promise<TestTask> {
-    const task = await this.#prismaClient.backgroundWorkerTask.findFirstOrThrow({
+  public async call({
+    userId,
+    projectSlug,
+    environmentSlug,
+    taskIdentifier,
+  }: TestTaskOptions): Promise<TestTaskResult> {
+    const environment = await this.#prismaClient.runtimeEnvironment.findFirstOrThrow({
+      where: {
+        slug: environmentSlug,
+        project: {
+          slug: projectSlug,
+        },
+        orgMember: environmentSlug === "dev" ? { userId } : undefined,
+      },
       select: {
         id: true,
-        filePath: true,
-        exportName: true,
-        slug: true,
-        triggerSource: true,
-        runtimeEnvironment: {
+        type: true,
+        orgMember: {
           select: {
-            id: true,
-            type: true,
-            orgMember: {
+            user: {
               select: {
-                user: {
-                  select: {
-                    id: true,
-                    name: true,
-                    displayName: true,
-                  },
-                },
+                id: true,
+                name: true,
+                displayName: true,
               },
             },
           },
         },
       },
-      where: {
-        friendlyId: taskFriendlyId,
-      },
     });
 
+    let task: BackgroundWorkerTask | null = null;
+    if (environment.type !== "DEVELOPMENT") {
+      const deployment = await findCurrentWorkerDeployment(environment.id);
+      if (deployment) {
+        task = deployment.worker?.tasks.find((t) => t.slug === taskIdentifier) ?? null;
+      }
+    } else {
+      task = await this.#prismaClient.backgroundWorkerTask.findFirst({
+        where: {
+          slug: taskIdentifier,
+          runtimeEnvironmentId: environment.id,
+        },
+        orderBy: {
+          createdAt: "desc",
+        },
+      });
+    }
+
+    if (!task) {
+      return {
+        foundTask: false,
+      };
+    }
+
     const latestRuns = await this.#prismaClient.$queryRaw<RawRun[]>`
     WITH taskruns AS (
-      SELECT 
-          tr.* 
-      FROM 
+      SELECT
+          tr.*
+      FROM
           ${sqlDatabaseSchema}."TaskRun" as tr
       JOIN
           ${sqlDatabaseSchema}."BackgroundWorkerTask" as bwt
       ON
           tr."taskIdentifier" = bwt.slug
       WHERE
-          bwt."friendlyId" = ${taskFriendlyId} AND
-          tr."runtimeEnvironmentId" = ${task.runtimeEnvironment.id}
-      ORDER BY 
+          bwt."friendlyId" = ${task.friendlyId} AND
+          tr."runtimeEnvironmentId" = ${environment.id}
+      ORDER BY
           tr."createdAt" DESC
       LIMIT 5
     )
-    SELECT 
+    SELECT
         taskr.id,
         taskr.number,
         taskr."friendlyId",
@@ -131,7 +166,7 @@ export class TestTaskPresenter {
         taskr."seedMetadata",
         taskr."seedMetadataType",
         taskr."runtimeEnvironmentId"
-    FROM 
+    FROM
         taskruns AS taskr
     WHERE
         taskr."payloadType" = 'application/json' OR taskr."payloadType" = 'application/super+json'
@@ -143,58 +178,64 @@ export class TestTaskPresenter {
       taskIdentifier: task.slug,
       filePath: task.filePath,
       exportName: task.exportName,
-      friendlyId: taskFriendlyId,
+      friendlyId: task.friendlyId,
       environment: {
-        id: task.runtimeEnvironment.id,
-        type: task.runtimeEnvironment.type,
-        userId: task.runtimeEnvironment.orgMember?.user.id,
-        userName: getUsername(task.runtimeEnvironment.orgMember?.user),
+        id: environment.id,
+        type: environment.type,
+        userId: environment.orgMember?.user.id,
+        userName: getUsername(environment.orgMember?.user),
       },
     };
 
     switch (task.triggerSource) {
       case "STANDARD":
         return {
-          triggerSource: "STANDARD",
-          task: taskWithEnvironment,
-          runs: await Promise.all(
-            latestRuns.map(async (r) => {
-              const number = Number(r.number);
-
-              return {
-                ...r,
-                number,
-                payload: await prettyPrintPacket(r.payload, r.payloadType),
-                metadata: r.seedMetadata
-                  ? await prettyPrintPacket(r.seedMetadata, r.seedMetadataType)
-                  : undefined,
-              };
-            })
-          ),
-        };
-      case "SCHEDULED":
-        const possibleTimezones = getTimezones();
-        return {
-          triggerSource: "SCHEDULED",
-          task: taskWithEnvironment,
-          possibleTimezones,
-          runs: (
-            await Promise.all(
+          foundTask: true,
+          task: {
+            triggerSource: "STANDARD",
+            task: taskWithEnvironment,
+            runs: await Promise.all(
               latestRuns.map(async (r) => {
                 const number = Number(r.number);
 
-                const payload = await getScheduleTaskRunPayload(r);
-
-                if (payload.success) {
-                  return {
-                    ...r,
-                    number,
-                    payload: payload.data,
-                  };
-                }
+                return {
+                  ...r,
+                  number,
+                  payload: await prettyPrintPacket(r.payload, r.payloadType),
+                  metadata: r.seedMetadata
+                    ? await prettyPrintPacket(r.seedMetadata, r.seedMetadataType)
+                    : undefined,
+                };
               })
-            )
-          ).filter(Boolean),
+            ),
+          },
+        };
+      case "SCHEDULED":
+        const possibleTimezones = getTimezones();
+        return {
+          foundTask: true,
+          task: {
+            triggerSource: "SCHEDULED",
+            task: taskWithEnvironment,
+            possibleTimezones,
+            runs: (
+              await Promise.all(
+                latestRuns.map(async (r) => {
+                  const number = Number(r.number);
+
+                  const payload = await getScheduleTaskRunPayload(r);
+
+                  if (payload.success) {
+                    return {
+                      ...r,
+                      number,
+                      payload: payload.data,
+                    };
+                  }
+                })
+              )
+            ).filter(Boolean),
+          },
         };
     }
   }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
index fac0c29158..e8738659cc 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
@@ -1,4 +1,10 @@
-import { ChatBubbleLeftRightIcon, ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/20/solid";
+import {
+  BeakerIcon,
+  BookOpenIcon,
+  ChatBubbleLeftRightIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from "@heroicons/react/20/solid";
 import { useRevalidator } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { formatDurationMilliseconds } from "@trigger.dev/core/v3";
@@ -13,13 +19,14 @@ import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { InlineCode } from "~/components/code/InlineCode";
 import { EnvironmentLabels } from "~/components/environments/EnvironmentLabel";
 import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { Button } from "~/components/primitives/Buttons";
+import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { formatDateTime } from "~/components/primitives/DateTime";
 import { Header1, Header2, Header3 } from "~/components/primitives/Headers";
 import { Input } from "~/components/primitives/Input";
 import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { PopoverMenuItem } from "~/components/primitives/Popover";
 import * as Property from "~/components/primitives/PropertyTable";
 import { Spinner } from "~/components/primitives/Spinner";
 import { StepNumber } from "~/components/primitives/StepNumber";
@@ -28,7 +35,7 @@ import {
   TableBlankRow,
   TableBody,
   TableCell,
-  TableCellChevron,
+  TableCellMenu,
   TableHeader,
   TableHeaderCell,
   TableRow,
@@ -38,8 +45,8 @@ import TooltipPortal from "~/components/primitives/TooltipPortal";
 import { TaskFunctionName } from "~/components/runs/v3/TaskPath";
 import { TaskRunStatusCombo } from "~/components/runs/v3/TaskRunStatus";
 import {
-  TaskTriggerSourceIcon,
   taskTriggerSourceDescription,
+  TaskTriggerSourceIcon,
 } from "~/components/runs/v3/TaskTriggerSource";
 import { useEventSource } from "~/hooks/useEventSource";
 import { useOrganization } from "~/hooks/useOrganizations";
@@ -48,7 +55,14 @@ import { useTextFilter } from "~/hooks/useTextFilter";
 import { Task, TaskActivity, TaskListPresenter } from "~/presenters/v3/TaskListPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { ProjectParamSchema, v3RunsPath, v3TasksStreamingPath } from "~/utils/pathBuilder";
+import {
+  docsPath,
+  ProjectParamSchema,
+  v3RunsPath,
+  v3TasksStreamingPath,
+  v3TestPath,
+  v3TestTaskPath,
+} from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -144,15 +158,22 @@ export default function Page() {
               ))}
             </Property.Table>
           </AdminDebugTooltip>
+          <LinkButton
+            variant={"docs/small"}
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("/tasks/overview")}
+          >
+            Task docs
+          </LinkButton>
         </PageAccessories>
       </NavBar>
-      <PageBody>
+      <PageBody scrollable={false}>
         <div className={cn("grid h-full grid-rows-1")}>
           {hasTasks ? (
-            <div className="flex flex-col gap-4 pb-4">
+            <div className="flex flex-col">
               {!userHasTasks && <UserHasNoTasks />}
-              <div className="pb-4">
-                <div className="h-8">
+              <div className="max-h-full overflow-hidden">
+                <div className="p-2">
                   <Input
                     placeholder="Search tasks"
                     variant="tertiary"
@@ -163,7 +184,7 @@ export default function Page() {
                     autoFocus
                   />
                 </div>
-                <Table>
+                <Table containerClassName="max-h-full mb-[2.5rem]">
                   <TableHeader>
                     <TableRow>
                       <TableHeaderCell>Task ID</TableHeaderCell>
@@ -182,6 +203,24 @@ export default function Page() {
                         const path = v3RunsPath(organization, project, {
                           tasks: [task.slug],
                         });
+
+                        const devYouEnvironment = task.environments.find(
+                          (e) => e.type === "DEVELOPMENT" && !e.userName
+                        );
+                        const firstDeployedEnvironment = task.environments
+                          .filter((e) => e.type !== "DEVELOPMENT")
+                          .at(0);
+                        const testEnvironment = devYouEnvironment ?? firstDeployedEnvironment;
+
+                        const testPath = testEnvironment
+                          ? v3TestTaskPath(
+                              organization,
+                              project,
+                              { taskIdentifier: task.slug },
+                              testEnvironment.slug
+                            )
+                          : v3TestPath(organization, project);
+
                         return (
                           <TableRow key={task.slug} className="group">
                             <TableCell to={path}>
@@ -262,7 +301,30 @@ export default function Page() {
                             <TableCell to={path}>
                               <EnvironmentLabels environments={task.environments} />
                             </TableCell>
-                            <TableCellChevron to={path} />
+                            <TableCellMenu
+                              isSticky
+                              popoverContent={
+                                <>
+                                  <PopoverMenuItem
+                                    icon="runs"
+                                    to={path}
+                                    title="View runs"
+                                    leadingIconClassName="text-teal-500"
+                                  />
+                                  <PopoverMenuItem icon="beaker" to={testPath} title="Test task" />
+                                </>
+                              }
+                              hiddenButtons={
+                                <LinkButton
+                                  variant="minimal/small"
+                                  LeadingIcon={BeakerIcon}
+                                  leadingIconClassName="text-text-bright"
+                                  to={testPath}
+                                >
+                                  Test
+                                </LinkButton>
+                              }
+                            />
                           </TableRow>
                         );
                       })
@@ -457,7 +519,7 @@ const CustomTooltip = ({ active, payload, label }: TooltipProps<number, string>)
     return (
       <TooltipPortal active={active}>
         <div className="rounded-sm border border-grid-bright bg-background-dimmed px-3 py-2">
-          <Header3 className="border-b-charcoal-650 border-b pb-2">{formattedDate}</Header3>
+          <Header3 className="border-b border-b-charcoal-650 pb-2">{formattedDate}</Header3>
           <div className="mt-2 grid grid-cols-[1fr_auto] gap-2 text-xs text-text-bright">
             {items.map((item) => (
               <Fragment key={item.status}>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts.new/route.tsx
index 1ee059a6af..0012f52e4f 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts.new/route.tsx
@@ -416,28 +416,21 @@ export default function Page() {
               <FormError id={environmentTypes.errorId}>{environmentTypes.error}</FormError>
             </InputGroup>
             <FormError>{form.error}</FormError>
-            <div className="border-t border-grid-bright pt-3">
-              <FormButtons
-                confirmButton={
-                  <Button
-                    variant="primary/medium"
-                    disabled={isLoading}
-                    name="action"
-                    value="create"
-                  >
-                    {isLoading ? "Saving…" : "Save"}
-                  </Button>
-                }
-                cancelButton={
-                  <LinkButton
-                    to={v3ProjectAlertsPath(organization, project)}
-                    variant="tertiary/medium"
-                  >
-                    Cancel
-                  </LinkButton>
-                }
-              />
-            </div>
+            <FormButtons
+              confirmButton={
+                <Button variant="primary/medium" disabled={isLoading} name="action" value="create">
+                  {isLoading ? "Saving…" : "Save"}
+                </Button>
+              }
+              cancelButton={
+                <LinkButton
+                  to={v3ProjectAlertsPath(organization, project)}
+                  variant="tertiary/medium"
+                >
+                  Cancel
+                </LinkButton>
+              }
+            />
           </Fieldset>
         </Form>
       </DialogContent>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx
index 576ba0f5bd..aea1eff2a4 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx
@@ -37,6 +37,7 @@ import {
   TableRow,
 } from "~/components/primitives/Table";
 import {
+  SimpleTooltip,
   Tooltip,
   TooltipContent,
   TooltipProvider,
@@ -163,16 +164,21 @@ export default function Page() {
           <LinkButton
             LeadingIcon={BookOpenIcon}
             to={docsPath("v3/troubleshooting-alerts")}
-            variant="minimal/small"
+            variant="docs/small"
           >
             Alerts docs
           </LinkButton>
         </PageAccessories>
       </NavBar>
-      <PageBody>
-        <div className={cn("flex h-full flex-col gap-3")}>
+      <PageBody scrollable={false}>
+        <div
+          className={cn(
+            "grid max-h-full min-h-full",
+            alertChannels.length === 0 ? "grid-rows-[1fr_auto]" : "grid-rows-[auto_1fr_auto]"
+          )}
+        >
           {alertChannels.length > 0 && !requiresUpgrade && (
-            <div className="flex items-end justify-between">
+            <div className="flex h-fit items-end justify-between p-2 pl-3">
               <Header2 className="">Project alerts</Header2>
               <LinkButton
                 to={v3NewProjectAlertPath(organization, project)}
@@ -184,7 +190,7 @@ export default function Page() {
               </LinkButton>
             </div>
           )}
-          <Table>
+          <Table containerClassName={cn(alertChannels.length === 0 && "border-t-0")}>
             <TableHeader>
               <TableRow>
                 <TableHeaderCell>Name</TableHeaderCell>
@@ -225,20 +231,26 @@ export default function Page() {
                         disabledIcon={BellSlashIcon}
                       />
                     </TableCell>
-                    <TableCellMenu isSticky>
-                      {alertChannel.enabled ? (
-                        <DisableAlertChannelButton id={alertChannel.id} />
-                      ) : (
-                        <EnableAlertChannelButton id={alertChannel.id} />
-                      )}
-
+                    <TableCellMenu
+                      isSticky
+                      popoverContent={
+                        alertChannel.enabled ? (
+                          <DisableAlertChannelButton id={alertChannel.id} />
+                        ) : (
+                          <EnableAlertChannelButton id={alertChannel.id} />
+                        )
+                      }
+                      className={
+                        alertChannel.enabled ? "" : "group-hover/table-row:bg-charcoal-800/50"
+                      }
+                    >
                       <DeleteAlertChannelButton id={alertChannel.id} />
                     </TableCellMenu>
                   </TableRow>
                 ))
               ) : (
                 <TableRow>
-                  <TableCell colSpan={5}>
+                  <TableCell colSpan={6}>
                     <div className="flex flex-col items-center justify-center py-6">
                       <Header2 spacing className="text-text-bright">
                         You haven't created any project alerts yet
@@ -261,40 +273,55 @@ export default function Page() {
               )}
             </TableBody>
           </Table>
-          <div className="flex items-stretch gap-3">
-            {requiresUpgrade ? (
-              <InfoPanel
-                variant="upgrade"
-                icon={LockOpenIcon}
-                iconClassName="text-indigo-500"
-                title="Unlock more alerts"
-                to={v3BillingPath(organization)}
-                buttonLabel="Upgrade"
-              >
-                <Paragraph variant="small">
-                  You've used all {limits.limit} of your available alerts. Upgrade your plan to
-                  enable more.
-                </Paragraph>
-              </InfoPanel>
-            ) : (
-              <div className="flex h-fit flex-col items-start gap-4 rounded-md border border-grid-bright bg-background-bright p-4">
-                <div className="flex items-center justify-between gap-6">
-                  <Header3>
-                    You've used {limits.used}/{limits.limit} of your alerts.
-                  </Header3>
+          <div className="flex h-fit items-stretch gap-3">
+            <div className="flex w-full items-start justify-between">
+              <div className="flex h-fit w-full items-center gap-4 border-t border-grid-bright bg-background-bright p-[0.86rem] pl-4">
+                <SimpleTooltip
+                  button={
+                    <div className="size-6">
+                      <svg className="h-full w-full -rotate-90 overflow-visible">
+                        <circle
+                          className="fill-none stroke-grid-bright"
+                          strokeWidth="4"
+                          r="10"
+                          cx="12"
+                          cy="12"
+                        />
+                        <circle
+                          className={`fill-none ${
+                            requiresUpgrade ? "stroke-error" : "stroke-success"
+                          }`}
+                          strokeWidth="4"
+                          r="10"
+                          cx="12"
+                          cy="12"
+                          strokeDasharray={`${(limits.used / limits.limit) * 62.8} 62.8`}
+                          strokeDashoffset="0"
+                          strokeLinecap="round"
+                        />
+                      </svg>
+                    </div>
+                  }
+                  content={`${Math.round((limits.used / limits.limit) * 100)}%`}
+                />
+                <div className="flex w-full items-center justify-between gap-6">
+                  {requiresUpgrade ? (
+                    <Header3 className="text-error">
+                      You've used all {limits.limit} of your available alerts. Upgrade your plan to
+                      enable more.
+                    </Header3>
+                  ) : (
+                    <Header3>
+                      You've used {limits.used}/{limits.limit} of your alerts.
+                    </Header3>
+                  )}
 
                   <LinkButton to={v3BillingPath(organization)} variant="secondary/small">
                     Upgrade
                   </LinkButton>
                 </div>
-                <div className="h-2 w-full overflow-hidden rounded-full border border-grid-bright">
-                  <div
-                    className="h-full bg-grid-bright"
-                    style={{ width: `${(limits.used / limits.limit) * 100}%` }}
-                  />
-                </div>
               </div>
-            )}
+            </div>
           </div>
         </div>
         <Outlet />
@@ -328,6 +355,7 @@ function DeleteAlertChannelButton(props: { id: string }) {
       <Button
         name="action"
         value="delete"
+        fullWidth
         type="submit"
         variant="small-menu-item"
         LeadingIcon={TrashIcon}
@@ -367,6 +395,8 @@ function DisableAlertChannelButton(props: { id: string }) {
         name="action"
         value="disable"
         type="submit"
+        fullWidth
+        textAlignLeft
         variant="small-menu-item"
         LeadingIcon={BellSlashIcon}
         leadingIconClassName="text-dimmed"
@@ -405,6 +435,8 @@ function EnableAlertChannelButton(props: { id: string }) {
         name="action"
         value="enable"
         type="submit"
+        fullWidth
+        textAlignLeft
         variant="small-menu-item"
         LeadingIcon={BellAlertIcon}
         leadingIconClassName="text-success"
@@ -430,6 +462,7 @@ function AlertChannelDetails({ alertChannel }: { alertChannel: AlertChannelListP
           leadingIconClassName="text-charcoal-400"
           label={"Email"}
           description={alertChannel.properties.email}
+          boxClassName="group-hover/table-row:bg-charcoal-800"
         />
       );
     }
@@ -461,6 +494,7 @@ function AlertChannelDetails({ alertChannel }: { alertChannel: AlertChannelListP
               className="mt-1 w-80"
             />
           }
+          boxClassName="group-hover/table-row:bg-charcoal-800"
         />
       );
     }
@@ -476,6 +510,7 @@ function AlertChannelDetails({ alertChannel }: { alertChannel: AlertChannelListP
           leadingIconClassName="text-charcoal-400"
           label={"Slack"}
           description={`#${alertChannel.properties.channelName}`}
+          boxClassName="group-hover/table-row:bg-charcoal-800"
         />
       );
     }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx
index 167d3f7d82..ea9c9c4e2e 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx
@@ -1,4 +1,5 @@
 import { BookOpenIcon, InformationCircleIcon, LockOpenIcon } from "@heroicons/react/20/solid";
+import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
@@ -72,7 +73,7 @@ export default function Page() {
           </AdminDebugTooltip>
 
           <LinkButton
-            variant={"minimal/small"}
+            variant={"docs/small"}
             LeadingIcon={BookOpenIcon}
             to={docsPath("/v3/apikeys")}
           >
@@ -80,9 +81,9 @@ export default function Page() {
           </LinkButton>
         </PageAccessories>
       </NavBar>
-      <PageBody>
-        <div className="mt-1 flex flex-col gap-4">
-          <Table>
+      <PageBody scrollable={false}>
+        <div className="flex flex-col">
+          <Table containerClassName="border-t-0">
             <TableHeader>
               <TableRow>
                 <TableHeaderCell>Environment</TableHeaderCell>
@@ -104,7 +105,7 @@ export default function Page() {
                       className="w-full max-w-none"
                       secure={`tr_${environment.apiKey.split("_")[1]}_••••••••`}
                       value={environment.apiKey}
-                      variant={"tertiary/small"}
+                      variant={"secondary/small"}
                     />
                   </TableCell>
                   <TableCell>
@@ -112,19 +113,22 @@ export default function Page() {
                   </TableCell>
                   <TableCell>{environment.latestVersion ?? "–"}</TableCell>
                   <TableCell>{environment.environmentVariableCount}</TableCell>
-                  <TableCellMenu isSticky>
-                    <RegenerateApiKeyModal
-                      id={environment.id}
-                      title={environmentTitle(environment)}
-                    />
-                  </TableCellMenu>
+                  <TableCellMenu
+                    isSticky
+                    popoverContent={
+                      <RegenerateApiKeyModal
+                        id={environment.id}
+                        title={environmentTitle(environment)}
+                      />
+                    }
+                  ></TableCellMenu>
                 </TableRow>
               ))}
             </TableBody>
           </Table>
 
-          <div className="flex gap-3">
-            <InfoPanel icon={InformationCircleIcon} panelClassName="max-w-sm">
+          <div className="flex flex-wrap justify-between">
+            <InfoPanel icon={InformationCircleIcon} variant="minimal" panelClassName="max-w-fit">
               <Paragraph variant="small">
                 Secret keys should be used on your server. They give full API access and allow you
                 to <TextLink to={docsPath("v3/triggering")}>trigger tasks</TextLink> from your
@@ -133,16 +137,19 @@ export default function Page() {
             </InfoPanel>
 
             {!hasStaging && (
-              <InfoPanel
-                icon={LockOpenIcon}
-                variant="upgrade"
-                title="Unlock a Staging environment"
-                to={v3BillingPath(organization)}
-                buttonLabel="Upgrade"
-                iconClassName="text-indigo-500"
-              >
-                Upgrade your plan to add a Staging environment.
-              </InfoPanel>
+              <div className="flex items-center gap-2 pl-3 pr-2">
+                <LockOpenIcon className="size-5 min-w-5 text-indigo-500" />
+                <Paragraph variant="small" className="text-text-bright">
+                  Upgrade to add a Staging environment
+                </Paragraph>
+                <LinkButton
+                  to={v3BillingPath(organization)}
+                  variant="secondary/small"
+                  LeadingIcon={ArrowUpCircleIcon}
+                >
+                  Upgrade
+                </LinkButton>
+              </div>
             )}
           </div>
         </div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.concurrency/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.concurrency/route.tsx
index b094460778..b4ef617d52 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.concurrency/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.concurrency/route.tsx
@@ -1,4 +1,8 @@
-import { ArrowUpCircleIcon, BookOpenIcon } from "@heroicons/react/20/solid";
+import {
+  ArrowUpCircleIcon,
+  BookOpenIcon,
+  ChatBubbleLeftEllipsisIcon,
+} from "@heroicons/react/20/solid";
 import { Await } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { Suspense } from "react";
@@ -27,6 +31,8 @@ import {
 import { requireUserId } from "~/services/session.server";
 import { docsPath, ProjectParamSchema, v3BillingPath } from "~/utils/pathBuilder";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
+import { LockOpenIcon } from "@heroicons/react/24/solid";
+import { Paragraph } from "~/components/primitives/Paragraph";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -62,7 +68,7 @@ export default function Page() {
         <PageAccessories>
           <AdminDebugTooltip />
           <LinkButton
-            variant={"minimal/small"}
+            variant={"docs/small"}
             LeadingIcon={BookOpenIcon}
             to={docsPath("/queue-concurrency")}
           >
@@ -70,50 +76,56 @@ export default function Page() {
           </LinkButton>
         </PageAccessories>
       </NavBar>
-      <PageBody>
-        <div className="flex flex-col gap-4">
-          <div>
-            <div className="mb-2 flex items-center justify-between">
-              <Header2>Environments</Header2>
-              {plan ? (
-                plan?.v3Subscription?.plan?.limits.concurrentRuns.canExceed ? (
-                  <Feedback
-                    button={
-                      <Button LeadingIcon={ArrowUpCircleIcon} variant="tertiary/small">
-                        Request more concurrency
-                      </Button>
-                    }
-                    defaultValue="help"
-                  />
-                ) : (
-                  <LinkButton
-                    LeadingIcon={ArrowUpCircleIcon}
-                    to={v3BillingPath(organization)}
-                    variant="tertiary/small"
-                  >
-                    Upgrade for more concurrency
-                  </LinkButton>
-                )
-              ) : null}
-            </div>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHeaderCell>Environment</TableHeaderCell>
-                  <TableHeaderCell alignment="right">Queued</TableHeaderCell>
-                  <TableHeaderCell alignment="right">Running</TableHeaderCell>
-                  <TableHeaderCell alignment="right">Concurrency limit</TableHeaderCell>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                <Suspense fallback={<Spinner />}>
-                  <Await resolve={environments} errorElement={<p>Error loading environments</p>}>
-                    {(environments) => <EnvironmentsTable environments={environments} />}
-                  </Await>
-                </Suspense>
-              </TableBody>
-            </Table>
-          </div>
+      <PageBody scrollable={false}>
+        <div className="flex flex-col">
+          <Table containerClassName="border-t-0">
+            <TableHeader>
+              <TableRow>
+                <TableHeaderCell>Environment</TableHeaderCell>
+                <TableHeaderCell alignment="right">Queued</TableHeaderCell>
+                <TableHeaderCell alignment="right">Running</TableHeaderCell>
+                <TableHeaderCell alignment="right">Concurrency limit</TableHeaderCell>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <Suspense fallback={<Spinner />}>
+                <Await resolve={environments} errorElement={<p>Error loading environments</p>}>
+                  {(environments) => <EnvironmentsTable environments={environments} />}
+                </Await>
+              </Suspense>
+            </TableBody>
+          </Table>
+          {plan ? (
+            plan?.v3Subscription?.plan?.limits.concurrentRuns.canExceed ? (
+              <div className="flex w-full items-center justify-end gap-2 pl-3 pr-2 pt-3">
+                <Paragraph variant="small" className="text-text-bright">
+                  Need more concurrency?
+                </Paragraph>
+                <Feedback
+                  button={
+                    <Button LeadingIcon={ChatBubbleLeftEllipsisIcon} variant="tertiary/small">
+                      Request more
+                    </Button>
+                  }
+                  defaultValue="help"
+                />
+              </div>
+            ) : (
+              <div className="flex w-full items-center justify-end gap-2 pl-3 pr-2 pt-3">
+                <LockOpenIcon className="size-5 min-w-5 text-indigo-500" />
+                <Paragraph variant="small" className="text-text-bright">
+                  Upgrade for more concurrency
+                </Paragraph>
+                <LinkButton
+                  to={v3BillingPath(organization)}
+                  variant="secondary/small"
+                  LeadingIcon={ArrowUpCircleIcon}
+                >
+                  Upgrade
+                </LinkButton>
+              </div>
+            )
+          ) : null}
         </div>
       </PageBody>
     </PageContainer>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx
index a73f2c43b1..971e81aa7d 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx
@@ -16,7 +16,7 @@ import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { DateTime } from "~/components/primitives/DateTime";
 import { Dialog, DialogTrigger } from "~/components/primitives/Dialog";
 import { InfoPanel } from "~/components/primitives/InfoPanel";
-import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { PaginationControls } from "~/components/primitives/Pagination";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
@@ -98,111 +98,118 @@ export default function Page() {
     <PageContainer>
       <NavBar>
         <PageTitle title="Deployments" />
+        <PageAccessories>
+          <LinkButton
+            variant={"docs/small"}
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("/cli-deploy")}
+          >
+            Deployments docs
+          </LinkButton>
+        </PageAccessories>
       </NavBar>
       <PageBody scrollable={false}>
         <ResizablePanelGroup orientation="horizontal" className="h-full max-h-full">
-          <ResizablePanel id="deployments-main" min="100px" className="max-h-full overflow-y-auto">
+          <ResizablePanel id="deployments-main" min="100px" className="max-h-full">
             {hasDeployments ? (
-              <div className="max-h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-                <div className="flex flex-col gap-4 p-3">
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHeaderCell>Deploy</TableHeaderCell>
-                        <TableHeaderCell>Env</TableHeaderCell>
-                        <TableHeaderCell>Version</TableHeaderCell>
-                        <TableHeaderCell>Status</TableHeaderCell>
-                        <TableHeaderCell>Tasks</TableHeaderCell>
-                        <TableHeaderCell>Deployed at</TableHeaderCell>
-                        <TableHeaderCell>Deployed by</TableHeaderCell>
-                        <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {deployments.length > 0 ? (
-                        deployments.map((deployment) => {
-                          const usernameForEnv =
-                            user.id !== deployment.environment.userId
-                              ? deployment.environment.userName
-                              : undefined;
-                          const path = v3DeploymentPath(
-                            organization,
-                            project,
-                            deployment,
-                            currentPage
-                          );
-                          return (
-                            <TableRow key={deployment.id} className="group">
-                              <TableCell to={path}>
-                                <div className="flex items-center gap-2">
+              <div className="grid max-h-full grid-rows-[1fr_auto]">
+                <Table containerClassName="border-t-0">
+                  <TableHeader>
+                    <TableRow>
+                      <TableHeaderCell>Deploy</TableHeaderCell>
+                      <TableHeaderCell>Env</TableHeaderCell>
+                      <TableHeaderCell>Version</TableHeaderCell>
+                      <TableHeaderCell>Status</TableHeaderCell>
+                      <TableHeaderCell>Tasks</TableHeaderCell>
+                      <TableHeaderCell>Deployed at</TableHeaderCell>
+                      <TableHeaderCell>Deployed by</TableHeaderCell>
+                      <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {deployments.length > 0 ? (
+                      deployments.map((deployment) => {
+                        const usernameForEnv =
+                          user.id !== deployment.environment.userId
+                            ? deployment.environment.userName
+                            : undefined;
+                        const path = v3DeploymentPath(
+                          organization,
+                          project,
+                          deployment,
+                          currentPage
+                        );
+                        return (
+                          <TableRow key={deployment.id} className="group">
+                            <TableCell to={path}>
+                              <div className="flex items-center gap-2">
+                                <Paragraph variant="extra-small">{deployment.shortCode}</Paragraph>
+                                {deployment.label && (
+                                  <Badge variant="outline-rounded">{deployment.label}</Badge>
+                                )}
+                              </div>
+                            </TableCell>
+                            <TableCell to={path}>
+                              <EnvironmentLabel
+                                environment={deployment.environment}
+                                userName={usernameForEnv}
+                              />
+                            </TableCell>
+                            <TableCell to={path}>{deployment.version}</TableCell>
+                            <TableCell to={path}>
+                              <DeploymentStatus
+                                status={deployment.status}
+                                isBuilt={deployment.isBuilt}
+                              />
+                            </TableCell>
+                            <TableCell to={path}>
+                              {deployment.tasksCount !== null ? deployment.tasksCount : "–"}
+                            </TableCell>
+                            <TableCell to={path}>
+                              {deployment.deployedAt ? (
+                                <DateTime date={deployment.deployedAt} />
+                              ) : (
+                                "–"
+                              )}
+                            </TableCell>
+                            <TableCell to={path}>
+                              {deployment.deployedBy ? (
+                                <div className="flex items-center gap-1">
+                                  <UserAvatar
+                                    avatarUrl={deployment.deployedBy.avatarUrl}
+                                    name={
+                                      deployment.deployedBy.name ??
+                                      deployment.deployedBy.displayName
+                                    }
+                                    className="h-4 w-4"
+                                  />
                                   <Paragraph variant="extra-small">
-                                    {deployment.shortCode}
+                                    {deployment.deployedBy.name ??
+                                      deployment.deployedBy.displayName}
                                   </Paragraph>
-                                  {deployment.label && (
-                                    <Badge variant="outline-rounded">{deployment.label}</Badge>
-                                  )}
                                 </div>
-                              </TableCell>
-                              <TableCell to={path}>
-                                <EnvironmentLabel
-                                  environment={deployment.environment}
-                                  userName={usernameForEnv}
-                                />
-                              </TableCell>
-                              <TableCell to={path}>{deployment.version}</TableCell>
-                              <TableCell to={path}>
-                                <DeploymentStatus
-                                  status={deployment.status}
-                                  isBuilt={deployment.isBuilt}
-                                />
-                              </TableCell>
-                              <TableCell to={path}>
-                                {deployment.tasksCount !== null ? deployment.tasksCount : "–"}
-                              </TableCell>
-                              <TableCell to={path}>
-                                {deployment.deployedAt ? (
-                                  <DateTime date={deployment.deployedAt} />
-                                ) : (
-                                  "–"
-                                )}
-                              </TableCell>
-                              <TableCell to={path}>
-                                {deployment.deployedBy ? (
-                                  <div className="flex items-center gap-1">
-                                    <UserAvatar
-                                      avatarUrl={deployment.deployedBy.avatarUrl}
-                                      name={
-                                        deployment.deployedBy.name ??
-                                        deployment.deployedBy.displayName
-                                      }
-                                      className="h-4 w-4"
-                                    />
-                                    <Paragraph variant="extra-small">
-                                      {deployment.deployedBy.name ??
-                                        deployment.deployedBy.displayName}
-                                    </Paragraph>
-                                  </div>
-                                ) : (
-                                  "–"
-                                )}
-                              </TableCell>
-                              <DeploymentActionsCell deployment={deployment} path={path} />
-                            </TableRow>
-                          );
-                        })
-                      ) : (
-                        <TableBlankRow colSpan={6}>
-                          <Paragraph variant="small" className="flex items-center justify-center">
-                            No deploys match your filters
-                          </Paragraph>
-                        </TableBlankRow>
-                      )}
-                    </TableBody>
-                  </Table>
-                  <div className="flex justify-end">
+                              ) : (
+                                "–"
+                              )}
+                            </TableCell>
+                            <DeploymentActionsCell deployment={deployment} path={path} />
+                          </TableRow>
+                        );
+                      })
+                    ) : (
+                      <TableBlankRow colSpan={8}>
+                        <Paragraph className="flex items-center justify-center">
+                          No deploys match your filters
+                        </Paragraph>
+                      </TableBlankRow>
+                    )}
+                  </TableBody>
+                </Table>
+                {totalPages > 1 && (
+                  <div className="-mt-px flex justify-end border-t border-grid-dimmed py-2 pr-2">
                     <PaginationControls currentPage={currentPage} totalPages={totalPages} />
                   </div>
-                </div>
+                )}
               </div>
             ) : (
               <CreateDeploymentInstructions />
@@ -212,7 +219,7 @@ export default function Page() {
           {deploymentParam && (
             <>
               <ResizableHandle id="deployments-handle" />
-              <ResizablePanel id="deployments-inspector" min="225px" max="500px">
+              <ResizablePanel id="deployments-inspector" min="400px" max="700px">
                 <Outlet />
               </ResizablePanel>
             </>
@@ -231,7 +238,7 @@ function CreateDeploymentInstructions() {
     <MainCenteredContainer className="max-w-md">
       <InfoPanel
         icon={ServerStackIcon}
-        iconClassName="text-blue-400"
+        iconClassName="text-blue-500"
         title="Deploy for the first time"
         panelClassName="max-w-full"
       >
@@ -247,7 +254,7 @@ function CreateDeploymentInstructions() {
         <div className="flex gap-3">
           <LinkButton
             to={docsPath("v3/cli-deploy")}
-            variant="tertiary/small"
+            variant="docs/medium"
             LeadingIcon={BookOpenIcon}
             className="inline-flex"
           >
@@ -255,7 +262,7 @@ function CreateDeploymentInstructions() {
           </LinkButton>
           <LinkButton
             to={docsPath("v3/github-actions")}
-            variant="tertiary/small"
+            variant="docs/medium"
             LeadingIcon={BookOpenIcon}
             className="inline-flex"
           >
@@ -285,35 +292,52 @@ function DeploymentActionsCell({
   }
 
   return (
-    <TableCellMenu isSticky>
-      {canRollback && (
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="small-menu-item" LeadingIcon={ArrowUturnLeftIcon}>
-              Rollback
-            </Button>
-          </DialogTrigger>
-          <RollbackDeploymentDialog
-            projectId={project.id}
-            deploymentShortCode={deployment.shortCode}
-            redirectPath={`${location.pathname}${location.search}`}
-          />
-        </Dialog>
-      )}
-      {canRetryIndexing && (
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="small-menu-item" LeadingIcon={ArrowPathIcon}>
-              Retry indexing
-            </Button>
-          </DialogTrigger>
-          <RetryDeploymentIndexingDialog
-            projectId={project.id}
-            deploymentShortCode={deployment.shortCode}
-            redirectPath={`${location.pathname}${location.search}`}
-          />
-        </Dialog>
-      )}
-    </TableCellMenu>
+    <TableCellMenu
+      isSticky
+      popoverContent={
+        <>
+          {canRollback && (
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button
+                  variant="small-menu-item"
+                  LeadingIcon={ArrowUturnLeftIcon}
+                  leadingIconClassName="text-blue-500"
+                  fullWidth
+                  textAlignLeft
+                >
+                  Rollback…
+                </Button>
+              </DialogTrigger>
+              <RollbackDeploymentDialog
+                projectId={project.id}
+                deploymentShortCode={deployment.shortCode}
+                redirectPath={`${location.pathname}${location.search}`}
+              />
+            </Dialog>
+          )}
+          {canRetryIndexing && (
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button
+                  variant="small-menu-item"
+                  LeadingIcon={ArrowPathIcon}
+                  leadingIconClassName="text-blue-500"
+                  fullWidth
+                  textAlignLeft
+                >
+                  Retry indexing…
+                </Button>
+              </DialogTrigger>
+              <RetryDeploymentIndexingDialog
+                projectId={project.id}
+                deploymentShortCode={deployment.shortCode}
+                redirectPath={`${location.pathname}${location.search}`}
+              />
+            </Dialog>
+          )}
+        </>
+      }
+    />
   );
 }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx
index 01c2b841db..d5ec7d6681 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx
@@ -311,7 +311,6 @@ export default function Page() {
                   Cancel
                 </LinkButton>
               }
-              className="mt-2"
             />
           </Fieldset>
         </Form>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx
index 78749082fd..9b3d2aa566 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx
@@ -8,6 +8,7 @@ import {
   PlusIcon,
   TrashIcon,
 } from "@heroicons/react/20/solid";
+import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
 import { Form, Outlet, useActionData, useNavigation } from "@remix-run/react";
 import {
   ActionFunctionArgs,
@@ -28,6 +29,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components
 import { Fieldset } from "~/components/primitives/Fieldset";
 import { FormButtons } from "~/components/primitives/FormButtons";
 import { FormError } from "~/components/primitives/FormError";
+import { Header2 } from "~/components/primitives/Headers";
 import { InfoPanel } from "~/components/primitives/InfoPanel";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
@@ -184,33 +186,33 @@ export default function Page() {
           <LinkButton
             LeadingIcon={BookOpenIcon}
             to={docsPath("v3/deploy-environment-variables")}
-            variant="minimal/small"
+            variant="docs/small"
           >
             Environment variables docs
           </LinkButton>
         </PageAccessories>
       </NavBar>
-      <PageBody>
-        <div className={cn("flex h-full flex-col gap-3")}>
-          <div className="flex items-center justify-end gap-2">
-            {environmentVariables.length > 0 && (
+      <PageBody scrollable={false}>
+        <div className={cn("flex h-full flex-col")}>
+          {environmentVariables.length > 0 && (
+            <div className="flex items-center justify-end gap-2 px-2 py-2">
               <Switch
                 variant="small"
                 label="Reveal values"
                 checked={revealAll}
                 onCheckedChange={(e) => setRevealAll(e.valueOf())}
               />
-            )}
-            <LinkButton
-              to={v3NewEnvironmentVariablesPath(organization, project)}
-              variant="primary/small"
-              LeadingIcon={PlusIcon}
-              shortcut={{ key: "n" }}
-            >
-              Add new
-            </LinkButton>
-          </div>
-          <Table>
+              <LinkButton
+                to={v3NewEnvironmentVariablesPath(organization, project)}
+                variant="primary/small"
+                LeadingIcon={PlusIcon}
+                shortcut={{ key: "n" }}
+              >
+                Add new
+              </LinkButton>
+            </div>
+          )}
+          <Table containerClassName={cn(environmentVariables.length === 0 && "border-t-0")}>
             <TableHeader>
               <TableRow>
                 <TableHeaderCell>Key</TableHeaderCell>
@@ -239,26 +241,39 @@ export default function Page() {
                             className="-ml-2"
                             secure={!revealAll}
                             value={value}
-                            variant={"tertiary/small"}
+                            variant={"secondary/small"}
                           />
                         </TableCell>
                       );
                     })}
-                    <TableCellMenu isSticky>
-                      <EditEnvironmentVariablePanel
-                        environments={environments}
-                        variable={variable}
-                        revealAll={revealAll}
-                      />
-                      <DeleteEnvironmentVariableButton variable={variable} />
-                    </TableCellMenu>
+                    <TableCellMenu
+                      isSticky
+                      popoverContent={
+                        <>
+                          <EditEnvironmentVariablePanel
+                            environments={environments}
+                            variable={variable}
+                            revealAll={revealAll}
+                          />
+                          <DeleteEnvironmentVariableButton variable={variable} />
+                        </>
+                      }
+                    ></TableCellMenu>
                   </TableRow>
                 ))
               ) : (
                 <TableRow>
                   <TableCell colSpan={environments.length + 2}>
-                    <div className="flex items-center justify-center">
-                      <Paragraph>No environment variables have been set</Paragraph>
+                    <div className="flex flex-col items-center justify-center gap-y-4 py-8">
+                      <Header2>You haven't set any environment variables yet.</Header2>
+                      <LinkButton
+                        to={v3NewEnvironmentVariablesPath(organization, project)}
+                        variant="primary/medium"
+                        LeadingIcon={PlusIcon}
+                        shortcut={{ key: "n" }}
+                      >
+                        Add new
+                      </LinkButton>
                     </div>
                   </TableCell>
                 </TableRow>
@@ -266,22 +281,25 @@ export default function Page() {
             </TableBody>
           </Table>
 
-          <div className="flex gap-3">
-            <InfoPanel icon={InformationCircleIcon} panelClassName="max-w-[22rem]">
+          <div className="z-10 -mt-px flex w-full flex-wrap justify-between border-t border-grid-dimmed">
+            <InfoPanel icon={InformationCircleIcon} variant="minimal" panelClassName="max-w-fit">
               Dev environment variables specified here will be overridden by ones in your .env file
               when running locally.
             </InfoPanel>
             {!hasStaging && (
-              <InfoPanel
-                icon={LockOpenIcon}
-                variant="upgrade"
-                title="Unlock a Staging environment"
-                to={v3BillingPath(organization)}
-                buttonLabel="Upgrade"
-                iconClassName="text-indigo-500"
-              >
-                Upgrade your plan to add a Staging environment.
-              </InfoPanel>
+              <div className="flex items-center gap-2 pl-3 pr-2">
+                <LockOpenIcon className="size-5 min-w-5 text-indigo-500" />
+                <Paragraph variant="small" className="text-text-bright">
+                  Upgrade to add a Staging environment
+                </Paragraph>
+                <LinkButton
+                  to={v3BillingPath(organization)}
+                  variant="secondary/small"
+                  LeadingIcon={ArrowUpCircleIcon}
+                >
+                  Upgrade
+                </LinkButton>
+              </div>
             )}
           </div>
         </div>
@@ -328,14 +346,7 @@ function EditEnvironmentVariablePanel({
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <Button
-          variant="small-menu-item"
-          LeadingIcon={PencilSquareIcon}
-          leadingIconClassName="text-charcoal-500"
-          className="text-xs"
-          fullWidth
-          textAlignLeft
-        >
+        <Button variant="small-menu-item" LeadingIcon={PencilSquareIcon} fullWidth textAlignLeft>
           Edit
         </Button>
       </DialogTrigger>
@@ -457,9 +468,11 @@ function DeleteEnvironmentVariableButton({
         value="delete"
         type="submit"
         variant="small-menu-item"
+        fullWidth
+        textAlignLeft
         LeadingIcon={TrashIcon}
-        leadingIconClassName="text-rose-500"
-        className="text-xs"
+        leadingIconClassName="text-rose-500 group-hover/button:text-text-bright transition-colors"
+        className="transition-colors group-hover/button:bg-error"
       >
         {isLoading ? "Deleting" : "Delete"}
       </Button>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx
index bd8d34f7bc..6b975a1a14 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx
@@ -1,6 +1,7 @@
 import {
   ArrowUturnLeftIcon,
   BoltSlashIcon,
+  BookOpenIcon,
   ChevronDownIcon,
   ChevronRightIcon,
   InformationCircleIcon,
@@ -70,6 +71,7 @@ import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
 import { lerp } from "~/utils/lerp";
 import {
+  docsPath,
   v3BillingPath,
   v3RunParamsSchema,
   v3RunPath,
@@ -193,6 +195,9 @@ export default function Page() {
               </Property.Item>
             </Property.Table>
           </AdminDebugTooltip>
+          <LinkButton variant={"docs/small"} LeadingIcon={BookOpenIcon} to={docsPath("/runs")}>
+            Run docs
+          </LinkButton>
           <Dialog key={`replay-${run.friendlyId}`}>
             <DialogTrigger asChild>
               <Button
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx
index 305ab3863e..c73e97868e 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx
@@ -21,7 +21,7 @@ import {
 } from "~/components/primitives/Dialog";
 import { Header1, Header2 } from "~/components/primitives/Headers";
 import { InfoPanel } from "~/components/primitives/InfoPanel";
-import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
   SelectedItemsProvider,
@@ -40,7 +40,13 @@ import { findProjectBySlug } from "~/models/project.server";
 import { RunListPresenter } from "~/presenters/v3/RunListPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { ProjectParamSchema, v3ProjectPath, v3RunsPath, v3TestPath } from "~/utils/pathBuilder";
+import {
+  docsPath,
+  ProjectParamSchema,
+  v3ProjectPath,
+  v3RunsPath,
+  v3TestPath,
+} from "~/utils/pathBuilder";
 import { ListPagination } from "../../components/ListPagination";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
@@ -111,6 +117,15 @@ export default function Page() {
     <>
       <NavBar>
         <PageTitle title="Runs" />
+        <PageAccessories>
+          <LinkButton
+            variant={"docs/small"}
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("/runs-and-attempts")}
+          >
+            Runs docs
+          </LinkButton>
+        </PageAccessories>
       </NavBar>
       <PageBody scrollable={false}>
         <SelectedItemsProvider
@@ -121,61 +136,60 @@ export default function Page() {
             <div
               className={cn(
                 "grid h-full max-h-full overflow-hidden",
-                selectedItems.size === 0 ? "grid-rows-1" : "grid-rows-[1fr_3.5rem]"
+                selectedItems.size === 0 ? "grid-rows-1" : "grid-rows-[1fr_auto]"
               )}
             >
-              <div className="overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-                <Suspense
-                  fallback={
-                    <div className="flex items-center justify-center py-2">
-                      <div className="mx-auto flex items-center gap-2">
-                        <Spinner />
-                        <Paragraph variant="small">Loading runs</Paragraph>
-                      </div>
+              <Suspense
+                fallback={
+                  <div className="flex items-center justify-center py-2">
+                    <div className="mx-auto flex items-center gap-2">
+                      <Spinner />
+                      <Paragraph variant="small">Loading runs</Paragraph>
                     </div>
-                  }
-                >
-                  <TypedAwait resolve={data}>
-                    {(list) => (
-                      <>
-                        {list.runs.length === 0 && !list.hasFilters ? (
-                          list.possibleTasks.length === 0 ? (
-                            <CreateFirstTaskInstructions />
-                          ) : (
-                            <RunTaskInstructions />
-                          )
+                  </div>
+                }
+              >
+                <TypedAwait resolve={data}>
+                  {(list) => (
+                    <>
+                      {list.runs.length === 0 && !list.hasFilters ? (
+                        list.possibleTasks.length === 0 ? (
+                          <CreateFirstTaskInstructions />
                         ) : (
-                          <div className={cn("grid h-fit grid-cols-1 gap-4")}>
-                            <div>
-                              <div className="mb-2 flex items-start justify-between gap-x-2">
-                                <RunsFilters
-                                  possibleEnvironments={project.environments}
-                                  possibleTasks={list.possibleTasks}
-                                  bulkActions={list.bulkActions}
-                                  hasFilters={list.hasFilters}
-                                />
-                                <div className="flex items-center justify-end gap-x-2">
-                                  <ListPagination list={list} />
-                                </div>
-                              </div>
-
-                              <TaskRunsTable
-                                total={list.runs.length}
-                                hasFilters={list.hasFilters}
-                                filters={list.filters}
-                                runs={list.runs}
-                                isLoading={isLoading}
-                                allowSelection
-                              />
-                              <ListPagination list={list} className="mt-2 justify-end" />
+                          <RunTaskInstructions />
+                        )
+                      ) : (
+                        <div
+                          className={cn(
+                            "grid h-full max-h-full grid-rows-[auto_1fr] overflow-hidden"
+                          )}
+                        >
+                          <div className="flex items-start justify-between gap-x-2 p-2">
+                            <RunsFilters
+                              possibleEnvironments={project.environments}
+                              possibleTasks={list.possibleTasks}
+                              bulkActions={list.bulkActions}
+                              hasFilters={list.hasFilters}
+                            />
+                            <div className="flex items-center justify-end gap-x-2">
+                              <ListPagination list={list} />
                             </div>
                           </div>
-                        )}
-                      </>
-                    )}
-                  </TypedAwait>
-                </Suspense>
-              </div>
+
+                          <TaskRunsTable
+                            total={list.runs.length}
+                            hasFilters={list.hasFilters}
+                            filters={list.filters}
+                            runs={list.runs}
+                            isLoading={isLoading}
+                            allowSelection
+                          />
+                        </div>
+                      )}
+                    </>
+                  )}
+                </TypedAwait>
+              </Suspense>
               <BulkActionBar />
             </div>
           )}
@@ -198,7 +212,7 @@ function BulkActionBar() {
           initial={{ translateY: "100%" }}
           animate={{ translateY: 0 }}
           exit={{ translateY: "100%" }}
-          className="flex items-center justify-between gap-3 border-t border-grid-bright bg-background-bright pl-4 pr-3"
+          className="flex items-center justify-between gap-3 border-t border-grid-bright bg-background-bright py-3 pl-4 pr-3"
         >
           <div className="flex items-center gap-1.5 text-sm text-text-bright">
             <ListChecks className="mr-1 size-7 text-indigo-400" />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx
index c608095c9e..788795ddf3 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx
@@ -252,7 +252,7 @@ export default function Page() {
                 <Property.Label>Timezone</Property.Label>
                 <Property.Value>{schedule.timezone}</Property.Value>
               </Property.Item>
-              <Property.Item>
+              <Property.Item className="gap-1">
                 <Property.Label>Environments</Property.Label>
                 <Property.Value>
                   <EnvironmentLabels size="small" environments={schedule.environments} />
@@ -272,7 +272,7 @@ export default function Page() {
                       {schedule.userProvidedDeduplicationKey ? schedule.deduplicationKey : "–"}
                     </Property.Value>
                   </Property.Item>
-                  <Property.Item>
+                  <Property.Item className="gap-1.5">
                     <Property.Label>Status</Property.Label>
                     <Property.Value>
                       <EnabledStatus enabled={schedule.active} />
@@ -354,11 +354,11 @@ export default function Page() {
       </div>
       {isImperative && (
         <div className="flex items-center justify-between gap-2 border-t border-grid-dimmed px-2">
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
             <Form method="post">
               <Button
                 type="submit"
-                variant="minimal/medium"
+                variant="tertiary/medium"
                 LeadingIcon={schedule.active ? BoltSlashIcon : BoltIcon}
                 leadingIconClassName={schedule.active ? "text-dimmed" : "text-success"}
                 name="action"
@@ -371,26 +371,24 @@ export default function Page() {
               <DialogTrigger asChild>
                 <Button
                   type="submit"
-                  variant="minimal/medium"
+                  variant="danger/medium"
                   LeadingIcon={TrashIcon}
-                  leadingIconClassName="text-error"
-                  className="text-error"
                   name="action"
                   value="delete"
                 >
                   Delete
                 </Button>
               </DialogTrigger>
-              <DialogContent className="max-w-md">
+              <DialogContent className="sm:max-w-sm">
                 <DialogHeader>Delete schedule</DialogHeader>
-                <DialogDescription>
+                <DialogDescription className="mt-3">
                   Are you sure you want to delete this schedule? This can't be reversed.
                 </DialogDescription>
-                <DialogFooter>
+                <DialogFooter className="sm:justify-end">
                   <Form method="post">
                     <Button
                       type="submit"
-                      variant="danger/small"
+                      variant="danger/medium"
                       LeadingIcon={TrashIcon}
                       name="action"
                       value="delete"
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx
index 70941ef5b8..05d0eab6dd 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx
@@ -63,6 +63,8 @@ import {
   v3SchedulePath,
 } from "~/utils/pathBuilder";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
+import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -94,7 +96,6 @@ export default function Page() {
     possibleTasks,
     possibleEnvironments,
     hasFilters,
-    filters,
     limits,
     currentPage,
     totalPages,
@@ -132,11 +133,20 @@ export default function Page() {
             </Property.Table>
           </AdminDebugTooltip>
 
+          <LinkButton
+            variant={"docs/small"}
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("/tasks/scheduled")}
+          >
+            Schedules docs
+          </LinkButton>
+
           {limits.used >= limits.limit ? (
             <Dialog>
               <DialogTrigger asChild>
                 <Button
                   LeadingIcon={PlusIcon}
+                  leadingIconClassName="text-background-dimmed"
                   variant="primary/small"
                   shortcut={{ key: "n" }}
                   disabled={possibleTasks.length === 0 || isShowingNewPane}
@@ -177,74 +187,83 @@ export default function Page() {
         </PageAccessories>
       </NavBar>
       <PageBody scrollable={false}>
-        <ResizablePanelGroup orientation="horizontal" className="h-full max-h-full">
+        <ResizablePanelGroup orientation="horizontal" className="max-h-full">
           <ResizablePanel id="schedules-main" min={"100px"}>
-            <div className="max-h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+            <div className="grid max-h-full min-h-full grid-rows-[auto_1fr_auto]">
               {possibleTasks.length === 0 ? (
                 <CreateScheduledTaskInstructions />
               ) : schedules.length === 0 && !hasFilters ? (
                 <AttachYourFirstScheduleInstructions />
               ) : (
-                <div className="p-3">
-                  <div className="mb-2 flex items-center justify-between gap-x-2">
+                <>
+                  <div className="flex items-center justify-between gap-x-2 p-2">
                     <ScheduleFilters
                       possibleEnvironments={possibleEnvironments}
                       possibleTasks={possibleTasks}
                     />
-                    <div className="flex items-center justify-end gap-x-2">
-                      <PaginationControls
-                        currentPage={currentPage}
-                        totalPages={totalPages}
-                        showPageNumbers={false}
-                      />
-                    </div>
                   </div>
 
                   <SchedulesTable schedules={schedules} hasFilters={hasFilters} />
-                  <div className="mt-3 flex w-full items-start justify-between">
-                    {requiresUpgrade ? (
-                      <InfoPanel
-                        variant="upgrade"
-                        icon={LockOpenIcon}
-                        iconClassName="text-indigo-500"
-                        title="Unlock more schedules"
-                        to={v3BillingPath(organization)}
-                        buttonLabel="Upgrade"
-                      >
-                        <Paragraph variant="small">
-                          You've used all {limits.limit} of your available schedules. Upgrade your
-                          plan to enable more.
-                        </Paragraph>
-                      </InfoPanel>
-                    ) : (
-                      <div className="flex h-fit flex-col items-start gap-4 rounded-md border border-grid-bright bg-background-bright p-4">
-                        <div className="flex items-center justify-between gap-6">
+                  <div className="flex w-full items-start justify-between">
+                    <div className="flex h-fit w-full items-center gap-4 border-t border-grid-bright bg-background-bright p-[0.86rem] pl-4">
+                      <SimpleTooltip
+                        button={
+                          <div className="size-6">
+                            <svg className="h-full w-full -rotate-90 overflow-visible">
+                              <circle
+                                className="fill-none stroke-grid-bright"
+                                strokeWidth="4"
+                                r="10"
+                                cx="12"
+                                cy="12"
+                              />
+                              <circle
+                                className={`fill-none ${
+                                  requiresUpgrade ? "stroke-error" : "stroke-success"
+                                }`}
+                                strokeWidth="4"
+                                r="10"
+                                cx="12"
+                                cy="12"
+                                strokeDasharray={`${(limits.used / limits.limit) * 62.8} 62.8`}
+                                strokeDashoffset="0"
+                                strokeLinecap="round"
+                              />
+                            </svg>
+                          </div>
+                        }
+                        content={`${Math.round((limits.used / limits.limit) * 100)}%`}
+                      />
+                      <div className="flex w-full items-center justify-between gap-6">
+                        {requiresUpgrade ? (
+                          <Header3 className="text-error">
+                            You've used all {limits.limit} of your available schedules. Upgrade your
+                            plan to enable more.
+                          </Header3>
+                        ) : (
                           <Header3>
                             You've used {limits.used}/{limits.limit} of your schedules.
                           </Header3>
+                        )}
 
-                          {canUpgrade ? (
-                            <LinkButton to={v3BillingPath(organization)} variant="secondary/small">
-                              Upgrade
-                            </LinkButton>
-                          ) : (
-                            <Feedback
-                              button={<Button variant="secondary/small">Request more</Button>}
-                              defaultValue="help"
-                            />
-                          )}
-                        </div>
-                        <div className="h-2 w-full overflow-hidden rounded-full border border-grid-bright">
-                          <div
-                            className="h-full bg-grid-bright"
-                            style={{ width: `${(limits.used / limits.limit) * 100}%` }}
+                        {canUpgrade ? (
+                          <LinkButton
+                            to={v3BillingPath(organization)}
+                            variant="secondary/small"
+                            LeadingIcon={ArrowUpCircleIcon}
+                          >
+                            Upgrade
+                          </LinkButton>
+                        ) : (
+                          <Feedback
+                            button={<Button variant="secondary/small">Request more</Button>}
+                            defaultValue="help"
                           />
-                        </div>
+                        )}
                       </div>
-                    )}
-                    <PaginationControls currentPage={currentPage} totalPages={totalPages} />
+                    </div>
                   </div>
-                </div>
+                </>
               )}
             </div>
           </ResizablePanel>
@@ -270,13 +289,18 @@ function CreateScheduledTaskInstructions() {
         icon={ClockIcon}
         iconClassName="text-sun-500"
         panelClassName="max-w-full"
-        to={docsPath("v3/tasks-scheduled")}
-        buttonLabel="Scheduled task docs"
       >
-        <Paragraph variant="small">
+        <Paragraph spacing variant="small">
           You have no scheduled tasks in your project. Before you can schedule a task you need to
           create a <InlineCode>schedules.task</InlineCode>.
         </Paragraph>
+        <LinkButton
+          to={docsPath("v3/tasks-scheduled")}
+          variant="docs/medium"
+          LeadingIcon={BookOpenIcon}
+        >
+          View the docs
+        </LinkButton>
       </InfoPanel>
     </MainCenteredContainer>
   );
@@ -335,7 +359,7 @@ function SchedulesTable({
   const { scheduleParam } = useParams();
 
   return (
-    <Table>
+    <Table containerClassName="max-h-full h-fit overflow-x-auto border-b border-grid-bright">
       <TableHeader>
         <TableRow>
           <TableHeaderCell>ID</TableHeaderCell>
@@ -372,14 +396,14 @@ function SchedulesTable({
                     deleted from the dashboard or using the SDK.
                   </Paragraph>
                 </div>
-                <div>
-                  <LinkButton
-                    variant="tertiary/medium"
-                    to="https://trigger.dev/docs/v3/tasks-scheduled"
-                  >
-                    View the docs
-                  </LinkButton>
-                </div>
+                <LinkButton
+                  variant="docs/small"
+                  to={docsPath("v3/tasks-scheduled")}
+                  LeadingIcon={BookOpenIcon}
+                  className="mb-1"
+                >
+                  View the docs
+                </LinkButton>
               </div>
             }
           >
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test.tasks.$taskParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test.tasks.$taskParam/route.tsx
index 23bc980eed..5a0c3efb7b 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test.tasks.$taskParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test.tasks.$taskParam/route.tsx
@@ -5,7 +5,7 @@ import { Form, useActionData, useSubmit } from "@remix-run/react";
 import { ActionFunction, LoaderFunctionArgs, json } from "@remix-run/server-runtime";
 import { TaskRunStatus } from "@trigger.dev/database";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { JSONEditor } from "~/components/code/JSONEditor";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { Button } from "~/components/primitives/Buttons";
@@ -32,7 +32,11 @@ import { TextLink } from "~/components/primitives/TextLink";
 import { TaskRunStatusCombo } from "~/components/runs/v3/TaskRunStatus";
 import { TimezoneList } from "~/components/scheduled/timezones";
 import { useSearchParams } from "~/hooks/useSearchParam";
-import { redirectBackWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
+import {
+  redirectBackWithErrorMessage,
+  redirectWithErrorMessage,
+  redirectWithSuccessMessage,
+} from "~/models/message.server";
 import {
   ScheduledRun,
   StandardRun,
@@ -42,7 +46,7 @@ import {
 import { logger } from "~/services/logger.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { docsPath, v3RunSpanPath, v3TaskParamsSchema } from "~/utils/pathBuilder";
+import { docsPath, v3RunSpanPath, v3TaskParamsSchema, v3TestPath } from "~/utils/pathBuilder";
 import { TestTaskService } from "~/v3/services/testTask.server";
 import { OutOfEntitlementError } from "~/v3/services/triggerTask.server";
 import { TestTaskData } from "~/v3/testTask";
@@ -51,14 +55,30 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
   const { projectParam, organizationSlug, taskParam } = v3TaskParamsSchema.parse(params);
 
-  const presenter = new TestTaskPresenter();
-  const result = await presenter.call({
-    userId,
-    projectSlug: projectParam,
-    taskFriendlyId: taskParam,
-  });
+  //need an environment
+  const searchParams = new URL(request.url).searchParams;
+  const environment = searchParams.get("environment");
+  if (!environment) {
+    return redirect(v3TestPath({ slug: organizationSlug }, { slug: projectParam }));
+  }
 
-  return typedjson(result);
+  const presenter = new TestTaskPresenter();
+  try {
+    const result = await presenter.call({
+      userId,
+      projectSlug: projectParam,
+      taskIdentifier: taskParam,
+      environmentSlug: environment,
+    });
+
+    return typedjson(result);
+  } catch (error) {
+    return redirectWithErrorMessage(
+      v3TestPath({ slug: organizationSlug }, { slug: projectParam }, environment),
+      request,
+      `Couldn't load test page for ${taskParam}`
+    );
+  }
 };
 
 export const action: ActionFunction = async ({ request, params }) => {
@@ -113,16 +133,20 @@ export const action: ActionFunction = async ({ request, params }) => {
 export default function Page() {
   const result = useTypedLoaderData<typeof loader>();
 
-  switch (result.triggerSource) {
+  if (!result.foundTask) {
+    return <div></div>;
+  }
+
+  switch (result.task.triggerSource) {
     case "STANDARD": {
-      return <StandardTaskForm task={result.task} runs={result.runs} />;
+      return <StandardTaskForm task={result.task.task} runs={result.task.runs} />;
     }
     case "SCHEDULED": {
       return (
         <ScheduledTaskForm
-          task={result.task}
-          runs={result.runs}
-          possibleTimezones={result.possibleTimezones}
+          task={result.task.task}
+          runs={result.task.runs}
+          possibleTimezones={result.task.possibleTimezones}
         />
       );
     }
@@ -194,7 +218,7 @@ function StandardTaskForm({ task, runs }: { task: TestTask["task"]; runs: Standa
 
   return (
     <Form
-      className="grid h-full max-h-full grid-rows-[1fr_2.5rem]"
+      className="grid h-full max-h-full grid-rows-[1fr_auto]"
       method="post"
       {...form.props}
       onSubmit={(e) => submitForm(e)}
@@ -287,16 +311,16 @@ function StandardTaskForm({ task, runs }: { task: TestTask["task"]; runs: Standa
           />
         </ResizablePanel>
       </ResizablePanelGroup>
-      <div className="flex items-center justify-end gap-2 border-t border-grid-bright bg-background-dimmed px-2">
+      <div className="flex items-center justify-end gap-3 border-t border-grid-bright bg-background-dimmed p-2">
         <div className="flex items-center gap-1">
           <Paragraph variant="small" className="whitespace-nowrap">
             This test will run in
           </Paragraph>
-          <EnvironmentLabel environment={task.environment} />
+          <EnvironmentLabel environment={task.environment} size="large" />
         </div>
         <Button
           type="submit"
-          variant="primary/small"
+          variant="primary/medium"
           LeadingIcon={BeakerIcon}
           shortcut={{ key: "enter", modifiers: ["mod"], enabledOnInputElements: true }}
         >
@@ -358,7 +382,7 @@ function ScheduledTaskForm({
   });
 
   return (
-    <Form className="grid h-full max-h-full grid-rows-[1fr_2.5rem]" method="post" {...form.props}>
+    <Form className="grid h-full max-h-full grid-rows-[1fr_auto]" method="post" {...form.props}>
       <input
         type="hidden"
         {...conform.input(triggerSource, { type: "hidden" })}
@@ -484,7 +508,7 @@ function ScheduledTaskForm({
           />
         </ResizablePanel>
       </ResizablePanelGroup>
-      <div className="flex items-center justify-end gap-2 border-t border-grid-bright bg-background-dimmed px-2">
+      <div className="flex items-center justify-end gap-2 border-t border-grid-bright bg-background-dimmed p-2">
         <div className="flex items-center gap-1">
           <Paragraph variant="small" className="whitespace-nowrap">
             This test will run in
@@ -519,7 +543,7 @@ function RecentPayloads({
   onSelected: (id: string) => void;
 }) {
   return (
-    <div className="flex flex-col gap-2 pl-4">
+    <div className="flex flex-col gap-2 px-3">
       <div className="flex h-10 items-center border-b border-grid-dimmed">
         <Header2>Recent payloads</Header2>
       </div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx
index 0a6f8e66d5..57c10df9ff 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx
@@ -1,3 +1,4 @@
+import { BookOpenIcon } from "@heroicons/react/20/solid";
 import { Link, Outlet, useLocation, useNavigation, useParams } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
@@ -8,9 +9,11 @@ import {
   environmentTitle,
 } from "~/components/environments/EnvironmentLabel";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { LinkButton } from "~/components/primitives/Buttons";
+import { Callout } from "~/components/primitives/Callout";
 import { Header2 } from "~/components/primitives/Headers";
 import { Input } from "~/components/primitives/Input";
-import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { RadioButtonCircle } from "~/components/primitives/RadioButton";
 import {
@@ -42,7 +45,7 @@ import {
 } from "~/presenters/v3/TestPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { ProjectParamSchema, v3TestPath, v3TestTaskPath } from "~/utils/pathBuilder";
+import { docsPath, ProjectParamSchema, v3TestPath, v3TestTaskPath } from "~/utils/pathBuilder";
 
 export const TestSearchParams = z.object({
   environment: z.string().optional(),
@@ -75,18 +78,23 @@ export default function Page() {
   const navigation = useNavigation();
 
   const location = useLocation();
-  const locationSearchParams = new URLSearchParams(location.search);
-  const navigationSearchParams = new URLSearchParams(navigation.location?.search);
+  const currentEnvironment = new URLSearchParams(location.search).get("environment");
+  const pendingEnvironment = new URLSearchParams(navigation.location?.search).get("environment");
 
   const isLoadingTasks =
     navigation.state === "loading" &&
     navigation.location.pathname === location.pathname &&
-    navigationSearchParams.get("environment") !== locationSearchParams.get("environment");
+    currentEnvironment !== pendingEnvironment;
 
   return (
     <PageContainer>
       <NavBar>
         <PageTitle title="Test" />
+        <PageAccessories>
+          <LinkButton variant={"docs/small"} LeadingIcon={BookOpenIcon} to={docsPath("/run-tests")}>
+            Test docs
+          </LinkButton>
+        </PageAccessories>
       </NavBar>
       <PageBody scrollable={false}>
         <div className={cn("grid h-full max-h-full grid-cols-1")}>
@@ -106,10 +114,19 @@ export default function Page() {
                             "flex h-8 flex-1 items-center justify-center rounded-sm border text-xs uppercase tracking-wider",
                             isSelected
                               ? cn(environmentBorderClassName(env), environmentTextClassName(env))
-                              : "border-grid-bright text-text-dimmed"
+                              : "border-grid-bright text-text-dimmed transition hover:border-charcoal-600 hover:text-text-bright"
                           )}
                           key={env.id}
-                          to={v3TestPath(organization, project, env.slug)}
+                          to={
+                            taskParam
+                              ? v3TestTaskPath(
+                                  organization,
+                                  project,
+                                  { taskIdentifier: taskParam },
+                                  env.slug
+                                )
+                              : v3TestPath(organization, project, env.slug)
+                          }
                         >
                           <span>{environmentTitle(env)}</span>
                         </Link>
@@ -122,8 +139,8 @@ export default function Page() {
                     <Spinner />
                   </div>
                 ) : hasSelectedEnvironment ? (
-                  <div className="grid grid-rows-[2rem_1fr] overflow-hidden">
-                    <div className="mx-3 flex items-end">
+                  <div className="grid grid-rows-[auto_1fr] overflow-hidden">
+                    <div className="flex items-end px-3 pt-2">
                       <Header2>Select a task</Header2>
                     </div>
                     {!rest.tasks?.length ? (
@@ -132,6 +149,7 @@ export default function Page() {
                       <TaskSelector
                         tasks={rest.tasks}
                         environmentSlug={rest.selectedEnvironment.slug}
+                        activeTaskIdentifier={taskParam}
                       />
                     )}
                   </div>
@@ -154,14 +172,24 @@ export default function Page() {
 function TaskSelector({
   tasks,
   environmentSlug,
+  activeTaskIdentifier,
 }: {
   tasks: TaskListItem[];
   environmentSlug: string;
+  activeTaskIdentifier?: string;
 }) {
   const { filterText, setFilterText, filteredItems } = useFilterTasks<TaskListItem>({ tasks });
+  const hasTaskInEnvironment = activeTaskIdentifier
+    ? tasks.some((t) => t.taskIdentifier === activeTaskIdentifier)
+    : undefined;
 
   return (
-    <div className="divide-y divide-charcoal-800 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+    <div
+      className={cn(
+        "grid max-h-full  overflow-hidden",
+        hasTaskInEnvironment === false ? "grid-rows-[auto_auto_1fr]" : "grid-rows-[auto_1fr]"
+      )}
+    >
       <div className="p-2">
         <Input
           placeholder="Search tasks"
@@ -173,13 +201,19 @@ function TaskSelector({
           onChange={(e) => setFilterText(e.target.value)}
         />
       </div>
+      {hasTaskInEnvironment === false && (
+        <div className="px-2 pb-2">
+          <Callout variant="warning">
+            There is no task {activeTaskIdentifier} in the selected environment.
+          </Callout>
+        </div>
+      )}
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHeaderCell className="px-2">
-              <span className="sr-only">Go to test task</span>
+            <TableHeaderCell className="pl-3" colSpan={2}>
+              Task
             </TableHeaderCell>
-            <TableHeaderCell className="px-2">Task</TableHeaderCell>
             <TableHeaderCell className="px-2">File path</TableHeaderCell>
           </TableRow>
         </TableHeader>
@@ -204,9 +238,9 @@ function TaskSelector({
 function NoTaskInstructions({ environment }: { environment?: SelectedEnvironment }) {
   return (
     <div className="px-3 py-3">
-      <Paragraph spacing variant="small">
+      <Callout variant="info">
         You have no tasks {environment ? `in ${environmentTitle(environment)}` : ""}.
-      </Paragraph>
+      </Callout>
     </div>
   );
 }
@@ -217,23 +251,29 @@ function TaskRow({ task, environmentSlug }: { task: TaskListItem; environmentSlu
 
   const path = v3TestTaskPath(organization, project, task, environmentSlug);
   const { isActive, isPending } = useLinkStatus(path);
+
   return (
     <TableRow
       key={task.taskIdentifier}
-      className={cn(
-        (isActive || isPending) &&
-          "z-20 rounded-sm outline outline-1 outline-offset-[-1px] outline-secondary"
-      )}
+      className={cn((isActive || isPending) && "bg-indigo-500/10")}
     >
-      <TableCell to={path} actionClassName="pl-2.5 pr-1 py-1">
+      <TableCell
+        to={path}
+        actionClassName="pl-2.5 pr-2 py-1"
+        className={cn((isActive || isPending) && "group-hover/table-row:bg-indigo-500/5")}
+      >
         <RadioButtonCircle checked={isActive || isPending} />
       </TableCell>
-      <TableCell to={path} actionClassName="pl-1 pr-2 py-1">
+      <TableCell
+        to={path}
+        actionClassName="pl-1 pr-2 py-1.5"
+        className={cn((isActive || isPending) && "group-hover/table-row:bg-indigo-500/5")}
+      >
         <div className="flex flex-col gap-0.5">
           <TaskFunctionName
             variant="extra-small"
             functionName={task.exportName}
-            className="-ml-1 inline-flex"
+            className="inline-flex w-fit"
           />
           <div className="flex items-start gap-1">
             <TaskTriggerSourceIcon source={task.triggerSource} className="size-3.5" />
@@ -244,7 +284,11 @@ function TaskRow({ task, environmentSlug }: { task: TaskListItem; environmentSlu
         </div>
       </TableCell>
 
-      <TableCell to={path} actionClassName="px-2 py-1">
+      <TableCell
+        to={path}
+        actionClassName="px-2 py-1"
+        className={cn((isActive || isPending) && "group-hover/table-row:bg-indigo-500/5")}
+      >
         {task.filePath}
       </TableCell>
     </TableRow>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.usage/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.usage/route.tsx
index 3ab2d7f630..12fa2db12b 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.usage/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.usage/route.tsx
@@ -101,13 +101,13 @@ export default function Page() {
       <NavBar>
         <PageTitle title="Usage" />
       </NavBar>
-      <PageBody scrollable={true}>
+      <PageBody scrollable={true} className="p-0">
         <div className="flex flex-col gap-6">
           <div>
             <Select
               name="month"
               placeholder="Select a month"
-              className="mb-3"
+              className="m-3"
               defaultValue={month}
               items={months.map((date) => ({
                 label: monthDateFormatter.format(date),
@@ -118,7 +118,7 @@ export default function Page() {
                 replace({ month: value });
               }}
               dropdownIcon
-              variant="tertiary/medium"
+              variant="tertiary/small"
             >
               {(matches) =>
                 matches.map((month) => (
@@ -128,7 +128,7 @@ export default function Page() {
                 ))
               }
             </Select>
-            <div className="flex w-full flex-col gap-2 rounded-sm border border-grid-dimmed p-4">
+            <div className="flex w-full flex-col gap-2 border-t border-grid-dimmed p-3">
               <Suspense fallback={<Spinner />}>
                 <Await
                   resolve={usage}
@@ -139,11 +139,11 @@ export default function Page() {
                   }
                 >
                   {(usage) => (
-                    <div className="flex items-center gap-8">
-                      <div className="flex flex-col gap-2">
-                        <Header3 className="whitespace-nowrap">
+                    <div className="flex items-end gap-8">
+                      <div className="flex flex-col gap-1">
+                        <Header2 className="whitespace-nowrap">
                           {isCurrentMonth ? "Month-to-date" : "Usage"}
-                        </Header3>
+                        </Header2>
                         <p className="whitespace-nowrap text-3xl font-medium text-text-bright">
                           {formatCurrency(usage.overall.current, false)}
                         </p>
@@ -164,8 +164,10 @@ export default function Page() {
             </div>
           </div>
           <div>
-            <Header2 spacing>Usage by day</Header2>
-            <div className="rounded-sm border border-grid-dimmed p-4">
+            <Header2 spacing className="pl-3">
+              Usage by day
+            </Header2>
+            <div className="p-3">
               <Suspense
                 fallback={
                   <div className="flex min-h-40 items-center justify-center">
@@ -187,7 +189,9 @@ export default function Page() {
             </div>
           </div>
           <div>
-            <Header2 spacing>Tasks</Header2>
+            <Header2 spacing className="pl-3">
+              Tasks
+            </Header2>
             <Suspense fallback={<Spinner />}>
               <Await
                 resolve={tasks}
@@ -215,8 +219,10 @@ export default function Page() {
                           {tasks.length === 0 ? (
                             <TableRow>
                               <TableCell colSpan={6}>
-                                <div className="flex items-center justify-center">
-                                  <Paragraph variant="small">No runs for this period</Paragraph>
+                                <div className="flex items-center justify-center py-8">
+                                  <Paragraph variant="base/bright">
+                                    No runs for this period
+                                  </Paragraph>
                                 </div>
                               </TableCell>
                             </TableRow>
@@ -248,7 +254,11 @@ export default function Page() {
                           )}
                         </TableBody>
                       </Table>
-                      <InfoPanel icon={InformationCircleIcon} panelClassName="max-w-[22rem] mt-3">
+                      <InfoPanel
+                        icon={InformationCircleIcon}
+                        variant="minimal"
+                        panelClassName="max-w-full"
+                      >
                         Dev environment runs are excluded from the usage data above, since they do
                         not have an associated compute cost.
                       </InfoPanel>
diff --git a/apps/webapp/app/routes/account.tokens/route.tsx b/apps/webapp/app/routes/account.tokens/route.tsx
index 4220f1ce68..804ea0f327 100644
--- a/apps/webapp/app/routes/account.tokens/route.tsx
+++ b/apps/webapp/app/routes/account.tokens/route.tsx
@@ -1,13 +1,14 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
-import { ShieldCheckIcon } from "@heroicons/react/20/solid";
+import { BookOpenIcon, ShieldCheckIcon, TrashIcon } from "@heroicons/react/20/solid";
 import { ShieldExclamationIcon } from "@heroicons/react/24/solid";
+import { DialogClose } from "@radix-ui/react-dialog";
 import { Form, useActionData, useFetcher } from "@remix-run/react";
 import { ActionFunction, LoaderFunctionArgs, json } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { Button } from "~/components/primitives/Buttons";
+import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { ClipboardField } from "~/components/primitives/ClipboardField";
 import { DateTime } from "~/components/primitives/DateTime";
@@ -27,10 +28,12 @@ import {
   TableBlankRow,
   TableBody,
   TableCell,
+  TableCellMenu,
   TableHeader,
   TableHeaderCell,
   TableRow,
 } from "~/components/primitives/Table";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { redirectWithSuccessMessage } from "~/models/message.server";
 import {
   CreatedPersonalAccessToken,
@@ -40,7 +43,7 @@ import {
   revokePersonalAccessToken,
 } from "~/services/personalAccessToken.server";
 import { requireUserId } from "~/services/session.server";
-import { personalAccessTokensPath } from "~/utils/pathBuilder";
+import { docsPath, personalAccessTokensPath } from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -127,6 +130,13 @@ export default function Page() {
       <NavBar>
         <PageTitle title="Personal Access Tokens" />
         <PageAccessories>
+          <LinkButton
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("management/overview#personal-access-token-pat")}
+            variant="docs/small"
+          >
+            Personal Access Token docs
+          </LinkButton>
           <Dialog>
             <DialogTrigger asChild>
               <Button variant="primary/small">Create new token</Button>
@@ -139,9 +149,9 @@ export default function Page() {
         </PageAccessories>
       </NavBar>
 
-      <PageBody>
-        <div className="flex flex-col gap-3">
-          <Table>
+      <PageBody scrollable={false}>
+        <div className="grid max-h-full grid-rows-1">
+          <Table containerClassName="border-t-0">
             <TableHeader>
               <TableRow>
                 <TableHeaderCell>Name</TableHeaderCell>
@@ -168,15 +178,19 @@ export default function Page() {
                           "Never"
                         )}
                       </TableCell>
-                      <TableCell alignment="right">
-                        <RevokePersonalAccessToken token={personalAccessToken} />
-                      </TableCell>
+                      <TableCellMenu
+                        isSticky
+                        visibleButtons={<RevokePersonalAccessToken token={personalAccessToken} />}
+                      />
                     </TableRow>
                   );
                 })
               ) : (
                 <TableBlankRow colSpan={5}>
-                  <Paragraph variant="small" className="flex items-center justify-center">
+                  <Paragraph
+                    variant="base/bright"
+                    className="flex items-center justify-center py-8"
+                  >
                     You have no Personal Access Tokens (that haven't been revoked).
                   </Paragraph>
                 </TableBlankRow>
@@ -249,6 +263,11 @@ function CreatePersonalAccessToken() {
                   Update
                 </Button>
               }
+              cancelButton={
+                <DialogClose asChild>
+                  <Button variant={"tertiary/medium"}>Cancel</Button>
+                </DialogClose>
+              }
             />
           </Fieldset>
         </fetcher.Form>
@@ -270,25 +289,44 @@ function RevokePersonalAccessToken({ token }: { token: ObfuscatedPersonalAccessT
   });
 
   return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="small-menu-item" LeadingIcon="trash-can" className="text-xs" />
-      </DialogTrigger>
-      <DialogContent className="max-w-md">
-        <DialogHeader>Revoke Personal Access Token</DialogHeader>
-        <div className="flex flex-col gap-3 pt-3">
-          <Paragraph>
-            Are you sure you want to revoke "{token.name}"? This can't be reversed.
-          </Paragraph>
-          <Form method="post" {...form.props}>
-            <input type="hidden" name="action" value="revoke" />
-            <input type="hidden" name="tokenId" value={token.id} />
-            <Button type="submit" variant="danger/medium" fullWidth>
-              Revoke token
-            </Button>
-          </Form>
-        </div>
-      </DialogContent>
-    </Dialog>
+    <SimpleTooltip
+      button={
+        <Dialog>
+          <DialogTrigger
+            asChild
+            className="size-6 rounded-sm p-1 text-error transition hover:bg-charcoal-700"
+          >
+            <TrashIcon className="size-3" />
+          </DialogTrigger>
+          <DialogContent className="max-w-md">
+            <DialogHeader>Revoke Personal Access Token</DialogHeader>
+            <div className="flex flex-col gap-3 pt-3">
+              <Paragraph spacing>
+                Are you sure you want to revoke "{token.name}"? This can't be reversed.
+              </Paragraph>
+              <FormButtons
+                confirmButton={
+                  <Form method="post" {...form.props}>
+                    <input type="hidden" name="action" value="revoke" />
+                    <input type="hidden" name="tokenId" value={token.id} />
+                    <Button type="submit" variant="danger/medium">
+                      Revoke token
+                    </Button>
+                  </Form>
+                }
+                cancelButton={
+                  <DialogClose asChild>
+                    <Button variant={"tertiary/medium"}>Cancel</Button>
+                  </DialogClose>
+                }
+              />
+            </div>
+          </DialogContent>
+        </Dialog>
+      }
+      content="Revoke token…"
+      side="left"
+      disableHoverableContent
+    />
   );
 }
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new.natural-language.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new.natural-language.tsx
index 20a209d7b2..81b79062cd 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new.natural-language.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new.natural-language.tsx
@@ -80,7 +80,7 @@ export function AIGeneratedCronField({ onSuccess }: AIGeneratedCronFieldProps) {
   }, []);
 
   return (
-    <div>
+    <div className="max-w-md">
       <Label>
         <AISparkleIcon className="inline-block h-4 w-4" /> Describe your schedule using natural
         language
@@ -95,7 +95,7 @@ export function AIGeneratedCronField({ onSuccess }: AIGeneratedCronFieldProps) {
             placeholder="e.g. the last Friday of the month at 6am"
             onChange={(e) => setText(e.target.value)}
             rows={3}
-            className="m-0 w-full border-0 bg-background-bright px-3 py-2 text-sm text-text-bright scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 file:border-0 file:bg-transparent file:text-base file:font-medium focus:border-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50"
+            className="m-0 min-h-10 w-full border-0 bg-background-bright px-3 py-2 text-sm text-text-bright scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 file:border-0 file:bg-transparent file:text-base file:font-medium focus:border-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50"
           />
           <div className="flex justify-end gap-2 px-2 pb-2">
             <Button
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new/route.tsx
index cfea229d40..56c82e9148 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new/route.tsx
@@ -383,7 +383,7 @@ export function UpsertScheduleForm({
         <div className="flex items-center gap-4">
           <LinkButton
             to={`${v3SchedulesPath(organization, project)}${location.search}`}
-            variant="minimal/medium"
+            variant="tertiary/medium"
           >
             Cancel
           </LinkButton>
diff --git a/apps/webapp/app/utils/pathBuilder.ts b/apps/webapp/app/utils/pathBuilder.ts
index e6f632f208..cf71810be7 100644
--- a/apps/webapp/app/utils/pathBuilder.ts
+++ b/apps/webapp/app/utils/pathBuilder.ts
@@ -24,7 +24,9 @@ export type TriggerForPath = Pick<TriggerSource, "id">;
 export type EventForPath = Pick<EventRecord, "id">;
 export type WebhookForPath = Pick<Webhook, "id">;
 export type HttpEndpointForPath = Pick<TriggerHttpEndpoint, "key">;
-export type TaskForPath = Pick<BackgroundWorkerTask, "friendlyId">;
+export type TaskForPath = {
+  taskIdentifier: string;
+};
 export type v3RunForPath = Pick<TaskRun, "friendlyId">;
 export type v3SpanForPath = Pick<TaskRun, "spanId">;
 export type DeploymentForPath = Pick<WorkerDeployment, "shortCode">;
@@ -362,9 +364,9 @@ export function v3TestTaskPath(
   task: TaskForPath,
   environmentSlug: string
 ) {
-  return `${v3TestPath(organization, project)}/tasks/${
-    task.friendlyId
-  }?environment=${environmentSlug}`;
+  return `${v3TestPath(organization, project)}/tasks/${encodeURIComponent(
+    task.taskIdentifier
+  )}?environment=${environmentSlug}`;
 }
 
 export function v3RunsPath(
diff --git a/apps/webapp/package.json b/apps/webapp/package.json
index 9ebe739ca1..b976bc09f2 100644
--- a/apps/webapp/package.json
+++ b/apps/webapp/package.json
@@ -89,6 +89,7 @@
     "@remix-run/v1-meta": "^0.1.3",
     "@slack/web-api": "^6.8.1",
     "@socket.io/redis-adapter": "^8.3.0",
+    "@splinetool/react-spline": "^2.2.6",
     "@tabler/icons-react": "^2.39.0",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/react-virtual": "^3.0.4",
@@ -254,4 +255,4 @@
   "engines": {
     "node": ">=16.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fb70f22a20..a74ab4d657 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -360,6 +360,9 @@ importers:
       '@socket.io/redis-adapter':
         specifier: ^8.3.0
         version: 8.3.0(socket.io-adapter@2.5.4)
+      '@splinetool/react-spline':
+        specifier: ^2.2.6
+        version: 2.2.6(@splinetool/runtime@1.9.42)(react-dom@18.2.0)(react@18.2.0)
       '@tabler/icons-react':
         specifier: ^2.39.0
         version: 2.40.0(react@18.2.0)
@@ -14357,6 +14360,27 @@ packages:
       - supports-color
     dev: false
 
+  /@splinetool/react-spline@2.2.6(@splinetool/runtime@1.9.42)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-y9L2VEbnC6FNZZu8XMmWM9YTTTWal6kJVfP05Amf0QqDNzCSumKsJxZyGUODvuCmiAvy0PfIfEsiVKnSxvhsDw==}
+    peerDependencies:
+      '@splinetool/runtime': '*'
+      react: '>=17.0.0'
+      react-dom: '>=17.0.0'
+    dependencies:
+      '@splinetool/runtime': 1.9.42
+      lodash.debounce: 4.0.8
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-merge-refs: 2.1.1
+    dev: false
+
+  /@splinetool/runtime@1.9.42:
+    resolution: {integrity: sha512-g6D3E5SDIANZS41SnRSTAI+/ALhdHrrn72N2D7IoEUEmR4NRy9BMAYH4SWPjbl/nR3AqIWN4FHwD2FwJEboC6Q==}
+    dependencies:
+      on-change: 4.0.2
+      semver-compare: 1.0.0
+    dev: false
+
   /@sqltools/formatter@1.2.5:
     resolution: {integrity: sha512-Uy0+khmZqUrUGm5dmMqVlnvufZRSK0FbYzVgp0UMstm+F5+W2/jnEEQyc9vo1ZR/E5ZI/B1WjjoTqBqwJL6Krw==}
     dev: false
@@ -22498,7 +22522,6 @@ packages:
 
   /lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
-    dev: true
 
   /lodash.defaults@4.2.0:
     resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
@@ -24177,6 +24200,11 @@ packages:
     dev: false
     optional: true
 
+  /on-change@4.0.2:
+    resolution: {integrity: sha512-cMtCyuJmTx/bg2HCpHo3ZLeF7FZnBOapLqZHr2AlLeJ5Ul0Zu2mUJJz051Fdwu/Et2YW04ZD+TtU+gVy0ACNCA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: false
+
   /on-finished@2.3.0:
     resolution: {integrity: sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==}
     engines: {node: '>= 0.8'}
@@ -26041,6 +26069,10 @@ packages:
     resolution: {integrity: sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==}
     dev: true
 
+  /react-merge-refs@2.1.1:
+    resolution: {integrity: sha512-jLQXJ/URln51zskhgppGJ2ub7b2WFKGq3cl3NYKtlHoTG+dN2q7EzWrn3hN3EgPsTMvpR9tpq5ijdp7YwFZkag==}
+    dev: false
+
   /react-popper@2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==}
     peerDependencies:
@@ -27131,6 +27163,10 @@ packages:
       semver: 6.3.1
     dev: true
 
+  /semver-compare@1.0.0:
+    resolution: {integrity: sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==}
+    dev: false
+
   /semver@5.7.1:
     resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==}
     hasBin: true