diff --git a/web/src/app/chat/folders/FolderDropdown.tsx b/web/src/app/chat/folders/FolderDropdown.tsx
index 7d8131fb1ad..faa8f44368c 100644
--- a/web/src/app/chat/folders/FolderDropdown.tsx
+++ b/web/src/app/chat/folders/FolderDropdown.tsx
@@ -34,6 +34,7 @@ interface FolderDropdownProps {
   onDelete?: (folderId: number) => void;
   onDrop?: (folderId: number, chatSessionId: string) => void;
   children?: ReactNode;
+  index: number;
 }
 
 export const FolderDropdown = forwardRef<HTMLDivElement, FolderDropdownProps>(
@@ -46,6 +47,7 @@ export const FolderDropdown = forwardRef<HTMLDivElement, FolderDropdownProps>(
       onEdit,
       onDrop,
       children,
+      index,
     },
     ref
   ) => {
@@ -160,110 +162,118 @@ export const FolderDropdown = forwardRef<HTMLDivElement, FolderDropdownProps>(
         onDrop={handleDrop}
       >
         <div
-          ref={ref}
-          className="flex overflow-visible items-center w-full text-text-darker rounded-md p-1 relative"
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
+          className="sticky top-0 bg-background-sidebar z-10"
+          style={{ zIndex: 1000 - index }}
         >
-          <button
-            className="flex overflow-hidden items-center flex-grow"
-            onClick={() => !isEditing && setIsOpen(!isOpen)}
-            {...(isEditing ? {} : listeners)}
+          <div
+            ref={ref}
+            className="flex overflow-visible items-center w-full text-text-darker rounded-md p-1 relative bg-background-sidebar sticky top-0"
+            style={{ zIndex: 10 - index }}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
           >
-            {isOpen ? (
-              <Caret size={16} className="mr-1" />
-            ) : (
-              <Caret size={16} className="-rotate-90 mr-1" />
-            )}
-            {isEditing ? (
-              <div ref={editingRef} className="flex-grow z-[9999] relative">
-                <input
-                  ref={inputRef}
-                  type="text"
-                  value={newFolderName}
-                  onChange={(e) => setNewFolderName(e.target.value)}
-                  className="text-sm font-medium bg-transparent outline-none w-full pb-1 border-b border-[#6c6c6c] transition-colors duration-200"
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                      handleEdit();
-                    }
-                  }}
-                  onClick={(e) => e.stopPropagation()}
-                />
-              </div>
-            ) : (
-              <div className="flex items-center">
-                <span className="text-sm font-[500]">{folder.folder_name}</span>
-              </div>
-            )}
-          </button>
-          {isHovered && !isEditing && folder.folder_id && (
             <button
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsEditing(true);
-              }}
-              className="ml-auto px-1"
+              className="flex overflow-hidden items-center flex-grow"
+              onClick={() => !isEditing && setIsOpen(!isOpen)}
+              {...(isEditing ? {} : listeners)}
             >
-              <PencilIcon size={14} />
-            </button>
-          )}
-          {(isHovered || isDeletePopoverOpen) &&
-            !isEditing &&
-            folder.folder_id && (
-              <Popover
-                open={isDeletePopoverOpen}
-                onOpenChange={setIsDeletePopoverOpen}
-                content={
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleDeleteClick();
+              {isOpen ? (
+                <Caret size={16} className="mr-1" />
+              ) : (
+                <Caret size={16} className="-rotate-90 mr-1" />
+              )}
+              {isEditing ? (
+                <div ref={editingRef} className="flex-grow z-[9999] relative">
+                  <input
+                    ref={inputRef}
+                    type="text"
+                    value={newFolderName}
+                    onChange={(e) => setNewFolderName(e.target.value)}
+                    className="text-sm font-medium bg-transparent outline-none w-full pb-1 border-b border-[#6c6c6c] transition-colors duration-200"
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        handleEdit();
+                      }
                     }}
-                    className="px-1"
-                  >
-                    <FiTrash2 size={14} />
-                  </button>
-                }
-                popover={
-                  <div className="p-3 w-64 border border-border rounded-lg bg-background z-50">
-                    <p className="text-sm mb-3">
-                      Are you sure you want to delete this folder?
-                    </p>
-                    <div className="flex justify-center gap-2">
-                      <button
-                        className="px-3 py-1 text-sm bg-gray-200 rounded"
-                        onClick={handleCancelDelete}
-                      >
-                        Cancel
-                      </button>
-                      <button
-                        className="px-3 py-1 text-sm bg-red-500 text-white rounded"
-                        onClick={handleConfirmDelete}
-                      >
-                        Delete
-                      </button>
+                    onClick={(e) => e.stopPropagation()}
+                  />
+                </div>
+              ) : (
+                <div className="flex items-center">
+                  <span className="text-sm font-[500]">
+                    {folder.folder_name}
+                  </span>
+                </div>
+              )}
+            </button>
+            {isHovered && !isEditing && folder.folder_id && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setIsEditing(true);
+                }}
+                className="ml-auto px-1"
+              >
+                <PencilIcon size={14} />
+              </button>
+            )}
+            {(isHovered || isDeletePopoverOpen) &&
+              !isEditing &&
+              folder.folder_id && (
+                <Popover
+                  open={isDeletePopoverOpen}
+                  onOpenChange={setIsDeletePopoverOpen}
+                  content={
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteClick();
+                      }}
+                      className="px-1"
+                    >
+                      <FiTrash2 size={14} />
+                    </button>
+                  }
+                  popover={
+                    <div className="p-3 w-64 border border-border rounded-lg bg-background z-50">
+                      <p className="text-sm mb-3">
+                        Are you sure you want to delete this folder?
+                      </p>
+                      <div className="flex justify-center gap-2">
+                        <button
+                          className="px-3 py-1 text-sm bg-gray-200 rounded"
+                          onClick={handleCancelDelete}
+                        >
+                          Cancel
+                        </button>
+                        <button
+                          className="px-3 py-1 text-sm bg-red-500 text-white rounded"
+                          onClick={handleConfirmDelete}
+                        >
+                          Delete
+                        </button>
+                      </div>
                     </div>
-                  </div>
-                }
-                requiresContentPadding
-                sideOffset={6}
-              />
+                  }
+                  requiresContentPadding
+                  sideOffset={6}
+                />
+              )}
+            {isEditing && (
+              <div className="flex -my-1 z-[9999]">
+                <button onClick={handleEdit} className="p-1">
+                  <FiCheck size={14} />
+                </button>
+                <button onClick={() => setIsEditing(false)} className="p-1">
+                  <FiX size={14} />
+                </button>
+              </div>
             )}
-          {isEditing && (
-            <div className="flex -my-1 z-[9999]">
-              <button onClick={handleEdit} className="p-1">
-                <FiCheck size={14} />
-              </button>
-              <button onClick={() => setIsEditing(false)} className="p-1">
-                <FiX size={14} />
-              </button>
-            </div>
+          </div>
+          {isOpen && (
+            <div className="overflow-visible mr-3 ml-1 mt-1">{children}</div>
           )}
         </div>
-        {isOpen && (
-          <div className="overflow-visible mr-3 ml-1 mt-1">{children}</div>
-        )}
       </div>
     );
   }
diff --git a/web/src/app/chat/input/ChatInputBar.tsx b/web/src/app/chat/input/ChatInputBar.tsx
index 6f760962e0e..64009d70373 100644
--- a/web/src/app/chat/input/ChatInputBar.tsx
+++ b/web/src/app/chat/input/ChatInputBar.tsx
@@ -506,7 +506,10 @@ export function ChatInputBar({
               style={{ scrollbarWidth: "thin" }}
               role="textarea"
               aria-multiline
-              placeholder={`Message ${selectedAssistant.name} assistant...`}
+              placeholder={`Message ${truncateString(
+                selectedAssistant.name,
+                70
+              )} assistant...`}
               value={message}
               onKeyDown={(event) => {
                 if (
diff --git a/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx b/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
index 2715b38cae1..9df1733dce2 100644
--- a/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
+++ b/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
@@ -60,20 +60,10 @@ export function ChatSessionDisplay({
   const [popoverOpen, setPopoverOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const renamingRef = useRef<HTMLDivElement>(null);
-  const [isMobile, setIsMobile] = useState(false);
 
   const { refreshChatSessions, refreshFolders } = useChatContext();
 
-  useEffect(() => {
-    const mediaQuery = window.matchMedia("(max-width: 768px)");
-    setIsMobile(mediaQuery.matches);
-
-    const handleResize = (e: MediaQueryListEvent) => setIsMobile(e.matches);
-    mediaQuery.addListener(handleResize);
-
-    return () => mediaQuery.removeListener(handleResize);
-  }, []);
-
+  const isMobile = settings?.isMobile;
   const handlePopoverOpenChange = useCallback(
     (open: boolean) => {
       setPopoverOpen(open);
diff --git a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
index 04bdff11203..7018447ddc8 100644
--- a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
+++ b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
@@ -295,8 +295,8 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
             </div>
           )}
 
-          <div className="h-full overflow-y-auto">
-            <div className="flex px-4  font-normal text-sm gap-x-2 leading-normal text-[#6c6c6c]/80 items-center font-normal leading-normal">
+          <div className="h-full relative overflow-y-auto">
+            <div className="flex px-4 font-normal text-sm gap-x-2 leading-normal text-[#6c6c6c]/80 items-center font-normal leading-normal">
               Assistants
             </div>
             <DndContext
diff --git a/web/src/app/chat/sessionSidebar/PagesTab.tsx b/web/src/app/chat/sessionSidebar/PagesTab.tsx
index f8b48d31a19..0e1fd5a9b5c 100644
--- a/web/src/app/chat/sessionSidebar/PagesTab.tsx
+++ b/web/src/app/chat/sessionSidebar/PagesTab.tsx
@@ -13,7 +13,7 @@ import { FiPlus, FiTrash2, FiCheck, FiX } from "react-icons/fi";
 import { NEXT_PUBLIC_DELETE_ALL_CHATS_ENABLED } from "@/lib/constants";
 import { FolderDropdown } from "../folders/FolderDropdown";
 import { ChatSessionDisplay } from "./ChatSessionDisplay";
-import { useState, useCallback, useRef } from "react";
+import { useState, useCallback, useRef, useContext } from "react";
 import { Caret } from "@/components/icons/icons";
 import { groupSessionsByDateRange } from "../lib";
 import React from "react";
@@ -35,6 +35,7 @@ import {
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { useChatContext } from "@/components/context/ChatContext";
+import { SettingsContext } from "@/components/settings/SettingsProvider";
 
 interface SortableFolderProps {
   folder: Folder;
@@ -46,9 +47,12 @@ interface SortableFolderProps {
   onEdit: (folderId: number, newName: string) => void;
   onDelete: (folderId: number) => void;
   onDrop: (folderId: number, chatSessionId: string) => void;
+  index: number;
 }
 
 const SortableFolder: React.FC<SortableFolderProps> = (props) => {
+  const settings = useContext(SettingsContext);
+  const mobile = settings?.isMobile;
   const { attributes, listeners, setNodeRef, transform, transition } =
     useSortable({
       id: props.folder.folder_id?.toString() ?? "",
@@ -57,6 +61,7 @@ const SortableFolder: React.FC<SortableFolderProps> = (props) => {
           distance: 8,
         },
       },
+      disabled: mobile,
     });
   const ref = useRef<HTMLDivElement>(null);
   const style = {
@@ -70,7 +75,12 @@ const SortableFolder: React.FC<SortableFolderProps> = (props) => {
       className="pr-3 ml-4 overflow-visible flex items-start"
       style={style}
     >
-      <FolderDropdown ref={ref} {...props} {...attributes} {...listeners} />
+      <FolderDropdown
+        ref={ref}
+        {...props}
+        {...(mobile ? {} : attributes)}
+        {...(mobile ? {} : listeners)}
+      />
     </div>
   );
 };
@@ -299,7 +309,7 @@ export function PagesTab({
   return (
     <div className="flex flex-col gap-y-2 flex-grow">
       {popup}
-      <div className="px-4 mt-2 group mr-2">
+      <div className="px-4 mt-2 group mr-2 bg-background-sidebar z-20">
         <div className="flex justify-between text-sm gap-x-2 text-[#6c6c6c]/80 items-center font-normal leading-normal">
           <p>Chats</p>
           <button
@@ -357,31 +367,35 @@ export function PagesTab({
             items={folders.map((f) => f.folder_id?.toString() ?? "")}
             strategy={verticalListSortingStrategy}
           >
-            {folders
-              .sort(
-                (a, b) => (a.display_priority ?? 0) - (b.display_priority ?? 0)
-              )
-              .map((folder) => (
-                <SortableFolder
-                  key={folder.folder_id}
-                  folder={folder}
-                  currentChatId={currentChatId}
-                  showShareModal={showShareModal}
-                  showDeleteModal={showDeleteModal}
-                  closeSidebar={closeSidebar}
-                  onEdit={handleEditFolder}
-                  onDelete={handleDeleteFolder}
-                  onDrop={handleDrop}
-                >
-                  {folder.chat_sessions &&
-                    folder.chat_sessions.map((chat) =>
-                      renderChatSession(
-                        chat,
-                        folders != undefined && folders.length > 0
-                      )
-                    )}
-                </SortableFolder>
-              ))}
+            <div className="space-y-2">
+              {folders
+                .sort(
+                  (a, b) =>
+                    (a.display_priority ?? 0) - (b.display_priority ?? 0)
+                )
+                .map((folder, index) => (
+                  <SortableFolder
+                    key={folder.folder_id}
+                    folder={folder}
+                    currentChatId={currentChatId}
+                    showShareModal={showShareModal}
+                    showDeleteModal={showDeleteModal}
+                    closeSidebar={closeSidebar}
+                    onEdit={handleEditFolder}
+                    onDelete={handleDeleteFolder}
+                    onDrop={handleDrop}
+                    index={index}
+                  >
+                    {folder.chat_sessions &&
+                      folder.chat_sessions.map((chat) =>
+                        renderChatSession(
+                          chat,
+                          folders != undefined && folders.length > 0
+                        )
+                      )}
+                  </SortableFolder>
+                ))}
+            </div>
           </SortableContext>
         </DndContext>
       )}
@@ -395,7 +409,7 @@ export function PagesTab({
           <>
             {Object.entries(groupedChatSesssions)
               .filter(([groupName, chats]) => chats.length > 0)
-              .map(([groupName, chats]) => (
+              .map(([groupName, chats], index) => (
                 <FolderDropdown
                   key={groupName}
                   folder={{
@@ -408,6 +422,7 @@ export function PagesTab({
                   closeSidebar={closeSidebar}
                   onEdit={handleEditFolder}
                   onDrop={handleDrop}
+                  index={folders ? folders.length + index : index}
                 >
                   {chats.map((chat) =>
                     renderChatSession(