diff --git a/frontend/src/modals/AddToolModal.tsx b/frontend/src/modals/AddToolModal.tsx
index d48882a1..c11a5043 100644
--- a/frontend/src/modals/AddToolModal.tsx
+++ b/frontend/src/modals/AddToolModal.tsx
@@ -2,7 +2,6 @@ import React, { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import userService from '../api/services/userService';
-import Exit from '../assets/exit.svg';
 import { useOutsideAlerter } from '../hooks';
 import { ActiveState } from '../models/misc';
 import ConfigToolModal from './ConfigToolModal';
@@ -90,7 +89,7 @@ export default function AddToolModal({
   return (
     <>
       {modalState === 'ACTIVE' && (
-        <WrapperComponent 
+        <WrapperComponent
           close={() => setModalState('INACTIVE')}
           className="h-[85vh] w-[90vw] md:w-[75vw]"
         >
diff --git a/frontend/src/modals/ConfigToolModal.tsx b/frontend/src/modals/ConfigToolModal.tsx
index d8585899..04553677 100644
--- a/frontend/src/modals/ConfigToolModal.tsx
+++ b/frontend/src/modals/ConfigToolModal.tsx
@@ -43,9 +43,7 @@ export default function ConfigToolModal({
   if (modalState !== 'ACTIVE') return null;
 
   return (
-    <WrapperModal
-      close={() => setModalState('INACTIVE')}
-    >
+    <WrapperModal close={() => setModalState('INACTIVE')}>
       <div>
         <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
           {t('modals.configTool.title')}
diff --git a/frontend/src/modals/CreateAPIKeyModal.tsx b/frontend/src/modals/CreateAPIKeyModal.tsx
index 5495f520..128bdff6 100644
--- a/frontend/src/modals/CreateAPIKeyModal.tsx
+++ b/frontend/src/modals/CreateAPIKeyModal.tsx
@@ -73,7 +73,7 @@ export default function CreateAPIKeyModal({
     handleFetchPrompts();
   }, []);
   return (
-    <WrapperModal close={close} className='p-4'>
+    <WrapperModal close={close} className="p-4">
       <div className="mb-6">
         <span className="text-xl text-jet dark:text-bright-gray">
           {t('modals.createAPIKey.label')}
@@ -86,7 +86,7 @@ export default function CreateAPIKeyModal({
           value={APIKeyName}
           label={t('modals.createAPIKey.apiKeyName')}
           onChange={(e) => setAPIKeyName(e.target.value)}
-          borderVariant='thin'
+          borderVariant="thin"
         ></Input>
       </div>
       <div className="my-4">
diff --git a/frontend/src/modals/SaveAPIKeyModal.tsx b/frontend/src/modals/SaveAPIKeyModal.tsx
index d28d2d0c..abe862cb 100644
--- a/frontend/src/modals/SaveAPIKeyModal.tsx
+++ b/frontend/src/modals/SaveAPIKeyModal.tsx
@@ -26,8 +26,12 @@ export default function SaveAPIKeyModal({
       </h3>
       <div className="flex justify-between py-2">
         <div>
-          <h2 className="text-base font-semibold text-jet dark:text-bright-gray">API Key</h2>
-          <span className="text-sm font-normal leading-7 text-jet dark:text-bright-gray">{apiKey}</span>
+          <h2 className="text-base font-semibold text-jet dark:text-bright-gray">
+            API Key
+          </h2>
+          <span className="text-sm font-normal leading-7 text-jet dark:text-bright-gray">
+            {apiKey}
+          </span>
         </div>
         <button
           className="my-1 h-10 w-20 rounded-full border border-solid border-purple-30 p-2 text-sm text-purple-30 hover:bg-purple-30 hover:text-white"
@@ -45,4 +49,3 @@ export default function SaveAPIKeyModal({
     </WrapperModal>
   );
 }
-
diff --git a/frontend/src/modals/WrapperModal.tsx b/frontend/src/modals/WrapperModal.tsx
index b945a60a..6d5d8543 100644
--- a/frontend/src/modals/WrapperModal.tsx
+++ b/frontend/src/modals/WrapperModal.tsx
@@ -59,9 +59,7 @@ export default function WrapperModal({
             <img className="filter dark:invert" src={Exit} alt="Close" />
           </button>
         )}
-        <div className={`${contentClassName}`}>
-          {children}
-        </div>
+        <div className={`${contentClassName}`}>{children}</div>
       </div>
     </div>
   );
diff --git a/frontend/src/preferences/PromptsModal.tsx b/frontend/src/preferences/PromptsModal.tsx
index 1a143cbd..f2512210 100644
--- a/frontend/src/preferences/PromptsModal.tsx
+++ b/frontend/src/preferences/PromptsModal.tsx
@@ -25,52 +25,52 @@ function AddPrompt({
 
   return (
     <div>
-        <p className="mb-1 text-xl text-jet dark:text-bright-gray">
-          {t('modals.prompts.addPrompt')}
-        </p>
-        <p className="mb-7 text-xs text-[#747474] dark:text-[#7F7F82]">
-          {t('modals.prompts.addDescription')}
-        </p>
-        <div>
-          <label htmlFor="new-prompt-name" className="sr-only">
-            Prompt Name
-          </label>
-          <Input
-            placeholder={t('modals.prompts.promptName')}
-            type="text"
-            label={t('modals.prompts.promptName')}
-            className="h-10 rounded-lg"
-            value={newPromptName}
-            onChange={(e) => setNewPromptName(e.target.value)}
-          />
-          <div className="relative top-[7px] left-3">
-            <span className="bg-white px-1 text-xs text-silver dark:bg-[#26272E] dark:text-silver">
-              {t('modals.prompts.promptText')}
-            </span>
-          </div>
-          <label htmlFor="new-prompt-content" className="sr-only">
-            Prompt Text
-          </label>
-          <textarea
-            id="new-prompt-content"
-            className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
-            value={newPromptContent}
-            onChange={(e) => setNewPromptContent(e.target.value)}
-            aria-label="Prompt Text"
-          ></textarea>
-        </div>
-        <div className="mt-6 flex flex-row-reverse">
-          <button
-            onClick={handleAddPrompt}
-            className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:opacity-90"
-            disabled={disableSave}
-            title={
-              disableSave && newPromptName ? t('modals.prompts.nameExists') : ''
-            }
-          >
-            {t('modals.prompts.save')}
-          </button>
+      <p className="mb-1 text-xl text-jet dark:text-bright-gray">
+        {t('modals.prompts.addPrompt')}
+      </p>
+      <p className="mb-7 text-xs text-[#747474] dark:text-[#7F7F82]">
+        {t('modals.prompts.addDescription')}
+      </p>
+      <div>
+        <label htmlFor="new-prompt-name" className="sr-only">
+          Prompt Name
+        </label>
+        <Input
+          placeholder={t('modals.prompts.promptName')}
+          type="text"
+          label={t('modals.prompts.promptName')}
+          className="h-10 rounded-lg"
+          value={newPromptName}
+          onChange={(e) => setNewPromptName(e.target.value)}
+        />
+        <div className="relative top-[7px] left-3">
+          <span className="bg-white px-1 text-xs text-silver dark:bg-[#26272E] dark:text-silver">
+            {t('modals.prompts.promptText')}
+          </span>
         </div>
+        <label htmlFor="new-prompt-content" className="sr-only">
+          Prompt Text
+        </label>
+        <textarea
+          id="new-prompt-content"
+          className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
+          value={newPromptContent}
+          onChange={(e) => setNewPromptContent(e.target.value)}
+          aria-label="Prompt Text"
+        ></textarea>
+      </div>
+      <div className="mt-6 flex flex-row-reverse">
+        <button
+          onClick={handleAddPrompt}
+          className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:opacity-90"
+          disabled={disableSave}
+          title={
+            disableSave && newPromptName ? t('modals.prompts.nameExists') : ''
+          }
+        >
+          {t('modals.prompts.save')}
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index c8c9ef6d..f97473d5 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -571,34 +571,34 @@ function Upload({
           {t('modals.uploadDoc.label')}
         </p>
         {!activeTab && (
-  <div>
-    <p className="dark text-gray-6000 dark:text-bright-gray text-sm text-center font-medium">
-      {t('modals.uploadDoc.select')}
-    </p>
-    <div className="w-full gap-4 h-full p-4 flex flex-col md:flex-row md:gap-4 justify-center items-center">
-      <button
-        onClick={() => setActiveTab('file')}
-        className="opacity-85 hover:opacity-100 rounded-3xl text-sm font-medium border flex flex-col items-center justify-center hover:shadow-purple-30/30 hover:shadow-lg p-8 gap-4 bg-transparent text-[#777777] dark:bg-transparent dark:text-[#c3c3c3] hover:border-purple-30 border-[#D7D7D7] h-40 w-40 md:w-52 md:h-52"
-      >
-        <img
-          src={FileUpload}
-          className="w-12 h-12 mr-2 dark:filter dark:invert dark:brightness-50"
-        />
-        {t('modals.uploadDoc.file')}
-      </button>
-      <button
-        onClick={() => setActiveTab('remote')}
-        className="opacity-85 hover:opacity-100 rounded-3xl text-sm font-medium border flex flex-col items-center justify-center hover:shadow-purple-30/30 hover:shadow-lg p-8 gap-4 bg-transparent text-[#777777] dark:bg-transparent dark:text-[#c3c3c3] hover:border-purple-30 border-[#D7D7D7] h-40 w-40 md:w-52 md:h-52"
-      >
-        <img
-          src={WebsiteCollect}
-          className="w-14 h-14 mr-2 dark:filter dark:invert dark:brightness-50"
-        />
-        {t('modals.uploadDoc.remote')}
-      </button>
-    </div>
-  </div>
-)}
+          <div>
+            <p className="dark text-gray-6000 dark:text-bright-gray text-sm text-center font-medium">
+              {t('modals.uploadDoc.select')}
+            </p>
+            <div className="w-full gap-4 h-full p-4 flex flex-col md:flex-row md:gap-4 justify-center items-center">
+              <button
+                onClick={() => setActiveTab('file')}
+                className="opacity-85 hover:opacity-100 rounded-3xl text-sm font-medium border flex flex-col items-center justify-center hover:shadow-purple-30/30 hover:shadow-lg p-8 gap-4 bg-transparent text-[#777777] dark:bg-transparent dark:text-[#c3c3c3] hover:border-purple-30 border-[#D7D7D7] h-40 w-40 md:w-52 md:h-52"
+              >
+                <img
+                  src={FileUpload}
+                  className="w-12 h-12 mr-2 dark:filter dark:invert dark:brightness-50"
+                />
+                {t('modals.uploadDoc.file')}
+              </button>
+              <button
+                onClick={() => setActiveTab('remote')}
+                className="opacity-85 hover:opacity-100 rounded-3xl text-sm font-medium border flex flex-col items-center justify-center hover:shadow-purple-30/30 hover:shadow-lg p-8 gap-4 bg-transparent text-[#777777] dark:bg-transparent dark:text-[#c3c3c3] hover:border-purple-30 border-[#D7D7D7] h-40 w-40 md:w-52 md:h-52"
+              >
+                <img
+                  src={WebsiteCollect}
+                  className="w-14 h-14 mr-2 dark:filter dark:invert dark:brightness-50"
+                />
+                {t('modals.uploadDoc.remote')}
+              </button>
+            </div>
+          </div>
+        )}
 
         {activeTab === 'file' && (
           <>
@@ -612,7 +612,7 @@ function Upload({
               label={t('modals.uploadDoc.name')}
               required={true}
             />
-            <div className='my-2' {...getRootProps()}>
+            <div className="my-2" {...getRootProps()}>
               <span className="rounded-3xl bg-transparent px-4 py-2 font-medium text-purple-30 hover:cursor-pointer dark:text-silver border border-[#7F7F82]">
                 <input type="button" {...getInputProps()} />
                 {t('modals.uploadDoc.choose')}