diff --git a/frontend/src/modals/DNSProviderEditModal.tsx b/frontend/src/modals/DNSProviderEditModal.tsx
new file mode 100644
index 0000000..b19b99e
--- /dev/null
+++ b/frontend/src/modals/DNSProviderEditModal.tsx
@@ -0,0 +1,229 @@
+import { useEffect, useState } from "react";
+
+import {
+	Button,
+	Checkbox,
+	FormControl,
+	FormErrorMessage,
+	FormLabel,
+	Input,
+	Modal,
+	ModalOverlay,
+	ModalContent,
+	ModalHeader,
+	ModalCloseButton,
+	ModalBody,
+	ModalFooter,
+	Select,
+	Stack,
+	useToast,
+} from "@chakra-ui/react";
+import {
+	DNSProvider,
+	DNSProvidersAcmesh,
+	DNSProvidersAcmeshField,
+} from "api/npm";
+import { PrettyButton } from "components";
+import { Formik, Form, Field } from "formik";
+import {
+	useDNSProvider,
+	useSetDNSProvider,
+	useDNSProvidersAcmesh,
+} from "hooks";
+import { intl } from "locale";
+import { validateString } from "modules/Validations";
+
+interface DNSProviderEditModalProps {
+	editId: number;
+	isOpen: boolean;
+	onClose: () => void;
+}
+function DNSProviderEditModal({
+	editId,
+	isOpen,
+	onClose,
+}: DNSProviderEditModalProps) {
+	const toast = useToast();
+	const { status, data } = useDNSProvider(editId);
+	const { mutate: setDNSProvider } = useSetDNSProvider();
+
+	const onSubmit = async (
+		payload: DNSProvider,
+		{ setErrors, setSubmitting }: any,
+	) => {
+		// TODO: filter out the meta object and only include items that apply to the acmesh provider selected
+
+		const showErr = (msg: string) => {
+			toast({
+				description: intl.formatMessage({
+					id: `error.${msg}`,
+				}),
+				status: "error",
+				position: "top",
+				duration: 3000,
+				isClosable: true,
+			});
+		};
+
+		setDNSProvider(payload, {
+			onError: (err: any) => {
+				showErr(err.message);
+			},
+			onSuccess: () => onClose(),
+			onSettled: () => setSubmitting(false),
+		});
+	};
+
+	const renderInputType = (
+		field: any,
+		f: DNSProvidersAcmeshField,
+		value: any,
+	) => {
+		if (f.type === "bool") {
+			return (
+				<Checkbox {...field} size="md" colorScheme="orange" isChecked={value}>
+					{f.name}
+				</Checkbox>
+			);
+		}
+
+		return (
+			<Input {...field} id={f.metaKey} type={f.type} defaultValue={value} />
+		);
+	};
+
+	return (
+		<Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
+			<ModalOverlay />
+			<ModalContent>
+				{acmeshIsLoading ? (
+					"loading"
+				) : (
+					<Formik
+						initialValues={
+							{
+								acmeshName: "",
+								name: "",
+								dnsSleep: 0,
+								meta: {},
+							} as DNSProvider
+						}
+						onSubmit={onSubmit}>
+						{({ isSubmitting, handleChange, values, setValues }) => (
+							<Form>
+								<ModalHeader>
+									{intl.formatMessage({ id: "dns-provider.create" })}
+								</ModalHeader>
+								<ModalCloseButton />
+								<ModalBody>
+									<Stack spacing={4}>
+										<Field name="name" validate={validateString(1, 100)}>
+											{({ field, form }: any) => (
+												<FormControl
+													isRequired
+													isInvalid={form.errors.name && form.touched.name}>
+													<FormLabel htmlFor="name">
+														{intl.formatMessage({
+															id: "dns-provider.name",
+														})}
+													</FormLabel>
+													<Input
+														{...field}
+														id="name"
+														placeholder={intl.formatMessage({
+															id: "dns-provider.name",
+														})}
+													/>
+													<FormErrorMessage>
+														{form.errors.name}
+													</FormErrorMessage>
+												</FormControl>
+											)}
+										</Field>
+										<Field name="acmeshName">
+											{({ field, form }: any) => (
+												<FormControl
+													isRequired
+													isInvalid={
+														form.errors.acmeshName && form.touched.acmeshName
+													}>
+													<FormLabel htmlFor="acmeshName">
+														{intl.formatMessage({
+															id: "dns-provider.acmesh-name",
+														})}
+													</FormLabel>
+													<Select
+														{...field}
+														id="acmeshName"
+														onChange={(e: any) => {
+															handleChange(e);
+															setAcmeshItem(e.target.value);
+														}}>
+														<option value="" />
+														{acmeshData.map((item: DNSProvidersAcmesh) => {
+															return (
+																<option
+																	key={item.acmeshName}
+																	value={item.acmeshName}>
+																	{intl.formatMessage({
+																		id: `acmesh.${item.acmeshName}`,
+																	})}
+																</option>
+															);
+														})}
+													</Select>
+													<FormErrorMessage>
+														{form.errors.acmeshName}
+													</FormErrorMessage>
+												</FormControl>
+											)}
+										</Field>
+										{acmeshItem !== "" ? <hr /> : null}
+										{getAcmeshItem(acmeshItem)?.fields.map((f) => {
+											const name = `meta[${f.metaKey}]`;
+											return (
+												<Field
+													name={name}
+													type={f.type === "bool" ? "checkbox" : undefined}>
+													{({ field, form }: any) => (
+														<FormControl
+															isRequired={f.isRequired}
+															isInvalid={
+																form.errors[name] && form.touched[name]
+															}>
+															{f.type !== "bool" ? (
+																<FormLabel htmlFor={name}>{f.name}</FormLabel>
+															) : null}
+															{renderInputType(
+																field,
+																f,
+																values.meta[f.metaKey],
+															)}
+															<FormErrorMessage>
+																{form.errors[name]}
+															</FormErrorMessage>
+														</FormControl>
+													)}
+												</Field>
+											);
+										})}
+									</Stack>
+								</ModalBody>
+								<ModalFooter>
+									<PrettyButton mr={3} isLoading={isSubmitting}>
+										{intl.formatMessage({ id: "form.save" })}
+									</PrettyButton>
+									<Button onClick={onClose} isLoading={isSubmitting}>
+										{intl.formatMessage({ id: "form.cancel" })}
+									</Button>
+								</ModalFooter>
+							</Form>
+						)}
+					</Formik>
+				)}
+			</ModalContent>
+		</Modal>
+	);
+}
+
+export { DNSProviderEditModal };
diff --git a/frontend/src/modals/index.ts b/frontend/src/modals/index.ts
index 8748e5c..ac3ef9a 100644
--- a/frontend/src/modals/index.ts
+++ b/frontend/src/modals/index.ts
@@ -2,6 +2,7 @@ export * from "./CertificateAuthorityCreateModal";
 export * from "./CertificateAuthorityEditModal";
 export * from "./ChangePasswordModal";
 export * from "./DNSProviderCreateModal";
+export * from "./DNSProviderEditModal";
 export * from "./ProfileModal";
 export * from "./SetPasswordModal";
 export * from "./UserCreateModal";