diff --git a/src/interface/web/app/common/modelSelector.tsx b/src/interface/web/app/common/modelSelector.tsx
index ae0e6d4f..d5716c1d 100644
--- a/src/interface/web/app/common/modelSelector.tsx
+++ b/src/interface/web/app/common/modelSelector.tsx
@@ -28,22 +28,29 @@ import { ModelOptions, useChatModelOptions } from "./auth";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
 import { Skeleton } from "@/components/ui/skeleton";
 
-export function ModelSelector({ ...props }: PopoverProps) {
+interface ModelSelectorProps extends PopoverProps {
+    onSelect: (model: ModelOptions) => void;
+    selectedModel?: string;
+    disabled?: boolean;
+}
+
+export function ModelSelector({ ...props }: ModelSelectorProps) {
     const [open, setOpen] = React.useState(false)
     const { models, isLoading, error } = useChatModelOptions();
     const [peekedModel, setPeekedModel] = useState<ModelOptions | undefined>(undefined);
     const [selectedModel, setSelectedModel] = useState<ModelOptions | undefined>(undefined);
 
     useEffect(() => {
-        if (models && models.length > 0) {
-            setSelectedModel(models[0])
+        if (!models?.length) return;
+
+        if (props.selectedModel) {
+            const model = models.find(model => model.name === props.selectedModel);
+            setSelectedModel(model || models[0]);
+            return;
         }
 
-        if (models && models.length > 0 && !selectedModel) {
-            setSelectedModel(models[0])
-        }
-
-    }, [models]);
+        setSelectedModel(models[0]);
+    }, [models, props.selectedModel]);
 
     if (isLoading) {
         return (
@@ -67,9 +74,10 @@ export function ModelSelector({ ...props }: PopoverProps) {
                         aria-expanded={open}
                         aria-label="Select a model"
                         className="w-full justify-between text-left"
+                        disabled={props.disabled ?? false}
                     >
                         <p className="truncate">
-                            {selectedModel ? selectedModel.name.substring(0,20) : "Select a model..."}
+                            {selectedModel ? selectedModel.name.substring(0, 20) : "Select a model..."}
                         </p>
                         <CaretUpDown className="opacity-50" />
                     </Button>
@@ -157,7 +165,7 @@ function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
             key={model.id}
             onSelect={onSelect}
             ref={ref}
-            className="data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground"
+            className="data-[selected=true]:bg-muted data-[selected=true]:text-secondary-foreground"
         >
             {model.name}
             <Check
diff --git a/src/interface/web/app/components/agentCard/agentCard.tsx b/src/interface/web/app/components/agentCard/agentCard.tsx
index 87ce30d2..ccb601e5 100644
--- a/src/interface/web/app/components/agentCard/agentCard.tsx
+++ b/src/interface/web/app/components/agentCard/agentCard.tsx
@@ -103,10 +103,13 @@ export interface AgentData {
     privacy_level: string;
     files?: string[];
     creator?: string;
+    is_creator?: boolean;
     managed_by_admin: boolean;
     chat_model: string;
     input_tools: string[];
     output_modes: string[];
+    is_hidden: boolean;
+    has_files?: boolean;
 }
 
 async function openChat(slug: string, userData: UserProfile | null) {
diff --git a/src/interface/web/app/components/allConversations/allConversations.tsx b/src/interface/web/app/components/allConversations/allConversations.tsx
index 94d05eba..0bab8165 100644
--- a/src/interface/web/app/components/allConversations/allConversations.tsx
+++ b/src/interface/web/app/components/allConversations/allConversations.tsx
@@ -363,7 +363,7 @@ export function FilesMenu(props: FilesMenuProps) {
         <>
             <Popover open={isOpen} onOpenChange={setIsOpen}>
                 <PopoverTrigger asChild>
-                    <div className="w-auto bg-background border border-muted p-4 drop-shadow-sm rounded-2xl my-8">
+                    <div className="w-auto bg-background border border-muted p-4 drop-shadow-sm rounded-2xl">
                         <div className="flex items-center justify-between space-x-4">
                             <h4 className="text-sm font-semibold">
                                 {usingConversationContext ? "Manage Context" : "Files"}
@@ -424,7 +424,7 @@ function SessionsAndFiles(props: SessionsAndFilesProps) {
                 <ScrollArea>
                     <ScrollAreaScrollbar
                         orientation="vertical"
-                        className="h-full w-2.5 border-l border-l-transparent p-[1px]"
+                        className="h-full w-2.5"
                     />
                     <div className="p-0 m-0">
                         {props.subsetOrganizedData != null &&
diff --git a/src/interface/web/app/components/chatSidebar/chatSidebar.tsx b/src/interface/web/app/components/chatSidebar/chatSidebar.tsx
index 8ebd3243..8047a97b 100644
--- a/src/interface/web/app/components/chatSidebar/chatSidebar.tsx
+++ b/src/interface/web/app/components/chatSidebar/chatSidebar.tsx
@@ -1,21 +1,28 @@
 "use client"
 
-import * as React from "react"
-
-import { Bell } from "@phosphor-icons/react";
+import { ArrowsDownUp, Bell, CaretCircleDown, Sparkle } from "@phosphor-icons/react";
 
 import { Button } from "@/components/ui/button";
 
-import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { Textarea } from "@/components/ui/textarea";
 import { ModelSelector } from "@/app/common/modelSelector";
 import { FilesMenu } from "../allConversations/allConversations";
 import { AgentConfigurationOptions } from "@/app/agents/page";
 import useSWR from "swr";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { AgentData } from "../agentCard/agentCard";
+import { useState } from "react";
+import { getIconForSlashCommand, getIconFromIconName } from "@/app/common/iconUtils";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip";
+import { TooltipContent } from "@radix-ui/react-tooltip";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 
 interface ChatSideBarProps {
+    preexistingAgent?: AgentData | null;
     conversationId: string;
     isOpen: boolean;
     isMobileWidth?: boolean;
@@ -47,13 +54,28 @@ export function ChatSidebar({ ...props }: ChatSideBarProps) {
 
 
 function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
+    const isEditable = props.preexistingAgent?.name.toLowerCase() === "khoj" || props.preexistingAgent?.is_hidden === true;
+    const isDefaultAgent = props.preexistingAgent?.name.toLowerCase() === "khoj";
     const { data: agentConfigurationOptions, error: agentConfigurationOptionsError } =
         useSWR<AgentConfigurationOptions>("/api/agents/options", fetcher);
 
+    const [customPrompt, setCustomPrompt] = useState<string | undefined>(!isDefaultAgent && props.preexistingAgent ? props.preexistingAgent.persona : "always respond in spanish");
+    const [selectedModel, setSelectedModel] = useState<string | undefined>(props.preexistingAgent?.chat_model);
+    const [inputTools, setInputTools] = useState<string[] | undefined>(props.preexistingAgent?.input_tools);
+
+
+    function isValueChecked(value: string, existingSelections: string[] | undefined): boolean {
+        if (existingSelections === undefined || existingSelections === null || existingSelections.length === 0) {
+            return true;
+        }
+
+        return existingSelections.includes(value);
+    }
+
     return (
         <Sidebar
             collapsible="none"
-            className={`ml-auto rounded-lg p-2 transition-all transform duration-300 ease-in-out
+            className={`ml-auto opacity-30 rounded-lg p-2 transition-all transform duration-300 ease-in-out
                                ${props.isOpen
                     ? "translate-x-0 opacity-100 w-[300px]"
                     : "translate-x-full opacity-0 w-0"}
@@ -61,76 +83,148 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
             variant="floating">
             <SidebarContent>
                 <SidebarHeader>
-                    Chat Options
+                    {
+                        props.preexistingAgent && !isEditable ? (
+                            <div className="flex items-center relative top-2">
+                                <a className="text-lg font-bold flex flex-row items-center" href={`/agents?agent=${props.preexistingAgent.slug}`}>
+                                    {getIconFromIconName(props.preexistingAgent.icon, props.preexistingAgent.color)}
+                                    {props.preexistingAgent.name}
+                                </a>
+                            </div>
+                        ) : (
+                            <div className="flex items-center relative top-2">
+                                {getIconFromIconName("lightbulb", "orange")}
+                                Chat Options
+                            </div>
+                        )
+                    }
                 </SidebarHeader>
-                <SidebarGroup key={"test"} className="border-b last:border-none">
+                <SidebarGroup key={"knowledge"} className="border-b last:border-none">
                     <SidebarGroupContent className="gap-0">
                         <SidebarMenu className="p-0 m-0">
-                            <SidebarMenuItem key={"item4"} className="list-none">
-                                <span>Custom Instructions</span>
-                                <Textarea className="w-full h-32" />
+                            {
+                                props.preexistingAgent && props.preexistingAgent.has_files ? (
+                                    <SidebarMenuItem key={"agent_knowledge"} className="list-none">
+                                        <div className="flex items-center space-x-2 rounded-full">
+                                            <div className="text-muted-foreground"><Sparkle /></div>
+                                            <div className="text-muted-foreground text-sm">Using custom knowledge base</div>
+                                        </div>
+                                    </SidebarMenuItem>
+                                ) : null
+                            }
+                        </SidebarMenu>
+                    </SidebarGroupContent>
+                </SidebarGroup>
+                <SidebarGroup key={"instructions"}>
+                    <SidebarGroupContent>
+                        <SidebarGroupLabel>Custom Instructions</SidebarGroupLabel>
+                        <SidebarMenu className="p-0 m-0">
+                            <SidebarMenuItem className="list-none">
+                                <Textarea
+                                    className="w-full h-32"
+                                    value={customPrompt}
+                                    onChange={(e) => setCustomPrompt(e.target.value)}
+                                    readOnly={!isEditable}
+                                    disabled={!isEditable} />
                             </SidebarMenuItem>
-                            <SidebarMenuItem key={"item"} className="list-none">
-                                <SidebarMenuButton>
-                                    <Bell /> <span>Model</span>
-                                </SidebarMenuButton>
-                                <ModelSelector />
+                        </SidebarMenu>
+                    </SidebarGroupContent>
+                </SidebarGroup>
+                <SidebarGroup key={"model"}>
+                    <SidebarGroupContent>
+                        <SidebarGroupLabel>Model</SidebarGroupLabel>
+                        <SidebarMenu className="p-0 m-0">
+                            <SidebarMenuItem key={"model"} className="list-none">
+                                <ModelSelector
+                                    disabled={!isEditable}
+                                    onSelect={(model) => setSelectedModel(model.name)}
+                                    selectedModel={selectedModel}
+                                />
                             </SidebarMenuItem>
-                            <SidebarMenuItem key={"item1"} className="list-none">
-                                <SidebarMenuButton>
-                                    <Bell /> <span>Input Tools</span>
-                                </SidebarMenuButton>
-                                <DropdownMenu>
-                                    <DropdownMenuTrigger asChild>
-                                        <Button variant="outline">Input Tools</Button>
-                                    </DropdownMenuTrigger>
-                                    <DropdownMenuContent className="w-56">
-                                        <DropdownMenuLabel>Input Tool Options</DropdownMenuLabel>
-                                        <DropdownMenuSeparator />
-                                        {
-                                            Object.entries(agentConfigurationOptions?.input_tools ?? {}).map(([key, value]) => {
-                                                return (
-                                                    <DropdownMenuCheckboxItem
-                                                        checked={true}
-                                                        onCheckedChange={() => { }}
-                                                    >
-                                                        {key}
-                                                    </DropdownMenuCheckboxItem>
-                                                );
-                                            }
-                                            )
-                                        }
-                                    </DropdownMenuContent>
-                                </DropdownMenu>
-                            </SidebarMenuItem>
-                            <SidebarMenuItem key={"item2"} className="list-none">
-                                <SidebarMenuButton>
-                                    <Bell /> <span>Output Tools</span>
-                                </SidebarMenuButton>
-                                <DropdownMenu>
-                                    <DropdownMenuTrigger asChild>
-                                        <Button variant="outline">Output Tools</Button>
-                                    </DropdownMenuTrigger>
-                                    <DropdownMenuContent className="w-56">
-                                        <DropdownMenuLabel>Output Tool Options</DropdownMenuLabel>
-                                        <DropdownMenuSeparator />
-                                        {
-                                            Object.entries(agentConfigurationOptions?.output_modes ?? {}).map(([key, value]) => {
-                                                return (
-                                                    <DropdownMenuCheckboxItem
-                                                        checked={true}
-                                                        onCheckedChange={() => { }}
-                                                    >
-                                                        {key}
-                                                    </DropdownMenuCheckboxItem>
-                                                );
-                                            }
-                                            )
-                                        }
-                                    </DropdownMenuContent>
-                                </DropdownMenu>
-                            </SidebarMenuItem>
-                            <SidebarMenuItem key={"item3"} className="list-none">
+                        </SidebarMenu>
+                    </SidebarGroupContent>
+                </SidebarGroup>
+                <Collapsible defaultOpen className="group/collapsible">
+                    <SidebarGroup>
+                        <SidebarGroupLabel asChild>
+                            <CollapsibleTrigger>
+                                Tools
+                                <CaretCircleDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+                            </CollapsibleTrigger>
+                        </SidebarGroupLabel>
+                        <CollapsibleContent>
+                            <SidebarGroupContent>
+                                {
+                                    Object.entries(agentConfigurationOptions?.input_tools ?? {}).map(([key, value]) => {
+                                        return (
+                                            <Tooltip>
+                                                <TooltipTrigger key={key} asChild>
+                                                    <div className="flex items-center space-x-2 py-1 justify-between">
+                                                        <Label htmlFor={key} className="flex items-center gap-2 text-accent-foreground p-1 cursor-pointer">
+                                                            {getIconForSlashCommand(key)}
+                                                            <p className="text-sm my-auto flex items-center">
+                                                                {key}
+                                                            </p>
+                                                        </Label>
+                                                        <Checkbox
+                                                            id={key}
+                                                            className={`${isEditable ? "cursor-pointer" : ""}`}
+                                                            checked={isValueChecked(key, props.preexistingAgent?.input_tools)}
+                                                            onCheckedChange={() => { }}
+                                                            disabled={!isEditable}
+                                                        >
+                                                            {key}
+                                                        </Checkbox>
+                                                    </div>
+                                                </TooltipTrigger>
+                                                <TooltipContent sideOffset={5} side="left" align="start" className="text-sm bg-background text-foreground shadow-sm border border-slate-500 border-opacity-20 p-2 rounded-lg">
+                                                    {value}
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        );
+                                    }
+                                    )
+                                }
+                                {
+                                    Object.entries(agentConfigurationOptions?.output_modes ?? {}).map(([key, value]) => {
+                                        return (
+                                            <Tooltip>
+                                                <TooltipTrigger key={key} asChild>
+                                                    <div className="flex items-center space-x-2 py-1 justify-between">
+                                                        <Label htmlFor={key} className="flex items-center gap-2 p-1 rounded-lg cursor-pointer">
+                                                            {getIconForSlashCommand(key)}
+                                                            <p className="text-sm my-auto flex items-center">
+                                                                {key}
+                                                            </p>
+                                                        </Label>
+                                                        <Checkbox
+                                                            id={key}
+                                                            className={`${isEditable ? "cursor-pointer" : ""}`}
+                                                            checked={isValueChecked(key, props.preexistingAgent?.output_modes)}
+                                                            onCheckedChange={() => { }}
+                                                            disabled={!isEditable}
+                                                        >
+                                                            {key}
+                                                        </Checkbox>
+                                                    </div>
+                                                </TooltipTrigger>
+                                                <TooltipContent sideOffset={5} side="left" align="start" className="text-sm bg-background text-foreground shadow-sm border border-slate-500 border-opacity-20 p-2 rounded-lg">
+                                                    {value}
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        );
+                                    }
+                                    )
+                                }
+                            </SidebarGroupContent>
+                        </CollapsibleContent>
+                    </SidebarGroup>
+                </Collapsible>
+                <SidebarGroup key={"files"}>
+                    <SidebarGroupContent>
+                        <SidebarGroupLabel>Files</SidebarGroupLabel>
+                        <SidebarMenu className="p-0 m-0">
+                            <SidebarMenuItem key={"files-conversation"} className="list-none">
                                 <FilesMenu
                                     conversationId={props.conversationId}
                                     uploadedFiles={[]}
@@ -141,6 +235,52 @@ function ChatSidebarInternal({ ...props }: ChatSideBarProps) {
                     </SidebarGroupContent>
                 </SidebarGroup>
             </SidebarContent>
+            <SidebarFooter key={"actions"}>
+                <SidebarMenu className="p-0 m-0">
+
+                    {
+                        (props.preexistingAgent && props.preexistingAgent.is_creator) ? (
+                            <SidebarMenuItem>
+                                <SidebarMenuButton asChild>
+                                    <Button
+                                        className="w-full"
+                                        variant={"ghost"}
+                                        onClick={() => window.location.href = `/agents?agent=${props.preexistingAgent?.slug}`}
+                                    >
+                                        Manage
+                                    </Button>
+                                </SidebarMenuButton>
+                            </SidebarMenuItem>
+                        ) :
+                            <>
+                                <SidebarMenuItem>
+                                    <SidebarMenuButton asChild>
+                                        <Button
+                                            className="w-full"
+                                            onClick={() => { }}
+                                            variant={"ghost"}
+                                            disabled={!isEditable}
+                                        >
+                                            Reset
+                                        </Button>
+                                    </SidebarMenuButton>
+                                </SidebarMenuItem>
+                                <SidebarMenuItem>
+                                    <SidebarMenuButton asChild>
+                                        <Button
+                                            className="w-full"
+                                            variant={"secondary"}
+                                            onClick={() => { }}
+                                            disabled={!isEditable}
+                                        >
+                                            Save
+                                        </Button>
+                                    </SidebarMenuButton>
+                                </SidebarMenuItem>
+                            </>
+                    }
+                </SidebarMenu>
+            </SidebarFooter>
         </Sidebar>
     )
 }