diff --git a/apps/cli/cli-core/src/open-file.ts b/apps/cli/cli-core/src/open-file.ts
new file mode 100644
index 00000000..5756410b
--- /dev/null
+++ b/apps/cli/cli-core/src/open-file.ts
@@ -0,0 +1,59 @@
+import childProcess from "child_process";
+import { promisify } from "util";
+import os from "os";
+import fs from "fs/promises";
+import path from "path";
+
+import logger from "@captain/logger";
+
+const promisifiedExecFile = promisify(childProcess.execFile);
+
+const getCommand = () => {
+  const plat = os
+    .platform()
+    .toLowerCase()
+    .replace(/[0-9]/g, ``)
+    .replace(`darwin`, `macos`);
+
+  if (plat === "win") return "start";
+  if (plat === "linux") return "xdg-open";
+  if (plat === "macos") return "open";
+
+  throw new Error("Idk what os this is");
+};
+
+const pathExists = async (path: string) => {
+  try {
+    await fs.access(path);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const writeFile = async (filePath: string, data: string) => {
+  try {
+    const dirname = path.dirname(filePath);
+    const exist = await pathExists(dirname);
+    if (!exist) {
+      await fs.mkdir(dirname, { recursive: true });
+    }
+
+    await fs.writeFile(filePath, data, "utf8");
+  } catch (err) {
+    throw err;
+  }
+};
+
+export async function openFile(path: string) {
+  const exists = await pathExists(path);
+  const maybeFileName = path.split("/").pop();
+
+  // create file if it doesn't exist
+  if (!exists) {
+    logger.warn(`${maybeFileName ?? "file"} does not exist, creating it now!`);
+    await writeFile(path, "{}");
+  }
+
+  return await promisifiedExecFile(getCommand(), [path]);
+}
diff --git a/apps/cli/cli-core/src/open-folder.ts b/apps/cli/cli-core/src/open-folder.ts
index f69f9567..50ecdc18 100644
--- a/apps/cli/cli-core/src/open-folder.ts
+++ b/apps/cli/cli-core/src/open-folder.ts
@@ -21,6 +21,7 @@ const getCommand = () => {
   throw new Error("Idk what os this is");
 };
 
+// TODO: IGOR add openFile, or a flag to create file instead of dir if it doesn't exist. Trying to "Open .config file" in fileRunner brought me here 💀
 // Ripped from https://www.npmjs.com/package/open-file-explorer
 export async function openInExplorer(path: string) {
   // Create the directory if it doesn't exist
@@ -31,3 +32,4 @@ export async function openInExplorer(path: string) {
 
   return await promisifiedExecFile(getCommand(), [path]);
 }
+
diff --git a/apps/cli/cli-core/src/trpc.ts b/apps/cli/cli-core/src/trpc.ts
index 2f3be660..cfb9ef7d 100644
--- a/apps/cli/cli-core/src/trpc.ts
+++ b/apps/cli/cli-core/src/trpc.ts
@@ -1,4 +1,3 @@
-import { ConfigValidatorType } from "./update-config";
 import { initTRPC } from "@trpc/server";
 import superjson from "superjson";
 import { z } from "zod";
@@ -6,12 +5,15 @@ import fetch from "node-fetch";
 import fsPromises from "fs/promises";
 import fs from "fs";
 import path from "path";
+import { observable } from "@trpc/server/observable";
 
 import { openInExplorer } from "./open-folder";
+import { openFile } from "./open-file";
 import { getSampleHooks } from "./get-sample-hooks";
 import { HOOK_PATH } from "./constants";
 import { configValidator, updateConfig } from "./update-config";
 import { substituteTemplate } from "./templateSubstitution";
+import { getFullPath, getRoute } from "./utils/get-full-path";
 
 export type { ConfigValidatorType } from "./update-config";
 type ExtendedConfigValidatorType = ConfigValidatorType & {
@@ -19,10 +21,9 @@ type ExtendedConfigValidatorType = ConfigValidatorType & {
 };
 
 import logger from "@captain/logger";
-import { observable } from "@trpc/server/observable";
 
 import type { LogLevels } from "@captain/logger";
-import { getFullPath, getRoute } from "./utils/get-full-path";
+import type { ConfigValidatorType } from "./update-config";
 
 export const t = initTRPC.create({
   transformer: superjson,
@@ -164,6 +165,40 @@ export const cliApiRouter = t.router({
       }
     }),
 
+  openFile: t.procedure
+    .input(z.object({ path: z.string() }))
+    .mutation(async ({ input }) => {
+      // if running in codespace, early return
+      // eslint-disable-next-line turbo/no-undeclared-env-vars
+      if (process.env.CODESPACES) {
+        throw new Error(
+          "Sorry, opening files in codespaces is not supported yet."
+        );
+      }
+      // if running over ssh, early return
+      if (
+        // eslint-disable-next-line turbo/no-undeclared-env-vars
+        process.env.SSH_CONNECTION ||
+        // eslint-disable-next-line turbo/no-undeclared-env-vars
+        process.env.SSH_CLIENT ||
+        // eslint-disable-next-line turbo/no-undeclared-env-vars
+        process.env.SSH_TTY
+      ) {
+        throw new Error(
+          "Sorry, opening files on remote connections is not supported yet."
+        );
+      }
+
+      try {
+        await openFile(path.join(HOOK_PATH, input.path));
+      } catch (e) {
+        logger.error(
+          "Failed to open file (unless you're on Windows, then this just happens)",
+          e
+        );
+      }
+    }),
+
   getSampleHooks: t.procedure.mutation(async () => {
     await getSampleHooks();
   }),
diff --git a/apps/cli/cli-web/package.json b/apps/cli/cli-web/package.json
index da84caf3..07916cc0 100644
--- a/apps/cli/cli-web/package.json
+++ b/apps/cli/cli-web/package.json
@@ -29,6 +29,7 @@
     "react-hook-form": "^7.43.0",
     "react-hot-toast": "^2.4.0",
     "superjson": "^1.12.1",
+    "tailwind-merge": "^1.12.0",
     "wouter": "^2.10.0",
     "zod": "^3.19.1"
   },
diff --git a/apps/cli/cli-web/src/App.tsx b/apps/cli/cli-web/src/App.tsx
index bfebf8fa..3b3e2735 100644
--- a/apps/cli/cli-web/src/App.tsx
+++ b/apps/cli/cli-web/src/App.tsx
@@ -17,6 +17,7 @@ import { classNames } from "./utils/classnames";
 import { useFileRoute } from "./utils/useRoute";
 import { FileRunner } from "./components/filerunner";
 import { cliApi } from "./utils/api";
+import { ButtonDropdown } from "./components/common/button";
 
 const SubscriptionsHelper = () => {
   useConnectionStateToasts();
@@ -121,70 +122,31 @@ export default function AppCore() {
 
 const NavMenu = () => {
   return (
-    <Menu as="div" className="relative inline-block text-left">
-      <div>
-        <Menu.Button className="flex items-center rounded-sm  text-gray-50 hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">
-          <span className="sr-only">{`Open options`}</span>
-          <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
-        </Menu.Button>
-      </div>
-
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items className="absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-          <div className="py-1">
-            <Menu.Item>
-              {({ active }) => (
-                <a
-                  href="https://discord.gg/4wD3CNdsf6"
-                  className={classNames(
-                    active ? "bg-gray-100 text-indigo-700" : "text-gray-700",
-                    "flex flex-row items-center justify-start gap-2 px-4 py-2 text-sm"
-                  )}
-                >
-                  <QuestionMarkCircleIcon className="h-4" aria-hidden="true" />
-                  {`Support`}
-                </a>
-              )}
-            </Menu.Item>
-            <Menu.Item>
-              {({ active }) => (
-                <a
-                  href="https://github.com/pingdotgg/sample_hooks/issues/new"
-                  className={classNames(
-                    active ? "bg-gray-100 text-indigo-700" : "text-gray-700",
-                    "flex flex-row items-center justify-start gap-2 px-4 py-2 text-sm"
-                  )}
-                >
-                  <ArchiveBoxIcon className="h-4" aria-hidden="true" />
-                  {`File an Issue`}
-                </a>
-              )}
-            </Menu.Item>
-            <Menu.Item>
-              {({ active }) => (
-                <a
-                  href="https://docs.webhookthing.com"
-                  className={classNames(
-                    active ? "bg-gray-100 text-indigo-700" : "text-gray-700",
-                    "flex flex-row items-center justify-start gap-2 px-4 py-2 text-sm"
-                  )}
-                >
-                  <BookOpenIcon className="h-4" aria-hidden="true" />
-                  {`Documentation`}
-                </a>
-              )}
-            </Menu.Item>
-          </div>
-        </Menu.Items>
-      </Transition>
-    </Menu>
+    <ButtonDropdown
+      label={`Open options`}
+      srlabel={true}
+      variant="text"
+      icon={<EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />}
+      items={[
+        {
+          name: "Support",
+          href: "https://discord.gg/4wD3CNdsf6",
+          icon: <QuestionMarkCircleIcon />,
+          type: "link",
+        },
+        {
+          name: "File an issue",
+          href: "https://github.com/pingdotgg/sample_hooks/issues/new",
+          icon: <ArchiveBoxIcon />,
+          type: "link",
+        },
+        {
+          name: "Documentation",
+          href: "https://docs.webhookthing.com",
+          icon: <BookOpenIcon className="h-5 w-5 flex-shrink-0" />,
+          type: "link",
+        },
+      ]}
+    />
   );
 };
diff --git a/apps/cli/cli-web/src/components/breadcrumbs.tsx b/apps/cli/cli-web/src/components/breadcrumbs.tsx
new file mode 100644
index 00000000..82a7379a
--- /dev/null
+++ b/apps/cli/cli-web/src/components/breadcrumbs.tsx
@@ -0,0 +1,170 @@
+import { FolderIcon, HomeIcon } from "@heroicons/react/20/solid";
+import { Link } from "wouter";
+import { Tooltip } from "./common/tooltip";
+import Button, {
+  ButtonDropdown,
+  ButtonLink,
+  ButtonProps,
+  SplitButtonDropdown,
+  type ListItemWithIcon,
+} from "./common/button";
+
+import { classNames } from "../utils/classnames";
+
+const pathArrToUrl = (pathArr: string[], nav?: string) => {
+  const url = nav ? `${pathArr.concat(nav).join("/")}` : `${pathArr.join("/")}`;
+
+  // make sure we always have a leading slash
+  if (!url.startsWith("/")) return `/${url}`;
+  return url;
+};
+
+export const Nav = (input: { path: string; actions?: ActionItems }) => {
+  const { path, actions } = input;
+
+  const pathArr = path.split("/").slice(1);
+
+  return (
+    <nav
+      className="flex items-center justify-between pb-4"
+      aria-label="Breadcrumb"
+    >
+      <Breadcrumbs path={path} pathArr={pathArr} />
+      {actions && <Actions items={actions} />}
+    </nav>
+  );
+};
+
+const Breadcrumbs = (input: { path: string; pathArr: string[] }) => {
+  const { path, pathArr } = input;
+
+  return (
+    <ol role="list" className="flex items-center">
+      <li className="flex-items-center">
+        <Link
+          href="/"
+          className={classNames(
+            "flex items-center text-gray-400",
+            path.length > 1 ? "hover:text-indigo-600" : "cursor-default"
+          )}
+        >
+          <HomeIcon className="h-5 flex-shrink-0" aria-hidden="true" />
+          <span className="sr-only">{`root`}</span>
+        </Link>
+      </li>
+      {path.length > 1 &&
+        pathArr.map((page, i) => (
+          <li key={page}>
+            <div className="flex items-center">
+              <svg
+                className="h-5 flex-shrink-0 text-gray-300"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                aria-hidden="true"
+              >
+                <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+              </svg>
+              <Link
+                href={pathArrToUrl(pathArr.slice(0, pathArr.indexOf(page) + 1))}
+                className={classNames(
+                  "text-sm font-medium text-gray-400 ",
+                  i !== pathArr.length - 1
+                    ? "hover:text-indigo-600"
+                    : "cursor-default"
+                )}
+                aria-current={page ? "page" : undefined}
+              >
+                <Tooltip content={page}>
+                  <FolderIcon
+                    className={classNames(
+                      "inline h-5",
+                      i === pathArr.length - 1
+                        ? "hidden"
+                        : pathArr.join().length > 48
+                        ? ""
+                        : "sm:hidden"
+                    )}
+                    aria-hidden="true"
+                  />
+                </Tooltip>
+                <p
+                  className={classNames(
+                    i === pathArr.length - 1
+                      ? "inline truncate"
+                      : pathArr.join().length > 48
+                      ? "hidden"
+                      : "hidden sm:inline"
+                  )}
+                >
+                  {page}
+                </p>
+              </Link>
+            </div>
+          </li>
+        ))}
+    </ol>
+  );
+};
+
+type ActionsItemCommon = {
+  label: string;
+  srlabel?: boolean;
+};
+
+type ActionsItemButton = ActionsItemCommon &
+  ButtonProps & {
+    type: "button";
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  };
+
+type ActionsItemSplitButton = ActionsItemCommon &
+  ButtonProps & {
+    type: "splitButton";
+    items: ListItemWithIcon[];
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  };
+
+type ActionsItemDropdownButton = ActionsItemCommon &
+  ButtonProps & {
+    type: "dropdownButton";
+    items: ListItemWithIcon[];
+  };
+
+type ActionsItemLink = ActionsItemCommon &
+  ButtonProps & {
+    type: "link";
+    href?: string;
+  };
+
+type ActionsItem =
+  | ActionsItemLink
+  | ActionsItemButton
+  | ActionsItemSplitButton
+  | ActionsItemDropdownButton;
+
+// TODO: some better way to have icons here, ping code had `dropdownItemWithIcon`
+export type ActionItems = ActionsItem[];
+
+const Actions = (input: { items: ActionItems }) => {
+  return (
+    <div className="flex flex-row gap-1">
+      {input.items.map((item, i) => {
+        if (item.type === "link")
+          return (
+            <ButtonLink key={`${i}-breadcrumb}`} {...item}>
+              {item.label}
+            </ButtonLink>
+          );
+        if (item.type === "button")
+          return (
+            <Button key={`${i}-breadcrumb}`} {...item}>
+              {item.label}
+            </Button>
+          );
+        if (item.type === "splitButton")
+          return <SplitButtonDropdown {...item} />;
+        if (item.type === "dropdownButton") return <ButtonDropdown {...item} />;
+      })}
+    </div>
+  );
+};
diff --git a/apps/cli/cli-web/src/components/common/button.tsx b/apps/cli/cli-web/src/components/common/button.tsx
index 4e5adc10..62431cf2 100644
--- a/apps/cli/cli-web/src/components/common/button.tsx
+++ b/apps/cli/cli-web/src/components/common/button.tsx
@@ -3,44 +3,323 @@ import { Menu, Transition } from "@headlessui/react";
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import { classNames } from "../../utils/classnames";
 
-type ListItem = {
+import type { ReactElement } from "react";
+import React from "react";
+
+import { ArrowPathIcon } from "@heroicons/react/20/solid";
+
+const LoadingSpinner = () => (
+  <ArrowPathIcon className="h-20 animate-spin" aria-hidden="true" />
+);
+
+export type HTMLButtonProps = React.DetailedHTMLProps<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
+
+export type HTMLAnchorProps = React.DetailedHTMLProps<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  HTMLAnchorElement
+>;
+
+export const BUTTON_CLASSES =
+  "inline-flex items-center border font-medium border-transparent relative focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-transparent hover:focus:ring-offset-gray-200 hover:focus:outline-none aria-disabled:cursor-not-allowed transition";
+
+export type ButtonVariant = keyof typeof BUTTON_VARIANTS;
+
+type ButtonSize = keyof typeof BUTTON_SIZES;
+
+type ButtonIconPosition = "start" | "end";
+
+type ButtonWidth = keyof typeof BUTTON_WIDTHS;
+
+type ButtonAlignment = keyof typeof BUTTON_ALIGNMENTS;
+
+type ButtonShadow = keyof typeof BUTTON_SHADOW_CLASSES;
+
+type ButtonStyle = {
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+  width?: ButtonWidth;
+  alignment?: ButtonAlignment;
+  shadow?: ButtonShadow;
+};
+
+export type ButtonProps = {
+  icon?: ReactElement;
+  iconPosition?: ButtonIconPosition;
+  loading?: boolean;
+} & ButtonStyle;
+
+export const BUTTON_SIZES = {
+  base: "text-sm px-2 py-1 h-8 leading-4 rounded-md",
+  lg: "text-base px-4 py-2 h-10 rounded-md",
+};
+
+export const BUTTON_WIDTHS = {
+  full: "w-full",
+  auto: "w-auto",
+};
+
+export const BUTTON_ALIGNMENTS = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end",
+};
+
+export const BUTTON_SHADOW_CLASSES = {
+  false: "",
+  true: "shadow-sm hover:shadow-md aria-disabled:hover:shadow-sm",
+};
+
+export const ICON_SIZE_CLASSES = {
+  xs: "h-4 w-4",
+  sm: "h-4 w-4",
+  base: "h-4 w-4",
+  lg: "h-5 w-5",
+  xl: "h-5 w-5",
+  "2xl": "h-6 w-6",
+};
+export const ICON_START_CLASSES = {
+  xs: "-ml-0.5 mr-1.5",
+  sm: "-ml-0.5 mr-1.5",
+  base: "-ml-1 mr-1.5",
+  lg: "-ml-1 mr-2",
+  xl: "-ml-1 mr-2",
+  "2xl": "-ml-1 mr-2",
+};
+export const ICON_END_CLASSES = {
+  xs: "-mr-0.5 ml-1.5",
+  sm: "-mr-0.5 ml-1.5",
+  base: "-mr-1 ml-1.5",
+  lg: "-mr-1 ml-2",
+  xl: "-mr-1 ml-2",
+  "2xl": "-mr-1 ml-2",
+};
+
+export const BUTTON_VARIANTS = {
+  primary:
+    "bg-white border-gray-50 text-gray-600 hover:text-indigo-600 aria-disabled:bg-gray-50 aria-disabled:text-gray-400 aria-disabled:hover:text-gray-400  hover:border-transparent",
+  indigo:
+    "bg-indigo-600 text-white border border-transparent hover:bg-indigo-700  aria-disabled:bg-gray-600/80 aria-disabled:hover:bg-gray-600/80",
+  "primary-inverted":
+    "text-indigo-600 border-transparent bg-white hover:bg-indigo-50 aria-disabled:hover:bg-white",
+  text: "text-white border-transparent hover:text-gray-300",
+};
+
+export const getButtonClasses = (
+  style: ButtonStyle = {},
+  ...rest: string[]
+) => {
+  const {
+    size = "base",
+    variant = "primary",
+    width = "auto",
+    alignment = "center",
+    shadow = "true",
+  } = style;
+  return classNames(
+    BUTTON_CLASSES,
+    BUTTON_SIZES[size],
+    BUTTON_VARIANTS[variant],
+    BUTTON_WIDTHS[width],
+    BUTTON_ALIGNMENTS[alignment],
+    BUTTON_SHADOW_CLASSES[shadow] || "",
+    ...rest
+  );
+};
+
+const ButtonContent: React.FC<{
+  loading?: boolean;
+  size?: ButtonSize;
+  icon?: ReactElement;
+  iconPosition?: ButtonIconPosition;
+  children?: React.ReactNode;
+}> = ({ loading, icon, iconPosition = "start", size = "base", children }) => {
+  return (
+    <React.Fragment>
+      {loading && (
+        <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+          <LoadingSpinner />
+        </span>
+      )}
+      {icon && iconPosition === "start" && (
+        <span
+          className={classNames(
+            ICON_SIZE_CLASSES[size],
+            ICON_START_CLASSES[size]
+          )}
+        >
+          {icon}
+        </span>
+      )}
+      {children}
+      {icon && iconPosition === "end" && (
+        <span
+          className={classNames(
+            ICON_SIZE_CLASSES[size],
+            ICON_END_CLASSES[size]
+          )}
+        >
+          {icon}
+        </span>
+      )}
+    </React.Fragment>
+  );
+};
+
+/**
+ * Button component that renders an `<a>` element
+ *
+ * Wrap with next.js `<Link>` for client side routing
+ */
+export const ButtonLink = React.forwardRef<
+  HTMLAnchorElement,
+  ButtonProps & HTMLAnchorProps
+>((props, ref) => {
+  const {
+    children,
+    className = "",
+    size,
+    variant,
+    width,
+    alignment,
+    icon,
+    iconPosition,
+    loading,
+    ...rest
+  } = props;
+  return (
+    <a
+      className={getButtonClasses(
+        { size, variant, width, alignment },
+        className
+      )}
+      ref={ref}
+      {...rest}
+    >
+      <ButtonContent {...props} />
+    </a>
+  );
+});
+ButtonLink.displayName = "ButtonLink";
+
+/**
+ * Button component that renders a `<button>` element
+ *
+ * @see {@link ButtonLink} for rendering an `<a>` element
+ */
+export const Button = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps & HTMLButtonProps
+>((props, ref) => {
+  const {
+    children,
+    className = "",
+    disabled,
+    size,
+    variant,
+    width,
+    alignment,
+    shadow,
+    icon,
+    iconPosition,
+    loading,
+    ...rest
+  } = props;
+  return (
+    <button
+      className={getButtonClasses(
+        { size, variant, width, alignment, shadow },
+        className
+      )}
+      ref={ref}
+      type="button"
+      aria-disabled={disabled}
+      disabled={disabled}
+      {...rest}
+    >
+      <ButtonContent {...props} />
+    </button>
+  );
+});
+
+Button.displayName = "Button";
+
+export default Button;
+
+type ListItemCommon = {
   name: string;
+};
+type ListItemButton = ListItemCommon & {
+  type: "button";
   action: () => void;
 };
 
-export default function SplitButtonDropdown({
+type ListItemLink = ListItemCommon & {
+  type: "link";
+  href: string;
+};
+
+type ListItem = ListItemButton | ListItemLink;
+
+export type ListItemWithIcon = ListItem & {
+  icon?: React.ReactElement;
+};
+
+function isLink(item: ListItem): item is ListItemLink {
+  return !!(item as ListItemLink).href;
+}
+
+function isButton(item: ListItem): item is ListItemButton {
+  return !!(item as ListItemButton).action;
+}
+
+export const SplitButtonDropdown = ({
   items,
   label,
+  srlabel = false,
   icon,
   onClick,
 }: {
-  items: ListItem[];
+  items: ListItemWithIcon[];
   label: string;
-  icon?: React.ReactNode;
-  onClick?: () => void;
-}) {
+  srlabel?: boolean;
+  icon?: ReactElement;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}) => {
   return (
-    <div className="inline-flex rounded-md shadow-sm">
+    <div className="inline-flex rounded-md shadow-sm hover:shadow-md">
       {onClick ? (
-        <button
+        <Button
+          shadow="false"
+          className="rounded-r-none"
+          icon={icon}
           onClick={onClick}
-          className="relative inline-flex items-center gap-2 rounded-l-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
         >
-          {icon}
-          {label}
-        </button>
+          {srlabel ? <span className="sr-only">{label}</span> : label}
+        </Button>
       ) : (
         <div className="relative inline-flex items-center gap-2 rounded-l-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700">
+          {srlabel ? <span className="sr-only">{label}</span> : label}
           {icon}
-          {label}
         </div>
       )}
 
-      <Menu as="div" className="relative -ml-px block">
-        <Menu.Button className="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+      <Menu as="div" className="relative inline-block">
+        <Menu.Button
+          className="rounded-l-none"
+          variant="primary"
+          shadow="false"
+          as={Button}
+        >
           <span className="sr-only">{`Open options`}</span>
-          <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
+          <ChevronDownIcon
+            className={ICON_SIZE_CLASSES["base"]}
+            aria-hidden="true"
+          />
         </Menu.Button>
+
         <Transition
           as={Fragment}
           enter="transition ease-out duration-100"
@@ -50,20 +329,14 @@ export default function SplitButtonDropdown({
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items className="absolute right-0 z-10 mt-2 -mr-1 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-            <div className="py-1">
+          <Menu.Items className="min-w-36 absolute right-0 z-10 mt-2 origin-top-right  rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+            <div className="w-fit min-w-full">
               {items.map((item) => (
                 <Menu.Item key={item.name}>
                   {({ active }) => (
-                    <button
-                      className={classNames(
-                        active ? "bg-gray-100 text-gray-900" : "text-gray-700",
-                        "block px-4 py-2 text-sm"
-                      )}
-                      onClick={item.action}
-                    >
-                      {item.name}
-                    </button>
+                    <div className="flex w-full flex-row items-center justify-start overflow-clip first:rounded-t-lg last:rounded-b-lg">
+                      <DropdownButtonItemContent item={item} active={active} />
+                    </div>
                   )}
                 </Menu.Item>
               ))}
@@ -73,4 +346,100 @@ export default function SplitButtonDropdown({
       </Menu>
     </div>
   );
-}
+};
+
+export const ButtonDropdown = ({
+  items,
+  label,
+  srlabel = false,
+  icon,
+  ...rest
+}: {
+  items: ListItemWithIcon[];
+  label: string;
+  srlabel?: boolean;
+  icon?: React.ReactNode;
+} & ButtonProps) => {
+  return (
+    <Menu as="div" className="relative inline-block text-left">
+      <div>
+        <Menu.Button as={Button} {...rest}>
+          {srlabel ? <span className="sr-only">{label}</span> : label}
+          {icon}
+        </Menu.Button>
+      </div>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute right-0 z-10 mt-2 w-36 origin-top-right  rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <div className="w-fit min-w-full">
+            {items.map((item) => (
+              <Menu.Item key={item.name}>
+                {({ active }) => (
+                  <div className="flex w-full flex-row items-center justify-start overflow-clip first:rounded-t-lg last:rounded-b-lg">
+                    <DropdownButtonItemContent item={item} active={active} />
+                  </div>
+                )}
+              </Menu.Item>
+            ))}
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+};
+
+const DropdownButtonItemContent = ({
+  item,
+  active,
+}: {
+  item: ListItemWithIcon;
+  active: boolean;
+}) => {
+  if (item.type === "link" || isLink(item)) {
+    return (
+      <ButtonLink
+        className={classNames(
+          active ? "bg-gray-100 text-indigo-700" : "text-gray-700",
+          "flex flex-row items-center justify-start gap-2 rounded-none px-4 py-2 text-sm  hover:bg-gray-100"
+        )}
+        width="full"
+        size="lg"
+        alignment="left"
+        shadow="false"
+        icon={item.icon}
+        href={item.href}
+      >
+        {item.name}
+      </ButtonLink>
+    );
+  }
+  if (item.type === "button" || isButton(item)) {
+    return (
+      <Button
+        className={classNames(
+          active ? "bg-gray-100 text-indigo-700" : "text-gray-700",
+          "flex w-full flex-row items-center justify-start gap-2 rounded-none px-4 py-2 text-sm  hover:bg-gray-100"
+        )}
+        width="full"
+        size="lg"
+        alignment="left"
+        onClick={item.action}
+        shadow="false"
+        icon={item.icon}
+      >
+        {item.name}
+      </Button>
+    );
+  }
+
+  // should never happen
+  return null;
+};
diff --git a/apps/cli/cli-web/src/components/file-form-modal.tsx b/apps/cli/cli-web/src/components/file-form-modal.tsx
index cb174117..ea034622 100644
--- a/apps/cli/cli-web/src/components/file-form-modal.tsx
+++ b/apps/cli/cli-web/src/components/file-form-modal.tsx
@@ -6,6 +6,7 @@ import toast from "react-hot-toast";
 
 import { cliApi } from "../utils/api";
 import { Modal } from "./common/modal";
+import Button from "./common/button";
 
 const formValidator = z.object({
   name: z.string().max(100).min(1, { message: "Required" }),
@@ -68,14 +69,15 @@ export const FileFormModal = (input: {
     <Modal openState={openState} onClose={onClose}>
       <div className="relative m-2 flex w-full max-w-xl transform flex-col overflow-hidden rounded-lg bg-white p-6 px-4 pt-5 pb-4 text-left shadow-xl transition-all">
         <div className="absolute top-0 right-0 hidden pt-4 pr-4">
-          <button
+          <Button
+            variant="text"
             type="button"
             className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
             onClick={() => openState[1](false)}
           >
             <span className="sr-only">{`Close`}</span>
             <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-          </button>
+          </Button>
         </div>
         <div className="min-h-0 w-full grow overflow-y-scroll px-4">
           <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-indigo-100">
@@ -118,23 +120,27 @@ export const FileFormModal = (input: {
           </div>
         </div>
         <div className="mt-5 px-4">
-          <button
+          <Button
             type="submit"
             form="form"
-            className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:bg-gray-600/80"
+            variant="indigo"
+            size="lg"
+            className="inline-flex w-full justify-center"
             disabled={!isValid}
           >
             {`Create Hook`}
-          </button>
-          <button
+          </Button>
+          <Button
             type="button"
-            className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+            variant="primary"
+            size="lg"
+            className="mt-3 inline-flex w-full justify-center"
             onClick={() => {
               openState[1](false);
             }}
           >
             {`Cancel`}
-          </button>
+          </Button>
         </div>
       </div>
     </Modal>
diff --git a/apps/cli/cli-web/src/components/filebrowser.tsx b/apps/cli/cli-web/src/components/filebrowser.tsx
index 07c54ffe..4e9ac82c 100644
--- a/apps/cli/cli-web/src/components/filebrowser.tsx
+++ b/apps/cli/cli-web/src/components/filebrowser.tsx
@@ -5,26 +5,26 @@ import {
   ExclamationCircleIcon,
   FolderIcon,
   FolderPlusIcon,
-  HomeIcon,
   InformationCircleIcon,
   PlayIcon,
   PlusIcon,
 } from "@heroicons/react/20/solid";
 import { FolderPlusIcon as FolderPlusOutline } from "@heroicons/react/24/outline";
-import { Fragment, useState } from "react";
+import { useState } from "react";
 import toast from "react-hot-toast";
 import { Link } from "wouter";
-import { Menu, Transition } from "@headlessui/react";
 import { CliApiRouter } from "@captain/cli-core";
 import { inferRouterOutputs } from "@trpc/server";
 
+import { Nav } from "./breadcrumbs";
 import { Tooltip } from "./common/tooltip";
 import { FolderFormModal } from "./folder-form-modal";
 
 import { cliApi } from "../utils/api";
-import { classNames } from "../utils/classnames";
 import { useFileRoute } from "../utils/useRoute";
 import { FileFormModal } from "./file-form-modal";
+import { ButtonLink, Button } from "./common/button";
+import { classNames } from "../utils/classnames";
 
 const pathArrToUrl = (pathArr: string[], nav?: string) => {
   const url = nav ? `${pathArr.concat(nav).join("/")}` : `${pathArr.join("/")}`;
@@ -70,185 +70,69 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
   const addFolderModalState = useState(false);
 
   return (
-    <div className="flex min-h-0 flex-col divide-y divide-gray-200 first-line:w-full">
+    <div className="flex h-full min-h-0 flex-col first-line:w-full">
       {/* breadcrumbs */}
-      <nav
-        className="flex items-center justify-between pb-4"
-        aria-label="Breadcrumb"
-      >
-        <ol role="list" className="flex items-center">
-          <li className="flex-items-center">
-            <Link
-              href="/"
-              className={classNames(
-                "flex items-center text-gray-400",
-                path.length > 1 ? "hover:text-indigo-600" : "cursor-default"
-              )}
-            >
-              <HomeIcon className="h-5 flex-shrink-0" aria-hidden="true" />
-              <span className="sr-only">{`root`}</span>
-            </Link>
-          </li>
-          {path.length > 1 &&
-            pathArr.map((page, i) => (
-              <li key={page}>
-                <div className="flex items-center">
-                  <svg
-                    className="h-5 flex-shrink-0 text-gray-300"
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                    aria-hidden="true"
-                  >
-                    <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
-                  </svg>
-                  <Link
-                    href={pathArrToUrl(
-                      pathArr.slice(0, pathArr.indexOf(page) + 1)
-                    )}
-                    className={classNames(
-                      "text-sm font-medium text-gray-400 ",
-                      i !== pathArr.length - 1
-                        ? "hover:text-indigo-600"
-                        : "cursor-default"
-                    )}
-                    aria-current={page ? "page" : undefined}
-                  >
-                    <Tooltip content={page}>
-                      <FolderIcon
-                        className={classNames(
-                          "inline h-5",
-                          i === pathArr.length - 1
-                            ? "hidden"
-                            : pathArr.join().length > 48
-                            ? ""
-                            : "sm:hidden"
-                        )}
-                        aria-hidden="true"
-                      />
-                    </Tooltip>
-                    <p
-                      className={classNames(
-                        i === pathArr.length - 1
-                          ? "inline truncate"
-                          : pathArr.join().length > 48
-                          ? "hidden"
-                          : "hidden sm:inline"
-                      )}
-                    >
-                      {page}
-                    </p>
-                  </Link>
-                </div>
-              </li>
-            ))}
-        </ol>
-        <div className="flex flex-row gap-1">
-          <button
-            className="flex items-center justify-center rounded-md bg-white px-2 py-1 text-sm font-medium leading-4 text-gray-600 shadow-sm  hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-            onClick={() => openFolder({ path })}
-          >
-            {`Open Folder`}
-          </button>
-
-          <FolderFormModal openState={addFolderModalState} path={pathArr} />
-          <FileFormModal openState={addHookModalState} path={pathArr} />
-          <Menu as="div" className="relative inline-block text-left">
-            <div>
-              <Menu.Button className="flex items-center justify-center rounded-md bg-white px-2 py-1 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
-                <span className="sr-only">{`Open create menu`}</span>
-                <PlusIcon
-                  className="h-5 w-5 flex-shrink-0"
-                  aria-hidden="true"
-                />
-              </Menu.Button>
-            </div>
-
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <Menu.Items className="absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                <div className="w-full py-1">
-                  <Menu.Item>
-                    {({ active }) => (
-                      <div className="flex w-full flex-row items-center justify-start">
-                        <button
-                          className={classNames(
-                            active
-                              ? "bg-gray-200 text-indigo-700"
-                              : "text-gray-700",
-                            "flex w-full flex-row items-center justify-start gap-2 px-4 py-2 text-sm"
-                          )}
-                          onClick={() => {
-                            addFolderModalState[1](true);
-                          }}
-                        >
-                          <FolderPlusIcon className="h-4" aria-hidden="true" />
-                          {`New Folder`}
-                        </button>
-                      </div>
-                    )}
-                  </Menu.Item>
-                  <Menu.Item>
-                    {({ active }) => (
-                      <div className="flex flex-row items-center justify-start">
-                        <button
-                          className={classNames(
-                            active
-                              ? "bg-gray-200 text-indigo-700"
-                              : "text-gray-700",
-                            "flex w-full flex-row items-center justify-start gap-2 px-4 py-2 text-sm"
-                          )}
-                          onClick={() => {
-                            addHookModalState[1](true);
-                          }}
-                        >
-                          <DocumentPlusIcon
-                            className="h-4"
-                            aria-hidden="true"
-                          />
-                          {`New Hook`}
-                        </button>
-                      </div>
-                    )}
-                  </Menu.Item>
-                </div>
-              </Menu.Items>
-            </Transition>
-          </Menu>
-        </div>
-      </nav>
+      <Nav
+        path={path}
+        actions={[
+          {
+            type: "button",
+            label: "Open Folder",
+            onClick: () => openFolder({ path }),
+          },
+          {
+            type: "dropdownButton",
+            label: "Open Create Menu",
+            srlabel: true,
+            icon: (
+              <PlusIcon className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
+            ),
+            iconPosition: "end",
+            items: [
+              {
+                name: "New Folder",
+                type: "button",
+                action: () => addFolderModalState[1](true),
+                icon: <FolderPlusIcon />,
+              },
+              {
+                name: "New Hook",
+                type: "button",
+                action: () => addHookModalState[1](true),
+                icon: <DocumentPlusIcon />,
+              },
+            ],
+          },
+        ]}
+      />
+      <FolderFormModal openState={addFolderModalState} path={pathArr} />
+      <FileFormModal openState={addHookModalState} path={pathArr} />
       {/* folders section */}
-      <div className="py-2">
+      <div className="mb-4">
         <h3 className="text-lg font-medium leading-6 text-gray-900">
           {`Folders`}
         </h3>
-        <div className="flex h-28 flex-row space-x-3 overflow-x-auto px-1 py-2">
+        <div className="flex flex-row space-x-3 overflow-x-auto rounded-lg bg-gray-200/50 p-2 shadow-inner">
           {data.folders.map((folder) => (
             <div key={folder} className="w-1/5 min-w-[8rem]">
-              <Tooltip content={folder} placement="bottom">
+              <Tooltip content={folder} placement="bottom" className="-mt-16">
                 <Link href={pathArrToUrl(pathArr, folder)}>
-                  <button className="flex w-full flex-col items-center justify-center space-y-1 truncate rounded-md bg-white px-6 py-4 text-sm font-medium text-gray-600 shadow-sm  hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                  <ButtonLink className="flex h-full w-full flex-col items-center justify-center space-y-1 truncate px-6 py-4">
                     <FolderIcon
                       className="h-5 w-5 flex-shrink-0"
                       aria-hidden="true"
                     />
-                    <span className="w-full truncate text-center">
+                    <span className="block w-full truncate text-center">
                       {folder}
                     </span>
-                  </button>
+                  </ButtonLink>
                 </Link>
               </Tooltip>
             </div>
           ))}
           <div className="w-1/5 min-w-[8rem]">
-            <button
-              className="flex w-full flex-col items-center justify-center space-y-1 truncate rounded-md bg-white px-6 py-4 text-sm font-medium text-gray-600 shadow-sm  hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+            <Button
+              className="flex h-full w-full flex-col items-center justify-center space-y-1 truncate px-6 py-4 "
               onClick={() => addFolderModalState[1](true)}
             >
               <FolderPlusOutline
@@ -258,23 +142,28 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
               <span className="w-full truncate text-center">
                 {`New Folder`}
               </span>
-            </button>
+            </Button>
           </div>
         </div>
       </div>
       {/* files section */}
-      <div className="flex min-h-0 grow flex-col py-2">
+      <div className="flex min-h-0 flex-1 flex-col">
         <h3 className="text-lg font-medium leading-6 text-gray-900">
           {`Files`}
         </h3>
-        <div className="w-full overflow-y-auto px-1">
+        <div
+          className={classNames(
+            "flex w-full flex-1 flex-col overflow-y-auto rounded-lg bg-gray-200/50 p-2 shadow-inner",
+            data.files.length === 0 ? "justify-center" : ""
+          )}
+        >
           {data.files.length === 0 ? (
             <div className="text-center">
               <DocumentDuplicateIcon className="mx-auto h-12 w-12 text-gray-400" />
               <h3 className="mt-2 text-sm font-semibold text-gray-900">
                 {`No hook files found!`}
               </h3>
-              <p className="mt-1 text-sm text-gray-500">
+              <p className="mx-auto mt-1 max-w-sm text-sm text-gray-500">
                 {`Get started by `}
                 <button
                   className="text-indigo-600 hover:underline"
@@ -284,17 +173,20 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
                   <>
                     {`, or download some sample hooks with the button below.`}
                     <div className="mt-6">
-                      <button
+                      <Button
                         type="button"
-                        className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                        variant="indigo"
+                        size="lg"
+                        icon={
+                          <CloudArrowDownIcon
+                            className="h-5 w-5"
+                            aria-hidden="true"
+                          />
+                        }
                         onClick={() => downloadSampleHooks()}
                       >
-                        <CloudArrowDownIcon
-                          className="-ml-1 mr-2 h-5 w-5"
-                          aria-hidden="true"
-                        />
                         {`Download Sample Hooks`}
-                      </button>
+                      </Button>
                     </div>
                   </>
                 ) : (
@@ -307,7 +199,11 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
               {data.files.map((file) => (
                 <li key={file.name} className="flex w-full flex-row gap-2">
                   <Link href={pathArrToUrl(pathArr, file.name)}>
-                    <button className="group flex grow flex-row items-start justify-between gap-2 overflow-hidden rounded-md bg-white px-6 py-2 font-medium text-gray-600 shadow-sm   hover:text-indigo-600  hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                    <Button
+                      variant="primary"
+                      size="lg"
+                      className="group flex grow flex-row items-start justify-between gap-2 overflow-hidden"
+                    >
                       {file.name}
                       <div className="flex flex-row gap-2">
                         {!file.config?.url ? (
@@ -325,11 +221,12 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
                           )
                         )}
                       </div>
-                    </button>
+                    </Button>
                   </Link>
-                  <button
-                    className="flex items-center justify-center rounded-md border border-transparent bg-white px-3 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 
-                    disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400 disabled:hover:text-gray-400 disabled:hover:shadow-sm"
+                  <Button
+                    variant="primary"
+                    size="lg"
+                    className="flex items-center justify-center"
                     onClick={() => {
                       runFile({
                         file: `${path}/${file.name}`,
@@ -338,7 +235,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
                     disabled={!file.config?.url}
                   >
                     <PlayIcon className="h-4" />
-                  </button>
+                  </Button>
                 </li>
               ))}
             </ul>
diff --git a/apps/cli/cli-web/src/components/filerunner.tsx b/apps/cli/cli-web/src/components/filerunner.tsx
index 3cd203b6..ad23ffe5 100644
--- a/apps/cli/cli-web/src/components/filerunner.tsx
+++ b/apps/cli/cli-web/src/components/filerunner.tsx
@@ -1,10 +1,14 @@
 import { CliApiRouter } from "@captain/cli-core";
 import { PlayIcon, PlusIcon, TrashIcon } from "@heroicons/react/20/solid";
+import toast from "react-hot-toast";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { inferRouterOutputs } from "@trpc/server";
 import { useForm, useFieldArray } from "react-hook-form";
 import { z } from "zod";
 
+import { Nav } from "./breadcrumbs";
+import Button from "./common/button";
+
 import { cliApi } from "../utils/api";
 import { classNames } from "../utils/classnames";
 import {
@@ -46,7 +50,7 @@ const formValidator = z.object({
 });
 
 type DataResponse = inferRouterOutputs<CliApiRouter>["parseUrl"];
-type FileDataType = Extract<DataResponse, { type: "file" }>["data"];
+export type FileDataType = Extract<DataResponse, { type: "file" }>["data"];
 
 export const FileRunner = (input: { path: string; data: FileDataType }) => {
   const { path: file, data } = input;
@@ -132,26 +136,47 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
     })
   );
 
+  const { mutate: openFile } = cliApi.openFile.useMutation({
+    onError: (err) => {
+      toast.error(err.message);
+    },
+  });
+
   return (
     <>
       <div className="flex h-full w-full flex-col">
-        <div className="flex min-h-0 w-full grow flex-col overflow-y-scroll px-4">
-          <div className="flex flex-row items-center justify-between">
-            <div className="flex flex-col">
-              <h3 className="text-lg font-medium leading-6 text-gray-900">
-                {`Settings: ${prefill.name}`}
-              </h3>
-              <div className="mt-2 flex flex-col gap-2">
-                <p className="text-sm text-gray-500">
-                  {`Configure your webhook below.`}
-                </p>
-              </div>
-            </div>
-            <div className="flex h-full flex-col items-start justify-start p-1">
-              <button
-                className="flex items-center justify-center gap-1 rounded-md border border-transparent bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 
-                disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400 disabled:hover:text-gray-400 disabled:hover:shadow-sm"
-                onClick={() => {
+        <div className="flex w-full flex-col">
+          {/* breadcrumbs */}
+          <Nav
+            path={file}
+            actions={[
+              {
+                type: "splitButton",
+                label: "Open File",
+                onClick: () => openFile({ path: file }),
+                items: [
+                  {
+                    name: "hookname.json",
+                    type: "button",
+                    action: () => openFile({ path: file }),
+                  },
+                  {
+                    name: "hookname.config.json",
+                    type: "button",
+                    action: () =>
+                      // this is creating a folder instead of a file on windows
+                      openFile({
+                        path: file.replace(".json", ".config.json"),
+                      }),
+                  },
+                ],
+              },
+              {
+                type: "button",
+                label: `Run`,
+                iconPosition: "end",
+                icon: <PlayIcon />,
+                onClick: () => {
                   void trigger();
                   if (JSON.stringify(prefill) !== JSON.stringify(getValues())) {
                     updateHook(
@@ -168,11 +193,22 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                   } else {
                     runFile({ file: decodeURI(file) });
                   }
-                }}
-              >
-                {`Run`}
-                <PlayIcon className="h-4" />
-              </button>
+                },
+              },
+            ]}
+          />
+          <div className="flex min-h-0 w-full grow flex-col items-start overflow-y-scroll ">
+            <div className="flex flex-row items-center justify-between">
+              <div className="flex flex-col">
+                <h3 className="text-lg font-medium leading-6 text-gray-900">
+                  {`Settings: ${prefill.name}`}
+                </h3>
+                <div className="mt-2 flex min-h-0 flex-col gap-2">
+                  <p className="text-sm text-gray-500">
+                    {`Configure your webhook below.`}
+                  </p>
+                </div>
+              </div>
             </div>
           </div>
           <div className="mt-5">
@@ -410,15 +446,16 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
             </form>
           </div>
         </div>
-        <div className="flex flex-row justify-end pt-4">
-          <button
+        <div className="mt-auto flex flex-row justify-end pt-4">
+          <Button
             type="submit"
             form="form"
-            className="flex justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:bg-gray-600/80 sm:text-sm"
+            size="lg"
+            variant="indigo"
             disabled={!isValid}
           >
             {`Save Changes`}
-          </button>
+          </Button>
         </div>
       </div>
     </>
diff --git a/apps/cli/cli-web/src/components/folder-form-modal.tsx b/apps/cli/cli-web/src/components/folder-form-modal.tsx
index 6ff97f28..95dd6d31 100644
--- a/apps/cli/cli-web/src/components/folder-form-modal.tsx
+++ b/apps/cli/cli-web/src/components/folder-form-modal.tsx
@@ -7,6 +7,7 @@ import { useLocation } from "wouter";
 
 import { cliApi } from "../utils/api";
 import { Modal } from "./common/modal";
+import Button from "./common/button";
 
 const formValidator = z.object({
   name: z.string().max(100).min(1, { message: "Required" }),
@@ -69,14 +70,15 @@ export const FolderFormModal = (input: {
     <Modal openState={openState} onClose={onClose}>
       <div className="relative m-2 flex w-full max-w-xl transform flex-col overflow-hidden rounded-lg bg-white p-6 px-4 pt-5 pb-4 text-left shadow-xl transition-all">
         <div className="absolute top-0 right-0 hidden pt-4 pr-4">
-          <button
+          <Button
+            variant="text"
             type="button"
             className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
             onClick={() => openState[1](false)}
           >
             <span className="sr-only">{`Close`}</span>
             <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-          </button>
+          </Button>
         </div>
         <div className="min-h-0 w-full grow overflow-y-scroll px-4">
           <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-indigo-100">
@@ -116,23 +118,27 @@ export const FolderFormModal = (input: {
           </div>
         </div>
         <div className="mt-5 px-4">
-          <button
+          <Button
             type="submit"
             form="form"
-            className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:bg-gray-600/80"
+            variant="indigo"
+            size="lg"
+            className="inline-flex w-full justify-center"
             disabled={!isValid}
           >
             {`Create Folder`}
-          </button>
-          <button
+          </Button>
+          <Button
             type="button"
-            className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+            variant="primary"
+            size="lg"
+            className="mt-3 inline-flex w-full justify-center"
             onClick={() => {
               openState[1](false);
             }}
           >
             {`Cancel`}
-          </button>
+          </Button>
         </div>
       </div>
     </Modal>
diff --git a/apps/cli/cli-web/src/utils/classnames.ts b/apps/cli/cli-web/src/utils/classnames.ts
index b14852ec..7edb9180 100644
--- a/apps/cli/cli-web/src/utils/classnames.ts
+++ b/apps/cli/cli-web/src/utils/classnames.ts
@@ -1,3 +1,5 @@
+import { twMerge } from "tailwind-merge";
+
 export function classNames(...classes: string[]) {
-  return classes.filter(Boolean).join(" ");
+  return twMerge(classes.filter(Boolean).join(" "));
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 10609e62..6f118ec0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -128,6 +128,7 @@ importers:
       react-hook-form: ^7.43.0
       react-hot-toast: ^2.4.0
       superjson: ^1.12.1
+      tailwind-merge: ^1.12.0
       tailwindcss: ^3.1.8
       typescript: ^4.9.4
       vite: ^4.0.0
@@ -151,6 +152,7 @@ importers:
       react-hook-form: 7.43.0_react@18.2.0
       react-hot-toast: 2.4.0_biqbaboplfbrettd7655fr4n2y
       superjson: 1.12.2
+      tailwind-merge: 1.12.0
       wouter: 2.10.0_react@18.2.0
       zod: 3.20.2
     devDependencies:
@@ -7022,6 +7024,10 @@ packages:
       strip-ansi: 6.0.1
     dev: true
 
+  /tailwind-merge/1.12.0:
+    resolution: {integrity: sha512-Y17eDp7FtN1+JJ4OY0Bqv9OA41O+MS8c1Iyr3T6JFLnOgLg3EvcyMKZAnQ8AGyvB5Nxm3t9Xb5Mhe139m8QT/g==}
+    dev: false
+
   /tailwindcss/3.2.4:
     resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
     engines: {node: '>=12.13.0'}