diff --git a/src/interface/web/app/agents/page.tsx b/src/interface/web/app/agents/page.tsx
index 079006f7..89deb663 100644
--- a/src/interface/web/app/agents/page.tsx
+++ b/src/interface/web/app/agents/page.tsx
@@ -140,7 +140,11 @@ function CreateAgentCard(props: CreateAgentCardProps) {
                     Create Agent
                 </div>
             </DialogTrigger>
-            <DialogContent className={"lg:max-w-screen-lg overflow-y-scroll max-h-screen"}>
+            <DialogContent
+                className={
+                    "lg:max-w-screen-lg py-4 overflow-y-scroll h-full md:h-4/6 rounded-lg flex flex-col"
+                }
+            >
                 <DialogHeader>Create Agent</DialogHeader>
                 {!props.userProfile && showLoginPrompt && (
                     <LoginPrompt
@@ -300,35 +304,37 @@ export default function Agents() {
                             <div className={`pt-6 md:pt-8 flex justify-between`}>
                                 <h1 className="text-3xl flex items-center">Agents</h1>
                                 <div className="ml-auto float-right border p-2 pt-3 rounded-xl font-bold hover:bg-stone-100 dark:hover:bg-neutral-900">
-                                    {authenticatedData && (
-                                        <CreateAgentCard
-                                            data={{
-                                                slug: "",
-                                                name: "",
-                                                persona: "",
-                                                color: "",
-                                                icon: "",
-                                                privacy_level: "private",
-                                                managed_by_admin: false,
-                                                chat_model: "",
-                                                input_tools: [],
-                                                output_modes: [],
-                                            }}
-                                            userProfile={authenticatedData}
-                                            isMobileWidth={isMobileWidth}
-                                            filesOptions={filesData || []}
-                                            modelOptions={userConfig?.chat_model_options || []}
-                                            selectedChatModelOption={defaultModelOption?.name || ""}
-                                            isSubscribed={isSubscribed}
-                                            setAgentChangeTriggered={setAgentChangeTriggered}
-                                            inputToolOptions={
-                                                agentConfigurationOptions?.input_tools || {}
-                                            }
-                                            outputModeOptions={
-                                                agentConfigurationOptions?.output_modes || {}
-                                            }
-                                        />
-                                    )}
+                                    <CreateAgentCard
+                                        data={{
+                                            slug: "",
+                                            name: "",
+                                            persona: "",
+                                            color: "",
+                                            icon: "",
+                                            privacy_level: "private",
+                                            managed_by_admin: false,
+                                            chat_model: "",
+                                            input_tools: [],
+                                            output_modes: [],
+                                        }}
+                                        userProfile={
+                                            authenticationLoading
+                                                ? null
+                                                : (authenticatedData ?? null)
+                                        }
+                                        isMobileWidth={isMobileWidth}
+                                        filesOptions={filesData || []}
+                                        modelOptions={userConfig?.chat_model_options || []}
+                                        selectedChatModelOption={defaultModelOption?.name || ""}
+                                        isSubscribed={isSubscribed}
+                                        setAgentChangeTriggered={setAgentChangeTriggered}
+                                        inputToolOptions={
+                                            agentConfigurationOptions?.input_tools || {}
+                                        }
+                                        outputModeOptions={
+                                            agentConfigurationOptions?.output_modes || {}
+                                        }
+                                    />
                                 </div>
                             </div>
                             {showLoginPrompt && (
diff --git a/src/interface/web/app/components/agentCard/agentCard.tsx b/src/interface/web/app/components/agentCard/agentCard.tsx
index ed77425e..f90be51f 100644
--- a/src/interface/web/app/components/agentCard/agentCard.tsx
+++ b/src/interface/web/app/components/agentCard/agentCard.tsx
@@ -429,7 +429,7 @@ export function AgentCard(props: AgentCardProps) {
                         {props.editCard ? (
                             <DialogContent
                                 className={
-                                    "lg:max-w-screen-lg py-4 overflow-y-scroll h-4/6 rounded-lg flex flex-col"
+                                    "lg:max-w-screen-lg py-4 overflow-y-scroll h-full md:h-4/6 rounded-lg flex flex-col"
                                 }
                             >
                                 <DialogTitle>
@@ -535,6 +535,8 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
     const basicFields = [
         { name: "name", label: "Name" },
         { name: "persona", label: "Personality" },
+        { name: "color", label: "Color" },
+        { name: "icon", label: "Icon" },
     ];
 
     const toolsFields = [
@@ -545,17 +547,15 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
     const knowledgeBaseFields = [{ name: "files", label: "Knowledge Base" }];
 
     const customizationFields = [
-        { name: "color", label: "Color" },
-        { name: "icon", label: "Icon" },
         { name: "chat_model", label: "Chat Model" },
         { name: "privacy_level", label: "Privacy Level" },
     ];
 
     const formGroups = [
-        { fields: basicFields, label: "Basic Settings", tabName: "basic" },
-        { fields: customizationFields, label: "Customization & Access", tabName: "customize" },
-        { fields: knowledgeBaseFields, label: "Knowledge Base", tabName: "knowledge" },
-        { fields: toolsFields, label: "Tools Settings", tabName: "tools" },
+        { fields: basicFields, label: "1. Basic Settings", tabName: "basic" },
+        { fields: customizationFields, label: "2. Model & Privacy", tabName: "customize" },
+        { fields: knowledgeBaseFields, label: "3. Knowledge Base", tabName: "knowledge" },
+        { fields: toolsFields, label: "4. Tools", tabName: "tools" },
     ];
 
     const fileInputRef = useRef<HTMLInputElement>(null);
@@ -754,7 +754,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                         control={props.form.control}
                         name="chat_model"
                         render={({ field }) => (
-                            <FormItem className="my-3 grid gap-2">
+                            <FormItem className="my-2 grid gap-2">
                                 <FormLabel>Chat Model</FormLabel>
                                 <FormDescription>
                                     {!props.isSubscribed ? (
@@ -801,7 +801,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                         control={props.form.control}
                         name="privacy_level"
                         render={({ field }) => (
-                            <FormItem className="my-3 grid gap-2">
+                            <FormItem className="my-2 grid gap-2">
                                 <FormLabel>
                                     <div>Privacy Level</div>
                                 </FormLabel>
@@ -858,7 +858,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                         control={props.form.control}
                         name="color"
                         render={({ field }) => (
-                            <FormItem className="space-y-3">
+                            <FormItem className="space-y-3 my-2">
                                 <FormLabel>Color</FormLabel>
                                 <Select onValueChange={field.onChange} defaultValue={field.value}>
                                     <FormControl>
@@ -892,7 +892,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                         control={props.form.control}
                         name="icon"
                         render={({ field }) => (
-                            <FormItem className="space-y-3">
+                            <FormItem className="space-y-3 my-2">
                                 <FormLabel>Icon</FormLabel>
                                 <Select onValueChange={field.onChange} defaultValue={field.value}>
                                     <FormControl>
@@ -928,12 +928,12 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                         control={props.form.control}
                         name="persona"
                         render={({ field }) => (
-                            <FormItem className="space-y-1 grid gap-2">
+                            <FormItem className="space-y-1 my-2 grid gap-2">
                                 <FormLabel>Personality</FormLabel>
                                 <FormDescription>
                                     What is the personality, thought process, or tuning of this
-                                    agent? Get creative; this is how you can influence the agent
-                                    constitution.
+                                    agent? This is where you can provide any instructions to the
+                                    agent.
                                 </FormDescription>
                                 <FormControl>
                                     <Textarea
@@ -954,7 +954,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                         control={props.form.control}
                         name="files"
                         render={({ field }) => (
-                            <FormItem className="flex flex-col gap-2">
+                            <FormItem className="my-2 flex flex-col gap-2">
                                 <FormLabel>Knowledge Base</FormLabel>
                                 <FormDescription>
                                     Which information should be part of its digital brain?{" "}
@@ -1259,7 +1259,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
         <Form {...props.form}>
             <form
                 onSubmit={props.form.handleSubmit(handleSubmit)}
-                className="space-y-6 h-full flex flex-col justify-between"
+                className="space-y-6 pb-4 h-full flex flex-col justify-between"
             >
                 <Tabs defaultValue="basic" value={formGroups[currentStep].tabName}>
                     <TabsList className="grid grid-cols-2 md:grid-cols-4 gap-2 h-fit">
@@ -1267,13 +1267,15 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                             <TabsTrigger
                                 key={group.tabName}
                                 value={group.tabName}
+                                className={`text-center ${areRequiredFieldsCompletedForCurrentStep(group) ? "" : "text-red-500"}`}
                                 onClick={() =>
                                     setCurrentStep(
                                         formGroups.findIndex((g) => g.tabName === group.tabName),
                                     )
                                 }
                             >
-                                {group.label}
+                                {group.label}{" "}
+                                {!areRequiredFieldsCompletedForCurrentStep(group) && "*"}
                             </TabsTrigger>
                         ))}
                     </TabsList>
@@ -1304,7 +1306,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
                             }
                             className={`items-center ${isSaving ? "bg-stone-100 dark:bg-neutral-900" : ""} text-white ${colorOptionClassName}`}
                         >
-                            Next
+                            Continue
                             <ArrowRight className="ml-2 h-4 w-4" />
                         </Button>
                     ) : (
diff --git a/src/interface/web/app/components/allConversations/allConversations.tsx b/src/interface/web/app/components/allConversations/allConversations.tsx
index 29c43e48..52c6806e 100644
--- a/src/interface/web/app/components/allConversations/allConversations.tsx
+++ b/src/interface/web/app/components/allConversations/allConversations.tsx
@@ -883,13 +883,9 @@ const fetchChatHistory = async (url: string) => {
 };
 
 export const useChatSessionsFetchRequest = (url: string) => {
-    const { data, error } = useSWR<ChatHistory[]>(url, fetchChatHistory);
+    const { data, isLoading, error } = useSWR<ChatHistory[]>(url, fetchChatHistory);
 
-    return {
-        data,
-        isLoading: !error && !data,
-        isError: error,
-    };
+    return { data, isLoading, error };
 };
 
 interface SidePanelProps {
@@ -965,10 +961,12 @@ export default function AllConversations(props: SidePanelProps) {
 
     return (
         <SidebarGroup>
-            <SidebarGroupLabel className="!p-0 m-0 px-0">Conversations</SidebarGroupLabel>
             <div className={`flex justify-between flex-col`}>
                 {authenticatedData && (
                     <>
+                        <SidebarGroupLabel className="!p-0 m-0 px-0">
+                            Conversations
+                        </SidebarGroupLabel>
                         <div
                             className={`${props.sideBarOpen ? "border-l-2 border-light-blue-500 border-opacity-25 " : ""}`}
                         >
diff --git a/src/interface/web/app/components/appSidebar/appSidebar.tsx b/src/interface/web/app/components/appSidebar/appSidebar.tsx
index 811eb799..d80314b9 100644
--- a/src/interface/web/app/components/appSidebar/appSidebar.tsx
+++ b/src/interface/web/app/components/appSidebar/appSidebar.tsx
@@ -20,9 +20,12 @@ import { Gear } from "@phosphor-icons/react/dist/ssr";
 import { Plus } from "@phosphor-icons/react";
 import { useEffect, useState } from "react";
 import AllConversations from "../allConversations/allConversations";
-import NavMenu from "../navMenu/navMenu";
+import FooterMenu from "../navMenu/navMenu";
 import { useSidebar } from "@/components/ui/sidebar";
 import { useIsMobileWidth } from "@/app/common/utils";
+import { UserPlusIcon } from "lucide-react";
+import { useAuthenticatedData } from "@/app/common/auth";
+import LoginPrompt from "../loginPrompt/loginPrompt";
 
 // Menu items.
 const items = [
@@ -63,12 +66,21 @@ interface AppSidebarProps {
 
 export function AppSidebar(props: AppSidebarProps) {
     const isMobileWidth = useIsMobileWidth();
+    const { data, isLoading, error } = useAuthenticatedData();
 
     const { state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar } =
         useSidebar();
 
+    const [showLoginPrompt, setShowLoginPrompt] = useState(false);
+
+    useEffect(() => {
+        if (!isLoading && !data) {
+            setShowLoginPrompt(true);
+        }
+    }, [isLoading, data]);
+
     return (
-        <Sidebar collapsible={"icon"} variant="sidebar">
+        <Sidebar collapsible={"icon"} variant="sidebar" className="md:py-2">
             <SidebarHeader>
                 <SidebarMenu className="p-0 m-0">
                     <SidebarMenuItem className="p-0 m-0">
@@ -82,7 +94,6 @@ export function AppSidebar(props: AppSidebarProps) {
                             <SidebarMenuButton asChild>
                                 <a className="flex items-center gap-2 no-underline" href="/">
                                     <KhojLogo className="w-14 h-auto" />
-                                    <span className="text-lg">Khoj</span>
                                 </a>
                             </SidebarMenuButton>
                         )}
@@ -90,9 +101,29 @@ export function AppSidebar(props: AppSidebarProps) {
                 </SidebarMenu>
             </SidebarHeader>
             <SidebarContent>
+                {showLoginPrompt && (
+                    <LoginPrompt
+                        onOpenChange={(isOpen) => setShowLoginPrompt(isOpen)}
+                        isMobileWidth={isMobileWidth}
+                    />
+                )}
                 <SidebarGroup>
                     <SidebarGroupContent>
                         <SidebarMenu className="p-0 m-0">
+                            {!isLoading && !data && (
+                                <SidebarMenuItem className="p-0 m-0 list-none">
+                                    <SidebarMenuButton
+                                        asChild
+                                        variant={"default"}
+                                        onClick={() => setShowLoginPrompt(true)}
+                                    >
+                                        <div>
+                                            <UserPlusIcon />
+                                            <span>Sign up to get started</span>
+                                        </div>
+                                    </SidebarMenuButton>
+                                </SidebarMenuItem>
+                            )}
                             {items.map((item) => (
                                 <SidebarMenuItem key={item.title} className="p-0 list-none m-0">
                                     <SidebarMenuButton asChild>
@@ -117,7 +148,7 @@ export function AppSidebar(props: AppSidebarProps) {
                 </SidebarGroup>
             </SidebarContent>
             <SidebarFooter>
-                <NavMenu sideBarIsOpen={open} />
+                <FooterMenu sideBarIsOpen={open} />
             </SidebarFooter>
         </Sidebar>
     );
diff --git a/src/interface/web/app/components/navMenu/navMenu.tsx b/src/interface/web/app/components/navMenu/navMenu.tsx
index 7e780146..434a9e2e 100644
--- a/src/interface/web/app/components/navMenu/navMenu.tsx
+++ b/src/interface/web/app/components/navMenu/navMenu.tsx
@@ -43,7 +43,7 @@ interface NavMenuProps {
     sideBarIsOpen: boolean;
 }
 
-export default function NavMenu({ sideBarIsOpen }: NavMenuProps) {
+export default function FooterMenu({ sideBarIsOpen }: NavMenuProps) {
     const {
         data: userData,
         error: authenticationError,
@@ -106,13 +106,13 @@ export default function NavMenu({ sideBarIsOpen }: NavMenuProps) {
                                     >
                                         <AvatarImage src={userData?.photo} alt="user profile" />
                                         <AvatarFallback className="bg-transparent hover:bg-muted">
-                                            {userData?.username[0].toUpperCase()}
+                                            {userData.username[0].toUpperCase()}
                                         </AvatarFallback>
                                     </Avatar>
                                     {sideBarIsOpen && (
                                         <>
                                             <p>{userData?.username}</p>
-                                            <ChevronUp className="w-6 h-6" />
+                                            <ChevronUp className="w-6 h-6 ml-auto" />
                                         </>
                                     )}
                                 </span>
diff --git a/src/interface/web/app/layout.tsx b/src/interface/web/app/layout.tsx
index 8fb49fc1..3d2cd4f7 100644
--- a/src/interface/web/app/layout.tsx
+++ b/src/interface/web/app/layout.tsx
@@ -3,9 +3,6 @@ import { noto_sans, noto_sans_arabic } from "@/app/fonts";
 import "./globals.css";
 import { ContentSecurityPolicy } from "./common/layoutHelper";
 
-import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
-import { AppSidebar } from "@/app/components/appSidebar/appSidebar";
-
 export const metadata: Metadata = {
     title: "Khoj AI - Ask Anything",
     description: