diff --git a/frontend/src/components/Input.tsx b/frontend/src/components/Input.tsx
index fe5cdba2..d3203099 100644
--- a/frontend/src/components/Input.tsx
+++ b/frontend/src/components/Input.tsx
@@ -9,7 +9,7 @@ const Input = ({
   placeholder,
   maxLength,
   className,
-  hasSilverBorder,
+  colorVariant = 'silver',
   children,
   onChange,
   onPaste,
@@ -17,9 +17,12 @@ const Input = ({
 }: InputProps) => {
   return (
     <input
-      className={`h-[42px] w-full rounded-full border-2 px-3 outline-none dark:bg-transparent dark:text-white ${
-        hasSilverBorder ? 'border-silver dark:border-silver/40' : ''
-      } ${className}`}
+      className={`h-[42px] w-full rounded-full border-2 px-3 outline-none dark:bg-transparent dark:text-white ${className} ${
+        colorVariant === 'silver' ? 'border-silver dark:border-silver/40' : ''
+      } ${colorVariant === 'jet' ? 'border-jet' : ''} ${
+        colorVariant === 'gray' ? 'border-gray-5000 dark:text-silver' : ''
+      }
+      }`}
       type={type}
       id={id}
       name={name}
diff --git a/frontend/src/components/types/index.ts b/frontend/src/components/types/index.ts
index 3ee65ec4..cf46ab0a 100644
--- a/frontend/src/components/types/index.ts
+++ b/frontend/src/components/types/index.ts
@@ -20,5 +20,5 @@ export type TextAreaProps = {
 
 export type InputProps = TextAreaProps & {
   type: 'text' | 'number';
-  hasSilverBorder?: boolean;
+  colorVariant?: 'silver' | 'jet' | 'gray';
 };
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index b93f447e..b15103f3 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -184,8 +184,6 @@ export default function Conversation() {
     document.execCommand('insertText', false, text);
   };
 
-  // console.log('inputRef: ', inputRef);
-
   return (
     <div className="flex h-screen flex-col gap-7 pb-2">
       <div
diff --git a/frontend/src/preferences/APIKeyModal.tsx b/frontend/src/preferences/APIKeyModal.tsx
index 18cf53f3..166bd62b 100644
--- a/frontend/src/preferences/APIKeyModal.tsx
+++ b/frontend/src/preferences/APIKeyModal.tsx
@@ -69,7 +69,8 @@ export default function APIKeyModal({
             </p>
             <Input
               type="text"
-              className="h-10 border-b-2 border-jet focus:outline-none"
+              colorVariant="jet"
+              className="h-10 border-b-2 focus:outline-none"
               value={key}
               maxLength={100}
               placeholder="API Key"
diff --git a/frontend/src/preferences/PromptsModal.tsx b/frontend/src/preferences/PromptsModal.tsx
index ce634c86..c207e0be 100644
--- a/frontend/src/preferences/PromptsModal.tsx
+++ b/frontend/src/preferences/PromptsModal.tsx
@@ -39,7 +39,6 @@ function AddPrompt({
             placeholder="Prompt Name"
             type="text"
             className="h-10 rounded-lg"
-            hasSilverBorder
             value={newPromptName}
             onChange={(e) => setNewPromptName(e.target.value)}
           ></Input>
@@ -111,7 +110,6 @@ function EditPrompt({
             placeholder="Prompt Name"
             type="text"
             className="h-10 rounded-lg"
-            hasSilverBorder
             value={editPromptName}
             onChange={(e) => setEditPromptName(e.target.value)}
           ></Input>
diff --git a/frontend/src/settings/APIKeys.tsx b/frontend/src/settings/APIKeys.tsx
index dda68663..d87e0abe 100644
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -241,7 +241,6 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
           <Input
             type="text"
             className="rounded-md"
-            hasSilverBorder
             value={APIKeyName}
             onChange={(e) => setAPIKeyName(e.target.value)}
           ></Input>
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index e96ceea9..a8e1929d 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -328,7 +328,7 @@ function Upload({
           <>
             <Input
               type="text"
-              className="border-gray-5000 dark:text-silver"
+              colorVariant="gray"
               value={docName}
               onChange={(e) => setDocName(e.target.value)}
             ></Input>
@@ -379,7 +379,6 @@ function Upload({
                 <Input
                   placeholder={`Enter ${t('modals.uploadDoc.name')}`}
                   type="text"
-                  hasSilverBorder
                   value={urlName}
                   onChange={(e) => setUrlName(e.target.value)}
                 ></Input>
@@ -391,7 +390,6 @@ function Upload({
                 <Input
                   placeholder={t('modals.uploadDoc.urlLink')}
                   type="text"
-                  hasSilverBorder
                   value={url}
                   onChange={(e) => setUrl(e.target.value)}
                 ></Input>
@@ -406,7 +404,6 @@ function Upload({
                 <Input
                   placeholder="Enter client ID"
                   type="text"
-                  hasSilverBorder
                   name="client_id"
                   value={redditData.client_id}
                   onChange={handleChange}
@@ -419,7 +416,6 @@ function Upload({
                 <Input
                   placeholder="Enter client secret"
                   type="text"
-                  hasSilverBorder
                   name="client_secret"
                   value={redditData.client_secret}
                   onChange={handleChange}
@@ -432,7 +428,6 @@ function Upload({
                 <Input
                   placeholder="Enter user agent"
                   type="text"
-                  hasSilverBorder
                   name="user_agent"
                   value={redditData.user_agent}
                   onChange={handleChange}
@@ -445,7 +440,6 @@ function Upload({
                 <Input
                   placeholder="Enter search queries"
                   type="text"
-                  hasSilverBorder
                   name="search_queries"
                   value={redditData.search_queries}
                   onChange={handleChange}
@@ -458,7 +452,6 @@ function Upload({
                 <Input
                   placeholder="Enter number of posts"
                   type="number"
-                  hasSilverBorder
                   name="number_posts"
                   value={redditData.number_posts}
                   onChange={handleChange}