diff --git a/frontend/src/assets/caret-sort.svg b/frontend/src/assets/caret-sort.svg
new file mode 100644
index 00000000..9380120d
--- /dev/null
+++ b/frontend/src/assets/caret-sort.svg
@@ -0,0 +1 @@
+<svg width="18" height="18" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="gray" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 5bcc7683..1eca983c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -53,22 +53,24 @@ body.dark {
   }
 
   .table-default th {
-    @apply border-r border-silver dark:border-silver/40 p-4 w-[244px];
+    @apply p-4 w-[244px] font-normal text-gray-400; /* Remove border-r */
   }
 
   .table-default th:last-child {
-    @apply w-[auto] border-r-0;
+    @apply w-[auto];
   }
 
   .table-default td {
-    @apply border-r border-t border-silver dark:border-silver/40 px-4 py-2;
+    @apply border-t border-silver dark:border-silver/40 px-4 py-2; /* Remove border-r */
   }
 
   .table-default td:last-child {
-    @apply border-r-0;
+    @apply border-r-0; /* Ensure no right border on the last column */
   }
+
 }
 
+
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Document
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index b2ac3f83..67cdb6d0 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -6,6 +6,7 @@ import { useDispatch } from 'react-redux';
 import userService from '../api/services/userService';
 import SyncIcon from '../assets/sync.svg';
 import Trash from '../assets/trash.svg';
+import caretSort from '../assets/caret-sort.svg';
 import DropdownMenu from '../components/DropdownMenu';
 import { Doc, DocumentsProps, ActiveState } from '../models/misc'; // Ensure ActiveState type is imported
 import { getDocs } from '../preferences/preferenceApi';
@@ -97,9 +98,24 @@ const Documents: React.FC<DocumentsProps> = ({
             <thead>
               <tr>
                 <th>{t('settings.documents.name')}</th>
-                <th>{t('settings.documents.date')}</th>
-                <th>{t('settings.documents.tokenUsage')}</th>
-                <th>{t('settings.documents.type')}</th>
+                <th>
+                  <div className="flex justify-center items-center">
+                    {t('settings.documents.date')}{' '}
+                    <img src={caretSort} alt="" />{' '}
+                  </div>
+                </th>
+                <th>
+                  <div className="flex justify-center items-center">
+                    {t('settings.documents.tokenUsage')}{' '}
+                    <img src={caretSort} alt="" />
+                  </div>
+                </th>
+                <th>
+                  <div className="flex justify-center items-center">
+                    {t('settings.documents.type')}{' '}
+                    <img src={caretSort} alt="" />
+                  </div>
+                </th>
                 <th></th>
               </tr>
             </thead>
@@ -158,11 +174,16 @@ const Documents: React.FC<DocumentsProps> = ({
         </div>
         {/* Conditionally render the Upload modal based on modalState */}
         {modalState === 'ACTIVE' && (
-          <Upload
-            modalState={modalState}
-            setModalState={setModalState}
-            isOnboarding={isOnboarding} // Pass the onboarding flag
-          />
+          <div className="fixed top-0 left-0 w-screen h-screen z-50 flex items-center justify-center bg-transparent">
+            <div className="w-full h-full bg-transparent flex flex-col items-center justify-center p-8">
+              {/* Your Upload component */}
+              <Upload
+                modalState={modalState}
+                setModalState={setModalState}
+                isOnboarding={isOnboarding}
+              />
+            </div>
+          </div>
         )}
       </div>
     </div>