diff --git a/frontend/public/fonts/Inter-Variable.ttf b/frontend/public/fonts/Inter-Variable.ttf
new file mode 100644
index 0000000..e724708
Binary files /dev/null and b/frontend/public/fonts/Inter-Variable.ttf differ
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 39fb5f0..2e58b3a 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -20,7 +20,7 @@ import Add from './assets/add.svg';
 import UploadIcon from './assets/upload.svg';
 import { ActiveState } from './models/misc';
 import APIKeyModal from './preferences/APIKeyModal';
-import DeleteConvModal from './preferences/DeleteConvModal';
+import DeleteConvModal from './modals/DeleteConvModal';
 
 import {
   selectApiKeyStatus,
@@ -275,10 +275,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           </p>
         </NavLink>
         <div className="mb-auto h-[56vh] overflow-y-auto overflow-x-hidden dark:text-white">
-          {conversations && (
+          {conversations && conversations.length > 0 ? (
             <div>
               <div className=" my-auto mx-4 mt-2 flex h-6 items-center justify-between gap-4 rounded-3xl">
-                <p className="my-auto ml-6 text-sm font-semibold">Chats</p>
+                <p className="mt-1 ml-4 text-sm font-semibold">Chats</p>
               </div>
               <div className="conversations-container">
                 {conversations?.map((conversation) => (
@@ -294,12 +294,14 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 ))}
               </div>
             </div>
+          ) : (
+            <></>
           )}
         </div>
 
         <div className="flex h-auto flex-col justify-end text-eerie-black dark:text-white">
           <div className="flex flex-col-reverse border-b-[1px] dark:border-b-purple-taupe">
-            <div className="relative my-4 flex gap-2 px-2">
+            <div className="relative my-4 mx-4 flex gap-2">
               <SourceDropdown
                 options={docs}
                 selectedDocs={selectedDocs}
@@ -314,13 +316,13 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 onClick={() => setUploadModalState('ACTIVE')}
               ></img>
             </div>
-            <p className="ml-6 mt-3 text-sm font-semibold">Source Docs</p>
+            <p className="ml-5 mt-3 text-sm font-semibold">Source Docs</p>
           </div>
           <div className="flex flex-col gap-2 border-b-[1px] py-2 dark:border-b-purple-taupe">
             <NavLink
               to="/settings"
               className={({ isActive }) =>
-                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${
+                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
                   isActive ? 'bg-gray-3000 dark:bg-transparent' : ''
                 }`
               }
@@ -335,8 +337,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             <NavLink
               to="/about"
               className={({ isActive }) =>
-                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${
-                  isActive ? 'bg-gray-3000 dark:bg-purple-taupe' : ''
+                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
+                  isActive ? 'bg-gray-3000 dark:bg-[#28292E]' : ''
                 }`
               }
             >
@@ -348,7 +350,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               href="https://docs.docsgpt.cloud/"
               target="_blank"
               rel="noreferrer"
-              className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
+              className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E]"
             >
               <NavImage Light={Documentation} Dark={DocumentationDark} />
               <p className="my-auto text-sm ">Documentation</p>
@@ -357,7 +359,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               href="https://discord.gg/WHJdfbQDR4"
               target="_blank"
               rel="noreferrer"
-              className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
+              className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E]"
             >
               <NavImage Light={Discord} Dark={DiscordDark} />
               {/*  <img src={isDarkTheme ? DiscordDark : Discord} alt="discord-link" className="ml-2 w-5" /> */}
@@ -368,7 +370,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               href="https://github.com/arc53/DocsGPT"
               target="_blank"
               rel="noreferrer"
-              className="mx-4 mt-auto flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
+              className="mx-4 mt-auto flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E]"
             >
               <NavImage Light={Github} Dark={GithubDark} />
               <p className="my-auto text-sm">Visit our Github</p>
diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
index b08bbd1..670a2d6 100644
--- a/frontend/src/components/Dropdown.tsx
+++ b/frontend/src/components/Dropdown.tsx
@@ -9,6 +9,8 @@ function Dropdown({
   onSelect,
   size = 'w-32',
   rounded = 'xl',
+  border = 'border-2',
+  borderColor = 'silver',
   showEdit,
   onEdit,
   showDelete,
@@ -26,6 +28,8 @@ function Dropdown({
     | ((value: { label: string; value: string }) => void);
   size?: string;
   rounded?: 'xl' | '3xl';
+  border?: 'border' | 'border-2';
+  borderColor?: string;
   showEdit?: boolean;
   onEdit?: (value: { name: string; id: string; type: string }) => void;
   showDelete?: boolean;
@@ -33,6 +37,8 @@ function Dropdown({
   placeholder?: string;
 }) {
   const [isOpen, setIsOpen] = React.useState(false);
+  const borderRadius = rounded === 'xl' ? 'rounded-xl' : 'rounded-3xl';
+  const borderTopRadius = rounded === 'xl' ? 'rounded-t-xl' : 'rounded-t-3xl';
   return (
     <div
       className={[
@@ -44,8 +50,8 @@ function Dropdown({
     >
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className={`flex w-full cursor-pointer items-center justify-between border-2 border-silver bg-white px-5 py-3 dark:border-chinese-silver dark:bg-transparent ${
-          isOpen ? `rounded-t-${rounded}` : `rounded-${rounded}`
+        className={`flex w-full cursor-pointer items-center justify-between ${border} border-${borderColor} bg-white px-5 py-3 dark:border-${borderColor}/40 dark:bg-transparent ${
+          isOpen ? `${borderTopRadius}` : `${borderRadius}`
         }`}
       >
         {typeof selectedValue === 'string' ? (
@@ -74,7 +80,9 @@ function Dropdown({
         />
       </button>
       {isOpen && (
-        <div className="absolute left-0 right-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl border-2 border-silver bg-white shadow-lg dark:border-chinese-silver dark:bg-dark-charcoal">
+        <div
+          className={`absolute left-0 right-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl ${border} border-${borderColor} bg-white shadow-lg dark:border-${borderColor}/40 dark:bg-dark-charcoal`}
+        >
           {options.map((option: any, index) => (
             <div
               key={index}
diff --git a/frontend/src/components/SourceDropdown.tsx b/frontend/src/components/SourceDropdown.tsx
index 353d49d..795ce5d 100644
--- a/frontend/src/components/SourceDropdown.tsx
+++ b/frontend/src/components/SourceDropdown.tsx
@@ -34,14 +34,16 @@ function SourceDropdown({
     <div className="relative w-5/6 rounded-3xl">
       <button
         onClick={() => setIsDocsListOpen(!isDocsListOpen)}
-        className={`flex w-full cursor-pointer items-center  border-2 bg-white p-3 dark:border-chinese-silver dark:bg-transparent ${
-          isDocsListOpen ? 'rounded-t-3xl' : 'rounded-3xl'
+        className={`flex w-full cursor-pointer items-center border border-silver bg-white p-[14px] dark:bg-transparent ${
+          isDocsListOpen
+            ? 'rounded-t-3xl dark:border-silver/40'
+            : 'rounded-3xl dark:border-purple-taupe'
         }`}
       >
         <span className="ml-1 mr-2 flex-1 overflow-hidden text-ellipsis text-left dark:text-bright-gray">
           <div className="flex flex-row gap-2">
             <p className="max-w-3/4 truncate whitespace-nowrap">
-              {selectedDocs?.name || ''}
+              {selectedDocs?.name || 'None'}
             </p>
             <p className="flex flex-col items-center justify-center">
               {selectedDocs?.version}
@@ -57,7 +59,7 @@ function SourceDropdown({
         />
       </button>
       {isDocsListOpen && (
-        <div className="absolute left-0 right-0 z-50 -mt-1 max-h-40 overflow-y-auto rounded-b-xl border-2 bg-white  shadow-lg dark:border-chinese-silver dark:bg-dark-charcoal">
+        <div className="absolute left-0 right-0 z-50 -mt-1 max-h-40 overflow-y-auto rounded-b-xl border border-silver bg-white shadow-lg dark:border-silver/40 dark:bg-dark-charcoal">
           {options ? (
             options.map((option: any, index: number) => {
               if (option.model === embeddingsName) {
@@ -95,16 +97,14 @@ function SourceDropdown({
               }
             })
           ) : (
-            <div className="h-10 w-full cursor-pointer  border-b-[1px] hover:bg-gray-100 dark:border-b-purple-taupe dark:hover:bg-purple-taupe">
-              <p className="ml-5 py-3">No default documentation.</p>
-            </div>
+            <></>
           )}
           <div
             className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-purple-taupe"
             onClick={handleEmptyDocumentSelect}
           >
             <span className="ml-4 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
-              Empty
+              None
             </span>
           </div>
         </div>
diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx
index 4b037a8..b9d2301 100644
--- a/frontend/src/conversation/ConversationTile.tsx
+++ b/frontend/src/conversation/ConversationTile.tsx
@@ -32,15 +32,6 @@ export default function ConversationTile({
   const [isDarkTheme] = useDarkTheme();
   const [isEdit, setIsEdit] = useState(false);
   const [conversationName, setConversationsName] = useState('');
-  // useOutsideAlerter(
-  //   tileRef,
-  //   () =>
-  //     handleSaveConversation({
-  //       id: conversationId || conversation.id,
-  //       name: conversationName,
-  //     }),
-  //   [conversationName],
-  // );
 
   useEffect(() => {
     setConversationsName(conversation.name);
@@ -69,9 +60,9 @@ export default function ConversationTile({
       onClick={() => {
         selectConversation(conversation.id);
       }}
-      className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${
+      className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
         conversationId === conversation.id
-          ? 'bg-gray-100 dark:bg-purple-taupe'
+          ? 'bg-gray-100 dark:bg-[#28292E]'
           : ''
       }`}
     >
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b35385b..c47b442 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -398,3 +398,13 @@ template {
     padding: 16px;
   }
 }
+
+@font-face {
+  font-family: 'Inter';
+  font-weight: 100 200 300 400 500 600 700 800 900;
+  src: url('/fonts/Inter-Variable.ttf');
+}
+
+::-webkit-scrollbar {
+  width: 0;
+}
diff --git a/frontend/src/modals/ConfirmationModal.tsx b/frontend/src/modals/ConfirmationModal.tsx
new file mode 100644
index 0000000..c5b4cf4
--- /dev/null
+++ b/frontend/src/modals/ConfirmationModal.tsx
@@ -0,0 +1,68 @@
+import Exit from '../assets/exit.svg';
+import { ActiveState } from '../models/misc';
+
+function ConfirmationModal({
+  message,
+  modalState,
+  setModalState,
+  submitLabel,
+  handleSubmit,
+  cancelLabel,
+  handleCancel,
+}: {
+  message: string;
+  modalState: ActiveState;
+  setModalState: (state: ActiveState) => void;
+  submitLabel: string;
+  handleSubmit: () => void;
+  cancelLabel?: string;
+  handleCancel?: () => void;
+}) {
+  return (
+    <article
+      className={`${
+        modalState === 'ACTIVE' ? 'visible' : 'hidden'
+      } fixed top-0 left-0 z-30  h-screen w-screen  bg-gray-alpha`}
+    >
+      <article className="mx-auto mt-[35vh] flex w-[90vw] max-w-lg  flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-outer-space">
+        <div className="relative">
+          <button
+            className="absolute top-3 right-4 m-2 w-3"
+            onClick={() => {
+              setModalState('INACTIVE');
+              handleCancel && handleCancel();
+            }}
+          >
+            <img className="filter dark:invert" src={Exit} />
+          </button>
+          <div className="p-8">
+            <p className="font-base mb-1 w-[90%] text-lg text-jet dark:text-bright-gray">
+              {message}
+            </p>
+            <div>
+              <div className="mt-6 flex flex-row-reverse gap-1">
+                <button
+                  onClick={handleSubmit}
+                  className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
+                >
+                  {submitLabel}
+                </button>
+                <button
+                  onClick={() => {
+                    setModalState('INACTIVE');
+                    handleCancel && handleCancel();
+                  }}
+                  className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
+                >
+                  {cancelLabel ? cancelLabel : 'Cancel'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </article>
+    </article>
+  );
+}
+
+export default ConfirmationModal;
diff --git a/frontend/src/preferences/DeleteConvModal.tsx b/frontend/src/modals/DeleteConvModal.tsx
similarity index 57%
rename from frontend/src/preferences/DeleteConvModal.tsx
rename to frontend/src/modals/DeleteConvModal.tsx
index ba7ed06..4371fc1 100644
--- a/frontend/src/preferences/DeleteConvModal.tsx
+++ b/frontend/src/modals/DeleteConvModal.tsx
@@ -1,8 +1,9 @@
-import { useRef } from 'react';
-import { ActiveState } from '../models/misc';
-import { useMediaQuery, useOutsideAlerter } from './../hooks';
-import Modal from '../Modal';
+import React from 'react';
 import { useDispatch } from 'react-redux';
+import { ActiveState } from '../models/misc';
+import { useMediaQuery, useOutsideAlerter } from '../hooks';
+import ConfirmationModal from './ConfirmationModal';
+
 import { Action } from '@reduxjs/toolkit';
 
 export default function DeleteConvModal({
@@ -14,8 +15,8 @@ export default function DeleteConvModal({
   setModalState: (val: ActiveState) => Action;
   handleDeleteAllConv: () => void;
 }) {
+  const modalRef = React.useRef(null);
   const dispatch = useDispatch();
-  const modalRef = useRef(null);
   const { isMobile } = useMediaQuery();
 
   useOutsideAlerter(
@@ -38,25 +39,13 @@ export default function DeleteConvModal({
   }
 
   return (
-    <Modal
-      handleCancel={handleCancel}
-      isError={false}
+    <ConfirmationModal
+      message="Are you sure you want to delete all the conversations?"
       modalState={modalState}
-      isCancellable={true}
+      setModalState={setModalState}
+      submitLabel={'Delete'}
       handleSubmit={handleSubmit}
-      textDelete={true}
-      render={() => {
-        return (
-          <article
-            ref={modalRef}
-            className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-t-lg bg-white dark:bg-outer-space dark:text-silver p-6 shadow-lg"
-          >
-            <p className="text-xl text-jet dark:text-silver">
-              Are you sure you want to delete all the conversations?
-            </p>
-          </article>
-        );
-      }}
+      handleCancel={handleCancel}
     />
   );
 }
diff --git a/frontend/src/Modal/index.tsx b/frontend/src/modals/index.tsx
similarity index 100%
rename from frontend/src/Modal/index.tsx
rename to frontend/src/modals/index.tsx
diff --git a/frontend/src/preferences/APIKeyModal.tsx b/frontend/src/preferences/APIKeyModal.tsx
index 7aeeadb..dd7a1b8 100644
--- a/frontend/src/preferences/APIKeyModal.tsx
+++ b/frontend/src/preferences/APIKeyModal.tsx
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { ActiveState } from '../models/misc';
 import { selectApiKey, setApiKey } from './preferenceSlice';
 import { useMediaQuery, useOutsideAlerter } from './../hooks';
-import Modal from '../Modal';
+import Modal from '../modals';
 
 export default function APIKeyModal({
   modalState,
diff --git a/frontend/src/preferences/PromptsModal.tsx b/frontend/src/preferences/PromptsModal.tsx
index da95dc0..c16ddd2 100644
--- a/frontend/src/preferences/PromptsModal.tsx
+++ b/frontend/src/preferences/PromptsModal.tsx
@@ -37,7 +37,7 @@ function AddPrompt({
           <input
             placeholder="Prompt Name"
             type="text"
-            className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+            className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
             value={newPromptName}
             onChange={(e) => setNewPromptName(e.target.value)}
           ></input>
@@ -52,7 +52,7 @@ function AddPrompt({
             </span>
           </div>
           <textarea
-            className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:bg-transparent dark:text-silver"
+            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)}
           ></textarea>
@@ -108,7 +108,7 @@ function EditPrompt({
           <input
             placeholder="Prompt Name"
             type="text"
-            className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+            className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
             value={editPromptName}
             onChange={(e) => setEditPromptName(e.target.value)}
           ></input>
@@ -123,7 +123,7 @@ function EditPrompt({
             </span>
           </div>
           <textarea
-            className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:bg-transparent dark:text-silver"
+            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={editPromptContent}
             onChange={(e) => setEditPromptContent(e.target.value)}
           ></textarea>
diff --git a/frontend/src/preferences/SelectDocsModal.tsx b/frontend/src/preferences/SelectDocsModal.tsx
index c8c8ef7..edb2714 100644
--- a/frontend/src/preferences/SelectDocsModal.tsx
+++ b/frontend/src/preferences/SelectDocsModal.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { ActiveState } from '../models/misc';
-import Modal from '../Modal';
+import Modal from '../modals';
 import {
   setSelectedDocs,
   setSourceDocs,
diff --git a/frontend/src/settings/APIKeys.tsx b/frontend/src/settings/APIKeys.tsx
index 7803ff4..b7a98c8 100644
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -95,7 +95,7 @@ const APIKeys: React.FC = () => {
         <div className="flex justify-end">
           <button
             onClick={() => setCreateModal(true)}
-            className="rounded-full bg-purple-30 px-4 py-3 text-sm text-white hover:opacity-90"
+            className="rounded-full bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
           >
             Create new
           </button>
@@ -234,7 +234,7 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
           </span>
           <input
             type="text"
-            className="h-10 w-full rounded-md border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+            className="h-[42px] w-full rounded-md border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
             value={APIKeyName}
             onChange={(e) => setAPIKeyName(e.target.value)}
           />
@@ -285,7 +285,7 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
               chunks: chunk,
             })
           }
-          className="float-right mt-4 rounded-full bg-purple-30 px-4 py-3 text-white disabled:opacity-50"
+          className="float-right mt-4 rounded-full bg-purple-30 px-5 py-2 text-sm text-white hover:bg-[#6F3FD1] disabled:opacity-50"
         >
           Create
         </button>
@@ -316,7 +316,7 @@ const SaveAPIKeyModal: React.FC<SaveAPIKeyModalProps> = ({ apiKey, close }) => {
             <span className="text-sm font-normal leading-7 ">{apiKey}</span>
           </div>
           <button
-            className="my-1 h-10 w-20 rounded-full border border-purple-30 p-2 text-sm text-purple-30 hover:bg-purple-30 hover:text-white dark:border-purple-500 dark:text-purple-500"
+            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 ? 'Copied' : 'Copy'}
diff --git a/frontend/src/settings/General.tsx b/frontend/src/settings/General.tsx
index 6d5e85e..8801376 100644
--- a/frontend/src/settings/General.tsx
+++ b/frontend/src/settings/General.tsx
@@ -47,7 +47,7 @@ const General: React.FC = () => {
 
   return (
     <div className="mt-[59px]">
-      <div className="mb-4">
+      <div className="mb-5">
         <p className="font-bold text-jet dark:text-bright-gray">Select Theme</p>
         <Dropdown
           options={themes}
@@ -58,9 +58,10 @@ const General: React.FC = () => {
           }}
           size="w-56"
           rounded="3xl"
+          border="border"
         />
       </div>
-      <div className="mb-4">
+      <div className="mb-5">
         <p className="font-bold text-jet dark:text-bright-gray">
           Select Language
         </p>
@@ -70,9 +71,10 @@ const General: React.FC = () => {
           onSelect={setSelectedLanguage}
           size="w-56"
           rounded="3xl"
+          border="border"
         />
       </div>
-      <div className="mb-4">
+      <div className="mb-5">
         <p className="font-bold text-jet dark:text-bright-gray">
           Chunks processed per query
         </p>
@@ -82,9 +84,10 @@ const General: React.FC = () => {
           onSelect={(value: string) => dispatch(setChunks(value))}
           size="w-56"
           rounded="3xl"
+          border="border"
         />
       </div>
-      <div>
+      <div className="mb-5">
         <Prompts
           prompts={prompts}
           selectedPrompt={selectedPrompt}
@@ -95,17 +98,15 @@ const General: React.FC = () => {
           apiHost={apiHost}
         />
       </div>
-      <div className="w-55 w-56">
+      <div className="w-56">
         <p className="font-bold text-jet dark:text-bright-gray">
           Delete all conversations
         </p>
         <button
-          className="mt-2 flex w-full cursor-pointer items-center justify-between rounded-3xl  border-2 border-solid border-purple-30 px-5 py-3 text-purple-30 hover:bg-purple-30 hover:text-white"
+          className="mt-2 flex w-full cursor-pointer items-center justify-between rounded-3xl  border border-solid border-red-500 px-5 py-3 text-red-500 hover:bg-red-500 hover:text-white"
           onClick={() => dispatch(setModalStateDeleteConv('ACTIVE'))}
         >
-          <span className="overflow-hidden text-ellipsis ">
-            Delete
-          </span>
+          <span className="overflow-hidden text-ellipsis ">Delete all</span>
         </button>
       </div>
     </div>
diff --git a/frontend/src/settings/Prompts.tsx b/frontend/src/settings/Prompts.tsx
index 6956df6..e5af189 100644
--- a/frontend/src/settings/Prompts.tsx
+++ b/frontend/src/settings/Prompts.tsx
@@ -156,7 +156,7 @@ const Prompts: React.FC<PromptProps> = ({
   return (
     <>
       <div>
-        <div className="mb-4 flex flex-row items-center gap-8">
+        <div className="flex flex-row items-center gap-8">
           <div>
             <p className="font-semibold dark:text-bright-gray">Active Prompt</p>
             <Dropdown
@@ -165,6 +165,7 @@ const Prompts: React.FC<PromptProps> = ({
               onSelect={handleSelectPrompt}
               size="w-56"
               rounded="3xl"
+              border="border"
               showEdit
               showDelete
               onEdit={({
@@ -186,7 +187,7 @@ const Prompts: React.FC<PromptProps> = ({
             />
           </div>
           <button
-            className="mt-[24px] rounded-3xl border-2 border-solid border-purple-30 px-5 py-3 text-purple-30 hover:bg-purple-30 hover:text-white"
+            className="mt-[24px] rounded-3xl border border-solid border-purple-30 px-5 py-3 text-purple-30 hover:bg-purple-30 hover:text-white"
             onClick={() => {
               setModalType('ADD');
               setModalState('ACTIVE');
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 4abf263..605b4fa 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -266,11 +266,11 @@ export default function Upload({
           <>
             <input
               type="text"
-              className="h-10 w-full rounded-full border-2 border-gray-5000 px-3 outline-none dark:bg-transparent dark:text-silver"
+              className="h-[42px] w-full rounded-full border-2 border-gray-5000 px-3 outline-none dark:bg-transparent dark:text-silver"
               value={docName}
               onChange={(e) => setDocName(e.target.value)}
             ></input>
-            <div className="relative bottom-12 left-2 mt-[-18.39px]">
+            <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">
                 Name
               </span>
@@ -315,24 +315,24 @@ export default function Upload({
                 <input
                   placeholder="Enter name"
                   type="text"
-                  className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+                  className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
                   value={urlName}
                   onChange={(e) => setUrlName(e.target.value)}
                 ></input>
-                <div className="relative bottom-12 left-2 mt-[-18.39px]">
-                  <span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
+                <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">
                     Name
                   </span>
                 </div>
                 <input
                   placeholder="URL Link"
                   type="text"
-                  className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+                  className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
                   value={url}
                   onChange={(e) => setUrl(e.target.value)}
                 ></input>
-                <div className="relative bottom-12 left-2 mt-[-18.39px]">
-                  <span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
+                <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">
                     Link
                   </span>
                 </div>
@@ -342,65 +342,65 @@ export default function Upload({
                 <input
                   placeholder="Enter client ID"
                   type="text"
-                  className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+                  className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
                   name="client_id"
                   value={redditData.client_id}
                   onChange={handleChange}
                 ></input>
-                <div className="relative bottom-12 left-2 mt-[-18.39px]">
-                  <span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
+                <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">
                     Client ID
                   </span>
                 </div>
                 <input
                   placeholder="Enter client secret"
                   type="text"
-                  className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+                  className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
                   name="client_secret"
                   value={redditData.client_secret}
                   onChange={handleChange}
                 ></input>
-                <div className="relative bottom-12 left-2 mt-[-18.39px]">
-                  <span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
+                <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">
                     Client secret
                   </span>
                 </div>
                 <input
                   placeholder="Enter user agent"
                   type="text"
-                  className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+                  className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
                   name="user_agent"
                   value={redditData.user_agent}
                   onChange={handleChange}
                 ></input>
-                <div className="relative bottom-12 left-2 mt-[-18.39px]">
-                  <span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
+                <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">
                     User agent
                   </span>
                 </div>
                 <input
                   placeholder="Enter search queries"
                   type="text"
-                  className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+                  className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
                   name="search_queries"
                   value={redditData.search_queries}
                   onChange={handleChange}
                 ></input>
-                <div className="relative bottom-12 left-2 mt-[-18.39px]">
-                  <span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
+                <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">
                     Search queries
                   </span>
                 </div>
                 <input
                   placeholder="Enter number of posts"
                   type="number"
-                  className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+                  className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
                   name="number_posts"
                   value={redditData.number_posts}
                   onChange={handleChange}
                 ></input>
-                <div className="relative bottom-12 left-2 mt-[-18.39px]">
-                  <span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
+                <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">
                     Number of posts
                   </span>
                 </div>
@@ -409,27 +409,36 @@ export default function Upload({
           </>
         )}
         <div className="flex flex-row-reverse">
-          <button
-            onClick={activeTab === 'file' ? uploadFile : uploadRemote}
-            className={`ml-6 cursor-pointer rounded-3xl bg-purple-30 text-white ${
-              files.length > 0 && docName.trim().length > 0
-                ? ''
-                : 'bg-opacity-75 text-opacity-80'
-            } py-2 px-6`}
-            disabled={
-              (files.length === 0 || docName.trim().length === 0) &&
-              activeTab === 'file'
-            }
-          >
-            Train
-          </button>
+          {activeTab === 'file' ? (
+            <button
+              onClick={uploadFile}
+              className={`ml-2 cursor-pointer rounded-3xl bg-purple-30 text-sm text-white ${
+                files.length > 0 && docName.trim().length > 0
+                  ? 'hover:bg-[#6F3FD1]'
+                  : 'bg-opacity-75 text-opacity-80'
+              } py-2 px-6`}
+              disabled={
+                (files.length === 0 || docName.trim().length === 0) &&
+                activeTab === 'file'
+              }
+            >
+              Train
+            </button>
+          ) : (
+            <button
+              onClick={uploadRemote}
+              className={`ml-2 cursor-pointer rounded-3xl bg-purple-30 py-2 px-6 text-sm text-white hover:bg-[#6F3FD1]`}
+            >
+              Train
+            </button>
+          )}
           <button
             onClick={() => {
               setDocName('');
               setfiles([]);
               setModalState('INACTIVE');
             }}
-            className="cursor-pointer font-medium dark:text-light-gray"
+            className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
           >
             Cancel
           </button>