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>
   );
 };