diff --git a/frontend/src/Setting.tsx b/frontend/src/Setting.tsx
index a27f3d86..f6a25853 100644
--- a/frontend/src/Setting.tsx
+++ b/frontend/src/Setting.tsx
@@ -760,7 +760,7 @@ const SaveAPIKeyModal: React.FC<SaveAPIKeyModalProps> = ({ apiKey, close }) => {
   };
   return (
     <div className="fixed top-0 left-0 flex h-screen w-screen items-center justify-center bg-gray-900 bg-opacity-50">
-      <div className="z-10 w-11/12 rounded-3xl bg-white p-4 sm:w-[600px]">
+      <div className="z-10 w-11/12 rounded-3xl bg-white p-4 dark:bg-outer-space dark:text-bright-gray sm:w-[600px]">
         <button className="float-right m-2 w-4" onClick={close}>
           <img src={Exit} />
         </button>
@@ -771,10 +771,10 @@ const SaveAPIKeyModal: React.FC<SaveAPIKeyModalProps> = ({ apiKey, close }) => {
         <div className="flex justify-between py-2">
           <div>
             <h2 className="text-base font-semibold">API Key</h2>
-            <span className="text-xs font-normal leading-7">{apiKey}</span>
+            <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"
+            className="my-1 h-10 w-20 rounded-full border border-purple-30 p-2 text-sm text-purple-30 dark:border-purple-500 dark:text-purple-500"
             onClick={handleCopyKey}
           >
             {isCopied ? 'Copied' : 'Copy'}
@@ -782,9 +782,8 @@ const SaveAPIKeyModal: React.FC<SaveAPIKeyModalProps> = ({ apiKey, close }) => {
         </div>
         <button
           onClick={close}
-          className="rounded-full bg-[#FFC700] px-4 py-3 font-medium text-black dark:bg-purple-taupe dark:text-white"
+          className="rounded-full bg-philippine-yellow px-4 py-3 font-medium text-black"
         >
-          {' '}
           I saved the Key
         </button>
       </div>
@@ -806,8 +805,6 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
     value: string;
   } | null>(null);
   const docs = useSelector(selectSourceDocs);
-  console.log(docs);
-
   const extractDocPaths = () =>
     docs
       ? docs
@@ -840,11 +837,13 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
 
   return (
     <div className="fixed top-0 left-0 flex h-screen w-screen items-center justify-center bg-gray-900 bg-opacity-50">
-      <div className="z-10 w-11/12 rounded-3xl bg-white p-4 sm:w-[600px]">
+      <div className="z-10 w-11/12 rounded-3xl bg-white p-4 dark:bg-outer-space sm:w-[600px]">
         <button className="float-right m-2 w-4" onClick={close}>
           <img src={Exit} />
         </button>
-        <h1 className="m-4 text-2xl font-bold text-jet">Create New API Key</h1>
+        <h1 className="m-4 text-2xl font-bold text-jet dark:text-bright-gray">
+          Create New API Key
+        </h1>
         <div className="relative m-4">
           <span className="absolute left-2 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
             API Key Name
diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
index 67fd54c3..d5907237 100644
--- a/frontend/src/components/Dropdown.tsx
+++ b/frontend/src/components/Dropdown.tsx
@@ -8,7 +8,6 @@ function Dropdown({
   showDelete,
   onDelete,
   placeholder,
-  className,
 }: {
   options:
     | string[]
@@ -28,14 +27,11 @@ function Dropdown({
   const [isOpen, setIsOpen] = useState(false);
   return (
     <div
-      className={`relative ${
-        className
-          ? className
-          : typeof selectedValue === 'string'
-          ? ' mt-2 w-32'
-          : ' w-full align-middle'
-      } 
-        }`}
+      className={
+        typeof selectedValue === 'string'
+          ? 'relative mt-2 w-32'
+          : 'relative w-full align-middle'
+      }
     >
       <button
         onClick={() => setIsOpen(!isOpen)}
@@ -56,7 +52,7 @@ function Dropdown({
         ) : (
           <span
             className={`overflow-hidden text-ellipsis dark:text-bright-gray ${
-              !selectedValue && 'text-silver'
+              !selectedValue && 'text-silver dark:text-gray-400'
             }`}
           >
             {selectedValue
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 50af33c8..63f99513 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -46,7 +46,8 @@ module.exports = {
         'gun-metal':'#2E303E',
         'sonic-silver':'#747474',
         'soap':'#D8CCF1',
-        'independence':'#54546D'
+        'independence':'#54546D',
+        'philippine-yellow':'#FFC700',
       },
     },
   },