diff --git a/frontend/src/components/Input.tsx b/frontend/src/components/Input.tsx
new file mode 100644
index 00000000..56ca1d52
--- /dev/null
+++ b/frontend/src/components/Input.tsx
@@ -0,0 +1,43 @@
+import { InputProps } from './types';
+
+const Input = ({
+  id,
+  name,
+  type,
+  value,
+  isAutoFocused = false,
+  placeholder,
+  maxLength,
+  className,
+  colorVariant = 'silver',
+  children,
+  onChange,
+  onPaste,
+  onKeyDown,
+}: InputProps) => {
+  const colorStyles = {
+    silver: 'border-silver dark:border-silver/40',
+    jet: 'border-jet',
+    gray: 'border-gray-5000 dark:text-silver',
+  };
+
+  return (
+    <input
+      className={`h-[42px] w-full rounded-full border-2 px-3 outline-none dark:bg-transparent dark:text-white ${className} ${colorStyles[colorVariant]}`}
+      type={type}
+      id={id}
+      name={name}
+      autoFocus={isAutoFocused}
+      placeholder={placeholder}
+      maxLength={maxLength}
+      value={value}
+      onChange={onChange}
+      onPaste={onPaste}
+      onKeyDown={onKeyDown}
+    >
+      {children}
+    </input>
+  );
+};
+
+export default Input;
diff --git a/frontend/src/components/types/index.ts b/frontend/src/components/types/index.ts
new file mode 100644
index 00000000..0d6172ab
--- /dev/null
+++ b/frontend/src/components/types/index.ts
@@ -0,0 +1,21 @@
+export type InputProps = {
+  type: 'text' | 'number';
+  value: string | string[] | number;
+  colorVariant?: 'silver' | 'jet' | 'gray';
+  isAutoFocused?: boolean;
+  id?: string;
+  maxLength?: number;
+  name?: string;
+  placeholder?: string;
+  className?: string;
+  children?: React.ReactElement;
+  onChange: (
+    e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
+  ) => void;
+  onPaste?: (
+    e: React.ClipboardEvent<HTMLTextAreaElement | HTMLInputElement>,
+  ) => void;
+  onKeyDown?: (
+    e: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>,
+  ) => void;
+};
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 7e0b3bda..37f946a3 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -421,10 +421,6 @@ template {
   width: 0;
 }
 
-/* .bottom-safe {
-  bottom: env(safe-area-inset-bottom, 0);
-} */
-
 .inputbox-style[contenteditable] {
   padding-left: 36px;
   padding-right: 36px;
diff --git a/frontend/src/preferences/APIKeyModal.tsx b/frontend/src/preferences/APIKeyModal.tsx
index dd7a1b88..166bd62b 100644
--- a/frontend/src/preferences/APIKeyModal.tsx
+++ b/frontend/src/preferences/APIKeyModal.tsx
@@ -4,6 +4,7 @@ import { ActiveState } from '../models/misc';
 import { selectApiKey, setApiKey } from './preferenceSlice';
 import { useMediaQuery, useOutsideAlerter } from './../hooks';
 import Modal from '../modals';
+import Input from '../components/Input';
 
 export default function APIKeyModal({
   modalState,
@@ -66,14 +67,15 @@ export default function APIKeyModal({
               key for llm. Currently, we support only OpenAI but soon many more.
               You can find it here.
             </p>
-            <input
+            <Input
               type="text"
-              className="h-10 w-full 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"
               onChange={(e) => setKey(e.target.value)}
-            />
+            ></Input>
           </article>
         );
       }}
diff --git a/frontend/src/preferences/PromptsModal.tsx b/frontend/src/preferences/PromptsModal.tsx
index c16ddd2c..c207e0be 100644
--- a/frontend/src/preferences/PromptsModal.tsx
+++ b/frontend/src/preferences/PromptsModal.tsx
@@ -1,5 +1,6 @@
 import { ActiveState } from '../models/misc';
 import Exit from '../assets/exit.svg';
+import Input from '../components/Input';
 
 function AddPrompt({
   setModalState,
@@ -34,13 +35,13 @@ function AddPrompt({
           Add your custom prompt and save it to DocsGPT
         </p>
         <div>
-          <input
+          <Input
             placeholder="Prompt Name"
             type="text"
-            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"
+            className="h-10 rounded-lg"
             value={newPromptName}
             onChange={(e) => setNewPromptName(e.target.value)}
-          ></input>
+          ></Input>
           <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">
               Prompt Name
@@ -105,13 +106,13 @@ function EditPrompt({
           Edit your custom prompt and save it to DocsGPT
         </p>
         <div>
-          <input
+          <Input
             placeholder="Prompt Name"
             type="text"
-            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"
+            className="h-10 rounded-lg"
             value={editPromptName}
             onChange={(e) => setEditPromptName(e.target.value)}
-          ></input>
+          ></Input>
           <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">
               Prompt Name
diff --git a/frontend/src/settings/APIKeys.tsx b/frontend/src/settings/APIKeys.tsx
index 8264af08..d87e0abe 100644
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -10,6 +10,7 @@ import { selectSourceDocs } from '../preferences/preferenceSlice';
 import Exit from '../assets/exit.svg';
 import Trash from '../assets/trash.svg';
 import { useTranslation } from 'react-i18next';
+import Input from '../components/Input';
 const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
 const embeddingsName =
   import.meta.env.VITE_EMBEDDINGS_NAME ||
@@ -237,12 +238,12 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
           <span className="absolute left-2 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
             {t('modals.createAPIKey.apiKeyName')}
           </span>
-          <input
+          <Input
             type="text"
-            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"
+            className="rounded-md"
             value={APIKeyName}
             onChange={(e) => setAPIKeyName(e.target.value)}
-          />
+          ></Input>
         </div>
         <div className="my-4">
           <Dropdown
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 2a1b51a9..a8e1929d 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -7,6 +7,7 @@ import { getDocs } from '../preferences/preferenceApi';
 import { setSelectedDocs, setSourceDocs } from '../preferences/preferenceSlice';
 import Dropdown from '../components/Dropdown';
 import { useTranslation } from 'react-i18next';
+import Input from '../components/Input';
 
 function Upload({
   modalState,
@@ -272,7 +273,9 @@ function Upload({
     },
   });
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
     const { name, value } = e.target;
     if (name === 'search_queries' && value.length > 0) {
       setRedditData({
@@ -323,12 +326,12 @@ function Upload({
 
         {activeTab === 'file' && (
           <>
-            <input
+            <Input
               type="text"
-              className="h-[42px] w-full rounded-full border-2 border-gray-5000 px-3 outline-none dark:bg-transparent dark:text-silver"
+              colorVariant="gray"
               value={docName}
               onChange={(e) => setDocName(e.target.value)}
-            ></input>
+            ></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')}
@@ -373,25 +376,23 @@ function Upload({
             />
             {urlType.label !== 'Reddit' ? (
               <>
-                <input
+                <Input
                   placeholder={`Enter ${t('modals.uploadDoc.name')}`}
                   type="text"
-                  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>
+                ></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>
-                <input
+                <Input
                   placeholder={t('modals.uploadDoc.urlLink')}
                   type="text"
-                  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>
+                ></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.link')}
@@ -400,66 +401,61 @@ function Upload({
               </>
             ) : (
               <>
-                <input
+                <Input
                   placeholder="Enter client ID"
                   type="text"
-                  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>
+                ></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.reddit.id')}
                   </span>
                 </div>
-                <input
+                <Input
                   placeholder="Enter client secret"
                   type="text"
-                  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>
+                ></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.reddit.secret')}
                   </span>
                 </div>
-                <input
+                <Input
                   placeholder="Enter user agent"
                   type="text"
-                  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>
+                ></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.reddit.agent')}
                   </span>
                 </div>
-                <input
+                <Input
                   placeholder="Enter search queries"
                   type="text"
-                  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>
+                ></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.reddit.searchQueries')}
                   </span>
                 </div>
-                <input
+                <Input
                   placeholder="Enter number of posts"
                   type="number"
-                  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>
+                ></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.reddit.numberOfPosts')}