diff --git a/apps/recorder/src/app/core.rs b/apps/recorder/src/app/core.rs
index fb3087a..7b07359 100644
--- a/apps/recorder/src/app/core.rs
+++ b/apps/recorder/src/app/core.rs
@@ -78,12 +78,25 @@ impl App {
                 .await;
         };
 
+        #[cfg(all(unix, debug_assertions))]
+        let quit = async {
+            signal::unix::signal(signal::unix::SignalKind::quit())
+                .expect("Failed to install SIGQUIT handler")
+                .recv()
+                .await;
+            println!("Received SIGQUIT");
+        };
+
         #[cfg(not(unix))]
         let terminate = std::future::pending::<()>();
 
+        #[cfg(all(not(unix), debug_assertions))]
+        let quit = std::future::pending::<()>();
+
         tokio::select! {
             () = ctrl_c => {},
             () = terminate => {},
+            () = quit => {},
         }
     }
 }
diff --git a/apps/webui/src/app.css b/apps/webui/src/app.css
index 11ec438..cafedda 100644
--- a/apps/webui/src/app.css
+++ b/apps/webui/src/app.css
@@ -138,4 +138,9 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
 }
\ No newline at end of file
diff --git a/apps/webui/src/components/layout/app-icon.tsx b/apps/webui/src/components/layout/app-icon.tsx
index b34be10..9526392 100644
--- a/apps/webui/src/components/layout/app-icon.tsx
+++ b/apps/webui/src/components/layout/app-icon.tsx
@@ -23,7 +23,7 @@ export function AppIcon() {
               />
             </div>
           </div>
-          <div className="grid flex-1 gap-1 py-1 text-left text-sm leading-tight">
+          <div className="grid flex-1 gap-1 py-1 text-left text-xs leading-tight">
             <span className="truncate font-semibold">Konobangu</span>
             <span className="mt-1 truncate">@dumtruck</span>
           </div>
diff --git a/apps/webui/src/components/layout/app-not-found.tsx b/apps/webui/src/components/layout/app-not-found.tsx
index 49cbf49..6b9d62f 100644
--- a/apps/webui/src/components/layout/app-not-found.tsx
+++ b/apps/webui/src/components/layout/app-not-found.tsx
@@ -33,7 +33,7 @@ export function AppNotFoundComponent() {
         </div>
         <ProLink
           to="/"
-          className="inline-flex h-10 items-center rounded-md border border-gray-200 border-gray-200 bg-white px-8 font-medium text-sm shadow-sm transition-colors hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:border-gray-800 dark:bg-gray-950 dark:focus-visible:ring-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50"
+          className="inline-flex h-10 items-center rounded-md border border-gray-20 bg-white px-8 font-medium text-xs shadow-xs transition-colors hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:focus-visible:ring-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50"
         >
           Return to website
         </ProLink>
diff --git a/apps/webui/src/components/layout/nav-user.tsx b/apps/webui/src/components/layout/nav-user.tsx
index 6afed55..f138ae2 100644
--- a/apps/webui/src/components/layout/nav-user.tsx
+++ b/apps/webui/src/components/layout/nav-user.tsx
@@ -50,7 +50,7 @@ export function NavUser({
                 <AvatarImage src={user.avatar} alt={user.name} />
                 <AvatarFallback className="rounded-lg">CN</AvatarFallback>
               </Avatar>
-              <div className="grid flex-1 text-left text-sm leading-tight">
+              <div className="grid flex-1 text-left text-xs leading-tight">
                 <span className="truncate font-semibold">{user.name}</span>
                 <span className="truncate text-xs">{user.email}</span>
               </div>
@@ -64,12 +64,12 @@ export function NavUser({
             sideOffset={4}
           >
             <DropdownMenuLabel className="p-0 font-normal">
-              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-xs">
                 <Avatar className="h-8 w-8 rounded-lg">
                   <AvatarImage src={user.avatar} alt={user.name} />
                   <AvatarFallback className="rounded-lg">CN</AvatarFallback>
                 </Avatar>
-                <div className="grid flex-1 text-left text-sm leading-tight">
+                <div className="grid flex-1 text-left text-xs leading-tight">
                   <span className="truncate font-semibold">{user.name}</span>
                   <span className="truncate text-xs">{user.email}</span>
                 </div>
diff --git a/apps/webui/src/components/ui/card.tsx b/apps/webui/src/components/ui/card.tsx
index 254281e..e04c9a3 100644
--- a/apps/webui/src/components/ui/card.tsx
+++ b/apps/webui/src/components/ui/card.tsx
@@ -1,84 +1,84 @@
-import * as React from "react"
+import type * as React from 'react';
 
-import { cn } from "@/styles/utils"
+import { cn } from '@/styles/utils';
 
-function Card({ className, ...props }: React.ComponentProps<"div">) {
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        'flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-header"
       className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
+      className={cn('font-semibold leading-none', className)}
       {...props}
     />
-  )
+  );
 }
 
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
-  )
+  );
 }
 
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-action"
       className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-content"
-      className={cn("px-6", className)}
+      className={cn('px-6', className)}
       {...props}
     />
-  )
+  );
 }
 
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -89,4 +89,4 @@ export {
   CardAction,
   CardDescription,
   CardContent,
-}
+};
diff --git a/dev.kdl b/dev.kdl
index 0d1139a..bf4a8eb 100644
--- a/dev.kdl
+++ b/dev.kdl
@@ -31,8 +31,8 @@ layout {
         }
     }
     tab name="Recorder" {
-        pane command="cargo" {
-            args "watch" "-w" "apps/recorder" "-x" "run -p recorder --bin recorder_cli -- --environment development"
+        pane command="watchexec" {
+            args "-w" "apps/recorder" "--" "cargo" "run" "-p" "recorder" "--bin" "recorder_cli" "--" "--environment" "development"
         }
     }
     tab name="Deps" {
diff --git a/justfile b/justfile
index aaa2db9..3f6ca25 100644
--- a/justfile
+++ b/justfile
@@ -13,7 +13,7 @@ dev-proxy:
 
 # bacon recorder # crash on windows
 dev-recorder:
-    cargo watch -w "apps/recorder" -x "run -p recorder --bin recorder_cli -- --environment development"
+    watchexec -w apps/recorder -- cargo run -p recorder --bin recorder_cli -- --environment development
 
 dev-deps:
     docker compose -f devdeps.compose.yaml up