diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
index 15923661..5932933e 100644
--- a/frontend/src/components/Dropdown.tsx
+++ b/frontend/src/components/Dropdown.tsx
@@ -119,7 +119,7 @@ function Dropdown({
           {options.map((option: any, index) => (
             <div
               key={index}
-              className="hover:eerie-black flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-purple-taupe"
+              className="hover:eerie-black flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-[#545561]"
             >
               <span
                 onClick={() => {
diff --git a/frontend/src/components/SourceDropdown.tsx b/frontend/src/components/SourceDropdown.tsx
index f92173a0..080ad320 100644
--- a/frontend/src/components/SourceDropdown.tsx
+++ b/frontend/src/components/SourceDropdown.tsx
@@ -83,7 +83,7 @@ function SourceDropdown({
                 return (
                   <div
                     key={index}
-                    className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-purple-taupe"
+                    className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-[#545561]"
                     onClick={() => {
                       dispatch(setSelectedDocs(option));
                       setIsDocsListOpen(false);
diff --git a/frontend/src/modals/SaveAPIKeyModal.tsx b/frontend/src/modals/SaveAPIKeyModal.tsx
index d91d0c2d..d28d2d0c 100644
--- a/frontend/src/modals/SaveAPIKeyModal.tsx
+++ b/frontend/src/modals/SaveAPIKeyModal.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Exit from '../assets/exit.svg';
 import { SaveAPIKeyModalProps } from '../models/misc';
+import WrapperModal from './WrapperModal';
 
 export default function SaveAPIKeyModal({
   apiKey,
@@ -15,38 +15,34 @@ export default function SaveAPIKeyModal({
     navigator.clipboard.writeText(apiKey);
     setIsCopied(true);
   };
+
   return (
-    <div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
-      <div className="relative w-11/12 rounded-3xl bg-white px-6 py-8 dark:bg-outer-space dark:text-bright-gray sm:w-[512px]">
-        <button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
-          <img className="filter dark:invert" src={Exit} />
-        </button>
-        <h1 className="my-0 text-xl font-medium">
-          {' '}
-          {t('modals.saveKey.note')}
-        </h1>
-        <h3 className="text-sm font-normal text-outer-space">
-          {t('modals.saveKey.disclaimer')}
-        </h3>
-        <div className="flex justify-between py-2">
-          <div>
-            <h2 className="text-base font-semibold">API Key</h2>
-            <span className="text-sm font-normal leading-7 ">{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"
-            onClick={handleCopyKey}
-          >
-            {isCopied ? t('modals.saveKey.copied') : t('modals.saveKey.copy')}
-          </button>
+    <WrapperModal close={close}>
+      <h1 className="my-0 text-xl font-medium text-jet dark:text-bright-gray">
+        {t('modals.saveKey.note')}
+      </h1>
+      <h3 className="text-sm font-normal text-outer-space dark:text-silver">
+        {t('modals.saveKey.disclaimer')}
+      </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>
         </div>
         <button
-          onClick={close}
-          className="rounded-full bg-philippine-yellow px-4 py-3 font-medium text-black hover:bg-[#E6B91A]"
+          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"
+          onClick={handleCopyKey}
         >
-          {t('modals.saveKey.confirm')}
+          {isCopied ? t('modals.saveKey.copied') : t('modals.saveKey.copy')}
         </button>
       </div>
-    </div>
+      <button
+        onClick={close}
+        className="rounded-full bg-philippine-yellow px-4 py-3 font-medium text-black hover:bg-[#E6B91A]"
+      >
+        {t('modals.saveKey.confirm')}
+      </button>
+    </WrapperModal>
   );
 }
+
diff --git a/frontend/src/preferences/PromptsModal.tsx b/frontend/src/preferences/PromptsModal.tsx
index 11cb0685..1a143cbd 100644
--- a/frontend/src/preferences/PromptsModal.tsx
+++ b/frontend/src/preferences/PromptsModal.tsx
@@ -1,8 +1,8 @@
 import { ActiveState } from '../models/misc';
-import Exit from '../assets/exit.svg';
 import Input from '../components/Input';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import WrapperModal from '../modals/WrapperModal';
 
 function AddPrompt({
   setModalState,
@@ -24,19 +24,7 @@ function AddPrompt({
   const { t } = useTranslation();
 
   return (
-    <div className="relative">
-      <button
-        className="absolute top-3 right-4 m-2 w-3"
-        onClick={() => {
-          setModalState('INACTIVE');
-          setNewPromptName('');
-          setNewPromptContent('');
-        }}
-        aria-label="Close add prompt modal"
-      >
-        <img className="filter dark:invert" src={Exit} alt="Close modal" />
-      </button>
-      <div className="p-8">
+    <div>
         <p className="mb-1 text-xl text-jet dark:text-bright-gray">
           {t('modals.prompts.addPrompt')}
         </p>
@@ -50,17 +38,13 @@ function AddPrompt({
           <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 bottom-12 left-3 mt-[-3.00px]">
-            <span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
-              {t('modals.prompts.promptName')}
-            </span>
-          </div>
           <div className="relative top-[7px] left-3">
-            <span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
+            <span className="bg-white px-1 text-xs text-silver dark:bg-[#26272E] dark:text-silver">
               {t('modals.prompts.promptText')}
             </span>
           </div>
@@ -87,7 +71,6 @@ function AddPrompt({
             {t('modals.prompts.save')}
           </button>
         </div>
-      </div>
     </div>
   );
 }
@@ -114,16 +97,7 @@ function EditPrompt({
   const { t } = useTranslation();
 
   return (
-    <div className="relative">
-      <button
-        className="absolute top-3 right-4 m-2 w-3"
-        onClick={() => {
-          setModalState('INACTIVE');
-        }}
-        aria-label="Close edit prompt modal"
-      >
-        <img className="filter dark:invert" src={Exit} alt="Close modal" />
-      </button>
+    <div>
       <div className="p-8">
         <p className="mb-1 text-xl text-jet dark:text-bright-gray">
           {t('modals.prompts.editPrompt')}
@@ -271,15 +245,19 @@ export default function PromptsModal({
   } else {
     view = <></>;
   }
-  return (
-    <article
-      className={`${
-        modalState === 'ACTIVE' ? 'visible' : 'hidden'
-      } fixed top-0 left-0 z-30  h-screen w-screen  bg-gray-alpha`}
+
+  return modalState === 'ACTIVE' ? (
+    <WrapperModal
+      close={() => {
+        setModalState('INACTIVE');
+        if (type === 'ADD') {
+          setNewPromptName('');
+          setNewPromptContent('');
+        }
+      }}
+      className="sm:w-[512px] mt-24"
     >
-      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-outer-space">
-        {view}
-      </article>
-    </article>
-  );
+      {view}
+    </WrapperModal>
+  ) : null;
 }
diff --git a/frontend/src/settings/Analytics.tsx b/frontend/src/settings/Analytics.tsx
index 4d390495..53538833 100644
--- a/frontend/src/settings/Analytics.tsx
+++ b/frontend/src/settings/Analytics.tsx
@@ -92,8 +92,10 @@ export default function Analytics() {
   const [loadingMessages, setLoadingMessages] = useLoaderState(true);
   const [loadingTokens, setLoadingTokens] = useLoaderState(true);
   const [loadingFeedback, setLoadingFeedback] = useLoaderState(true);
+  const [loadingChatbots, setLoadingChatbots] = useLoaderState(true);
 
   const fetchChatbots = async () => {
+    setLoadingChatbots(true);
     try {
       const response = await userService.getAPIKeys();
       if (!response.ok) {
@@ -103,6 +105,8 @@ export default function Analytics() {
       setChatbots(chatbots);
     } catch (error) {
       console.error(error);
+    } finally {
+      setLoadingChatbots(false);
     }
   };
 
@@ -188,37 +192,41 @@ export default function Analytics() {
   return (
     <div className="mt-12">
       <div className="flex flex-col items-start">
-        <div className="flex flex-col gap-3">
-          <p className="font-bold text-jet dark:text-bright-gray">
-            {t('settings.analytics.filterByChatbot')}
-          </p>
-          <Dropdown
-            size="w-[55vw] sm:w-[360px]"
-            options={[
-              ...chatbots.map((chatbot) => ({
-                label: chatbot.name,
-                value: chatbot.id,
-              })),
-              { label: t('settings.analytics.none'), value: '' },
-            ]}
-            placeholder={t('settings.analytics.selectChatbot')}
-            onSelect={(chatbot: { label: string; value: string }) => {
-              setSelectedChatbot(
-                chatbots.find((item) => item.id === chatbot.value),
-              );
-            }}
-            selectedValue={
-              (selectedChatbot && {
-                label: selectedChatbot.name,
-                value: selectedChatbot.id,
-              }) ||
-              null
-            }
-            rounded="3xl"
-            border="border"
-            borderColor="gray-700"
-          />
-        </div>
+        {loadingChatbots ? (
+          <SkeletonLoader component="dropdown" />
+        ) : (
+          <div className="flex flex-col gap-3">
+            <p className="font-bold text-jet dark:text-bright-gray">
+              {t('settings.analytics.filterByChatbot')}
+            </p>
+            <Dropdown
+              size="w-[55vw] sm:w-[360px]"
+              options={[
+                ...chatbots.map((chatbot) => ({
+                  label: chatbot.name,
+                  value: chatbot.id,
+                })),
+                { label: t('settings.analytics.none'), value: '' },
+              ]}
+              placeholder={t('settings.analytics.selectChatbot')}
+              onSelect={(chatbot: { label: string; value: string }) => {
+                setSelectedChatbot(
+                  chatbots.find((item) => item.id === chatbot.value),
+                );
+              }}
+              selectedValue={
+                (selectedChatbot && {
+                  label: selectedChatbot.name,
+                  value: selectedChatbot.id,
+                }) ||
+                null
+              }
+              rounded="3xl"
+              border="border"
+              borderColor="gray-700"
+            />
+          </div>
+        )}
 
         {/* Messages Analytics */}
         <div className="mt-8 w-full flex flex-col [@media(min-width:1080px)]:flex-row gap-3">
diff --git a/frontend/src/settings/Prompts.tsx b/frontend/src/settings/Prompts.tsx
index 611b0b90..ed1d82d7 100644
--- a/frontend/src/settings/Prompts.tsx
+++ b/frontend/src/settings/Prompts.tsx
@@ -168,7 +168,7 @@ export default function Prompts({
             />
           </div>
           <button
-            className="mt-[24px] rounded-3xl border border-solid border-purple-700 px-5 py-3 text-purple-700 transition-colors hover:bg-purple-700 hover:text-white dark:border-purple-400 dark:text-purple-400 dark:hover:bg-purple-400 dark:hover:text-white"
+            className="mt-[24px] rounded-3xl border border-solid border-purple-30 px-5 py-3 text-purple-30 transition-colors hover:text-white hover:bg-[#6F3FD1] dark:border-purple-30 dark:text-purple-30 dark:hover:bg-purple-30 dark:hover:text-white"
             onClick={() => {
               setModalType('ADD');
               setModalState('ACTIVE');
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index d09b2f6a..c8c9ef6d 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -101,7 +101,7 @@ function Upload({
             borderVariant="thin"
             label={field.label}
             required={isRequired}
-            colorVariant="gray"
+            colorVariant="silver"
           />
         );
       case 'number':
@@ -123,7 +123,7 @@ function Upload({
             borderVariant="thin"
             label={field.label}
             required={isRequired}
-            colorVariant="gray"
+            colorVariant="silver"
           />
         );
       case 'enum':
@@ -571,50 +571,48 @@ function Upload({
           {t('modals.uploadDoc.label')}
         </p>
         {!activeTab && (
-          <div>
-            <p className="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-white text-[#777777] dark:bg-outer-space 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-white text-[#777777] dark:bg-outer-space 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' && (
           <>
             <Input
               type="text"
-              colorVariant="gray"
+              colorVariant="silver"
               value={docName}
               onChange={(e) => setDocName(e.target.value)}
               borderVariant="thin"
-            ></Input>
-            <div className="relative bottom-12 left-2 mt-[-20px]">
-              <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
-                {t('modals.uploadDoc.name')}
-              </span>
-            </div>
-            <div {...getRootProps()}>
+              placeholder={t('modals.uploadDoc.name')}
+              label={t('modals.uploadDoc.name')}
+              required={true}
+            />
+            <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')}
@@ -649,7 +647,7 @@ function Upload({
         {activeTab === 'remote' && (
           <>
             <Dropdown
-              border="border-2"
+              border="border"
               options={urlOptions}
               selectedValue={
                 urlOptions.find((opt) => opt.value === ingestor.type) || null
@@ -664,7 +662,7 @@ function Upload({
 
             <Input
               type="text"
-              colorVariant="gray"
+              colorVariant="silver"
               value={remoteName}
               onChange={(e) => setRemoteName(e.target.value)}
               borderVariant="thin"