diff --git a/core/src/types/engine/index.ts b/core/src/types/engine/index.ts
index fc41caf7a0..7c848a2794 100644
--- a/core/src/types/engine/index.ts
+++ b/core/src/types/engine/index.ts
@@ -6,7 +6,7 @@ export type Engines = {
 
 export type EngineMetadata = {
   get_models_url?: string
-  api_key_template?: string
+  header_template?: string
   transform_req?: {
     chat_completions?: {
       url?: string
diff --git a/web/containers/ModelDropdown/index.tsx b/web/containers/ModelDropdown/index.tsx
index 7bbb1b2646..7a12642ff0 100644
--- a/web/containers/ModelDropdown/index.tsx
+++ b/web/containers/ModelDropdown/index.tsx
@@ -142,7 +142,7 @@ const ModelDropdown = ({
         .filter((e) => {
           if (searchFilter === 'local') {
             return (
-              engineList.find((t) => t.engine.engine === e.engine)?.type ===
+              engineList.find((t) => t.engine?.engine === e.engine)?.type ===
               'local'
             )
           }
diff --git a/web/screens/Settings/Engines/ModalAddRemoteEngine.tsx b/web/screens/Settings/Engines/ModalAddRemoteEngine.tsx
index b5bb02c01a..871066f106 100644
--- a/web/screens/Settings/Engines/ModalAddRemoteEngine.tsx
+++ b/web/screens/Settings/Engines/ModalAddRemoteEngine.tsx
@@ -13,7 +13,7 @@ const engineSchema = z.object({
   engineName: z.string().min(1, 'Engine name is required'),
   apiUrl: z.string().url('Enter a valid API URL'),
   modelListUrl: z.string().url('Enter a valid Model List URL'),
-  apiKeyTemplate: z.string().optional(),
+  headerTemplate: z.string().optional(),
   apiKey: z.string().optional(),
   requestFormat: z.string().optional(),
   responseFormat: z.string().optional(),
@@ -32,7 +32,7 @@ const ModalAddRemoteEngine = () => {
       engineName: '',
       apiUrl: '',
       modelListUrl: '',
-      apiKeyTemplate: '',
+      headerTemplate: '',
       apiKey: '',
       requestFormat: '',
       responseFormat: '',
@@ -46,7 +46,7 @@ const ModalAddRemoteEngine = () => {
       engine: data.engineName,
       api_key: data.apiKey,
       metadata: {
-        api_key_template: data.apiKeyTemplate,
+        header_template: data.headerTemplate,
         get_models_url: data.modelListUrl,
         transform_req: {
           chat_completions: {
@@ -148,37 +148,37 @@ const ModalAddRemoteEngine = () => {
             </div>
 
             <div className="space-y-2">
-              <label htmlFor="apiKeyTemplate" className="font-semibold">
+              <label htmlFor="apiKey" className="font-semibold">
                 {renderLabel(
-                  'API Key Template',
+                  'API Key',
                   false,
-                  `Template for authorization header format.`
+                  `Enter your authentication key to activate this engine.`
                 )}
               </label>
               <Input
-                placeholder="Enter API key template"
-                {...register('apiKeyTemplate')}
+                placeholder="Enter API Key"
+                type="password"
+                {...register('apiKey')}
               />
-              {errors.apiKeyTemplate && (
-                <p className="text-sm text-red-500">
-                  {errors.apiKeyTemplate.message}
-                </p>
-              )}
             </div>
 
             <div className="space-y-2">
-              <label htmlFor="apiKey" className="font-semibold">
+              <label htmlFor="headerTemplate" className="font-semibold">
                 {renderLabel(
-                  'API Key',
+                  'Request Headers Template',
                   false,
-                  `Enter your authentication key to activate this engine.`
+                  `Template for request headers format.`
                 )}
               </label>
-              <Input
-                placeholder="Enter API Key"
-                type="password"
-                {...register('apiKey')}
+              <TextArea
+                placeholder="Enter conversion function"
+                {...register('headerTemplate')}
               />
+              {errors.headerTemplate && (
+                <p className="text-sm text-red-500">
+                  {errors.headerTemplate.message}
+                </p>
+              )}
             </div>
 
             <div className="space-y-2">
diff --git a/web/screens/Settings/Engines/RemoteEngineSettings.tsx b/web/screens/Settings/Engines/RemoteEngineSettings.tsx
index 2a76482418..55fdbb7ada 100644
--- a/web/screens/Settings/Engines/RemoteEngineSettings.tsx
+++ b/web/screens/Settings/Engines/RemoteEngineSettings.tsx
@@ -213,19 +213,19 @@ const RemoteEngineSettings = ({
                   <div className="flex items-start justify-between gap-x-2">
                     <div className="w-full sm:w-3/4">
                       <h6 className="line-clamp-1 font-semibold">
-                        API Key Template
+                        Request Headers Template
                       </h6>
                       <p className="mt-1 text-[hsla(var(--text-secondary))]">
-                        Template for authorization header format.
+                        Template for request headers format.
                       </p>
                     </div>
                     <div className="w-full">
-                      <Input
-                        placeholder="Enter API key template"
-                        value={engine?.metadata?.api_key_template}
+                      <TextArea
+                        placeholder="Enter headers template"
+                        value={engine?.metadata?.header_template}
                         onChange={(e) =>
                           handleChange(
-                            'metadata.api_key_template',
+                            'metadata.header_template',
                             e.target.value
                           )
                         }