diff --git a/src/interface/web/app/agents/agents.module.css b/src/interface/web/app/agents/agents.module.css
index 8433a88f..73cbd7a3 100644
--- a/src/interface/web/app/agents/agents.module.css
+++ b/src/interface/web/app/agents/agents.module.css
@@ -46,7 +46,7 @@ div.agentList {
 }
 
 
-@media only screen and (max-width: 700px) {
+@media only screen and (max-width: 768px) {
     div.agentList {
         width: 100%;
         padding: 0;
@@ -54,4 +54,9 @@ div.agentList {
         margin-left: auto;
         grid-template-columns: 1fr;
     }
+
+    div.sidePanel {
+        position: relative;
+        height: 100%;
+    }
 }
diff --git a/src/interface/web/app/agents/page.tsx b/src/interface/web/app/agents/page.tsx
index 5e68a0b9..8a9f955a 100644
--- a/src/interface/web/app/agents/page.tsx
+++ b/src/interface/web/app/agents/page.tsx
@@ -266,9 +266,6 @@ export default function Agents() {
 
     return (
         <main className={`${styles.main} w-full mx-auto`}>
-            <div className="float-right w-fit h-fit">
-                <NavMenu selected="Agents" />
-            </div>
             {
                 showLoginPrompt &&
                 <LoginPrompt
@@ -284,7 +281,7 @@ export default function Agents() {
                     />
                 </div>
                 <div className={`mx-auto ${isMobileWidth ? "w-11/12" : "w-1/2"} pt-4`}>
-                    <div className="pt-8 flex justify-between align-middle w-full">
+                    <div className={`pt-4 md:pt-8 flex justify-between align-middle w-full`}>
                         <h1 className="text-3xl">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">
                             <TooltipProvider>
diff --git a/src/interface/web/app/automations/automations.module.css b/src/interface/web/app/automations/automations.module.css
index 99f094c3..f0c35244 100644
--- a/src/interface/web/app/automations/automations.module.css
+++ b/src/interface/web/app/automations/automations.module.css
@@ -28,4 +28,9 @@ div.sidePanel {
     div.pageLayout {
         max-width: 90vw;
     }
+
+    div.sidePanel {
+        position: relative;
+        height: 100%;
+    }
 }
diff --git a/src/interface/web/app/automations/page.tsx b/src/interface/web/app/automations/page.tsx
index 9416cee7..c933f8fd 100644
--- a/src/interface/web/app/automations/page.tsx
+++ b/src/interface/web/app/automations/page.tsx
@@ -936,9 +936,6 @@ export default function Automations() {
 
     return (
         <main className={`${styles.main} w-full ml-auto mr-auto`}>
-            <div className="float-right w-fit h-fit">
-                <NavMenu selected="Automations" />
-            </div>
             <div className={`grid w-full ml-auto mr-auto`}>
                 <div className={`${styles.sidePanel} top-0`}>
                     <SidePanel
@@ -949,7 +946,7 @@ export default function Automations() {
                 </div>
                 <div className={`${styles.pageLayout} w-full`}>
                     <div className='py-4 sm:flex sm:justify-between grid gap-1'>
-                        <h1 className="text-3xl">Automations</h1>
+                        <h1 className="text-3xl pt-4">Automations</h1>
                         <div className='flex flex-wrap gap-2 items-center md:justify-start justify-end'>
                             {
                                 authenticatedData ? (
diff --git a/src/interface/web/app/chat/page.tsx b/src/interface/web/app/chat/page.tsx
index 1768a228..702dc894 100644
--- a/src/interface/web/app/chat/page.tsx
+++ b/src/interface/web/app/chat/page.tsx
@@ -196,7 +196,7 @@ export default function Chat() {
                     }
 
                     // Track context used for chat response. References are rendered at the end of the chat
-                    ({context, onlineContext} = processMessageChunk(event, currentMessage, context, onlineContext));
+                    ({ context, onlineContext } = processMessageChunk(event, currentMessage, context, onlineContext));
 
                     setMessages([...messages]);
                 }
@@ -231,16 +231,34 @@ export default function Chat() {
             <title>
                 {title}
             </title>
-            <div>
-                <SidePanel
-                    conversationId={conversationId}
-                    uploadedFiles={uploadedFiles}
-                    isMobileWidth={isMobileWidth}
-                />
-            </div>
+            {
+                !isMobileWidth &&
+                <div>
+                    <SidePanel
+                        conversationId={conversationId}
+                        uploadedFiles={uploadedFiles}
+                        isMobileWidth={isMobileWidth}
+                    />
+                </div>
+            }
             <div className={styles.chatBox}>
-                <NavMenu selected="Chat" title={title} />
+                {
+                    isMobileWidth &&
+                    <div>
+                        <SidePanel
+                            conversationId={conversationId}
+                            uploadedFiles={uploadedFiles}
+                            isMobileWidth={isMobileWidth}
+                        />
+                    </div>
+                }
                 <div className={styles.chatBoxBody}>
+                    {
+                        !isMobileWidth &&
+                        <div className={`text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mr-8`}>
+                            {title && <h2 className={`text-lg text-ellipsis whitespace-nowrap overflow-x-hidden pt-4`}>{title}</h2>}
+                        </div>
+                    }
                     <Suspense fallback={<Loading />}>
                         <ChatBodyData
                             isLoggedIn={authenticatedData !== null}
diff --git a/src/interface/web/app/components/navMenu/navMenu.module.css b/src/interface/web/app/components/navMenu/navMenu.module.css
index 7aff7e0a..a8debe78 100644
--- a/src/interface/web/app/components/navMenu/navMenu.module.css
+++ b/src/interface/web/app/components/navMenu/navMenu.module.css
@@ -17,10 +17,6 @@ a.selected {
 
 div.titleBar {
     display: flex;
-    padding-left: 12px;
-    padding-right: 12px;
-    padding-top: 16px;
-    padding-bottom: 16px;
     justify-content: space-between;
     align-content: space-evenly;
     align-items: start;
diff --git a/src/interface/web/app/components/navMenu/navMenu.tsx b/src/interface/web/app/components/navMenu/navMenu.tsx
index 386a3afc..859b01a8 100644
--- a/src/interface/web/app/components/navMenu/navMenu.tsx
+++ b/src/interface/web/app/components/navMenu/navMenu.tsx
@@ -23,35 +23,16 @@ import {
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Moon, Sun, UserCircle, User, Robot, MagnifyingGlass, Question, GearFine, ArrowRight } from '@phosphor-icons/react';
-import { KhojLogoType } from '../logo/khogLogo';
 
-
-interface NavMenuProps {
-    selected: string;
-    showLogo?: boolean;
-    title?: string;
-}
-
-export default function NavMenu(props: NavMenuProps) {
+export default function NavMenu() {
 
     const userData = useAuthenticatedData();
-    const [displayTitle, setDisplayTitle] = useState<string | undefined>(props.title);
-
     const [isMobileWidth, setIsMobileWidth] = useState(false);
     const [darkMode, setDarkMode] = useState(false);
     const [initialLoadDone, setInitialLoadDone] = useState(false);
 
     useEffect(() => {
         setIsMobileWidth(window.innerWidth < 768);
-        if (props.title) {
-            setDisplayTitle(props.title);
-        } else if (!props.title) {
-            setDisplayTitle(undefined);
-        }
-
-    }, [props.title]);
-
-    useEffect(() => {
 
         window.addEventListener('resize', () => {
             setIsMobileWidth(window.innerWidth < 768);
@@ -94,15 +75,6 @@ export default function NavMenu(props: NavMenuProps) {
 
     return (
         <div className={styles.titleBar}>
-            <div className={`text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mr-8`}>
-                {displayTitle && <h2 className={`text-lg text-ellipsis whitespace-nowrap overflow-x-hidden`} >{displayTitle}</h2>}
-                {
-                    !displayTitle && props.showLogo &&
-                    <Link href='/'>
-                        <KhojLogoType />
-                    </Link>
-                }
-            </div>
             {
                 isMobileWidth ?
                     <DropdownMenu>
diff --git a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
index b02ea754..00e5e26c 100644
--- a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
+++ b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
@@ -76,6 +76,7 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 import { modifyFileFilterForConversation } from "@/app/common/chatFunctions";
 import { ScrollAreaScrollbar } from "@radix-ui/react-scroll-area";
 import { KhojLogo, KhojLogoType } from "@/app/components/logo/khogLogo";
+import NavMenu from "../navMenu/navMenu";
 
 // Define a fetcher function
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
@@ -660,11 +661,8 @@ export default function SidePanel(props: SidePanelProps) {
     }, [chatSessions]);
 
     return (
-        <div className={`${styles.panel} ${enabled ? styles.expanded : styles.collapsed} mt-1`}>
+        <div className={`${styles.panel} ${enabled ? styles.expanded : styles.collapsed} ${props.isMobileWidth ? 'mt-0' : 'mt-1'}`}>
             <div className={`flex justify-between flex-row`}>
-                <Link href='/'>
-                    {props.isMobileWidth && <KhojLogo /> || <KhojLogoType />}
-                </Link>
                 {
                     authenticatedData && props.isMobileWidth ?
                         <Drawer open={enabled} onOpenChange={(open) => {
@@ -672,7 +670,7 @@ export default function SidePanel(props: SidePanelProps) {
                             setEnabled(open);
                         }
                         }>
-                            <DrawerTrigger><Sidebar className="h-4 w-4 mx-2" weight="thin" /></DrawerTrigger>
+                            <DrawerTrigger><Sidebar className="h-6 w-6 mx-2" weight="thin" /></DrawerTrigger>
                             <DrawerContent>
                                 <DrawerHeader>
                                     <DrawerTitle>Sessions and Files</DrawerTitle>
@@ -698,15 +696,33 @@ export default function SidePanel(props: SidePanelProps) {
                             </DrawerContent>
                         </Drawer>
                         :
-                        <div className={`${enabled ? 'flex items-center flex-row gap-2' : 'flex'}`}>
-                            <Link className={`ml-4 mr-4`} href="/">
-                                {enabled ? <NotePencil className="h-6 w-6" /> : <NotePencil className="h-6 w-6" color="gray" />}
+                        <div className={`flex justify-between flex-row`}>
+                            <Link href='/' className="content-center">
+                                <KhojLogoType />
                             </Link>
-                            <button className={styles.button} onClick={() => setEnabled(!enabled)}>
-                                {enabled ? <Sidebar className="h-6 w-6" /> : <Sidebar className="h-6 w-6" color="gray" />}
-                            </button>
+                            <div className={`${enabled ? 'flex items-center flex-row gap-2' : 'flex items-center'}`}>
+                                <Link className={`ml-4 mr-4`} href="/">
+                                    {enabled ? <NotePencil className="h-6 w-6" /> : <NotePencil className="h-6 w-6" color="gray" />}
+                                </Link>
+                                <button className={styles.button} onClick={() => setEnabled(!enabled)}>
+                                    {enabled ? <Sidebar className="h-6 w-6" /> : <Sidebar className="h-6 w-6" color="gray" />}
+                                </button>
+                            </div>
+                            <div className="fixed right-0 w-fit h-fit">
+                                <NavMenu />
+                            </div>
                         </div>
                 }
+                {
+                    props.isMobileWidth &&
+                    <Link href='/' className="content-center">
+                        <KhojLogoType />
+                    </Link>
+                }
+                {
+                    props.isMobileWidth &&
+                    <NavMenu />
+                }
             </div>
             {
                 authenticatedData && !props.isMobileWidth && enabled &&
diff --git a/src/interface/web/app/components/sidePanel/sidePanel.module.css b/src/interface/web/app/components/sidePanel/sidePanel.module.css
index 77fddd13..e984eb6a 100644
--- a/src/interface/web/app/components/sidePanel/sidePanel.module.css
+++ b/src/interface/web/app/components/sidePanel/sidePanel.module.css
@@ -123,9 +123,9 @@ div.modalSessionsList div.session {
 
 @media screen and (max-width: 768px) {
     div.panel {
-        padding: 0.5rem;
-        position: fixed;
-        width: fit-content;
+        padding: 0.25rem;
+        /* position: fixed; */
+        width: 100%;
     }
 
     div.expanded {
diff --git a/src/interface/web/app/page.module.css b/src/interface/web/app/page.module.css
index 32c89473..0f02c77a 100644
--- a/src/interface/web/app/page.module.css
+++ b/src/interface/web/app/page.module.css
@@ -78,7 +78,13 @@ div.chatBoxBody {
     display: grid;
     height: 100%;
     margin: auto;
-    grid-template-rows: auto 1fr;
+}
+
+div.homeGreetings {
+    display: grid;
+    height: 100%;
+    margin: auto;
+    grid-template-rows: 1fr 2fr;
 }
 
 
@@ -108,6 +114,10 @@ div.sidePanel {
         grid-template-rows: auto;
     }
 
+    div.sidePanel {
+        position: relative;
+    }
+
     div.chatBox {
         padding: 0;
     }
@@ -117,4 +127,8 @@ div.sidePanel {
         grid-template-columns: 1fr;
     }
 
+    div.homeGreetings {
+        grid-template-rows: auto;
+    }
+
 }
diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx
index c28eacda..82e4e192 100644
--- a/src/interface/web/app/page.tsx
+++ b/src/interface/web/app/page.tsx
@@ -6,7 +6,6 @@ import React, { useEffect, useState } from 'react';
 
 import SuggestionCard from './components/suggestions/suggestionCard';
 import SidePanel from './components/sidePanel/chatHistorySidePanel';
-import NavMenu from './components/navMenu/navMenu';
 import Loading from './components/loading/loading';
 import useSWR from 'swr';
 import Image from 'next/image';
@@ -157,8 +156,8 @@ function ChatBodyData(props: ChatBodyDataProps) {
     }
 
     return (
-        <div className={`${styles.chatBoxBody}`}>
-            <div className="w-full text-center">
+        <div className={`${styles.homeGreetings}`}>
+            <div className={`w-full text-center justify-end content-end`}>
                 <div className="items-center">
                     <h1 className="text-center pb-6 px-4 w-fit ml-auto mr-auto">{greeting}</h1>
                 </div>
@@ -218,7 +217,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
                     <button
                         onClick={shuffleSuggestionsCards}
                         className="m-2 p-1.5 rounded-lg dark:hover:bg-[var(--background-color)] hover:bg-stone-100 border border-stone-100 text-sm text-stone-500 dark:text-stone-300 dark:border-neutral-700">
-                        More Examples <ClockCounterClockwise className='h-4 w-4 inline' />
+                        More Ideas <ClockCounterClockwise className='h-4 w-4 inline' />
                     </button>
                 </div>
             </div>
@@ -310,7 +309,6 @@ export default function Home() {
                 />
             </div>
             <div className={`${styles.chatBox}`}>
-                <NavMenu selected="Chat" title={title}></NavMenu>
                 <div className={`${styles.chatBoxBody}`}>
                     <ChatBodyData
                         isLoggedIn={authenticatedData !== null}
diff --git a/src/interface/web/app/search/page.tsx b/src/interface/web/app/search/page.tsx
index cabab928..88d54ca4 100644
--- a/src/interface/web/app/search/page.tsx
+++ b/src/interface/web/app/search/page.tsx
@@ -5,7 +5,6 @@ import { Input } from '@/components/ui/input';
 import { useAuthenticatedData } from '../common/auth';
 import { useEffect, useRef, useState } from 'react';
 import SidePanel from '../components/sidePanel/chatHistorySidePanel';
-import NavMenu from '../components/navMenu/navMenu';
 import styles from './search.module.css';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
@@ -211,98 +210,96 @@ export default function Search() {
     console.log('searchResults', searchResults);
 
     return (
-        <div className={`${styles.searchLayout}`}>
-            <div className='h-full'>
+        <div>
+            <div className={`h-full ${styles.sidePanel}`}>
                 <SidePanel
                     conversationId={null}
                     uploadedFiles={[]}
                     isMobileWidth={isMobileWidth}
                 />
             </div>
-            <div className="md:w-3/4 sm:w-full mr-auto ml-auto">
-                <NavMenu title={title} selected='Chat' />
-                <div className='p-4 md:w-3/4 sm:w-full mr-auto ml-auto'>
-                    {
-                        isMobileWidth && <div className='font-bold'>Search</div>
-                    }
-                    <div className='flex justify-between items-center border-2 border-muted p-2 gap-4 rounded-lg'>
-                        <MagnifyingGlass className='inline m-2' />
-                        <Input
-                            autoFocus
-                            className='border-none'
-                            onChange={(e) => setSearchQuery(e.currentTarget.value)}
-                            onKeyDown={(e) => e.key === 'Enter' && search()}
-                            type="search"
-                            placeholder="Search Documents" />
-                        <button className='px-4 rounded' onClick={() => search()}>
-                            Find
-                        </button>
-                    </div>
-                    {
-                        focusSearchResult &&
-                        <div className='mt-4'>
-                            <Button onClick={() => setFocusSearchResult(null)} className='mb-4' variant={'outline'}>
-                                <ArrowLeft className='inline mr-2' />
-                                Back
-                            </Button>
-                            {focusNote(focusSearchResult)}
+            <div className={`${styles.searchLayout}`}>
+                <div className="md:w-3/4 sm:w-full mr-auto ml-auto pt-4 md:pt-8">
+                    <div className='p-4 md:w-3/4 sm:w-full mr-auto ml-auto'>
+                        <div className='flex justify-between items-center border-2 border-muted p-2 gap-4 rounded-lg'>
+                            <MagnifyingGlass className='inline m-2' />
+                            <Input
+                                autoFocus
+                                className='border-none'
+                                onChange={(e) => setSearchQuery(e.currentTarget.value)}
+                                onKeyDown={(e) => e.key === 'Enter' && search()}
+                                type="search"
+                                placeholder="Search Documents" />
+                            <button className='px-4 rounded' onClick={() => search()}>
+                                Find
+                            </button>
                         </div>
-                    }
-                    {
-                        !focusSearchResult && searchResults && searchResults.length > 0 &&
-                        <div className='mt-4'>
-                            <ScrollArea className="h-[80vh]">
-                                {
-                                    searchResults.map((result, index) => {
-                                        return (
-                                            <Note key={result["corpus-id"]}
-                                                note={result}
-                                                setFocusSearchResult={setFocusSearchResult} />
-                                        );
-                                    })
-                                }
-                            </ScrollArea>
-                        </div>
-                    }
-                    {
-                        searchResults == null &&
-                        <Card className='flex flex-col items-center justify-center border-none shadow-none'>
-                            <CardHeader className='flex flex-col items-center justify-center'>
-                                <CardDescription className='border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4'>
-                                    <FileMagnifyingGlass weight='fill' className='text-muted-foreground h-10 w-10' />
-                                </CardDescription>
-                                <CardTitle className='text-center'>
-                                    Search across your documents
-                                </CardTitle>
-                            </CardHeader>
-                            <CardContent className='text-muted-foreground items-center justify-center text-center flex'>
-                                <Lightbulb className='inline mr-2' /> {exampleQuery}
-                            </CardContent>
-                        </Card>
-                    }
-                    {
-                        searchResults && searchResults.length === 0 &&
-                        <Card className='flex flex-col items-center justify-center border-none shadow-none'>
-                            <CardHeader className='flex flex-col items-center justify-center'>
-                                <CardDescription className='border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4'>
-                                    <FileDashed weight='fill' className='text-muted-foreground h-10 w-10' />
-                                </CardDescription>
-                                <CardTitle className='text-center'>
-                                    No documents found
-                                </CardTitle>
-                            </CardHeader>
-                            <CardContent>
-                                <div className='text-muted-foreground items-center justify-center text-center flex'>
-                                    To use search, upload your docs to your account.
-                                </div>
-                                <Link href="https://docs.khoj.dev/data-sources/share_your_data" className='no-underline'>
-                                    <div className='mt-4 text-center text-secondary-foreground bg-secondary w-fit m-auto p-2 rounded-lg'>
-                                        Learn More
+                        {
+                            focusSearchResult &&
+                            <div className='mt-4'>
+                                <Button onClick={() => setFocusSearchResult(null)} className='mb-4' variant={'outline'}>
+                                    <ArrowLeft className='inline mr-2' />
+                                    Back
+                                </Button>
+                                {focusNote(focusSearchResult)}
+                            </div>
+                        }
+                        {
+                            !focusSearchResult && searchResults && searchResults.length > 0 &&
+                            <div className='mt-4'>
+                                <ScrollArea className="h-[80vh]">
+                                    {
+                                        searchResults.map((result, index) => {
+                                            return (
+                                                <Note key={result["corpus-id"]}
+                                                    note={result}
+                                                    setFocusSearchResult={setFocusSearchResult} />
+                                            );
+                                        })
+                                    }
+                                </ScrollArea>
+                            </div>
+                        }
+                        {
+                            searchResults == null &&
+                            <Card className='flex flex-col items-center justify-center border-none shadow-none'>
+                                <CardHeader className='flex flex-col items-center justify-center'>
+                                    <CardDescription className='border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4'>
+                                        <FileMagnifyingGlass weight='fill' className='text-muted-foreground h-10 w-10' />
+                                    </CardDescription>
+                                    <CardTitle className='text-center'>
+                                        Search across your documents
+                                    </CardTitle>
+                                </CardHeader>
+                                <CardContent className='text-muted-foreground items-center justify-center text-center flex'>
+                                    <Lightbulb className='inline mr-2' /> {exampleQuery}
+                                </CardContent>
+                            </Card>
+                        }
+                        {
+                            searchResults && searchResults.length === 0 &&
+                            <Card className='flex flex-col items-center justify-center border-none shadow-none'>
+                                <CardHeader className='flex flex-col items-center justify-center'>
+                                    <CardDescription className='border-muted-foreground border w-fit rounded-lg mb-2 text-center text-lg p-4'>
+                                        <FileDashed weight='fill' className='text-muted-foreground h-10 w-10' />
+                                    </CardDescription>
+                                    <CardTitle className='text-center'>
+                                        No documents found
+                                    </CardTitle>
+                                </CardHeader>
+                                <CardContent>
+                                    <div className='text-muted-foreground items-center justify-center text-center flex'>
+                                        To use search, upload your docs to your account.
                                     </div>
-                                </Link>
-                            </CardContent>
-                        </Card>
-                    }
+                                    <Link href="https://docs.khoj.dev/data-sources/share_your_data" className='no-underline'>
+                                        <div className='mt-4 text-center text-secondary-foreground bg-secondary w-fit m-auto p-2 rounded-lg'>
+                                            Learn More
+                                        </div>
+                                    </Link>
+                                </CardContent>
+                            </Card>
+                        }
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/interface/web/app/search/search.module.css b/src/interface/web/app/search/search.module.css
index b063fde6..f4f24a46 100644
--- a/src/interface/web/app/search/search.module.css
+++ b/src/interface/web/app/search/search.module.css
@@ -1,12 +1,22 @@
 div.searchLayout {
     display: grid;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr;
     gap: 1rem;
     height: 100vh;
 }
 
+div.sidePanel {
+    position: fixed;
+    height: 100%;
+}
+
 @media screen and (max-width: 768px) {
     div.searchLayout {
         gap: 0;
     }
+
+    div.sidePanel {
+        position: relative;
+        height: 100%;
+    }
 }