diff --git a/frontend/src/components/Chunks.tsx b/frontend/src/components/Chunks.tsx
index 0800cfa0..b7d97080 100644
--- a/frontend/src/components/Chunks.tsx
+++ b/frontend/src/components/Chunks.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { selectToken } from '../preferences/preferenceSlice';
-import { useDarkTheme, useLoaderState, useMediaQuery } from '../hooks';
+import { useDarkTheme, useLoaderState, useMediaQuery, useOutsideAlerter } from '../hooks';
 import userService from '../api/services/userService';
 import ArrowLeft from '../assets/arrow-left.svg';
 import NoFilesIcon from '../assets/no-files.svg';
@@ -13,7 +13,9 @@ import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState } from '../models/misc';
 import { ChunkType } from '../settings/types';
 import Pagination from './DocumentPagination';
-
+import FileIcon from '../assets/file.svg';
+import FolderIcon from '../assets/folder.svg';
+import SearchIcon from '../assets/search.svg';
 interface LineNumberedTextareaProps {
   value: string;
   onChange: (value: string) => void;
@@ -21,6 +23,7 @@ interface LineNumberedTextareaProps {
   ariaLabel?: string;
   className?: string;
   editable?: boolean;
+  onDoubleClick?: () => void;
 }
 
 const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
@@ -29,7 +32,8 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
   placeholder,
   ariaLabel,
   className = '',
-  editable = true
+  editable = true,
+  onDoubleClick
 }) => {
   const { isMobile } = useMediaQuery();
 
@@ -62,9 +66,10 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
         ))}
       </div>
       <textarea
-        className={`w-full resize-none bg-transparent dark:text-white font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] outline-none border-none pl-8 lg:pl-12 overflow-hidden ${isMobile ? 'min-h-[calc(100vh-200px)]' : 'min-h-[calc(100vh-300px)]'}`}
+        className={`w-full resize-none bg-transparent dark:text-white font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] outline-none border-none pl-8 lg:pl-12 overflow-hidden ${isMobile ? 'min-h-[calc(100vh-200px)]' : 'min-h-[calc(100vh-300px)]'} ${!editable ? 'select-none' : ''}`}
         value={value}
         onChange={editable ? handleChange : undefined}
+        onDoubleClick={onDoubleClick}
         placeholder={placeholder}
         aria-label={ariaLabel}
         rows={totalLines}
@@ -77,12 +82,18 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
   );
 };
 
+interface SearchResult {
+  path: string;
+  isFile: boolean;
+}
+
 interface ChunksProps {
   documentId: string;
   documentName?: string;
   handleGoBack: () => void;
   path?: string;
-  renderFileSearch?: () => React.ReactNode;
+  onFileSearch?: (query: string) => SearchResult[];
+  onFileSelect?: (path: string) => void;
 }
 
 const Chunks: React.FC<ChunksProps> = ({
@@ -90,8 +101,12 @@ const Chunks: React.FC<ChunksProps> = ({
   documentName,
   handleGoBack,
   path,
-  renderFileSearch
+  onFileSearch,
+  onFileSelect,
 }) => {
+  const [fileSearchQuery, setFileSearchQuery] = useState('');
+  const [fileSearchResults, setFileSearchResults] = useState<SearchResult[]>([]);
+  const searchDropdownRef = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
   const token = useSelector(selectToken);
   const [isDarkTheme] = useDarkTheme();
@@ -269,18 +284,18 @@ const Chunks: React.FC<ChunksProps> = ({
 
   const renderPathNavigation = () => {
     return (
-      <div className="mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm gap-2">
+      <div className="mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between text-base gap-2">
         <div className="flex items-center">
           <button
-            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
+            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34] transition-all duration-200 font-medium"
             onClick={editingChunk ? () => setEditingChunk(null) : isAddingChunk ? () => setIsAddingChunk(false) : handleGoBack}
           >
             <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
           </button>
 
           <div className="flex items-center flex-wrap">
-            <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5 flex-shrink-0" />
-            <span className="text-purple-30 font-medium break-words">
+            {/* Removed the directory icon */}
+            <span className="text-[#7D54D1] font-semibold break-words">
               {documentName}
             </span>
 
@@ -289,7 +304,11 @@ const Chunks: React.FC<ChunksProps> = ({
                 <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
                 {pathParts.map((part, index) => (
                   <React.Fragment key={index}>
-                    <span className="text-gray-700 dark:text-gray-300 break-words">
+                    <span className={`break-words ${
+                      index < pathParts.length - 1 
+                        ? 'text-[#7D54D1] font-medium' 
+                        : 'text-gray-700 dark:text-gray-300'
+                    }`}>
                       {part}
                     </span>
                     {index < pathParts.length - 1 && (
@@ -305,28 +324,29 @@ const Chunks: React.FC<ChunksProps> = ({
         <div className="flex flex-row flex-nowrap items-center gap-2 w-full sm:w-auto justify-end mt-2 sm:mt-0 overflow-x-auto">
           {editingChunk ? (
             !isEditing ? (
-              <button
-                className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-3 py-1 text-sm text-white transition-all text-nowrap"
-                onClick={() => setIsEditing(true)}
-              >
-                {t('modals.chunk.edit')}
-              </button>
-            ) : (
               <>
                 <button
-                  className="rounded-full border border-solid border-red-500 px-3 py-1 text-sm text-nowrap text-red-500 hover:bg-red-500 hover:text-white"
+                  className="bg-purple-30 hover:bg-violets-are-blue flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-[14px] whitespace-nowrap text-white font-medium"
+                  onClick={() => setIsEditing(true)}
+                >
+                  {t('modals.chunk.edit')}
+                </button>
+                <button
+                  className="rounded-full border border-solid border-red-500 px-4 py-1 text-[14px] text-nowrap text-red-500 hover:bg-red-500 hover:text-white h-[38px] min-w-[108px] flex items-center justify-center font-medium"
                   onClick={() => {
                     confirmDeleteChunk(editingChunk);
                   }}
                 >
                   {t('modals.chunk.delete')}
                 </button>
+              </>
+            ) : (
+              <>
                 <button
                   onClick={() => {
                     setIsEditing(false);
-                    setEditingChunk(null);
                   }}
-                  className="dark:text-light-gray cursor-pointer rounded-full px-3 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50 text-nowrap"
+                  className="dark:text-light-gray cursor-pointer rounded-full px-4 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50 text-nowrap h-[38px] min-w-[108px] flex items-center justify-center"
                 >
                   {t('modals.chunk.cancel')}
                 </button>
@@ -344,13 +364,13 @@ const Chunks: React.FC<ChunksProps> = ({
                     }
                   }}
                   disabled={!editingText.trim() || (editingTitle === (editingChunk?.metadata?.title || '') && editingText === (editingChunk?.text || ''))}
-                  className={`text-nowrap rounded-full px-3 py-1 text-sm text-white transition-all ${
+                  className={`text-nowrap rounded-full px-4 py-1 text-[14px] text-white transition-all flex items-center justify-center h-[38px] min-w-[108px] font-medium ${
                     editingText.trim() && (editingTitle !== (editingChunk?.metadata?.title || '') || editingText !== (editingChunk?.text || ''))
                       ? 'bg-purple-30 hover:bg-violets-are-blue cursor-pointer'
                       : 'bg-gray-400 cursor-not-allowed'
                   }`}
                 >
-                  {t('modals.chunk.update')}
+                  {t('modals.chunk.save')}
                 </button>
               </>
             )
@@ -358,7 +378,7 @@ const Chunks: React.FC<ChunksProps> = ({
             <>
               <button
                 onClick={() => setIsAddingChunk(false)}
-                className="dark:text-light-gray cursor-pointer rounded-full px-3 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50 text-nowrap"
+                className="dark:text-light-gray cursor-pointer rounded-full px-4 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50 text-nowrap h-[38px] min-w-[108px] flex items-center justify-center"
               >
                 {t('modals.chunk.cancel')}
               </button>
@@ -370,7 +390,7 @@ const Chunks: React.FC<ChunksProps> = ({
                   }
                 }}
                 disabled={!editingText.trim()}
-                className={`text-nowrap rounded-full px-3 py-1 text-sm text-white transition-all ${
+                className={`text-nowrap rounded-full px-4 py-1 text-[14px] text-white transition-all flex items-center justify-center h-[38px] min-w-[108px] font-medium ${
                   editingText.trim()
                     ? 'bg-purple-30 hover:bg-violets-are-blue cursor-pointer'
                     : 'bg-gray-400 cursor-not-allowed'
@@ -385,15 +405,107 @@ const Chunks: React.FC<ChunksProps> = ({
     );
   };
 
+  // File search handling
+  const handleFileSearchChange = (query: string) => {
+    setFileSearchQuery(query);
+    if (query.trim() && onFileSearch) {
+      const results = onFileSearch(query);
+      setFileSearchResults(results);
+    } else {
+      setFileSearchResults([]);
+    }
+  };
+
+  const handleSearchResultClick = (result: SearchResult) => {
+    if (!onFileSelect) return;
+
+    if (result.isFile) {
+      onFileSelect(result.path);
+    } else {
+      // For directories, navigate to the directory and return to file tree
+      onFileSelect(result.path);
+      handleGoBack();
+    }
+    setFileSearchQuery('');
+    setFileSearchResults([]);
+  };
+
+  useOutsideAlerter(
+    searchDropdownRef,
+    () => {
+      setFileSearchQuery('');
+      setFileSearchResults([]);
+    },
+    [], // No additional dependencies
+    false // Don't handle escape key
+  );
+
+  const renderFileSearch = () => {
+    return (
+      <div className="relative" ref={searchDropdownRef}>
+        <div className="relative flex items-center">
+          <div className="absolute left-3 pointer-events-none">
+            <img src={SearchIcon} alt="Search" className="w-4 h-4" />
+          </div>
+          <input
+            type="text"
+            value={fileSearchQuery}
+            onChange={(e) => handleFileSearchChange(e.target.value)}
+            placeholder={t('settings.sources.searchFiles')}
+            className={`w-full h-[38px] border border-[#D1D9E0] pl-10 pr-4 py-2 dark:border-[#6A6A6A] 
+              ${fileSearchQuery 
+                ? 'rounded-t-[6px]' 
+                : 'rounded-[6px]'
+              } 
+              bg-transparent focus:outline-none dark:text-[#E0E0E0] transition-all duration-200`}
+          />
+        </div>
+
+        {fileSearchQuery && (
+          <div className="absolute z-10 max-h-[calc(100vh-200px)] w-full overflow-y-auto rounded-b-[6px] border border-t-0 border-[#D1D9E0] bg-white shadow-lg dark:border-[#6A6A6A] dark:bg-[#1F2023]">
+            {fileSearchResults.length === 0 ? (
+              <div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
+                {t('settings.sources.noResults')}
+              </div>
+            ) : (
+              fileSearchResults.map((result, index) => (
+                <div
+                  key={index}
+                  onClick={() => handleSearchResultClick(result)}
+                  className={`flex cursor-pointer items-center px-3 py-2 hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${
+                    index !== fileSearchResults.length - 1
+                      ? 'border-b border-[#D1D9E0] dark:border-[#6A6A6A]'
+                      : ''
+                  }`}
+                >
+                  <img
+                    src={result.isFile ? FileIcon : FolderIcon}
+                    alt={result.isFile ? 'File' : 'Folder'}
+                    className="mr-2 h-4 w-4 flex-shrink-0"
+                  />
+                  <span className="text-sm dark:text-[#E0E0E0]">
+                    {result.path.split('/').pop() || result.path}
+                  </span>
+                </div>
+              ))
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
   return (
     <div className="flex flex-col">
-      <div className="mb-4">
+      <div className="mb-2">
         {renderPathNavigation()}
       </div>
       <div className="flex gap-4">
-        <div className="hidden lg:block">
-          {renderFileSearch && renderFileSearch()}
-        </div>
+        {onFileSearch && onFileSelect && (
+          <div className="hidden lg:block w-[198px]">
+            {renderFileSearch()}
+          </div>
+        )}
 
         {/* Right side: Chunks content */}
         <div className="flex-1">
@@ -420,7 +532,7 @@ const Chunks: React.FC<ChunksProps> = ({
                   </div>
                 </div>
                 <button
-                  className="bg-purple-30 hover:bg-violets-are-blue flex h-[38px] w-full sm:w-auto min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white shrink-0"
+                  className="bg-purple-30 hover:bg-violets-are-blue flex h-[38px] w-full sm:w-auto min-w-[108px] items-center justify-center rounded-full px-4 text-[14px] whitespace-normal text-white shrink-0 font-medium"
                   title={t('settings.sources.addNew')}
                   onClick={() => {
                     setIsAddingChunk(true);
@@ -500,6 +612,13 @@ const Chunks: React.FC<ChunksProps> = ({
                     onChange={setEditingText}
                     ariaLabel={t('modals.chunk.promptText')}
                     editable={isEditing}
+                    onDoubleClick={() => {
+                      if (!isEditing) {
+                        setIsEditing(true);
+                        setEditingTitle(editingChunk.metadata.title || '');
+                        setEditingText(editingChunk.text);
+                      }
+                    }}
                   />
                 </div>
               </div>
diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index cbd78277..714810c6 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -30,7 +30,7 @@ interface DirectoryStructure {
 interface FileTreeComponentProps {
   docId: string;
   sourceName: string;
-  onBackToDocuments?: () => void;
+  onBackToDocuments: () => void;
 }
 
 interface SearchResult {
@@ -444,14 +444,15 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   const renderPathNavigation = () => {
     return (
       <div className="mb-4 flex flex-col gap-3 text-sm sm:flex-row sm:items-center sm:justify-between">
+        {/* Left side with path navigation */}
         <div className="flex w-full items-center sm:w-auto">
           <button
-            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
+            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34] font-medium"
             onClick={handleBackNavigation}
           >
             <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
           </button>
-
+  
           <div className="flex flex-wrap items-center">
             <img
               src={OutlineSource}
@@ -489,39 +490,36 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           </div>
         </div>
 
-        {!selectedFile && (
-          <div className="flex w-full items-center gap-2 sm:w-auto">
-            {(processingRef.current || queueLength > 0) && (
-              <span className="text-xs text-gray-600 dark:text-gray-400">
-                {processingRef.current
-                  ? currentOpRef.current === 'add'
-                    ? t('settings.sources.uploading')
-                    : t('settings.sources.deleting')
-                  : null}
-                {queueLength > 0
-                  ? `${processingRef.current ? ' • ' : ''}${t('settings.sources.queued', { count: queueLength })}`
-                  : ''}
-              </span>
-            )}
+        {/* Right side with search and add button */}
+        <div className="flex items-center space-x-4">
+          {/* Upload status indicator */}
+          {processingRef.current && (
+            <div className="text-sm text-gray-500">
+              {currentOpRef.current === 'add' 
+                ? t('settings.sources.uploadingFilesTitle') 
+                : t('settings.sources.deletingTitle')}
+            </div>
+          )}
+          
+          {/* Search element with fixed width matching Figma specs */}
+          <div className="w-[198px]">
+            {renderFileSearch()}
+          </div>
+          
+          {/* Add file button */}
+          {!processingRef.current && (
             <button
               onClick={handleAddFile}
-              className="bg-purple-30 hover:bg-violets-are-blue flex h-[32px] w-full min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white sm:w-auto"
-              title={
-                processingRef.current
-                  ? currentOpRef.current === 'add'
-                    ? t('settings.sources.uploadingFilesTitle')
-                    : t('settings.sources.deletingTitle')
-                  : t('settings.sources.addFile')
-              }
+              className="bg-purple-30 hover:bg-violets-are-blue flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-[14px] whitespace-nowrap text-white font-medium"
+              title={t('settings.sources.addFile')}
             >
               {t('settings.sources.addFile')}
             </button>
-          </div>
-        )}
+          )}
+        </div>
       </div>
     );
   };
-
   const calculateDirectoryStats = (
     structure: DirectoryStructure,
   ): { totalSize: number; totalTokens: number } => {
@@ -620,7 +618,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               <div ref={menuRef} className="relative">
                 <button
                   onClick={(e) => handleMenuClick(e, itemId)}
-                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E]"
+                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E] font-medium"
                   aria-label={t('settings.sources.menuAlt')}
                 >
                   <img
@@ -637,7 +635,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                   options={getActionOptions(name, false, itemId)}
                   anchorRef={menuRef}
                   position="bottom-left"
-                  offset={{ x: -8, y: 8 }}
+                  offset={{ x: -4, y: 4 }}
                 />
               </div>
             </td>
@@ -676,7 +674,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               <div ref={menuRef} className="relative">
                 <button
                   onClick={(e) => handleMenuClick(e, itemId)}
-                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E]"
+                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E] font-medium"
                   aria-label={t('settings.sources.menuAlt')}
                 >
                   <img
@@ -693,7 +691,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                   options={getActionOptions(name, true, itemId)}
                   anchorRef={menuRef}
                   position="bottom-left"
-                  offset={{ x: -8, y: 8 }}
+                  offset={{ x: -4, y: 4 }}
                 />
               </div>
             </td>
@@ -754,75 +752,81 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
     setSearchQuery('');
     setSearchResults([]);
   };
+
   const renderFileSearch = () => {
     return (
-      <div className="w-[283px]" ref={searchDropdownRef}>
-        <div className="relative">
+      <div className="relative" ref={searchDropdownRef}>
           <input
             type="text"
             value={searchQuery}
             onChange={(e) => {
               setSearchQuery(e.target.value);
               if (directoryStructure) {
-                setSearchResults(
-                  searchFiles(e.target.value, directoryStructure),
-                );
+                setSearchResults(searchFiles(e.target.value, directoryStructure));
               }
             }}
             placeholder={t('settings.sources.searchFiles')}
-            className={`w-full border border-[#D1D9E0] px-4 py-2 pl-10 dark:border-[#6A6A6A] ${
-              searchQuery
-                ? 'rounded-t-md rounded-b-none border-b-0'
-                : 'rounded-md'
-            } bg-transparent focus:outline-none dark:text-[#E0E0E0]`}
+            className={`w-full h-[38px] border border-[#D1D9E0] px-4 py-2 dark:border-[#6A6A6A] 
+              ${searchQuery ? 'rounded-t-[24px]' : 'rounded-[24px]'} 
+              bg-transparent focus:outline-none dark:text-[#E0E0E0]`}
           />
 
-          <img
-            src={SearchIcon}
-            alt={t('settings.sources.searchAlt')}
-            className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform opacity-60"
-          />
-
-          {searchQuery && (
-            <div className="absolute z-10 max-h-[calc(100vh-200px)] w-full overflow-y-auto rounded-b-md border border-[#D1D9E0] bg-white shadow-lg dark:border-[#6A6A6A] dark:bg-[#1F2023]">
-              {searchResults.length === 0 ? (
-                <div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
-                  {t('settings.sources.noResults')}
+        {searchQuery && (
+          <div className="absolute z-10 max-h-[calc(100vh-200px)] w-full overflow-y-auto rounded-b-[12px] border border-t-0 border-[#D1D9E0] bg-white shadow-lg dark:border-[#6A6A6A] dark:bg-[#1F2023] transition-all duration-200">
+            {searchResults.length === 0 ? (
+              <div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
+                {t('settings.sources.noResults')}
+              </div>
+            ) : (
+              searchResults.map((result, index) => (
+                <div
+                  key={index}
+                  onClick={() => handleSearchSelect(result)}
+                  title={result.path}
+                  className={`flex cursor-pointer items-center px-3 py-2 hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${
+                    index !== searchResults.length - 1
+                      ? 'border-b border-[#D1D9E0] dark:border-[#6A6A6A]'
+                      : ''
+                  }`}
+                >
+                  <img
+                    src={result.isFile ? FileIcon : FolderIcon}
+                    alt={
+                      result.isFile
+                        ? t('settings.sources.fileAlt')
+                        : t('settings.sources.folderAlt')
+                    }
+                    className="mr-2 h-4 w-4 flex-shrink-0"
+                  />
+                  <span className="text-sm dark:text-[#E0E0E0]">
+                    {result.path.split('/').pop() || result.path}
+                  </span>
                 </div>
-              ) : (
-                searchResults.map((result, index) => (
-                  <div
-                    key={index}
-                    onClick={() => handleSearchSelect(result)}
-                    title={result.path}
-                    className={`flex cursor-pointer items-center px-3 py-2 hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${
-                      index !== searchResults.length - 1
-                        ? 'border-b border-[#D1D9E0] dark:border-[#6A6A6A]'
-                        : ''
-                    }`}
-                  >
-                    <img
-                      src={result.isFile ? FileIcon : FolderIcon}
-                      alt={
-                        result.isFile
-                          ? t('settings.sources.fileAlt')
-                          : t('settings.sources.folderAlt')
-                      }
-                      className="mr-2 h-4 w-4 flex-shrink-0"
-                    />
-                    <span className="text-sm dark:text-[#E0E0E0]">
-                      {result.path.split('/').pop() || result.path}
-                    </span>
-                  </div>
-                ))
-              )}
-            </div>
-          )}
-        </div>
+              ))
+            )}
+          </div>
+        )}
       </div>
     );
   };
 
+  const handleFileSearch = (searchQuery: string) => {
+    if (directoryStructure) {
+      return searchFiles(searchQuery, directoryStructure);
+    }
+    return [];
+  };
+
+  const handleFileSelect = (path: string) => {
+    const pathParts = path.split('/');
+      const fileName = pathParts.pop() || '';
+      setCurrentPath(pathParts);
+      setSelectedFile({
+        id: path,
+        name: fileName,
+      });
+  };
+
   return (
     <div>
       {selectedFile ? (
@@ -833,47 +837,40 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               documentName={sourceName}
               handleGoBack={() => setSelectedFile(null)}
               path={selectedFile.id}
-              renderFileSearch={renderFileSearch}
+              onFileSearch={handleFileSearch}
+              onFileSelect={handleFileSelect}
             />
           </div>
         </div>
       ) : (
         <div className="flex w-full max-w-full flex-col overflow-hidden">
-          <div className="mb-4">{renderPathNavigation()}</div>
+          <div className="mb-2">{renderPathNavigation()}</div>
 
-          <div className="flex min-w-0 gap-4">
-            {/* Left side: Search dropdown */}
-            <div className="hidden flex-shrink-0 lg:block">
-              {renderFileSearch()}
-            </div>
-
-            {/* Right side: File table */}
-            <div className="min-w-0 flex-1">
-              <div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]">
-                <table className="w-full min-w-[600px] table-auto bg-transparent">
-                  <thead className="bg-gray-100 dark:bg-[#27282D]">
-                    <tr className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]">
-                      <th className="min-w-[200px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
-                        {t('settings.sources.fileName')}
-                      </th>
-                      <th className="min-w-[80px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
-                        {t('settings.sources.tokens')}
-                      </th>
-                      <th className="min-w-[80px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
-                        {t('settings.sources.size')}
-                      </th>
-                      <th className="w-[60px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
-                        <span className="sr-only">
-                          {t('settings.sources.actions')}
-                        </span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody className="[&>tr:last-child]:border-b-0">
-                    {renderFileTree(currentDirectory)}
-                  </tbody>
-                </table>
-              </div>
+          <div className="w-full">
+            <div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]">
+              <table className="w-full min-w-[600px] table-auto bg-transparent">
+                <thead className="bg-gray-100 dark:bg-[#27282D]">
+                  <tr className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]">
+                    <th className="min-w-[200px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
+                      {t('settings.sources.fileName')}
+                    </th>
+                    <th className="min-w-[80px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
+                      {t('settings.sources.tokens')}
+                    </th>
+                    <th className="min-w-[80px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
+                      {t('settings.sources.size')}
+                    </th>
+                    <th className="w-[60px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
+                      <span className="sr-only">
+                        {t('settings.sources.actions')}
+                      </span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="[&>tr:last-child]:border-b-0">
+                  {renderFileTree(currentDirectory)}
+                </tbody>
+              </table>
             </div>
           </div>
         </div>
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 1f606339..2ded6ea4 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -270,12 +270,12 @@
     },
     "chunk": {
       "add": "Add Chunk",
-      "edit": "Edit Chunk",
+      "edit": "Edit",
       "title": "Title",
       "enterTitle": "Enter title",
       "bodyText": "Body text",
       "promptText": "Prompt Text",
-      "update": "Update",
+      "save": "Save",
       "close": "Close",
       "cancel": "Cancel",
       "delete": "Delete",
diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
index 3fe05bc1..f2a8b5ef 100644
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -270,12 +270,12 @@
     },
     "chunk": {
       "add": "Agregar Fragmento",
-      "edit": "Editar Fragmento",
+      "edit": "Editar",
       "title": "Título",
       "enterTitle": "Ingresar título",
       "bodyText": "Texto del cuerpo",
       "promptText": "Texto del prompt",
-      "update": "Actualizar",
+      "save": "Guardar",
       "close": "Cerrar",
       "cancel": "Cancelar",
       "delete": "Eliminar",
diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
index 2092231b..dc70e704 100644
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -270,12 +270,12 @@
     },
     "chunk": {
       "add": "チャンクを追加",
-      "edit": "チャンクを編集",
+      "edit": "編集",
       "title": "タイトル",
       "enterTitle": "タイトルを入力",
       "bodyText": "本文",
       "promptText": "プロンプトテキスト",
-      "update": "更新",
+      "save": "保存",
       "close": "閉じる",
       "cancel": "キャンセル",
       "delete": "削除",
diff --git a/frontend/src/locale/ru.json b/frontend/src/locale/ru.json
index 30d7a435..efd4140a 100644
--- a/frontend/src/locale/ru.json
+++ b/frontend/src/locale/ru.json
@@ -270,12 +270,12 @@
     },
     "chunk": {
       "add": "Добавить фрагмент",
-      "edit": "Редактировать фрагмент",
+      "edit": "Редактировать",
       "title": "Заголовок",
       "enterTitle": "Введите заголовок",
       "bodyText": "Текст",
       "promptText": "Текст подсказки",
-      "update": "Обновить",
+      "save": "Сохранить",
       "close": "Закрыть",
       "cancel": "Отмена",
       "delete": "Удалить",
diff --git a/frontend/src/locale/zh-TW.json b/frontend/src/locale/zh-TW.json
index a893a716..3a14df3f 100644
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -270,12 +270,12 @@
     },
     "chunk": {
       "add": "新增區塊",
-      "edit": "編輯區塊",
+      "edit": "編輯",
       "title": "標題",
       "enterTitle": "輸入標題",
       "bodyText": "內文",
       "promptText": "提示文字",
-      "update": "更新",
+      "save": "儲存",
       "close": "關閉",
       "cancel": "取消",
       "delete": "刪除",
diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json
index 70a163fa..61d0e973 100644
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -270,12 +270,12 @@
     },
     "chunk": {
       "add": "添加块",
-      "edit": "编辑块",
+      "edit": "编辑",
       "title": "标题",
       "enterTitle": "输入标题",
       "bodyText": "正文",
       "promptText": "提示文本",
-      "update": "更新",
+      "save": "保存",
       "close": "关闭",
       "cancel": "取消",
       "delete": "删除",
diff --git a/frontend/src/settings/Sources.tsx b/frontend/src/settings/Sources.tsx
index e2302a4e..c1aa079a 100644
--- a/frontend/src/settings/Sources.tsx
+++ b/frontend/src/settings/Sources.tsx
@@ -303,7 +303,7 @@ export default function Sources({
             />
           </div>
           <button
-            className="bg-purple-30 hover:bg-violets-are-blue flex h-[32px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white"
+            className="bg-purple-30 hover:bg-violets-are-blue flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-[14px] whitespace-normal text-white"
             title={t('settings.sources.addNew')}
             onClick={() => {
               setIsOnboarding(false);