diff --git a/ui/admin/app/components/Typography.tsx b/ui/admin/app/components/Typography.tsx
index 34a9613a..dc94e683 100644
--- a/ui/admin/app/components/Typography.tsx
+++ b/ui/admin/app/components/Typography.tsx
@@ -1,114 +1,183 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 
 import { cn } from "~/lib/utils";
 
-interface TypographyProps {
+type TypographyElement = keyof JSX.IntrinsicElements;
+
+type TypographyProps<T extends TypographyElement> = {
     children: ReactNode;
     className?: string;
-}
+} & React.JSX.IntrinsicElements[T];
 
-export function TypographyH1({ children, className }: TypographyProps) {
+export function TypographyH1({
+    children,
+    className,
+    ...props
+}: TypographyProps<"h1">) {
     return (
         <h1
             className={cn(
                 `scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl`,
                 className
             )}
+            {...props}
         >
             {children}
         </h1>
     );
 }
 
-export function TypographyH2({ children, className }: TypographyProps) {
+export function TypographyH2({
+    children,
+    className,
+    ...props
+}: TypographyProps<"h2">) {
     return (
         <h2
             className={cn(
                 `scroll-m-20 pb-2 text-3xl font-semibold tracking-tight first:mt-0`,
                 className
             )}
+            {...props}
         >
             {children}
         </h2>
     );
 }
 
-export function TypographyH3({ children, className }: TypographyProps) {
+export function TypographyH3({
+    children,
+    className,
+    ...props
+}: TypographyProps<"h3">) {
     return (
         <h3
             className={cn(
                 `scroll-m-20 text-2xl font-semibold tracking-tight`,
                 className
             )}
+            {...props}
         >
             {children}
         </h3>
     );
 }
 
-export function TypographyH4({ children, className }: TypographyProps) {
+export function TypographyH4({
+    children,
+    className,
+    ...props
+}: TypographyProps<"h4">) {
     return (
         <h4
             className={cn(
                 `scroll-m-20 text-xl font-semibold tracking-tight`,
                 className
             )}
+            {...props}
         >
             {children}
         </h4>
     );
 }
 
-export function TypographyP({ children, className }: TypographyProps) {
-    return <p className={cn(`leading-7`, className)}>{children}</p>;
+export function TypographyP({
+    children,
+    className,
+    ...props
+}: TypographyProps<"p">) {
+    return (
+        <p className={cn(`leading-7`, className)} {...props}>
+            {children}
+        </p>
+    );
 }
 
-export function TypographyBlockquote({ children, className }: TypographyProps) {
+export function TypographyBlockquote({
+    children,
+    className,
+    ...props
+}: TypographyProps<"blockquote">) {
     return (
-        <blockquote className={cn(`mt-6 border-l-2 pl-6 italic`, className)}>
+        <blockquote
+            className={cn(`mt-6 border-l-2 pl-6 italic`, className)}
+            {...props}
+        >
             {children}
         </blockquote>
     );
 }
 
-export function TypographyInlineCode({ children, className }: TypographyProps) {
+export function TypographyInlineCode({
+    children,
+    className,
+    ...props
+}: TypographyProps<"code">) {
     return (
         <code
             className={cn(
                 `relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold`,
                 className
             )}
+            {...props}
         >
             {children}
         </code>
     );
 }
 
-export function TypographyLead({ children, className }: TypographyProps) {
+export function TypographyLead({
+    children,
+    className,
+    ...props
+}: TypographyProps<"p">) {
     return (
-        <p className={cn(`text-xl text-muted-foreground`, className)}>
+        <p
+            className={cn(`text-xl text-muted-foreground`, className)}
+            {...props}
+        >
             {children}
         </p>
     );
 }
 
-export function TypographyLarge({ children, className }: TypographyProps) {
+export function TypographyLarge({
+    children,
+    className,
+    ...props
+}: TypographyProps<"div">) {
     return (
-        <div className={cn(`text-lg font-semibold`, className)}>{children}</div>
+        <div className={cn(`text-lg font-semibold`, className)} {...props}>
+            {children}
+        </div>
     );
 }
 
-export function TypographySmall({ children, className }: TypographyProps) {
+export function TypographySmall({
+    children,
+    className,
+    ...props
+}: TypographyProps<"small">) {
     return (
-        <small className={cn(`text-sm font-medium leading-none`, className)}>
+        <small
+            className={cn(`text-sm font-medium leading-none`, className)}
+            {...props}
+        >
             {children}
         </small>
     );
 }
 
-export function TypographyMuted({ children, className }: TypographyProps) {
+export function TypographyMuted({
+    children,
+    className,
+    ...props
+}: TypographyProps<"p">) {
     return (
-        <p className={cn(`text-sm text-muted-foreground`, className)}>
+        <p
+            className={cn(`text-sm text-muted-foreground`, className)}
+            {...props}
+        >
             {children}
         </p>
     );
diff --git a/ui/admin/app/components/agent/AdvancedForm.tsx b/ui/admin/app/components/agent/AdvancedForm.tsx
new file mode 100644
index 00000000..e0f6e1a8
--- /dev/null
+++ b/ui/admin/app/components/agent/AdvancedForm.tsx
@@ -0,0 +1,65 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Agent } from "~/lib/model/agents";
+
+import { ControlledTextarea } from "~/components/form/controlledInputs";
+import { Form } from "~/components/ui/form";
+
+const formSchema = z.object({
+    prompt: z.string().optional(),
+});
+
+export type AdvancedFormValues = z.infer<typeof formSchema>;
+
+type AdvancedFormProps = {
+    agent: Agent;
+    onSubmit?: (values: AdvancedFormValues) => void;
+    onChange?: (values: AdvancedFormValues) => void;
+};
+
+export function AdvancedForm({ agent, onSubmit, onChange }: AdvancedFormProps) {
+    const form = useForm<AdvancedFormValues>({
+        resolver: zodResolver(formSchema),
+        mode: "onChange",
+        defaultValues: {
+            prompt: agent.prompt || "",
+        },
+    });
+
+    useEffect(() => {
+        if (agent) form.reset({ prompt: agent.prompt || "" });
+    }, [agent, form]);
+
+    useEffect(() => {
+        return form.watch((values) => {
+            if (!onChange) return;
+
+            const { data, success } = formSchema.safeParse(values);
+
+            if (!success) return;
+
+            onChange(data);
+        }).unsubscribe;
+    }, [onChange, form]);
+
+    const handleSubmit = form.handleSubmit((values: AdvancedFormValues) =>
+        onSubmit?.({ ...values })
+    );
+
+    return (
+        <Form {...form}>
+            <form onSubmit={handleSubmit} className="space-y-8">
+                <ControlledTextarea
+                    control={form.control}
+                    name="prompt"
+                    label="Additional Instructions"
+                    description="Give the agent additional instructions on how it should behave."
+                    placeholder="Talk like a pirate."
+                />
+            </form>
+        </Form>
+    );
+}
diff --git a/ui/admin/app/components/agent/Agent.tsx b/ui/admin/app/components/agent/Agent.tsx
index bffffb5b..47f255d2 100644
--- a/ui/admin/app/components/agent/Agent.tsx
+++ b/ui/admin/app/components/agent/Agent.tsx
@@ -1,12 +1,15 @@
-import { LibraryIcon, RotateCcw, WrenchIcon } from "lucide-react";
+import { LibraryIcon, PlusIcon, SettingsIcon, WrenchIcon } from "lucide-react";
 import { useCallback, useState } from "react";
 
 import { Agent as AgentType } from "~/lib/model/agents";
 import { cn } from "~/lib/utils";
 
 import { TypographyP } from "~/components/Typography";
+import { AdvancedForm } from "~/components/agent/AdvancedForm";
 import { AgentProvider, useAgent } from "~/components/agent/AgentContext";
 import { AgentForm } from "~/components/agent/AgentForm";
+import { PastThreads } from "~/components/agent/PastThreads";
+import { ToolForm } from "~/components/agent/ToolForm";
 import { AgentKnowledgePanel } from "~/components/knowledge";
 import {
     Accordion,
@@ -18,12 +21,10 @@ import { Button } from "~/components/ui/button";
 import { ScrollArea } from "~/components/ui/scroll-area";
 import { useDebounce } from "~/hooks/useDebounce";
 
-import { ToolForm } from "./ToolForm";
-
 type AgentProps = {
     agent: AgentType;
     className?: string;
-    onRefresh?: () => void;
+    onRefresh?: (threadId: string | null) => void;
 };
 
 export function Agent(props: AgentProps) {
@@ -52,6 +53,13 @@ function AgentContent({ className, onRefresh }: AgentProps) {
 
     const debouncedSetAgentInfo = useDebounce(partialSetAgent, 1000);
 
+    const handleThreadSelect = useCallback(
+        (threadId: string) => {
+            onRefresh?.(threadId);
+        },
+        [onRefresh]
+    );
+
     return (
         <div className="h-full flex flex-col">
             <ScrollArea className={cn("h-full", className)}>
@@ -62,15 +70,27 @@ function AgentContent({ className, onRefresh }: AgentProps) {
                     />
                 </div>
 
-                <Accordion type="multiple" className="p-4 flex-auto">
-                    <AccordionItem value="tools-form">
-                        <AccordionTrigger>
-                            <span className="flex items-center gap-2 justify-center">
-                                <WrenchIcon className="w-4 h-4" />
+                <Accordion
+                    type="multiple"
+                    className="p-4 flex-auto space-y-4"
+                    defaultValue={["tools-form", "knowledge-form"]}
+                >
+                    <AccordionItem
+                        value="tools-form"
+                        className="border rounded-lg px-4 shadow-md"
+                    >
+                        <AccordionTrigger className="hover:no-underline">
+                            <span className="flex items-center gap-2 justify-center border-success/50 text-lg bg-success-foreground border w-full rounded-lg mr-2 p-2 hover:bg-success/20 text-success">
+                                <WrenchIcon className="w-6 h-6" />
                                 Tools
                             </span>
                         </AccordionTrigger>
                         <AccordionContent className="p-2">
+                            <TypographyP className="text-muted-foreground flex items-center gap-2">
+                                Add tools the allow the agent to perform useful
+                                actions such as searching the web, reading
+                                files, or interacting with other systems.
+                            </TypographyP>
                             <ToolForm
                                 agent={agentUpdates}
                                 onChange={debouncedSetAgentInfo}
@@ -78,18 +98,44 @@ function AgentContent({ className, onRefresh }: AgentProps) {
                         </AccordionContent>
                     </AccordionItem>
 
-                    <AccordionItem value="knowledge-form">
-                        <AccordionTrigger>
-                            <span className="flex items-center gap-2 justify-center">
-                                <LibraryIcon className="w-4 h-4" />
+                    <AccordionItem
+                        value="knowledge-form"
+                        className="border rounded-lg px-4 shadow-md"
+                    >
+                        <AccordionTrigger className="hover:no-underline">
+                            <span className="flex items-center gap-2 justify-center text-lg border-info/50 bg-info-foreground border w-full rounded-lg mr-2 p-2 hover:bg-info/20 text-info">
+                                <LibraryIcon className="w-6 h-6" />
                                 Knowledge
                             </span>
                         </AccordionTrigger>
 
-                        <AccordionContent>
+                        <AccordionContent className="p-2 mb-4">
+                            <TypographyP className="text-sm text-muted-foreground mb-2 pb-4">
+                                Provide knowledge to the agent in the form of
+                                files, website, or external links in order to
+                                give it context about various topics.
+                            </TypographyP>
                             <AgentKnowledgePanel agentId={agent.id} />
                         </AccordionContent>
                     </AccordionItem>
+
+                    <AccordionItem
+                        value="advanced-form"
+                        className="border rounded-lg px-4 shadow-md"
+                    >
+                        <AccordionTrigger className="hover:no-underline">
+                            <span className="flex items-center gap-2 justify-center text-lg border-muted-foreground/50 bg-muted border w-full rounded-lg mr-2 p-2 hover:bg-muted-foreground/20 dark:hover:bg-muted-foreground/10 text-muted-foreground">
+                                <SettingsIcon className="w-6 h-6" />
+                                Advanced
+                            </span>
+                        </AccordionTrigger>
+                        <AccordionContent className="p-2 mb-4">
+                            <AdvancedForm
+                                agent={agentUpdates}
+                                onChange={debouncedSetAgentInfo}
+                            />
+                        </AccordionContent>
+                    </AccordionItem>
                 </Accordion>
             </ScrollArea>
 
@@ -102,13 +148,22 @@ function AgentContent({ className, onRefresh }: AgentProps) {
                     <div />
                 )}
 
-                <Button
-                    variant="secondary"
-                    className="flex gap-2"
-                    onClick={onRefresh}
-                >
-                    <RotateCcw className="w-4 h-4" /> Restart Chat
-                </Button>
+                <div className="flex gap-2">
+                    <PastThreads
+                        agentId={agent.id}
+                        onThreadSelect={handleThreadSelect}
+                    />
+                    <Button
+                        variant="secondary"
+                        className="flex gap-2"
+                        onClick={() => {
+                            onRefresh?.(null);
+                        }}
+                    >
+                        <PlusIcon className="w-4 h-4" />
+                        New Thread
+                    </Button>
+                </div>
             </footer>
         </div>
     );
diff --git a/ui/admin/app/components/agent/AgentForm.tsx b/ui/admin/app/components/agent/AgentForm.tsx
index 8f55c539..d9ad593e 100644
--- a/ui/admin/app/components/agent/AgentForm.tsx
+++ b/ui/admin/app/components/agent/AgentForm.tsx
@@ -5,12 +5,10 @@ import { z } from "zod";
 
 import { Agent } from "~/lib/model/agents";
 
-import {
-    ControlledInput,
-    ControlledTextarea,
-} from "~/components/form/controlledInputs";
 import { Form } from "~/components/ui/form";
 
+import { ControlledInput } from "../form/controlledInputs";
+
 const formSchema = z.object({
     name: z.string().min(1, {
         message: "Name is required.",
@@ -60,28 +58,21 @@ export function AgentForm({ agent, onSubmit, onChange }: AgentFormProps) {
 
     return (
         <Form {...form}>
-            <form onSubmit={handleSubmit} className="space-y-8">
+            <form onSubmit={handleSubmit} className="space-y-4">
                 <ControlledInput
+                    variant="ghost"
+                    autoComplete="off"
                     control={form.control}
                     name="name"
-                    label="Name"
-                    placeholder="Give the agent a name."
+                    className="text-3xl"
                 />
-
-                <ControlledTextarea
+                <ControlledInput
+                    variant="ghost"
                     control={form.control}
-                    rows={4}
+                    autoComplete="off"
                     name="description"
-                    label="Description"
-                    placeholder="Describe the agent."
-                />
-
-                <ControlledTextarea
-                    control={form.control}
-                    rows={4}
-                    name="prompt"
-                    label="Prompt"
-                    placeholder="What should the agent do?"
+                    placeholder="Add a description..."
+                    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
new file mode 100644
index 00000000..e960c76a
--- /dev/null
+++ b/ui/admin/app/components/agent/PastThreads.tsx
@@ -0,0 +1,123 @@
+import { ChevronUpIcon } from "lucide-react";
+import React, { useState } from "react";
+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 {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from "~/components/ui/command";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "~/components/ui/popover";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "~/components/ui/tooltip";
+
+interface PastThreadsProps {
+    agentId: string;
+    onThreadSelect: (threadId: string) => void;
+}
+
+export const PastThreads: React.FC<PastThreadsProps> = ({
+    agentId,
+    onThreadSelect,
+}) => {
+    const [open, setOpen] = useState(false);
+    const {
+        data: threads,
+        error,
+        isLoading,
+        mutate,
+    } = useSWR(ThreadsService.getThreadsByAgent.key(agentId), () =>
+        ThreadsService.getThreadsByAgent(agentId)
+    );
+
+    const handleOpenChange = (newOpen: boolean) => {
+        setOpen(newOpen);
+        if (newOpen) {
+            mutate();
+        }
+    };
+
+    const handleThreadSelect = (threadId: string) => {
+        onThreadSelect(threadId);
+        setOpen(false);
+    };
+
+    return (
+        <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/agent/ToolForm.tsx b/ui/admin/app/components/agent/ToolForm.tsx
index 7b2d54e7..581ba3bb 100644
--- a/ui/admin/app/components/agent/ToolForm.tsx
+++ b/ui/admin/app/components/agent/ToolForm.tsx
@@ -71,27 +71,6 @@ export function ToolForm({
     return (
         <Form {...form}>
             <form onSubmit={handleSubmit} className="flex flex-col gap-2">
-                <div className="flex justify-end w-full my-4">
-                    <Popover>
-                        <PopoverTrigger>
-                            <Button variant="secondary">
-                                <PlusIcon className="w-4 h-4 mr-2" /> Add Tool
-                            </Button>
-                        </PopoverTrigger>
-                        <PopoverContent
-                            side="left"
-                            className="p-0 border-none"
-                            align="end"
-                            sideOffset={20}
-                        >
-                            <ToolCatalog
-                                tools={toolValues}
-                                onChangeTools={handleToolsChange}
-                                invert={true}
-                            />
-                        </PopoverContent>
-                    </Popover>
-                </div>
                 <FormField
                     control={form.control}
                     name="tools"
@@ -128,6 +107,31 @@ export function ToolForm({
                                     </div>
                                 ))}
                             </div>
+                            <div className="flex justify-end w-full my-4">
+                                <Popover>
+                                    <PopoverTrigger asChild>
+                                        <Button
+                                            variant="secondary"
+                                            className="mt-4 mb-4"
+                                        >
+                                            <PlusIcon className="w-4 h-4 mr-2" />{" "}
+                                            Add Tool
+                                        </Button>
+                                    </PopoverTrigger>
+                                    <PopoverContent
+                                        side="left"
+                                        className="p-0 border-none"
+                                        align="end"
+                                        sideOffset={20}
+                                    >
+                                        <ToolCatalog
+                                            tools={toolValues}
+                                            onChangeTools={handleToolsChange}
+                                            invert={true}
+                                        />
+                                    </PopoverContent>
+                                </Popover>
+                            </div>
                             <FormMessage />
                         </FormItem>
                     )}
diff --git a/ui/admin/app/components/chat/NoMessages.tsx b/ui/admin/app/components/chat/NoMessages.tsx
index dba93548..9d55cf24 100644
--- a/ui/admin/app/components/chat/NoMessages.tsx
+++ b/ui/admin/app/components/chat/NoMessages.tsx
@@ -1,3 +1,5 @@
+import { BrainCircuit, Handshake, Rocket } from "lucide-react";
+
 import { useChat } from "~/components/chat/ChatContext";
 import { Button } from "~/components/ui/button";
 
@@ -19,19 +21,26 @@ export function NoMessages() {
                     variant="secondary"
                     onClick={() => handleAddMessage("Hello, how are you?")}
                 >
-                    👋 Greeting
+                    <Handshake className="w-4 h-4 mr-2" />
+                    Greeting
                 </Button>
                 <Button
                     variant="secondary"
                     onClick={() => handleAddMessage("What can you do?")}
                 >
-                    🚀 Capabilities
+                    <Rocket className="w-4 h-4 mr-2" />
+                    Capabilities
                 </Button>
                 <Button
                     variant="secondary"
-                    onClick={() => handleAddMessage("Tell me a joke")}
+                    onClick={() =>
+                        handleAddMessage(
+                            "Using your knowledge tools, tell me about your knowledge set."
+                        )
+                    }
                 >
-                    😄 Joke
+                    <BrainCircuit className="w-4 h-4 mr-2" />
+                    Knowledge
                 </Button>
             </div>
         </div>
diff --git a/ui/admin/app/components/form/controlledInputs.tsx b/ui/admin/app/components/form/controlledInputs.tsx
index 8ac45be9..8fc5e128 100644
--- a/ui/admin/app/components/form/controlledInputs.tsx
+++ b/ui/admin/app/components/form/controlledInputs.tsx
@@ -103,7 +103,7 @@ export function ControlledTextarea<
                     {label && <FormLabel>{label}</FormLabel>}
 
                     {description && (
-                        <FormDescription hidden>{description}</FormDescription>
+                        <FormDescription>{description}</FormDescription>
                     )}
 
                     <FormControl>
diff --git a/ui/admin/app/components/header/HeaderNav.tsx b/ui/admin/app/components/header/HeaderNav.tsx
index b9567407..a46c6099 100644
--- a/ui/admin/app/components/header/HeaderNav.tsx
+++ b/ui/admin/app/components/header/HeaderNav.tsx
@@ -1,5 +1,5 @@
-import { useLocation, useParams } from "@remix-run/react";
-import { MenuIcon } from "lucide-react";
+import { Link, useLocation, useParams } from "@remix-run/react";
+import { ArrowLeftIcon, MenuIcon } from "lucide-react";
 import { $params, $path } from "remix-routes";
 import useSWR from "swr";
 
@@ -98,6 +98,10 @@ function getHeaderContent(route: string) {
 }
 
 const AgentEditContent = () => {
+    const { from } =
+        parseQueryParams(window.location.href, QueryParamSchemas.Agents).data ||
+        {};
+
     const params = useParams();
     const { agent: agentId } = $params("/agents/:agent", params);
 
@@ -106,7 +110,18 @@ const AgentEditContent = () => {
         ({ agentId }) => AgentService.getAgentById(agentId)
     );
 
-    return <>{agent?.name || "New Agent"}</>;
+    return (
+        <div className="flex items-center gap-1">
+            {from && (
+                <Button variant="ghost" size="icon" asChild>
+                    <Link to={from ?? $path("/agents")}>
+                        <ArrowLeftIcon className="h-4 w-4" />
+                    </Link>
+                </Button>
+            )}
+            {agent?.name || "New Agent"}
+        </div>
+    );
 };
 
 const ThreadsContent = () => {
diff --git a/ui/admin/app/components/thread/ThreadMeta.tsx b/ui/admin/app/components/thread/ThreadMeta.tsx
index 6d055a69..47d0ef6b 100644
--- a/ui/admin/app/components/thread/ThreadMeta.tsx
+++ b/ui/admin/app/components/thread/ThreadMeta.tsx
@@ -1,5 +1,6 @@
 import { Link } from "@remix-run/react";
 import { EditIcon, FileIcon, FilesIcon } from "lucide-react";
+import { $path } from "remix-routes";
 
 import { Agent } from "~/lib/model/agents";
 import { KnowledgeFile } from "~/lib/model/knowledge";
@@ -33,6 +34,7 @@ export function ThreadMeta({
     files,
     className,
 }: ThreadMetaProps) {
+    const from = $path("/thread/:id", { id: thread.id });
     return (
         <Card className={cn("h-full bg-0", className)}>
             <CardContent className="space-y-4 pt-6">
@@ -61,7 +63,11 @@ export function ThreadMeta({
                                                 asChild
                                             >
                                                 <Link
-                                                    to={`/agent/${agent.id}?from=/thread/${thread.id}`}
+                                                    to={$path(
+                                                        "/agents/:agent",
+                                                        { agent: agent.id },
+                                                        { from }
+                                                    )}
                                                 >
                                                     <EditIcon className="w-4 h-4" />
                                                 </Link>
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/lib/service/routeQueryParams.ts b/ui/admin/app/lib/service/routeQueryParams.ts
index 7cda4273..7103137e 100644
--- a/ui/admin/app/lib/service/routeQueryParams.ts
+++ b/ui/admin/app/lib/service/routeQueryParams.ts
@@ -8,4 +8,8 @@ export const QueryParamSchemas = {
         agentId: z.string().optional(),
         workflowId: z.string().optional(),
     }),
+    Agents: z.object({
+        threadId: z.string().optional(),
+        from: z.string().optional(),
+    }),
 };
diff --git a/ui/admin/app/routes/_auth.agents.$agent.tsx b/ui/admin/app/routes/_auth.agents.$agent.tsx
index 2701cba4..63d959f4 100644
--- a/ui/admin/app/routes/_auth.agents.$agent.tsx
+++ b/ui/admin/app/routes/_auth.agents.$agent.tsx
@@ -1,39 +1,23 @@
-import { ArrowLeftIcon } from "@radix-ui/react-icons";
 import {
     ClientLoaderFunctionArgs,
-    Link,
     redirect,
     useLoaderData,
     useNavigate,
 } 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";
 import { noop, parseQueryParams } from "~/lib/utils";
 
 import { Agent } from "~/components/agent";
 import { Chat, ChatProvider } from "~/components/chat";
-import { Button } from "~/components/ui/button";
 import {
     ResizableHandle,
     ResizablePanel,
     ResizablePanelGroup,
 } from "~/components/ui/resizable";
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from "~/components/ui/tooltip";
-
-const paramSchema = z.object({
-    threadId: z.string().optional(),
-    from: z.string().optional(),
-});
-
-export type SearchParams = z.infer<typeof paramSchema>;
 
 export const clientLoader = async ({
     params,
@@ -41,7 +25,7 @@ export const clientLoader = async ({
 }: ClientLoaderFunctionArgs) => {
     const { agent: agentId } = $params("/agents/:agent", params);
     const { threadId, from } =
-        parseQueryParams(request.url, paramSchema).data || {};
+        parseQueryParams(request.url, QueryParamSchemas.Agents).data || {};
 
     if (!agentId) {
         throw redirect("/agents");
@@ -57,7 +41,7 @@ export const clientLoader = async ({
 };
 
 export default function ChatAgent() {
-    const { agent, threadId, from } = useLoaderData<typeof clientLoader>();
+    const { agent, threadId } = useLoaderData<typeof clientLoader>();
     const navigate = useNavigate();
 
     const updateThreadId = useCallback(
@@ -85,27 +69,7 @@ export default function ChatAgent() {
                     className="flex-auto"
                 >
                     <ResizablePanel>
-                        <TooltipProvider>
-                            <Tooltip>
-                                <Button
-                                    variant="outline"
-                                    size="icon"
-                                    className="m-4"
-                                    asChild
-                                >
-                                    <TooltipTrigger>
-                                        <Link to={from ?? "/agents"}>
-                                            <ArrowLeftIcon className="h-4 w-4" />
-                                        </Link>
-                                    </TooltipTrigger>
-                                </Button>
-                                <TooltipContent>Go Back</TooltipContent>
-                            </Tooltip>
-                        </TooltipProvider>
-                        <Agent
-                            agent={agent}
-                            onRefresh={() => updateThreadId(null)}
-                        />
+                        <Agent agent={agent} onRefresh={updateThreadId} />
                     </ResizablePanel>
                     <ResizableHandle withHandle />
                     <ResizablePanel>
diff --git a/ui/admin/app/routes/_auth.agents._index.tsx b/ui/admin/app/routes/_auth.agents._index.tsx
index 18edf61d..590b7851 100644
--- a/ui/admin/app/routes/_auth.agents._index.tsx
+++ b/ui/admin/app/routes/_auth.agents._index.tsx
@@ -9,7 +9,6 @@ import useSWR, { preload } from "swr";
 import { Agent } from "~/lib/model/agents";
 import { AgentService } from "~/lib/service/api/agentService";
 import { ThreadsService } from "~/lib/service/api/threadsService";
-import { generateRandomName } from "~/lib/service/nameGenerator";
 import { timeSince } from "~/lib/utils";
 
 import { TypographyP } from "~/components/Typography";
@@ -74,7 +73,7 @@ export default function Threads() {
                             onClick={() => {
                                 AgentService.createAgent({
                                     agent: {
-                                        name: generateRandomName(),
+                                        name: "New Agent",
                                     } as Agent,
                                 }).then((agent) => {
                                     navigate(