diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 41b05ac0..1bba5f44 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -13,6 +13,7 @@ import Navigation from './Navigation';
 import PageNotFound from './PageNotFound';
 import Setting from './settings';
 import Agents from './agents';
+import ActionButtons from './components/ActionButtons';
 
 function AuthWrapper({ children }: { children: React.ReactNode }) {
   const { isAuthLoading } = useTokenAuth();
@@ -32,13 +33,14 @@ function MainLayout() {
   const [navOpen, setNavOpen] = useState(!isMobile);
 
   return (
-    <div className="relative h-screen overflow-auto dark:bg-raisin-black">
+    <div className="relative h-screen overflow-hidden dark:bg-raisin-black">
       <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
+      <ActionButtons showNewChat={true} showShare={true} />
       <div
-        className={`h-[calc(100dvh-64px)] md:h-screen ${
+        className={`h-[calc(100dvh-64px)] overflow-auto lg:h-screen ${
           !isMobile
-            ? `ml-0 ${!navOpen ? 'md:mx-auto lg:mx-auto' : 'md:ml-72'}`
-            : 'ml-0 md:ml-16'
+            ? `ml-0 ${!navOpen ? 'lg:mx-auto' : 'lg:ml-72'}`
+            : 'ml-0 lg:ml-16'
         }`}
       >
         <Outlet />
@@ -46,14 +48,13 @@ function MainLayout() {
     </div>
   );
 }
-
 export default function App() {
   const [, , componentMounted] = useDarkTheme();
   if (!componentMounted) {
     return <div />;
   }
   return (
-    <div className="relative h-full overflow-auto">
+    <div className="relative h-full overflow-hidden">
       <Routes>
         <Route
           element={
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index fe6bcb65..f545d38c 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -278,7 +278,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   return (
     <>
       {!navOpen && (
-        <div className="duration-25 absolute left-3 top-3 z-20 hidden transition-all md:block">
+        <div className="duration-25 absolute left-3 top-3 z-20 hidden transition-all lg:block">
           <div className="flex items-center gap-3">
             <button
               onClick={() => {
@@ -573,10 +573,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           </div>
         </div>
       </div>
-      <div className="sticky z-10 h-16 w-full border-b-2 bg-gray-50 dark:border-b-purple-taupe dark:bg-chinese-black md:hidden">
+      <div className="sticky z-10 h-16 w-full border-b-2 bg-gray-50 dark:border-b-purple-taupe dark:bg-chinese-black lg:hidden">
         <div className="ml-6 flex h-full items-center gap-6">
           <button
-            className="h-6 w-6 md:hidden"
+            className="h-6 w-6 lg:hidden"
             onClick={() => setNavOpen(true)}
           >
             <img
diff --git a/frontend/src/agents/AgentPreview.tsx b/frontend/src/agents/AgentPreview.tsx
index 621ac477..cd4fdc18 100644
--- a/frontend/src/agents/AgentPreview.tsx
+++ b/frontend/src/agents/AgentPreview.tsx
@@ -65,22 +65,18 @@ export default function AgentPreview() {
   );
 
   const handleQuestionSubmission = (
-    updatedQuestion?: string,
+    question?: string,
     updated?: boolean,
     indx?: number,
   ) => {
-    if (
-      updated === true &&
-      updatedQuestion !== undefined &&
-      indx !== undefined
-    ) {
+    if (updated === true && question !== undefined && indx !== undefined) {
       handleQuestion({
-        question: updatedQuestion,
+        question,
         index: indx,
         isRetry: false,
       });
-    } else if (input.trim() && status !== 'loading') {
-      const currentInput = input.trim();
+    } else if (question && status !== 'loading') {
+      const currentInput = question.trim();
       if (lastQueryReturnedErr && queries.length > 0) {
         const lastQueryIndex = queries.length - 1;
         handleQuestion({
@@ -95,14 +91,6 @@ export default function AgentPreview() {
           index: undefined,
         });
       }
-      setInput('');
-    }
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (event.key === 'Enter' && !event.shiftKey) {
-      event.preventDefault();
-      handleQuestionSubmission();
     }
   };
 
@@ -135,9 +123,7 @@ export default function AgentPreview() {
         </div>
         <div className="flex w-[95%] max-w-[1500px] flex-col items-center gap-4 pb-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
           <MessageInput
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onSubmit={() => handleQuestionSubmission()}
+            onSubmit={(text) => handleQuestionSubmission(text)}
             loading={status === 'loading'}
             showSourceButton={selectedAgent ? false : true}
             showToolButton={selectedAgent ? false : true}
diff --git a/frontend/src/agents/SharedAgent.tsx b/frontend/src/agents/SharedAgent.tsx
index 98827f1d..8c7e76c9 100644
--- a/frontend/src/agents/SharedAgent.tsx
+++ b/frontend/src/agents/SharedAgent.tsx
@@ -91,22 +91,18 @@ export default function SharedAgent() {
   );
 
   const handleQuestionSubmission = (
-    updatedQuestion?: string,
+    question?: string,
     updated?: boolean,
     indx?: number,
   ) => {
-    if (
-      updated === true &&
-      updatedQuestion !== undefined &&
-      indx !== undefined
-    ) {
+    if (updated === true && question !== undefined && indx !== undefined) {
       handleQuestion({
-        question: updatedQuestion,
+        question,
         index: indx,
         isRetry: false,
       });
-    } else if (input.trim() && status !== 'loading') {
-      const currentInput = input.trim();
+    } else if (question && status !== 'loading') {
+      const currentInput = question.trim();
       if (lastQueryReturnedErr && queries.length > 0) {
         const lastQueryIndex = queries.length - 1;
         handleQuestion({
@@ -183,9 +179,7 @@ export default function SharedAgent() {
         </div>
         <div className="flex w-[95%] max-w-[1500px] flex-col items-center pb-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
           <MessageInput
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onSubmit={() => handleQuestionSubmission()}
+            onSubmit={(text) => handleQuestionSubmission(text)}
             loading={status === 'loading'}
             showSourceButton={sharedAgent ? false : true}
             showToolButton={sharedAgent ? false : true}
diff --git a/frontend/src/components/ActionButtons.tsx b/frontend/src/components/ActionButtons.tsx
new file mode 100644
index 00000000..3bd71515
--- /dev/null
+++ b/frontend/src/components/ActionButtons.tsx
@@ -0,0 +1,89 @@
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import newChatIcon from '../assets/openNewChat.svg';
+import ShareIcon from '../assets/share.svg';
+import { ShareConversationModal } from '../modals/ShareConversationModal';
+import { useState } from 'react';
+import { selectConversationId } from '../preferences/preferenceSlice';
+import { useDispatch } from 'react-redux';
+import { AppDispatch } from '../store';
+import {
+  setConversation,
+  updateConversationId,
+} from '../conversation/conversationSlice';
+
+interface ActionButtonsProps {
+  className?: string;
+  showNewChat?: boolean;
+  showShare?: boolean;
+}
+
+import { useNavigate } from 'react-router-dom';
+
+export default function ActionButtons({
+  className = '',
+  showNewChat = true,
+  showShare = true,
+}: ActionButtonsProps) {
+  const { t } = useTranslation();
+  const dispatch = useDispatch<AppDispatch>();
+  const conversationId = useSelector(selectConversationId);
+  const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
+  const navigate = useNavigate();
+
+  const newChat = () => {
+    dispatch(setConversation([]));
+    dispatch(
+      updateConversationId({
+        query: { conversationId: null },
+      }),
+    );
+    navigate('/');
+  };
+  return (
+    <div className="fixed right-4 top-4 z-10">
+      <div className={`flex items-center gap-2 sm:gap-4 ${className}`}>
+        {showNewChat && (
+          <button
+            title="Open New Chat"
+            onClick={newChat}
+            className="flex items-center gap-1 rounded-full p-2 hover:bg-bright-gray dark:hover:bg-[#28292E] lg:hidden"
+          >
+            <img
+              className="filter dark:invert"
+              alt="NewChat"
+              width={21}
+              height={21}
+              src={newChatIcon}
+            />
+          </button>
+        )}
+
+        {showShare && conversationId && (
+          <>
+            <button
+              title="Share"
+              onClick={() => setShareModalState(true)}
+              className="rounded-full p-2 hover:bg-bright-gray dark:hover:bg-[#28292E]"
+            >
+              <img
+                className="filter dark:invert"
+                alt="share"
+                width={16}
+                height={16}
+                src={ShareIcon}
+              />
+            </button>
+            {isShareModalOpen && (
+              <ShareConversationModal
+                close={() => setShareModalState(false)}
+                conversationId={conversationId}
+              />
+            )}
+          </>
+        )}
+        <div>{/* <UserButton  /> */}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/MessageInput.tsx b/frontend/src/components/MessageInput.tsx
index 60cd4b81..79487188 100644
--- a/frontend/src/components/MessageInput.tsx
+++ b/frontend/src/components/MessageInput.tsx
@@ -30,9 +30,7 @@ import SourcesPopup from './SourcesPopup';
 import ToolsPopup from './ToolsPopup';
 
 type MessageInputProps = {
-  value: string;
-  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  onSubmit: () => void;
+  onSubmit: (text: string) => void;
   loading: boolean;
   showSourceButton?: boolean;
   showToolButton?: boolean;
@@ -40,8 +38,6 @@ type MessageInputProps = {
 };
 
 export default function MessageInput({
-  value,
-  onChange,
   onSubmit,
   loading,
   showSourceButton = true,
@@ -50,6 +46,7 @@ export default function MessageInput({
 }: MessageInputProps) {
   const { t } = useTranslation();
   const [isDarkTheme] = useDarkTheme();
+  const [value, setValue] = useState('');
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const sourceButtonRef = useRef<HTMLButtonElement>(null);
   const toolButtonRef = useRef<HTMLButtonElement>(null);
@@ -232,6 +229,11 @@ export default function MessageInput({
     handleInput();
   }, []);
 
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+    handleInput();
+  };
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
@@ -248,7 +250,10 @@ export default function MessageInput({
   };
 
   const handleSubmit = () => {
-    onSubmit();
+    if (value.trim() && !loading) {
+      onSubmit(value);
+      setValue('');
+    }
   };
   return (
     <div className="mx-2 flex w-full flex-col">
@@ -274,11 +279,11 @@ export default function MessageInput({
                       dispatch(removeAttachment(attachment.id));
                     }
                   }}
-                  aria-label="Remove attachment"
+                  aria-label={t('conversation.attachments.remove')}
                 >
                   <img
                     src={ExitIcon}
-                    alt="Remove"
+                    alt={t('conversation.attachments.remove')}
                     className="h-2.5 w-2.5 filter dark:invert"
                   />
                 </button>
@@ -334,7 +339,7 @@ export default function MessageInput({
             id="message-input"
             ref={inputRef}
             value={value}
-            onChange={onChange}
+            onChange={handleChange}
             tabIndex={1}
             placeholder={t('inputPlaceholder')}
             className="inputbox-style no-scrollbar w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-t-[23px] bg-lotion px-4 py-3 text-base leading-tight opacity-100 focus:outline-none dark:bg-transparent dark:text-bright-gray dark:placeholder-bright-gray dark:placeholder-opacity-50 sm:px-6 sm:py-5"
@@ -398,7 +403,7 @@ export default function MessageInput({
                 className="mr-1 h-3.5 w-3.5 sm:mr-1.5 sm:h-4 sm:w-4"
               />
               <span className="xs:text-[12px] text-[10px] font-medium text-[#5D5D5D] dark:text-bright-gray sm:text-[14px]">
-                Attach
+                {t('conversation.attachments.attach')}
               </span>
               <input
                 type="file"
@@ -406,7 +411,6 @@ export default function MessageInput({
                 onChange={handleFileAttachment}
               />
             </label>
-
             {/* Additional badges can be added here in the future */}
           </div>
 
diff --git a/frontend/src/components/SourcesPopup.tsx b/frontend/src/components/SourcesPopup.tsx
index 6846cf84..83966730 100644
--- a/frontend/src/components/SourcesPopup.tsx
+++ b/frontend/src/components/SourcesPopup.tsx
@@ -81,12 +81,6 @@ export default function SourcesPopup({
     return () => window.removeEventListener('resize', updatePosition);
   }, [isOpen, anchorRef]);
 
-  const handleEmptyDocumentSelect = () => {
-    dispatch(setSelectedDocs(null));
-    handlePostDocumentSelect(null);
-    onClose();
-  };
-
   const handleClickOutside = (event: MouseEvent) => {
     if (
       popupRef.current &&
@@ -153,14 +147,24 @@ export default function SourcesPopup({
             <>
               {filteredOptions?.map((option: any, index: number) => {
                 if (option.model === embeddingsName) {
+                  const isSelected =
+                    selectedDocs &&
+                    (option.id
+                      ? selectedDocs.id === option.id
+                      : selectedDocs.date === option.date);
+
                   return (
                     <div
                       key={index}
                       className="flex cursor-pointer items-center border-b border-[#D9D9D9] border-opacity-80 p-3 transition-colors hover:bg-gray-100 dark:border-dim-gray dark:text-[14px] dark:hover:bg-[#2C2E3C]"
                       onClick={() => {
-                        dispatch(setSelectedDocs(option));
-                        handlePostDocumentSelect(option);
-                        onClose();
+                        if (isSelected) {
+                          dispatch(setSelectedDocs(null));
+                          handlePostDocumentSelect(null);
+                        } else {
+                          dispatch(setSelectedDocs(option));
+                          handlePostDocumentSelect(option);
+                        }
                       }}
                     >
                       <img
@@ -176,44 +180,19 @@ export default function SourcesPopup({
                       <div
                         className={`flex h-4 w-4 flex-shrink-0 items-center justify-center border border-[#C6C6C6] p-[0.5px] dark:border-[#757783]`}
                       >
-                        {selectedDocs &&
-                          (option.id
-                            ? selectedDocs.id === option.id // For documents with MongoDB IDs
-                            : selectedDocs.date === option.date) && ( // For preloaded sources
-                            <img
-                              src={CheckIcon}
-                              alt="Selected"
-                              className="h-3 w-3"
-                            />
-                          )}
+                        {isSelected && (
+                          <img
+                            src={CheckIcon}
+                            alt="Selected"
+                            className="h-3 w-3"
+                          />
+                        )}
                       </div>
                     </div>
                   );
                 }
                 return null;
               })}
-              <div
-                className="flex cursor-pointer items-center border-b border-[#D9D9D9] border-opacity-80 p-3 transition-colors hover:bg-gray-100 dark:border-dim-gray dark:text-[14px] dark:hover:bg-[#2C2E3C]"
-                onClick={handleEmptyDocumentSelect}
-              >
-                <img
-                  width={14}
-                  height={14}
-                  src={SourceIcon}
-                  alt="Source"
-                  className="mr-3 flex-shrink-0"
-                />
-                <span className="mr-3 flex-grow font-medium text-[#5D5D5D] dark:text-bright-gray">
-                  {t('none')}
-                </span>
-                <div
-                  className={`flex h-4 w-4 flex-shrink-0 items-center justify-center border border-[#C6C6C6] p-[0.5px] dark:border-[#757783]`}
-                >
-                  {selectedDocs === null && (
-                    <img src={CheckIcon} alt="Selected" className="h-3 w-3" />
-                  )}
-                </div>
-              </div>
             </>
           ) : (
             <div className="p-4 text-center text-gray-500 dark:text-[14px] dark:text-bright-gray">
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 21fc3a1f..753a3725 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -4,11 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import DragFileUpload from '../assets/DragFileUpload.svg';
-import newChatIcon from '../assets/openNewChat.svg';
-import ShareIcon from '../assets/share.svg';
 import MessageInput from '../components/MessageInput';
 import { useMediaQuery } from '../hooks';
-import { ShareConversationModal } from '../modals/ShareConversationModal';
 import { ActiveState } from '../models/misc';
 import {
   selectConversationId,
@@ -42,7 +39,6 @@ export default function Conversation() {
   const conversationId = useSelector(selectConversationId);
   const selectedAgent = useSelector(selectSelectedAgent);
 
-  const [input, setInput] = useState<string>('');
   const [uploadModalState, setUploadModalState] =
     useState<ActiveState>('INACTIVE');
   const [files, setFiles] = useState<File[]>([]);
@@ -146,19 +142,19 @@ export default function Conversation() {
   };
 
   const handleQuestionSubmission = (
-    updatedQuestion?: string,
+    question?: string,
     updated?: boolean,
     indx?: number,
   ) => {
     if (updated === true) {
-      handleQuestion({ question: updatedQuestion as string, index: indx });
-    } else if (input && status !== 'loading') {
+      handleQuestion({ question: question as string, index: indx });
+    } else if (question && status !== 'loading') {
       if (lastQueryReturnedErr) {
         dispatch(
           updateQuery({
             index: queries.length - 1,
             query: {
-              prompt: input,
+              prompt: question,
             },
           }),
         );
@@ -168,10 +164,9 @@ export default function Conversation() {
         });
       } else {
         handleQuestion({
-          question: input,
+          question,
         });
       }
-      setInput('');
     }
   };
 
@@ -184,10 +179,6 @@ export default function Conversation() {
     );
   };
 
-  const newChat = () => {
-    if (queries && queries.length > 0) resetConversation();
-  };
-
   useEffect(() => {
     if (queries.length) {
       queries[queries.length - 1].error && setLastQueryReturnedErr(true);
@@ -196,50 +187,6 @@ export default function Conversation() {
   }, [queries[queries.length - 1]]);
   return (
     <div className="flex h-full flex-col justify-end gap-1">
-      {conversationId && queries.length > 0 && (
-        <div className="absolute right-20 top-4">
-          <div className="mt-2 flex items-center gap-4">
-            {isMobile && queries.length > 0 && (
-              <button
-                title="Open New Chat"
-                onClick={() => {
-                  newChat();
-                }}
-                className="rounded-full p-2 hover:bg-bright-gray dark:hover:bg-[#28292E]"
-              >
-                <img
-                  className="h-5 w-5 filter dark:invert"
-                  alt="NewChat"
-                  src={newChatIcon}
-                />
-              </button>
-            )}
-
-            <button
-              title="Share"
-              onClick={() => {
-                setShareModalState(true);
-              }}
-              className="rounded-full p-2 hover:bg-bright-gray dark:hover:bg-[#28292E]"
-            >
-              <img
-                className="h-5 w-5 filter dark:invert"
-                alt="share"
-                src={ShareIcon}
-              />
-            </button>
-          </div>
-          {isShareModalOpen && (
-            <ShareConversationModal
-              close={() => {
-                setShareModalState(false);
-              }}
-              conversationId={conversationId}
-            />
-          )}
-        </div>
-      )}
-
       <ConversationMessages
         handleQuestion={handleQuestion}
         handleQuestionSubmission={handleQuestionSubmission}
@@ -258,9 +205,9 @@ export default function Conversation() {
           </label>
           <input {...getInputProps()} id="file-upload" />
           <MessageInput
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onSubmit={handleQuestionSubmission}
+            onSubmit={(text) => {
+              handleQuestionSubmission(text);
+            }}
             loading={status === 'loading'}
             showSourceButton={selectedAgent ? false : true}
             showToolButton={selectedAgent ? false : true}
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 2f9891b5..920005e3 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -49,7 +49,7 @@ const ConversationBubble = forwardRef<
     feedback?: FEEDBACK;
     handleFeedback?: (feedback: FEEDBACK) => void;
     thought?: string;
-    sources?: { title: string; text: string; source: string }[];
+    sources?: { title: string; text: string; link: string }[];
     toolCalls?: ToolCallsType[];
     retryBtn?: React.ReactElement;
     questionNumber?: number;
@@ -233,7 +233,7 @@ const ConversationBubble = forwardRef<
         {DisableSourceFE ||
         type === 'ERROR' ||
         sources?.length === 0 ||
-        sources?.some((source) => source.source === 'None') ? null : !sources &&
+        sources?.some((source) => source.link === 'None') ? null : !sources &&
           chunks !== '0' &&
           selectedDocs ? (
           <div className="mb-4 flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
@@ -300,14 +300,14 @@ const ConversationBubble = forwardRef<
                         </p>
                         <div
                           className={`mt-[14px] flex flex-row items-center gap-[6px] underline-offset-2 ${
-                            source.source && source.source !== 'local'
+                            source.link && source.link !== 'local'
                               ? 'hover:text-[#007DFF] hover:underline dark:hover:text-[#48A0FF]'
                               : ''
                           }`}
                           onClick={() =>
-                            source.source && source.source !== 'local'
+                            source.link && source.link !== 'local'
                               ? window.open(
-                                  source.source,
+                                  source.link,
                                   '_blank',
                                   'noopener, noreferrer',
                                 )
@@ -322,13 +322,13 @@ const ConversationBubble = forwardRef<
                           <p
                             className="mt-[2px] truncate text-xs"
                             title={
-                              source.source && source.source !== 'local'
-                                ? source.source
+                              source.link && source.link !== 'local'
+                                ? source.link
                                 : source.title
                             }
                           >
-                            {source.source && source.source !== 'local'
-                              ? source.source
+                            {source.link && source.link !== 'local'
+                              ? source.link
                               : source.title}
                           </p>
                         </div>
@@ -339,7 +339,7 @@ const ConversationBubble = forwardRef<
                           onMouseOver={() => setActiveTooltip(index)}
                           onMouseOut={() => setActiveTooltip(null)}
                         >
-                          <p className="max-h-[164px] overflow-y-auto break-words rounded-md text-sm">
+                          <p className="line-clamp-6 max-h-[164px] overflow-hidden text-ellipsis break-words rounded-md text-sm">
                             {source.text}
                           </p>
                         </div>
@@ -649,50 +649,68 @@ const ConversationBubble = forwardRef<
 });
 
 type AllSourcesProps = {
-  sources: { title: string; text: string; source: string }[];
+  sources: { title: string; text: string; link?: string }[];
 };
 
 function AllSources(sources: AllSourcesProps) {
+  const { t } = useTranslation();
+
+  const handleCardClick = (link: string) => {
+    if (link && link !== 'local') {
+      window.open(link, '_blank', 'noopener,noreferrer');
+    }
+  };
+
   return (
     <div className="h-full w-full">
       <div className="w-full">
-        <p className="text-left text-xl">{`${sources.sources.length} Sources`}</p>
+        <p className="text-left text-xl">{`${sources.sources.length} ${t('conversation.sources.title')}`}</p>
         <div className="mx-1 mt-2 h-[0.8px] w-full rounded-full bg-[#C4C4C4]/40 lg:w-[95%]"></div>
       </div>
       <div className="mt-6 flex h-[90%] w-60 flex-col items-center gap-4 overflow-y-auto sm:w-80">
-        {sources.sources.map((source, index) => (
-          <div
-            key={index}
-            className="min-h-32 w-full rounded-[20px] bg-gray-1000 p-4 dark:bg-[#28292E]"
-          >
-            <span className="flex flex-row">
+        {sources.sources.map((source, index) => {
+          const isExternalSource = source.link && source.link !== 'local';
+          return (
+            <div
+              key={index}
+              className={`group/card relative w-full rounded-[20px] bg-gray-1000 p-4 transition-colors hover:bg-[#F1F1F1] dark:bg-[#28292E] dark:hover:bg-[#2C2E3C] ${
+                isExternalSource ? 'cursor-pointer' : ''
+              }`}
+              onClick={() =>
+                isExternalSource && source.link && handleCardClick(source.link)
+              }
+            >
               <p
                 title={source.title}
-                className="ellipsis-text break-words text-left text-sm font-semibold"
+                className={`ellipsis-text break-words text-left text-sm font-semibold ${
+                  isExternalSource
+                    ? 'group-hover/card:text-purple-30 dark:group-hover/card:text-[#8C67D7]'
+                    : ''
+                }`}
               >
                 {`${index + 1}. ${source.title}`}
+                {isExternalSource && (
+                  <img
+                    src={Link}
+                    alt="External Link"
+                    className={`ml-1 inline h-3 w-3 object-fill dark:invert ${
+                      isExternalSource
+                        ? 'group-hover/card:contrast-[50%] group-hover/card:hue-rotate-[235deg] group-hover/card:invert-[31%] group-hover/card:saturate-[752%] group-hover/card:sepia-[80%] group-hover/card:filter'
+                        : ''
+                    }`}
+                  />
+                )}
               </p>
-              {source.source && source.source !== 'local' ? (
-                <img
-                  src={Link}
-                  alt={'Link'}
-                  className="h-3 w-3 cursor-pointer object-fill"
-                  onClick={() =>
-                    window.open(source.source, '_blank', 'noopener, noreferrer')
-                  }
-                ></img>
-              ) : null}
-            </span>
-            <p className="mt-3 max-h-16 overflow-y-auto break-words rounded-md text-left text-xs text-black dark:text-chinese-silver">
-              {source.text}
-            </p>
-          </div>
-        ))}
+              <p className="mt-3 line-clamp-4 break-words rounded-md text-left text-xs text-black dark:text-chinese-silver">
+                {source.text}
+              </p>
+            </div>
+          );
+        })}
       </div>
     </div>
   );
 }
-
 export default ConversationBubble;
 
 function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
diff --git a/frontend/src/conversation/ConversationMessages.tsx b/frontend/src/conversation/ConversationMessages.tsx
index 2369dbc6..5c2150a6 100644
--- a/frontend/src/conversation/ConversationMessages.tsx
+++ b/frontend/src/conversation/ConversationMessages.tsx
@@ -190,7 +190,7 @@ export default function ConversationMessages({
       ref={conversationRef}
       onWheel={handleUserScrollInterruption}
       onTouchMove={handleUserScrollInterruption}
-      className="flex h-full w-full justify-center overflow-y-auto sm:pt-12"
+      className="flex h-full w-full justify-center overflow-y-auto will-change-scroll sm:pt-6 lg:pt-12"
     >
       {queries.length > 0 && !hasScrolledToLast && (
         <button
diff --git a/frontend/src/conversation/SharedConversation.tsx b/frontend/src/conversation/SharedConversation.tsx
index ba146762..3627c048 100644
--- a/frontend/src/conversation/SharedConversation.tsx
+++ b/frontend/src/conversation/SharedConversation.tsx
@@ -35,7 +35,6 @@ export const SharedConversation = () => {
   const apiKey = useSelector(selectClientAPIKey);
   const status = useSelector(selectStatus);
 
-  const [input, setInput] = useState('');
   const { t } = useTranslation();
   const dispatch = useDispatch<AppDispatch>();
 
@@ -76,15 +75,15 @@ export const SharedConversation = () => {
         });
   };
 
-  const handleQuestionSubmission = () => {
-    if (input && status !== 'loading') {
+  const handleQuestionSubmission = (question?: string) => {
+    if (question && status !== 'loading') {
       if (lastQueryReturnedErr) {
         // update last failed query with new prompt
         dispatch(
           updateQuery({
             index: queries.length - 1,
             query: {
-              prompt: input,
+              prompt: question,
             },
           }),
         );
@@ -93,9 +92,8 @@ export const SharedConversation = () => {
           isRetry: true,
         });
       } else {
-        handleQuestion({ question: input });
+        handleQuestion({ question });
       }
-      setInput('');
     }
   };
 
@@ -156,10 +154,12 @@ export const SharedConversation = () => {
         <div className="flex w-full max-w-[1200px] flex-col items-center gap-4 pb-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
           {apiKey ? (
             <MessageInput
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              onSubmit={() => handleQuestionSubmission()}
+              onSubmit={(text) => {
+                handleQuestionSubmission(text);
+              }}
               loading={status === 'loading'}
+              showSourceButton={false}
+              showToolButton={false}
             />
           ) : (
             <button
diff --git a/frontend/src/conversation/conversationModels.ts b/frontend/src/conversation/conversationModels.ts
index 734e1992..8c5a479b 100644
--- a/frontend/src/conversation/conversationModels.ts
+++ b/frontend/src/conversation/conversationModels.ts
@@ -43,7 +43,7 @@ export interface Query {
   conversationId?: string | null;
   title?: string | null;
   thought?: string;
-  sources?: { title: string; text: string; source: string }[];
+  sources?: { title: string; text: string; link: string }[];
   tool_calls?: ToolCallsType[];
   error?: string;
   attachments?: { fileName: string; id: string }[];
diff --git a/frontend/src/conversation/sharedConversationSlice.ts b/frontend/src/conversation/sharedConversationSlice.ts
index 4f784ad2..f0482fa5 100644
--- a/frontend/src/conversation/sharedConversationSlice.ts
+++ b/frontend/src/conversation/sharedConversationSlice.ts
@@ -72,7 +72,7 @@ export const fetchSharedAnswer = createAsyncThunk<Answer, { question: string }>(
               dispatch(sharedConversationSlice.actions.setStatus('failed'));
               dispatch(
                 sharedConversationSlice.actions.raiseError({
-                  index: state.conversation.queries.length - 1,
+                  index: state.sharedConversation.queries.length - 1,
                   message: data.error,
                 }),
               );
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 237cbe0e..6c1559b7 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -241,6 +241,11 @@
       "link": "Source link",
       "view_more": "{{count}} more sources"
     },
+    "attachments": {
+      "attach": "Attach",
+      "remove": "Remove attachment",
+      "uploadFailed": "Upload failed"
+    },
     "retry": "Retry"
   }
 }
diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
index af995a1c..159d56cf 100644
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -239,6 +239,11 @@
       "link": "Enlace fuente",
       "view_more": "Ver {{count}} más fuentes"
     },
+    "attachments": {
+      "attach": "Adjuntar",
+      "remove": "Eliminar adjunto",
+      "uploadFailed": "Error al subir"
+    },
     "retry": "Reintentar"
   }
 }
diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
index 597c0ceb..907513df 100644
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -238,7 +238,12 @@
       "title": "ソース",
       "text": "ソーステキスト",
       "link": "ソースリンク",
-      "view_more": "さらに{{count}}個のソースを表示"
+      "view_more": "さらに{{count}}個のソース"
+    },
+    "attachments": {
+      "attach": "添付",
+      "remove": "添付ファイルを削除",
+      "uploadFailed": "アップロード失敗"
     },
     "retry": "再試行"
   }
diff --git a/frontend/src/locale/ru.json b/frontend/src/locale/ru.json
index a428e3a8..05fa1e71 100644
--- a/frontend/src/locale/ru.json
+++ b/frontend/src/locale/ru.json
@@ -238,7 +238,12 @@
       "title": "Источники",
       "text": "Текст источника",
       "link": "Ссылка на источник",
-      "view_more": "Показать еще {{count}} источников"
+      "view_more": "ещё {{count}} источников"
+    },
+    "attachments": {
+      "attach": "Прикрепить",
+      "remove": "Удалить вложение",
+      "uploadFailed": "Ошибка загрузки"
     },
     "retry": "Повторить"
   }
diff --git a/frontend/src/locale/zh-TW.json b/frontend/src/locale/zh-TW.json
index 1321a867..7a95274e 100644
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -240,6 +240,11 @@
       "link": "來源連結",
       "view_more": "查看更多 {{count}} 個來源"
     },
+    "attachments": {
+      "attach": "附件",
+      "remove": "刪除附件",
+      "uploadFailed": "上傳失敗"
+    },
     "retry": "重試"
   }
 }
diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json
index 36a7155d..56ee7270 100644
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -238,7 +238,12 @@
       "title": "来源",
       "text": "来源文本",
       "link": "来源链接",
-      "view_more": "更多{{count}}个来源"
+      "view_more": "还有{{count}}个来源"
+    },
+    "attachments": {
+      "attach": "附件",
+      "remove": "删除附件",
+      "uploadFailed": "上传失败"
     },
     "retry": "重试"
   }
diff --git a/frontend/src/modals/WrapperModal.tsx b/frontend/src/modals/WrapperModal.tsx
index 879696b8..d2ab8e4f 100644
--- a/frontend/src/modals/WrapperModal.tsx
+++ b/frontend/src/modals/WrapperModal.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 
 import Exit from '../assets/exit.svg';
 
@@ -45,7 +46,7 @@ export default function WrapperModal({
     };
   }, [close]);
 
-  return (
+  const modalContent = (
     <div className="fixed left-0 top-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
       <div
         ref={modalRef}
@@ -63,4 +64,6 @@ export default function WrapperModal({
       </div>
     </div>
   );
+
+  return createPortal(modalContent, document.body);
 }
diff --git a/frontend/src/settings/Logs.tsx b/frontend/src/settings/Logs.tsx
index 50d67b54..d5d4d3e3 100644
--- a/frontend/src/settings/Logs.tsx
+++ b/frontend/src/settings/Logs.tsx
@@ -17,12 +17,16 @@ type LogsProps = {
 
 export default function Logs({ agentId, tableHeader }: LogsProps) {
   const token = useSelector(selectToken);
-  const [logs, setLogs] = useState<LogData[]>([]);
+  const [logsByPage, setLogsByPage] = useState<Record<number, LogData[]>>({});
   const [page, setPage] = useState(1);
   const [hasMore, setHasMore] = useState(true);
   const [loadingLogs, setLoadingLogs] = useLoaderState(true);
 
+  const logs = Object.values(logsByPage).flat();
+
   const fetchLogs = async () => {
+    if (logsByPage[page] && logsByPage[page].length > 0) return;
+
     setLoadingLogs(true);
     try {
       const response = await userService.getLogs(
@@ -34,9 +38,13 @@ export default function Logs({ agentId, tableHeader }: LogsProps) {
         token,
       );
       if (!response.ok) throw new Error('Failed to fetch logs');
-      const olderLogs = await response.json();
-      setLogs((prevLogs) => [...prevLogs, ...olderLogs.logs]);
-      setHasMore(olderLogs.has_more);
+      const data = await response.json();
+
+      setLogsByPage((prev) => ({
+        ...prev,
+        [page]: data.logs,
+      }));
+      setHasMore(data.has_more);
     } catch (error) {
       console.error(error);
     } finally {
@@ -73,16 +81,11 @@ function LogsTable({ logs, setPage, loading, tableHeader }: LogsTableProps) {
   const [openLogId, setOpenLogId] = useState<string | null>(null);
 
   const handleLogToggle = (logId: string) => {
-    if (openLogId && openLogId !== logId) {
-      // If a different log is being opened, close the current one
-      const currentOpenLog = document.getElementById(
-        openLogId,
-      ) as HTMLDetailsElement;
-      if (currentOpenLog) {
-        currentOpenLog.open = false;
-      }
+    if (openLogId === logId) {
+      setOpenLogId(null);
+    } else {
+      setOpenLogId(logId);
     }
-    setOpenLogId(logId);
   };
 
   const firstObserver = useCallback((node: HTMLDivElement | null) => {
@@ -116,16 +119,27 @@ function LogsTable({ logs, setPage, loading, tableHeader }: LogsTableProps) {
           {tableHeader ? tableHeader : t('settings.logs.tableHeader')}
         </p>
       </div>
-      <div className="flex h-[51vh] flex-grow flex-col items-start gap-2 overflow-y-auto bg-transparent p-4">
+      <div className="relative flex h-[51vh] flex-grow flex-col items-start gap-2 overflow-y-auto overscroll-contain bg-transparent p-4">
         {logs?.map((log, index) => {
           if (index === logs.length - 1) {
             return (
               <div ref={firstObserver} key={index} className="w-full">
-                <Log log={log} onToggle={handleLogToggle} />
+                <Log
+                  log={log}
+                  isOpen={openLogId === log.id}
+                  onToggle={handleLogToggle}
+                />
               </div>
             );
           } else
-            return <Log key={index} log={log} onToggle={handleLogToggle} />;
+            return (
+              <Log
+                key={index}
+                log={log}
+                isOpen={openLogId === log.id}
+                onToggle={handleLogToggle}
+              />
+            );
         })}
         {loading && <SkeletonLoader component="logs" />}
       </div>
@@ -134,9 +148,11 @@ function LogsTable({ logs, setPage, loading, tableHeader }: LogsTableProps) {
 }
 function Log({
   log,
+  isOpen,
   onToggle,
 }: {
   log: LogData;
+  isOpen: boolean;
   onToggle: (id: string) => void;
 }) {
   const { t } = useTranslation();
@@ -148,20 +164,17 @@ function Log({
   const { id, action, timestamp, ...filteredLog } = log;
 
   return (
-    <details
-      id={log.id}
-      className="group w-full rounded-xl bg-transparent hover:bg-[#F9F9F9] group-open:opacity-80 hover:dark:bg-dark-charcoal [&[open]]:border [&[open]]:border-[#d9d9d9] [&_summary::-webkit-details-marker]:hidden"
-      onToggle={(e) => {
-        if ((e.target as HTMLDetailsElement).open) {
-          onToggle(log.id);
-        }
-      }}
-    >
-      <summary className="flex cursor-pointer flex-row items-start gap-2 p-2 px-4 py-3 text-gray-900 group-open:rounded-t-xl group-open:bg-[#F1F1F1] dark:group-open:bg-[#1B1B1B]">
+    <div className="group w-full rounded-xl bg-transparent hover:bg-[#F9F9F9] hover:dark:bg-dark-charcoal">
+      <div
+        onClick={() => onToggle(log.id)}
+        className={`flex cursor-pointer flex-row items-start gap-2 p-2 px-4 py-3 text-gray-900 ${
+          isOpen ? 'rounded-t-xl bg-[#F1F1F1] dark:bg-[#1B1B1B]' : ''
+        }`}
+      >
         <img
           src={ChevronRight}
           alt="Expand log entry"
-          className="mt-[3px] h-3 w-3 transition duration-300 group-open:rotate-90"
+          className={`mt-[3px] h-3 w-3 transition duration-300 ${isOpen ? 'rotate-90' : ''}`}
         />
         <span className="flex flex-row gap-2">
           <h2 className="text-xs text-black/60 dark:text-bright-gray">{`${log.timestamp}`}</h2>
@@ -174,18 +187,22 @@ function Log({
               : log.question}
           </h2>
         </span>
-      </summary>
-      <div className="px-4 py-3 group-open:rounded-b-xl group-open:bg-[#F1F1F1] dark:group-open:bg-[#1B1B1B]">
-        <p className="break-words px-2 text-xs leading-relaxed text-gray-700 dark:text-gray-400">
-          {JSON.stringify(filteredLog, null, 2)}
-        </p>
-        <div className="my-px w-fit">
-          <CopyButton
-            textToCopy={JSON.stringify(filteredLog)}
-            showText={true}
-          />
-        </div>
       </div>
-    </details>
+      {isOpen && (
+        <div className="rounded-b-xl bg-[#F1F1F1] px-4 py-3 dark:bg-[#1B1B1B]">
+          <div className="scrollbar-thin overflow-y-auto">
+            <pre className="whitespace-pre-wrap break-words px-2 font-mono text-xs leading-relaxed text-gray-700 dark:text-gray-400">
+              {JSON.stringify(filteredLog, null, 2)}
+            </pre>
+          </div>
+          <div className="my-px w-fit">
+            <CopyButton
+              textToCopy={JSON.stringify(filteredLog)}
+              showText={true}
+            />
+          </div>
+        </div>
+      )}
+    </div>
   );
 }