diff --git a/components/providers/workflow/forms/via-credentials-form.tsx b/components/providers/workflow/forms/via-credentials-form.tsx
index 58394aeb48..cbdf12c760 100644
--- a/components/providers/workflow/forms/via-credentials-form.tsx
+++ b/components/providers/workflow/forms/via-credentials-form.tsx
@@ -3,7 +3,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { SaveIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { Control, FieldErrors, useForm } from "react-hook-form";
+import { Control, useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { addCredentialsProvider } from "@/actions/providers/providers";
@@ -19,6 +19,7 @@ import {
   CredentialsFormSchema,
 } from "../../../../types";
 import { AWScredentialsForm } from "./via-credentials/aws-credentials-form";
+import { AzureCredentialsForm } from "./via-credentials/azure-credentials-form";
 
 export const ViaCredentialsForm = ({
   searchParams,
@@ -126,58 +127,9 @@ export const ViaCredentialsForm = ({
           />
         )}
         {providerType === "azure" && (
-          <>
-            <div className="text-left">
-              <div className="text-2xl font-bold leading-9 text-default-foreground">
-                Connect via Credentials
-              </div>
-              <div className="py-2 text-default-500">
-                Please provide the information for your Azure credentials.
-              </div>
-            </div>
-            <CustomInput
-              control={form.control}
-              name="client_id"
-              type="text"
-              label="Client ID"
-              labelPlacement="inside"
-              placeholder="Enter the Client ID"
-              variant="bordered"
-              isRequired
-              isInvalid={
-                !!(form.formState.errors as FieldErrors<AzureCredentials>)
-                  .client_id
-              }
-            />
-            <CustomInput
-              control={form.control}
-              name="client_secret"
-              type="text"
-              label="Client Secret"
-              labelPlacement="inside"
-              placeholder="Enter the Client Secret"
-              variant="bordered"
-              isRequired
-              isInvalid={
-                !!(form.formState.errors as FieldErrors<AzureCredentials>)
-                  .client_secret
-              }
-            />
-            <CustomInput
-              control={form.control}
-              name="tenant_id"
-              type="text"
-              label="Tenant ID"
-              labelPlacement="inside"
-              placeholder="Enter the Tenant ID"
-              variant="bordered"
-              isRequired
-              isInvalid={
-                !!(form.formState.errors as FieldErrors<AzureCredentials>)
-                  .tenant_id
-              }
-            />
-          </>
+          <AzureCredentialsForm
+            control={form.control as Control<AzureCredentials>}
+          />
         )}
         <span className="text-sm text-default-500">Name (Optional)</span>
         <CustomInput
diff --git a/components/providers/workflow/forms/via-credentials/azure-credentials-form.tsx b/components/providers/workflow/forms/via-credentials/azure-credentials-form.tsx
new file mode 100644
index 0000000000..b9d3046635
--- /dev/null
+++ b/components/providers/workflow/forms/via-credentials/azure-credentials-form.tsx
@@ -0,0 +1,68 @@
+import { Control, FieldErrors } from "react-hook-form";
+
+import { CustomInput } from "@/components/ui/custom";
+
+import { AzureCredentials } from "../../../../../types";
+
+interface AzureCredentialsFormProps {
+  control: Control<AzureCredentials>;
+}
+
+export const AzureCredentialsForm = ({
+  control,
+}: AzureCredentialsFormProps) => {
+  return (
+    <>
+      <div className="text-left">
+        <div className="text-2xl font-bold leading-9 text-default-foreground">
+          Connect via Credentials
+        </div>
+        <div className="py-2 text-default-500">
+          Please provide the information for your Azure credentials.
+        </div>
+      </div>
+      <CustomInput
+        control={control}
+        name="client_id"
+        type="text"
+        label="Client ID"
+        labelPlacement="inside"
+        placeholder="Enter the Client ID"
+        variant="bordered"
+        isRequired
+        isInvalid={
+          !!(control._formState.errors as FieldErrors<AzureCredentials>)
+            .client_id
+        }
+      />
+      <CustomInput
+        control={control}
+        name="client_secret"
+        type="text"
+        label="Client Secret"
+        labelPlacement="inside"
+        placeholder="Enter the Client Secret"
+        variant="bordered"
+        isRequired
+        isInvalid={
+          !!(control._formState.errors as FieldErrors<AzureCredentials>)
+            .client_secret
+        }
+      />
+      <CustomInput
+        control={control}
+        name="tenant_id"
+        type="text"
+        label="Tenant ID"
+        labelPlacement="inside"
+        placeholder="Enter the Tenant ID"
+        variant="bordered"
+        isRequired
+        isInvalid={
+          !!(control._formState.errors as FieldErrors<AzureCredentials>)
+            .tenant_id
+        }
+      />
+    </>
+  );
+};
diff --git a/components/providers/workflow/forms/via-credentials/index.ts b/components/providers/workflow/forms/via-credentials/index.ts
index c247168990..4286cf7741 100644
--- a/components/providers/workflow/forms/via-credentials/index.ts
+++ b/components/providers/workflow/forms/via-credentials/index.ts
@@ -1 +1,2 @@
 export * from "./aws-credentials-form";
+export * from "./azure-credentials-form";