diff --git a/application/api/answer/routes.py b/application/api/answer/routes.py
index a413194b8..bccffb662 100644
--- a/application/api/answer/routes.py
+++ b/application/api/answer/routes.py
@@ -130,6 +130,18 @@ def save_conversation(conversation_id, question, response, source_log_docs, llm,
                 }
             }
         )
+        ##remove following queries from the array
+        conversations_collection.update_one(
+            {"_id": ObjectId(conversation_id), f"queries.{index}": {"$exists": True}},
+            {
+                "$push":{
+                    "queries":{
+                        "$each":[],
+                        "$slice":index+1
+                    }
+                }
+            }
+        )
     elif conversation_id is not None and conversation_id != "None":
         conversations_collection.update_one(
             {"_id": ObjectId(conversation_id)},
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 15c9fcb97..f6d656751 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -51,21 +51,7 @@ interface NavigationProps {
   navOpen: boolean;
   setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
-/* const NavImage: React.FC<{
-  Light: string | undefined;
-  Dark: string | undefined;
-}> = ({ Light, Dark }) => {
-  return (
-    <>
-      <img src={Dark} alt="icon" className="ml-2 hidden w-5 dark:block " />
-      <img src={Light} alt="icon" className="ml-2 w-5 dark:hidden filter dark:invert" />
-    </>
-  );
-};
-NavImage.propTypes = {
-  Light: PropTypes.string,
-  Dark: PropTypes.string,
-}; */
+
 export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const dispatch = useDispatch();
   const queries = useSelector(selectQueries);
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 1eee41e78..fc0044044 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -1,6 +1,6 @@
 import 'katex/dist/katex.min.css';
 
-import { forwardRef, useState } from 'react';
+import { forwardRef, useRef, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { useSelector } from 'react-redux';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -26,6 +26,7 @@ import {
 } from '../preferences/preferenceSlice';
 import classes from './ConversationBubble.module.css';
 import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
+import { useOutsideAlerter } from '../hooks';
 
 const DisableSourceFE = import.meta.env.VITE_DISABLE_SOURCE_FE || false;
 
@@ -73,7 +74,9 @@ const ConversationBubble = forwardRef<
   const [isDislikeClicked, setIsDislikeClicked] = useState(false);
   const [activeTooltip, setActiveTooltip] = useState<number | null>(null);
   const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
+  const editableQueryRef = useRef<HTMLDivElement | null>(null);
 
+  useOutsideAlerter(editableQueryRef, () => setIsEditClicked(false), [], true);
   const handleEditClick = () => {
     setIsEditClicked(false);
     handleUpdatedQuestionSubmission?.(editInputBox, true, questionNumber);
@@ -87,7 +90,7 @@ const ConversationBubble = forwardRef<
       >
         <div
           ref={ref}
-          className={`flex flex-row-reverse self-end flex-wrap ${className}`}
+          className={`flex flex-row-reverse self-end flex-wrap items-baseline ${className}`}
         >
           <Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
           {!isEditClicked && (
@@ -101,42 +104,44 @@ const ConversationBubble = forwardRef<
             </div>
           )}
           {isEditClicked && (
-            <input
-              onChange={(e) => setEditInputBox(e.target.value)}
-              value={editInputBox}
-              className="w-[85%] ml-2 mr-2 rounded-[28px] py-[12px] dark:border-[0.5px] dark:border-white dark:bg-raisin-black dark:text-white px-[18px] border-[1.5px] border-black"
-            />
+            <div ref={editableQueryRef} className="w-[75%] flex flex-col">
+              <textarea
+                placeholder="Type the updated query..."
+                onChange={(e) => {
+                  setEditInputBox(e.target.value);
+                }}
+                rows={1}
+                value={editInputBox}
+                className="ml-2 mr-12 text-[15px] resize-y h-12 min-h-max rounded-3xl p-3  no-scrollbar leading-relaxed dark:border-[0.5px] dark:border-white dark:bg-raisin-black dark:text-white px-[18px] border-[1.5px] border-black"
+              />
+              <div
+                className={`flex flex-row-reverse justify-end gap-1 mt-3 text-sm font-medium`}
+              >
+                <button
+                  className="rounded-full bg-[#CDB5FF] hover:bg-[#E1D3FF] py-[10px] px-[15px] text-purple-30 max-w-full whitespace-pre-wrap leading-none"
+                  onClick={() => handleEditClick()}
+                >
+                  Update
+                </button>
+                <button
+                  className="py-[10px] px-[15px]  no-underline hover:underline  text-purple-30 max-w-full whitespace-pre-wrap leading-normal"
+                  onClick={() => setIsEditClicked(false)}
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
           )}
-          <div
-            className={`  flex items-center ${isQuestionHovered ? 'visible' : 'invisible'}`}
+          <button
+            onClick={() => {
+              setIsEditClicked(true);
+              setEditInputBox(message);
+            }}
+            className={`p-2 cursor-pointer rounded-full hover:bg-[#35363B] flex items-center ${isQuestionHovered || isEditClicked ? 'visible' : 'invisible'}`}
           >
-            <img
-              src={Edit}
-              alt="Edit"
-              className="cursor-pointer"
-              onClick={() => {
-                setIsEditClicked(true);
-                setEditInputBox(message);
-              }}
-            />
-          </div>
+            <img src={Edit} alt="Edit" className="cursor-pointer" />
+          </button>
         </div>
-        {isEditClicked && (
-          <div className={`flex gap-3 self-end mt-3  `}>
-            <button
-              className="ml-2 mr-2 flex items-center rounded-[28px]  font-semibold hover:font-bold py-[14px] px-[19px] no-underline hover:underline  text-purple-500 max-w-full whitespace-pre-wrap leading-normal"
-              onClick={() => setIsEditClicked(false)}
-            >
-              Cancel
-            </button>
-            <button
-              className="ml-2 mr-2 flex items-center rounded-full bg-purple-300 hover:bg-purple-100 font-bold px-[19px] py-[2px] text-purple-500 max-w-full whitespace-pre-wrap leading-none"
-              onClick={() => handleEditClick()}
-            >
-              Update
-            </button>
-          </div>
-        )}
       </div>
     );
   } else {
@@ -309,7 +314,7 @@ const ConversationBubble = forwardRef<
             }`}
           >
             <ReactMarkdown
-              className="fade-in whitespace-pre-wrap break-normal leading-normal"
+              className="fade-in whitespace-pre-wrap break-words leading-normal"
               remarkPlugins={[remarkGfm, remarkMath]}
               rehypePlugins={[rehypeKatex]}
               components={{
@@ -337,9 +342,7 @@ const ConversationBubble = forwardRef<
                       </div>
                     </div>
                   ) : (
-                    <code className="whitespace-pre-line" {...props}>
-                      {children}
-                    </code>
+                    <code className="whitespace-pre-line">{children}</code>
                   );
                 },
                 ul({ children }) {
diff --git a/frontend/src/conversation/conversationSlice.ts b/frontend/src/conversation/conversationSlice.ts
index 9298e7a52..69f81e212 100644
--- a/frontend/src/conversation/conversationSlice.ts
+++ b/frontend/src/conversation/conversationSlice.ts
@@ -173,7 +173,10 @@ export const conversationSlice = createSlice({
       state,
       action: PayloadAction<{ index: number; prompt: string; query?: Query }>,
     ) {
-      state.queries[action.payload.index] = action.payload;
+      state.queries = [
+        ...state.queries.splice(0, action.payload.index),
+        action.payload,
+      ];
     },
     updateStreamingQuery(
       state,
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index cea14f0a7..bbad47635 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -85,7 +85,7 @@ const Documents: React.FC<DocumentsProps> = ({
         setSortField(newSortField);
         setSortOrder(newSortOrder);
       }
-
+      setLoading(true);
       getDocsWithPagination(
         newSortField,
         newSortOrder,