diff --git a/web/src/app/admin/embeddings/RerankingFormPage.tsx b/web/src/app/admin/embeddings/RerankingFormPage.tsx
index 8c02fe643eb..733c5ebd9af 100644
--- a/web/src/app/admin/embeddings/RerankingFormPage.tsx
+++ b/web/src/app/admin/embeddings/RerankingFormPage.tsx
@@ -192,15 +192,19 @@ const RerankingDetailsForm = forwardRef<
                 >
                   <div className="w-full px-4">
                     <TextFormField
-                      placeholder={values.api_key || undefined}
+                      placeholder={values.rerank_api_key || undefined}
                       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                         const value = e.target.value;
-                        setRerankingDetails({ ...values, api_key: value });
-                        setFieldValue("api_key", value);
+                        setRerankingDetails({
+                          ...values,
+                          rerank_api_key: value,
+                        });
+                        setFieldValue("rerank_api_key", value);
+                        console.log("HIII");
                       }}
                       type="password"
                       label="Cohere API Key"
-                      name="api_key"
+                      name="rerank_api_key"
                     />
                     <div className="mt-4 flex justify-between">
                       <Button
diff --git a/web/src/app/admin/embeddings/interfaces.ts b/web/src/app/admin/embeddings/interfaces.ts
index 335292f73e6..c3dec13e6cc 100644
--- a/web/src/app/admin/embeddings/interfaces.ts
+++ b/web/src/app/admin/embeddings/interfaces.ts
@@ -4,7 +4,7 @@ import { NonNullChain } from "typescript";
 export interface RerankingDetails {
   rerank_model_name: string | null;
   rerank_provider_type: RerankerProvider | null;
-  api_key: string | null;
+  rerank_api_key: string | null;
   num_rerank: number;
 }
 
diff --git a/web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx b/web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx
index c0e8781e53e..3cd28287519 100644
--- a/web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx
+++ b/web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx
@@ -44,7 +44,7 @@ export default function EmbeddingForm() {
     });
 
   const [rerankingDetails, setRerankingDetails] = useState<RerankingDetails>({
-    api_key: "",
+    rerank_api_key: "",
     num_rerank: 0,
     rerank_provider_type: null,
     rerank_model_name: "",
@@ -118,7 +118,7 @@ export default function EmbeddingForm() {
           searchSettings.disable_rerank_for_streaming,
       });
       setRerankingDetails({
-        api_key: searchSettings.api_key,
+        rerank_api_key: searchSettings.rerank_api_key,
         num_rerank: searchSettings.num_rerank,
         rerank_provider_type: searchSettings.rerank_provider_type,
         rerank_model_name: searchSettings.rerank_model_name,
@@ -128,13 +128,13 @@ export default function EmbeddingForm() {
 
   const originalRerankingDetails: RerankingDetails = searchSettings
     ? {
-        api_key: searchSettings.api_key,
+        rerank_api_key: searchSettings.rerank_api_key,
         num_rerank: searchSettings.num_rerank,
         rerank_provider_type: searchSettings.rerank_provider_type,
         rerank_model_name: searchSettings.rerank_model_name,
       }
     : {
-        api_key: "",
+        rerank_api_key: "",
         num_rerank: 0,
         rerank_provider_type: null,
         rerank_model_name: "",
diff --git a/web/src/components/admin/connectors/Field.tsx b/web/src/components/admin/connectors/Field.tsx
index 25e5fc94fec..fc749296faf 100644
--- a/web/src/components/admin/connectors/Field.tsx
+++ b/web/src/components/admin/connectors/Field.tsx
@@ -149,6 +149,17 @@ export function TextFormField({
   if (isTextArea && !heightString) {
     heightString = "h-28";
   }
+  const [field, , helpers] = useField(name);
+  const { setValue } = helpers;
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    setValue(e.target.value);
+    if (onChange) {
+      onChange(e as React.ChangeEvent<HTMLInputElement>);
+    }
+  };
 
   return (
     <div className="w-full">
@@ -200,7 +211,7 @@ export function TextFormField({
           disabled={disabled}
           placeholder={placeholder}
           autoComplete={autoCompleteDisabled ? "off" : undefined}
-          // onChange={onChange}
+          onChange={handleChange}
         />
         {includeRevert && (
           <div className="flex-none mt-auto">