diff --git a/formatter.nix b/formatter.nix
index 6805d6ab1..03d4bb333 100644
--- a/formatter.nix
+++ b/formatter.nix
@@ -43,6 +43,9 @@
           "*.yaml"
           "*.yml"
         ];
+        excludes = [
+          "*/asciinema-player/*"
+        ];
       };
       treefmt.programs.mypy.directories =
         {
diff --git a/pkgs/webview-ui/app/src/components/BackButton.tsx b/pkgs/webview-ui/app/src/components/BackButton.tsx
index e113739cb..97acfed46 100644
--- a/pkgs/webview-ui/app/src/components/BackButton.tsx
+++ b/pkgs/webview-ui/app/src/components/BackButton.tsx
@@ -1,10 +1,15 @@
 import { useNavigate } from "@solidjs/router";
+import { Button } from "./button";
+import Icon from "./icon";
 
 export const BackButton = () => {
   const navigate = useNavigate();
   return (
-    <button class="btn btn-square btn-ghost" onClick={() => navigate(-1)}>
-      <span class="material-icons ">arrow_back_ios</span>
-    </button>
+    <Button
+      variant="light"
+      class="w-fit"
+      onClick={() => navigate(-1)}
+      startIcon={<Icon icon="ArrowLeft" />}
+    ></Button>
   );
 };
diff --git a/pkgs/webview-ui/app/src/components/button/index.tsx b/pkgs/webview-ui/app/src/components/button/index.tsx
index 8502e2e2e..b9ae956ed 100644
--- a/pkgs/webview-ui/app/src/components/button/index.tsx
+++ b/pkgs/webview-ui/app/src/components/button/index.tsx
@@ -39,7 +39,7 @@ const sizePaddings: Record<Size, string> = {
 interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: Variants;
   size?: Size;
-  children: JSX.Element;
+  children?: JSX.Element;
   startIcon?: JSX.Element;
   endIcon?: JSX.Element;
   class?: string;
@@ -67,9 +67,9 @@ export const Button = (props: ButtonProps) => {
       )}
       {...other}
     >
-      <span class="h-4">{local.startIcon}</span>
-      <span>{local.children}</span>
-      <span class="h-4">{local.endIcon}</span>
+      {local.startIcon && <span class="h-4">{local.startIcon}</span>}
+      {local.children && <span>{local.children}</span>}
+      {local.endIcon && <span class="h-4">{local.endIcon}</span>}
     </button>
   );
 };
diff --git a/pkgs/webview-ui/app/src/components/icon/index.tsx b/pkgs/webview-ui/app/src/components/icon/index.tsx
new file mode 100644
index 000000000..175c44bf6
--- /dev/null
+++ b/pkgs/webview-ui/app/src/components/icon/index.tsx
@@ -0,0 +1,91 @@
+import { Component, JSX } from "solid-js";
+import ArrowBottom from "@/icons/arrow-bottom.svg";
+import ArrowLeft from "@/icons/arrow-left.svg";
+import ArrowRight from "@/icons/arrow-right.svg";
+import ArrowTop from "@/icons/arrow-top.svg";
+import CaretDown from "@/icons/caret-down.svg";
+import CaretRight from "@/icons/caret-right.svg";
+import Checkmark from "@/icons/checkmark.svg";
+import ClanIcon from "@/icons/clan-icon.svg";
+import ClanLogo from "@/icons/clan-logo.svg";
+import Edit from "@/icons/edit.svg";
+import Expand from "@/icons/expand.svg";
+import EyeClose from "@/icons/eye-close.svg";
+import EyeOpen from "@/icons/eye-open.svg";
+import Flash from "@/icons/flash.svg";
+import Grid from "@/icons/grid.svg";
+import Info from "@/icons/info.svg";
+import List from "@/icons/list.svg";
+import Load from "@/icons/load.svg";
+import Paperclip from "@/icons/paperclip.svg";
+import Plus from "@/icons/plus.svg";
+import Reload from "@/icons/reload.svg";
+import Settings from "@/icons/settings.svg";
+import Trash from "@/icons/trash.svg";
+import Update from "@/icons/update.svg";
+
+type IconVariant =
+  | "ArrowBottom"
+  | "ArrowLeft"
+  | "ArrowRight"
+  | "ArrowTop"
+  | "CaretDown"
+  | "CaretRight"
+  | "Checkmark"
+  | "ClanIcon"
+  | "ClanLogo"
+  | "Edit"
+  | "Expand"
+  | "EyeClose"
+  | "EyeOpen"
+  | "Flash"
+  | "Grid"
+  | "Info"
+  | "List"
+  | "Load"
+  | "Paperclip"
+  | "Plus"
+  | "Reload"
+  | "Settings"
+  | "Trash"
+  | "Update";
+
+interface IconProps extends JSX.SvgSVGAttributes<SVGElement> {
+  icon: IconVariant;
+}
+
+const Icon: Component<IconProps> = (props) => {
+  const icons = {
+    ArrowBottom,
+    ArrowLeft,
+    ArrowRight,
+    ArrowTop,
+    CaretDown,
+    CaretRight,
+    Checkmark,
+    ClanIcon,
+    ClanLogo,
+    Edit,
+    Expand,
+    EyeClose,
+    EyeOpen,
+    Flash,
+    Grid,
+    Info,
+    List,
+    Load,
+    Paperclip,
+    Plus,
+    Reload,
+    Settings,
+    Trash,
+    Update,
+  };
+
+  const IconComponent = icons[props.icon];
+  return IconComponent ? (
+    <IconComponent width={16} height={16} viewBox="0 0 48 48" />
+  ) : null;
+};
+
+export default Icon;