diff --git a/ui/admin/app/components/agent/AgentForm.tsx b/ui/admin/app/components/agent/AgentForm.tsx
index 8387a16c..d9ad593e 100644
--- a/ui/admin/app/components/agent/AgentForm.tsx
+++ b/ui/admin/app/components/agent/AgentForm.tsx
@@ -60,17 +60,19 @@ export function AgentForm({ agent, onSubmit, onChange }: AgentFormProps) {
         <Form {...form}>
             <form onSubmit={handleSubmit} className="space-y-4">
                 <ControlledInput
+                    variant="ghost"
                     autoComplete="off"
                     control={form.control}
                     name="name"
-                    className="text-3xl shadow-none cursor-pointer hover:border-primary px-0 mb-0 font-bold outline-none border-transparent focus:border-primary"
+                    className="text-3xl"
                 />
                 <ControlledInput
+                    variant="ghost"
                     control={form.control}
                     autoComplete="off"
                     name="description"
                     placeholder="Add a description..."
-                    className="text-xl text-muted-foreground font-semibold shadow-none cursor-pointer hover:border-primary px-0 outline-none border-transparent focus:border-primary"
+                    className="text-xl text-muted-foreground"
                 />
             </form>
         </Form>
diff --git a/ui/admin/app/components/agent/PastThreads.tsx b/ui/admin/app/components/agent/PastThreads.tsx
index 83ac6772..e960c76a 100644
--- a/ui/admin/app/components/agent/PastThreads.tsx
+++ b/ui/admin/app/components/agent/PastThreads.tsx
@@ -5,6 +5,7 @@ import useSWR from "swr";
 import { Thread } from "~/lib/model/threads";
 import { ThreadsService } from "~/lib/service/api/threadsService";
 
+import { TypographyP } from "~/components/Typography";
 import { LoadingSpinner } from "~/components/ui/LoadingSpinner";
 import { Button } from "~/components/ui/button";
 import {
@@ -20,8 +21,12 @@ import {
     PopoverContent,
     PopoverTrigger,
 } from "~/components/ui/popover";
-
-import { TypographyH4, TypographyP } from "../Typography";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "~/components/ui/tooltip";
 
 interface PastThreadsProps {
     agentId: string;
@@ -55,55 +60,64 @@ export const PastThreads: React.FC<PastThreadsProps> = ({
     };
 
     return (
-        <Popover open={open} onOpenChange={handleOpenChange}>
-            <PopoverTrigger asChild>
-                <Button variant="secondary" size="icon">
-                    <ChevronUpIcon className="w-4 h-4" />
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-80 p-0">
-                <Command className="flex-col-reverse">
-                    <CommandInput placeholder="Search threads..." />
-                    <CommandList>
-                        <CommandEmpty>No threads found.</CommandEmpty>
-                        {isLoading ? (
-                            <div className="flex justify-center items-center h-20">
-                                <LoadingSpinner size={24} />
-                            </div>
-                        ) : error ? (
-                            <div className="text-center text-red-500 p-2">
-                                Failed to load threads
-                            </div>
-                        ) : threads && threads.length > 0 ? (
-                            <CommandGroup>
-                                {threads.map((thread: Thread) => (
-                                    <CommandItem
-                                        key={thread.id}
-                                        onSelect={() =>
-                                            handleThreadSelect(thread.id)
-                                        }
-                                        className="cursor-pointer"
-                                    >
-                                        <div>
-                                            <TypographyP className="font-semibold">
-                                                Thread
-                                                <span className="ml-2 text-muted-foreground">
-                                                    {thread.id}
-                                                </span>
-                                            </TypographyP>
-                                            <TypographyP className="text-sm text-gray-500">
-                                                {new Date(
-                                                    thread.created
-                                                ).toLocaleString()}
-                                            </TypographyP>
-                                        </div>
-                                    </CommandItem>
-                                ))}
-                            </CommandGroup>
-                        ) : null}
-                    </CommandList>
-                </Command>
-            </PopoverContent>
-        </Popover>
+        <TooltipProvider>
+            <Tooltip>
+                <Popover open={open} onOpenChange={handleOpenChange}>
+                    <PopoverTrigger asChild>
+                        <TooltipTrigger asChild>
+                            <Button variant="secondary" size="icon">
+                                <ChevronUpIcon className="w-4 h-4" />
+                            </Button>
+                        </TooltipTrigger>
+                    </PopoverTrigger>
+                    <TooltipContent>Switch threads</TooltipContent>
+                    <PopoverContent className="w-80 p-0">
+                        <Command className="flex-col-reverse">
+                            <CommandInput placeholder="Search threads..." />
+                            <CommandList>
+                                <CommandEmpty>No threads found.</CommandEmpty>
+                                {isLoading ? (
+                                    <div className="flex justify-center items-center h-20">
+                                        <LoadingSpinner size={24} />
+                                    </div>
+                                ) : error ? (
+                                    <div className="text-center text-red-500 p-2">
+                                        Failed to load threads
+                                    </div>
+                                ) : threads && threads.length > 0 ? (
+                                    <CommandGroup>
+                                        {threads.map((thread: Thread) => (
+                                            <CommandItem
+                                                key={thread.id}
+                                                onSelect={() =>
+                                                    handleThreadSelect(
+                                                        thread.id
+                                                    )
+                                                }
+                                                className="cursor-pointer"
+                                            >
+                                                <div>
+                                                    <TypographyP className="font-semibold">
+                                                        Thread
+                                                        <span className="ml-2 text-muted-foreground">
+                                                            {thread.id}
+                                                        </span>
+                                                    </TypographyP>
+                                                    <TypographyP className="text-sm text-gray-500">
+                                                        {new Date(
+                                                            thread.created
+                                                        ).toLocaleString()}
+                                                    </TypographyP>
+                                                </div>
+                                            </CommandItem>
+                                        ))}
+                                    </CommandGroup>
+                                ) : null}
+                            </CommandList>
+                        </Command>
+                    </PopoverContent>
+                </Popover>
+            </Tooltip>
+        </TooltipProvider>
     );
 };
diff --git a/ui/admin/app/components/ui/input.tsx b/ui/admin/app/components/ui/input.tsx
index 4db24b77..2612d11e 100644
--- a/ui/admin/app/components/ui/input.tsx
+++ b/ui/admin/app/components/ui/input.tsx
@@ -1,18 +1,33 @@
+import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from "~/lib/utils";
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+const inputVariants = cva(
+    "flex h-9 w-full rounded-md px-3 bg-transparent border border-input text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+    {
+        variants: {
+            variant: {
+                default: "",
+                ghost: "shadow-none cursor-pointer hover:border-primary px-0 mb-0 font-bold outline-none border-transparent focus:border-primary",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    }
+);
+
+export interface InputProps
+    extends React.InputHTMLAttributes<HTMLInputElement>,
+        VariantProps<typeof inputVariants> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-    ({ className, type, ...props }, ref) => {
+    ({ className, variant, type, ...props }, ref) => {
         return (
             <input
                 type={type}
-                className={cn(
-                    "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-                    className
-                )}
+                className={cn(inputVariants({ variant, className }))}
                 ref={ref}
                 {...props}
             />
@@ -21,4 +36,4 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 );
 Input.displayName = "Input";
 
-export { Input };
+export { Input, inputVariants };
diff --git a/ui/admin/app/routes/_auth.agents.$agent.tsx b/ui/admin/app/routes/_auth.agents.$agent.tsx
index 9dcb5ca4..63d959f4 100644
--- a/ui/admin/app/routes/_auth.agents.$agent.tsx
+++ b/ui/admin/app/routes/_auth.agents.$agent.tsx
@@ -6,7 +6,6 @@ import {
 } from "@remix-run/react";
 import { useCallback } from "react";
 import { $params, $path } from "remix-routes";
-import { z } from "zod";
 
 import { AgentService } from "~/lib/service/api/agentService";
 import { QueryParamSchemas } from "~/lib/service/routeQueryParams";