diff --git a/apps/web/actions/organization/update-domain.ts b/apps/web/actions/organization/update-domain.ts
index bad2cbbd6d..576cdf4e83 100644
--- a/apps/web/actions/organization/update-domain.ts
+++ b/apps/web/actions/organization/update-domain.ts
@@ -14,6 +14,13 @@ export async function updateDomain(domain: string, organizationId: string) {
     throw new Error("Unauthorized");
   }
 
+  //check user subscription to prevent abuse
+  const isSubscribed = user.stripeSubscriptionStatus === "active";
+
+  if (!isSubscribed) {
+    throw new Error("User is not subscribed");
+  }
+
   const [organization] = await db()
     .select()
     .from(organizations)
@@ -67,6 +74,5 @@ export async function updateDomain(domain: string, organizationId: string) {
     if (error instanceof Error) {
       throw new Error(error.message);
     }
-    throw new Error("Failed to update domain");
   }
 }
diff --git a/apps/web/app/(org)/dashboard/_components/Confetti.tsx b/apps/web/app/(org)/dashboard/_components/Confetti.tsx
new file mode 100644
index 0000000000..0272e06d02
--- /dev/null
+++ b/apps/web/app/(org)/dashboard/_components/Confetti.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import type {
+  GlobalOptions as ConfettiGlobalOptions,
+  CreateTypes as ConfettiInstance,
+  Options as ConfettiOptions,
+} from "canvas-confetti";
+import confetti from "canvas-confetti";
+import type { ReactNode } from "react";
+import React, {
+  createContext,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+
+type Api = {
+  fire: (options?: ConfettiOptions) => void;
+};
+
+type Props = React.ComponentPropsWithRef<"canvas"> & {
+  options?: ConfettiOptions;
+  globalOptions?: ConfettiGlobalOptions;
+  manualstart?: boolean;
+  children?: ReactNode;
+};
+
+export type ConfettiRef = Api | null;
+
+const ConfettiContext = createContext<Api>({} as Api);
+
+// Define component first
+const ConfettiComponent = forwardRef<ConfettiRef, Props>((props, ref) => {
+  const {
+    options,
+    globalOptions = { resize: true, useWorker: true },
+    manualstart = false,
+    children,
+    ...rest
+  } = props;
+  const instanceRef = useRef<ConfettiInstance | null>(null);
+
+  const canvasRef = useCallback(
+    (node: HTMLCanvasElement) => {
+      if (node !== null) {
+        if (instanceRef.current) return;
+        instanceRef.current = confetti.create(node, {
+          ...globalOptions,
+          resize: true,
+        });
+      } else {
+        if (instanceRef.current) {
+          instanceRef.current.reset();
+          instanceRef.current = null;
+        }
+      }
+    },
+    [globalOptions],
+  );
+
+  const fire = useCallback(
+    async (opts = {}) => {
+      try {
+        await instanceRef.current?.({ ...options, ...opts });
+      } catch (error) {
+        console.error("Confetti error:", error);
+      }
+    },
+    [options],
+  );
+
+  const api = useMemo(
+    () => ({
+      fire,
+    }),
+    [fire],
+  );
+
+  useImperativeHandle(ref, () => api, [api]);
+
+  useEffect(() => {
+    if (!manualstart) {
+      (async () => {
+        try {
+          await fire();
+        } catch (error) {
+          console.error("Confetti effect error:", error);
+        }
+      })();
+    }
+  }, [manualstart, fire]);
+
+  return (
+    <ConfettiContext.Provider value={api}>
+      <canvas ref={canvasRef} {...rest} />
+      {children}
+    </ConfettiContext.Provider>
+  );
+});
+
+ConfettiComponent.displayName = "Confetti";
+
+export const Confetti = ConfettiComponent;
+
diff --git a/apps/web/app/(org)/dashboard/_components/Notifications/Skeleton.tsx b/apps/web/app/(org)/dashboard/_components/Notifications/Skeleton.tsx
index 394150b5b6..57c5ecf5c5 100644
--- a/apps/web/app/(org)/dashboard/_components/Notifications/Skeleton.tsx
+++ b/apps/web/app/(org)/dashboard/_components/Notifications/Skeleton.tsx
@@ -60,7 +60,7 @@ export const NotificationsSkeleton = ({ count = 5 }: { count?: number }) => {
       {Array.from({ length: count }).map((_, i) => (
         <NotificationItemSkeleton
           key={i}
-          className={clsx(i !== count - 1 && "border-b")}
+          className={clsx(i !== count - 1 && "border-b border-gray-3")}
         />
       ))}
     </div>
diff --git a/apps/web/app/(org)/dashboard/settings/organization/components/CapSettingsCard.tsx b/apps/web/app/(org)/dashboard/settings/organization/components/CapSettingsCard.tsx
index 026db7c9ff..94a921fcca 100644
--- a/apps/web/app/(org)/dashboard/settings/organization/components/CapSettingsCard.tsx
+++ b/apps/web/app/(org)/dashboard/settings/organization/components/CapSettingsCard.tsx
@@ -48,7 +48,7 @@ const NotificationTabSettings = [
   {
     label: "Setting 6",
     description: "Set the default random settings",
-  }
+  },
 ]
 
 
diff --git a/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomain.tsx b/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomain.tsx
index fe7b435ef2..d97beecb20 100644
--- a/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomain.tsx
+++ b/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomain.tsx
@@ -1,200 +1,28 @@
-import { checkOrganizationDomain } from "@/actions/organization/check-domain";
-import { removeOrganizationDomain } from "@/actions/organization/remove-domain";
-import { updateDomain } from "@/actions/organization/update-domain";
 import { UpgradeModal } from "@/components/UpgradeModal";
-import { Button, Input, Label } from "@cap/ui";
-import { faRefresh, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import clsx from "clsx";
-import { Check, CheckCircle, Copy, XCircle } from "lucide-react";
+import { Button } from "@cap/ui";
 import { useRouter } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
-import { toast } from "sonner";
+import { useState } from "react";
 import { useDashboardContext } from "../../../Contexts";
+import CustomDomainDialog from "./CustomDomainDialog/CustomDomainDialog";
+import { removeOrganizationDomain } from "@/actions/organization/remove-domain";
+import { toast } from "sonner";
+import { CheckCircle, XCircle } from "lucide-react";
+import clsx from "clsx";
 
-type DomainVerification = {
-  type: string;
-  domain: string;
-  value: string;
-  reason: string;
-};
 
-type DomainConfig = {
-  name: string;
-  apexName: string;
-  verification: DomainVerification[];
-  verified: boolean;
-  misconfigured?: boolean;
-  aValues?: string[];
-  currentAValues?: string[];
-  requiredAValue?: string;
-};
 
 export function CustomDomain() {
   const router = useRouter();
   const { activeOrganization, isSubscribed } = useDashboardContext();
-  const [domain, setDomain] = useState(
-    activeOrganization?.organization.customDomain || ""
-  );
-  const [loading, setLoading] = useState(false);
-  const [verifying, setVerifying] = useState(false);
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+  const [showCustomDomainDialog, setShowCustomDomainDialog] = useState(false);
   const [isVerified, setIsVerified] = useState(
     !!activeOrganization?.organization.domainVerified
   );
-  const [domainConfig, setDomainConfig] = useState<DomainConfig | null>(null);
-  const [copiedField, setCopiedField] = useState<"name" | "value" | null>(null);
-  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
-  const initialCheckDone = useRef(false);
-  const pollInterval = useRef<NodeJS.Timeout>();
-  const POLL_INTERVAL = 5000;
-
-  const cleanDomain = (input: string) => {
-    if (!input) return "";
-
-    if (input === "cap.so" || input === "cap.link") {
-      return "";
-    }
-
-    const withoutProtocol = input.replace(/^(https?:\/\/)?(www\.)?/i, "");
-    const parts = withoutProtocol.split("/");
-    const domain = parts[0] || "";
-    const withoutQuery = domain.split("?")[0] || "";
-    const withoutHash = withoutQuery.split("#")[0] || "";
-    const cleanedDomain = withoutHash.trim();
-
-    const hasTLD =
-      /^(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/.test(
-        cleanedDomain
-      );
-
-    return hasTLD ? cleanedDomain : "";
-  };
-
-  const handleCopy = async (text: string, field: "name" | "value") => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopiedField(field);
-      setTimeout(() => setCopiedField(null), 2000);
-      toast.success("Copied to clipboard");
-    } catch (err) {
-      toast.error("Failed to copy to clipboard");
-    }
-  };
-
-  const checkVerification = async (showToasts = true) => {
-    if (
-      !activeOrganization?.organization.id ||
-      !activeOrganization?.organization.customDomain
-    )
-      return;
-    setVerifying(true);
-    try {
-      const data = await checkOrganizationDomain(
-        activeOrganization.organization.id
-      );
-
-      setIsVerified(data.verified);
-      setDomainConfig(data.config);
-
-      if (showToasts) {
-        if (data.verified) {
-          toast.success("Domain is verified!");
-
-          if (pollInterval.current) {
-            clearInterval(pollInterval.current);
-            pollInterval.current = undefined;
-          }
-        } else {
-          toast.error(
-            "Domain is not verified. Please check your DNS settings."
-          );
-        }
-      }
-    } catch (error) {
-      if (showToasts) {
-        toast.error("Failed to check domain verification");
-      }
-    } finally {
-      setVerifying(false);
-    }
-  };
-
-  useEffect(() => {
-    if (activeOrganization?.organization.customDomain && !isVerified) {
-      if (pollInterval.current) {
-        clearInterval(pollInterval.current);
-      }
-
-      checkVerification(false);
-
-      pollInterval.current = setInterval(() => {
-        checkVerification(false);
-      }, POLL_INTERVAL);
-    }
-
-    return () => {
-      if (pollInterval.current) {
-        clearInterval(pollInterval.current);
-        pollInterval.current = undefined;
-      }
-    };
-  }, [activeOrganization?.organization.customDomain, isVerified]);
-
-  useEffect(() => {
-    if (
-      !initialCheckDone.current &&
-      activeOrganization?.organization.customDomain
-    ) {
-      initialCheckDone.current = true;
-      checkVerification(false);
-    }
-  }, [activeOrganization?.organization.customDomain]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!isSubscribed) {
-      setShowUpgradeModal(true);
-      return;
-    }
-
-    const cleanedDomain = cleanDomain(domain);
-    if (!cleanedDomain) {
-      toast.error("Please enter a valid domain");
-      return;
-    }
-
-    setLoading(true);
-    setDomain(cleanedDomain);
-
-    try {
-      const data = await updateDomain(
-        cleanedDomain,
-        activeOrganization?.organization.id as string
-      );
-
-      toast.success("Domain settings updated");
-      router.refresh();
-
-      setDomainConfig(data.status);
-      setIsVerified(data.verified);
+  const [loading, setLoading] = useState(false);
 
-      setTimeout(() => {
-        checkVerification(false);
-      }, 1000);
+  const orgCustomDomain = activeOrganization?.organization.customDomain
 
-      pollInterval.current = setInterval(() => {
-        checkVerification(false);
-      }, POLL_INTERVAL);
-    } catch (error) {
-      console.error("Error updating domain:", error);
-      toast.error(
-        error instanceof Error ? error.message : "Failed to update domain settings"
-      );
-    } finally {
-      setLoading(false);
-    }
-  };
 
   const handleRemoveDomain = async () => {
     if (!isSubscribed) {
@@ -203,19 +31,12 @@ export function CustomDomain() {
     }
 
     if (!confirm("Are you sure you want to remove this custom domain?")) return;
-
     setLoading(true);
     try {
       await removeOrganizationDomain(
         activeOrganization?.organization.id as string
       );
 
-      if (pollInterval.current) {
-        clearInterval(pollInterval.current);
-        pollInterval.current = undefined;
-      }
-
-      setDomain("");
       setIsVerified(false);
       toast.success("Custom domain removed");
       router.refresh();
@@ -226,286 +47,73 @@ export function CustomDomain() {
     }
   };
 
-
   return (
-    <div className="space-y-4">
-      <div className="space-y-1">
-        <Label htmlFor="customDomain">Custom Domain</Label>
-        <p className="text-sm text-gray-10">
-          Set up a custom domain for your organization's shared caps and make
-          it unique.
-        </p>
-      </div>
-      <div className="flex flex-col gap-3 items-start">
-        <div className="flex gap-3 items-center w-full h-fit">
-          <Input
-            type="text"
-            id="customDomain"
-            placeholder="your-domain.com"
-            value={domain}
-            onChange={(e) => setDomain(e.target.value)}
-            className="flex-1 min-h-[44px]"
-          />
-          <Button
-            type="submit"
-            size="sm"
-            className="min-w-fit"
-            variant="dark"
-            onClick={handleSubmit}
-            spinner={loading}
-            disabled={loading || domain === activeOrganization?.organization.customDomain || domain === ""}
-          >
-            {loading ? "Saving..." : "Save"}
-          </Button>
-        </div>
-
-        {activeOrganization?.organization.customDomain &&
-          <div className="flex gap-2 justify-between items-center mt-4">
-            {isVerified ? (
-              <>
-                <div className="flex items-center gap-1 text-white bg-green-600 px-2.5 py-1.5 rounded-full text-sm">
-                  <CheckCircle className="size-3" />
-                  <span className="text-xs font-medium text-white">
-                    Domain verified
-                  </span>
-                </div>
-              </>
-            ) : (
-              <>
-                <div className="flex items-center gap-1 text-white bg-red-500 px-2.5 py-1.5 rounded-full text-sm">
-                  <XCircle className="size-3" />
-                  <span className="text-xs font-medium text-white">
-                    Domain not verified
-                  </span>
-                </div>
-              </>
-            )}
-          </div>
-        }
-
-        {activeOrganization?.organization.customDomain && (
-          <div className="flex gap-3 justify-between items-center w-full">
-            <div className="flex gap-3 items-center">
-              <Button
-                type="button"
-                variant="gray"
-                size="sm"
-                onClick={() => checkVerification(true)}
-                disabled={verifying}
-                className="w-[105px]"
-              >
-                {verifying ? (
-                  <FontAwesomeIcon
-                    className="animate-spin size-4 mr-0.5"
-                    icon={faRefresh}
-                  />
-                ) : (
-                  <FontAwesomeIcon className="size-4 mr-0.5" icon={faRefresh} />
-                )}
-                Refresh
-              </Button>
-              {activeOrganization?.organization.customDomain && (
-                <Button
-                  type="button"
-                  size="sm"
-                  variant="gray"
-                  onClick={handleRemoveDomain}
-                  disabled={loading}
-                >
-                  <FontAwesomeIcon className="size-3 mr-0.5" icon={faTrash} />
-                  Remove
-                </Button>
-              )}
-            </div>
-          </div>
-        )}
-
-
-      </div>
-      {activeOrganization?.organization.customDomain && (
-        <div className="mt-4 space-y-4">
-          {!isVerified && domainConfig?.verification?.[0] && (
-            <div className="overflow-hidden rounded-lg border border-gray-4">
-              <div className="px-4 py-3 border-b bg-gray-2 border-gray-4">
-                <p className="font-medium text-md text-gray-12">
-                  DNS Configuration Required
-                </p>
-                <p className="mt-1 text-sm text-gray-10">
-                  To verify your domain ownership, add the following TXT
-                  record to your DNS configuration:
-                </p>
+    <>
+    {
+      showCustomDomainDialog && (
+        <CustomDomainDialog
+          isVerified={isVerified}
+          setIsVerified={setIsVerified}
+          open={showCustomDomainDialog}
+          setShowUpgradeModal={(arg) => setShowUpgradeModal(arg)}
+          onClose={() => setShowCustomDomainDialog(false)}
+        />
+      )
+    }
+      <div className="flex gap-3 justify-between items-center w-full h-fit">
+        <div className="space-y-1">
+          <div className={clsx("flex gap-3 items-center", (isVerified && orgCustomDomain) || (!isVerified && orgCustomDomain) ? "mb-3" : "mb-0")}>
+          <h1 className="text-sm font-medium text-gray-12">Custom Domain</h1>
+          {isVerified && orgCustomDomain ? (
+            <>
+              <div className="flex gap-2 items-center px-3 py-0.5 bg-green-900 rounded-full w-fit">
+                <CheckCircle className="text-green-200 size-2.5" />
+                <p className="text-[11px] italic font-medium text-white">www.aashhab.design
+                  <span className="ml-1 not-italic text-white/60">verified</span></p>
               </div>
-              <div className="px-4 py-3">
-                <dl className="grid gap-4">
-                  <div className="grid grid-cols-[100px,1fr] items-center">
-                    <dt className="text-sm font-medium text-gray-12">Type</dt>
-                    <dd className="text-sm text-gray-10">
-                      {domainConfig?.verification?.[0]?.type}
-                    </dd>
-                  </div>
-                  <div className="grid grid-cols-[100px,1fr] items-center">
-                    <dt className="text-sm font-medium text-gray-12">Name</dt>
-                    <dd className="flex gap-2 items-center text-sm text-gray-10">
-                      <div className="flex items-center justify-between gap-1.5
-                       bg-gray-4 px-2 py-1 rounded-lg flex-1 min-w-0 border border-gray-6">
-                        <code className="text-xs truncate">
-                          {domainConfig?.verification?.[0]?.domain}
-                        </code>
-                        {domainConfig?.verification?.[0]?.domain && (
-                          <button
-                            type="button"
-                            onClick={() => {
-                              const domain =
-                                domainConfig?.verification?.[0]?.domain;
-                              if (domain) handleCopy(domain, "name");
-                            }}
-                            className="p-1 rounded-md transition-colors hover:bg-gray-1 shrink-0"
-                            title="Copy to clipboard"
-                          >
-                            {copiedField === "name" ? (
-                              <Check className="size-3.5 text-green-500" />
-                            ) : (
-                              <Copy className="size-3.5 text-gray-10" />
-                            )}
-                          </button>
-                        )}
-                      </div>
-                    </dd>
-                  </div>
-                  <div className="grid grid-cols-[100px,1fr] items-center">
-                    <dt className="text-sm font-medium text-gray-12">Value</dt>
-                    <dd className="flex gap-2 items-center text-sm text-gray-10">
-                      <div className="flex flex-1 gap-1 justify-between items-center px-2 py-1 min-w-0 rounded-lg border bg-gray-4 border-gray-6">
-                        <code className="font-mono text-xs break-all">
-                          {domainConfig?.verification?.[0]?.value}
-                        </code>
-                        {domainConfig?.verification?.[0]?.value && (
-                          <button
-                            type="button"
-                            onClick={() => {
-                              const value =
-                                domainConfig?.verification?.[0]?.value;
-                              if (value) handleCopy(value, "value");
-                            }}
-                            className="p-1 rounded-md transition-colors hover:bg-gray-1 shrink-0"
-                            title="Copy to clipboard"
-                          >
-                            {copiedField === "value" ? (
-                              <Check className="size-3.5 text-green-500" />
-                            ) : (
-                              <Copy className="size-3.5 text-gray-10" />
-                            )}
-                          </button>
-                        )}
-                      </div>
-                    </dd>
-                  </div>
-                </dl>
+            </>
+          ) : orgCustomDomain ? (
+            <>
+              <div className="flex gap-2 items-center px-3 py-0.5 bg-red-900 rounded-full w-fit">
+                <XCircle className="text-red-200 size-2.5" />
+                <p className="text-[11px] italic font-medium text-white">{orgCustomDomain}
+                  <span className="ml-1 not-italic text-white/60">not verified</span></p>
               </div>
-            </div>
-          )}
-
-
+            </>
+          ) : null}
+          </div>
+          <p className="text-sm w-full max-w-[375px] text-gray-10">
+            Set up a custom domain for your organization's shared caps and make
+            it unique.
+          </p>
 
-          {!isVerified &&
-            !domainConfig?.verification?.[0] &&
-            domainConfig?.requiredAValue && (
-              <div className="overflow-hidden rounded-lg border border-gray-4">
-                <div className="px-4 py-3 border-b bg-gray-2 border-gray-4">
-                  <p className="font-medium text-md text-gray-12">
-                    DNS Configuration Required
-                  </p>
-                  <p className="mt-1 text-sm text-gray-10">
-                    To verify your domain ownership, add the following A
-                    record to your DNS configuration:
-                  </p>
-                </div>
-                <div className="px-4 py-3">
-                  <dl className="grid gap-4">
-                    {domainConfig.currentAValues &&
-                      domainConfig.currentAValues.length > 0 && (
-                        <div className="grid grid-cols-[100px,1fr] items-center">
-                          <dt className="text-sm font-medium text-gray-12">
-                            Current
-                          </dt>
-                          <dd className="space-y-1.5 text-sm text-gray-10">
-                            {domainConfig.currentAValues.map(
-                              (value, index) => (
-                                <div
-                                  key={index}
-                                  className={clsx(
-                                    value === domainConfig.requiredAValue
-                                      ? "flex items-center gap-2 text-green-300"
-                                      : "flex items-center gap-2 text-red-200"
-                                  )}
-                                >
-                                  <code
-                                    className={clsx(
-                                      value === domainConfig.requiredAValue
-                                        ? "px-2 py-1 rounded-lg bg-green-900"
-                                        : "px-2 py-1 rounded-lg bg-red-900",
-                                      "text-xs"
-                                    )
-                                    }
-                                  >
-                                    {value}
-                                  </code>
-                                  {value === domainConfig.requiredAValue && (
-                                    <span className="text-xs text-green-600">
-                                      (Correct)
-                                    </span>
-                                  )}
-                                </div>
-                              )
-                            )}
-                          </dd>
-                        </div>
-                      )}
-                    <div className="grid grid-cols-[100px,1fr] items-center">
-                      <dt className="text-sm font-medium text-gray-12">
-                        Required
-                      </dt>
-                      <dd className="flex gap-2 items-center text-sm text-gray-10">
-                        <div className="flex items-center justify-between gap-1.5
-                       bg-gray-4 px-2 py-1 rounded-lg flex-1 min-w-0 border border-gray-6">
-                          <code className="text-xs text-gray-10">
-                            {domainConfig.requiredAValue || "Loading..."}
-                          </code>
-                          {domainConfig.requiredAValue && (
-                            <button
-                              type="button"
-                              onClick={() =>
-                                domainConfig.requiredAValue &&
-                                handleCopy(
-                                  domainConfig.requiredAValue,
-                                  "value"
-                                )
-                              }
-                              className="p-1 rounded-md transition-colors hover:bg-gray-1 shrink-0"
-                              title="Copy to clipboard"
-                            >
-                              {copiedField === "value" ? (
-                                <Check className="size-3.5 text-green-500" />
-                              ) : (
-                                <Copy className="size-3.5 text-gray-10" />
-                              )}
-                            </button>
-                          )}
-                        </div>
-                      </dd>
-                    </div>
-                  </dl>
-                </div>
-              </div>
-            )}
         </div>
-      )}
+        <Button
+          type="submit"
+          size="sm"
+          className="min-w-fit"
+          spinner={loading}
+          disabled={loading}
+          variant="dark"
+          onClick={async (e) => {
+            e.preventDefault();
+            if (isVerified) {
+              await handleRemoveDomain();
+            } else {
+              setShowCustomDomainDialog(true);
+            }
+          }}
+        >
+          {isVerified ? "Remove" : "Setup"}
+        </Button>
+      </div>
+
       {showUpgradeModal && (
         <UpgradeModal
           open={showUpgradeModal}
           onOpenChange={setShowUpgradeModal}
         />
       )}
-    </div>
+    </>
   );
 }
diff --git a/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/CustomDomainDialog.tsx b/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/CustomDomainDialog.tsx
new file mode 100644
index 0000000000..fc67862e73
--- /dev/null
+++ b/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/CustomDomainDialog.tsx
@@ -0,0 +1,444 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Button
+} from "@cap/ui";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGlobe } from "@fortawesome/free-solid-svg-icons";
+import { useReducer, useState, useEffect, useRef } from "react";
+import { Confetti } from "@/app/(org)/dashboard/_components/Confetti";
+import type { ConfettiRef } from "@/app/(org)/dashboard/_components/Confetti";
+import { toast } from "sonner";
+import { useDashboardContext } from "../../../../Contexts";
+import { updateDomain } from "@/actions/organization/update-domain";
+import { useRouter } from "next/navigation";
+import { StepConfig, DomainConfig, StepAction, StepState, StepStatus } from "./types";
+import { Stepper } from "./Stepper";
+import { faRefresh } from "@fortawesome/free-solid-svg-icons";
+import { removeOrganizationDomain } from "@/actions/organization/remove-domain";
+import { checkOrganizationDomain } from "@/actions/organization/check-domain";
+
+import SubscribeContent from "./SubscribeContent";
+import SuccesStep from "./SuccessStep";
+import DomainStep from "./DomainStep";
+import VerifyStep from "./VerifyStep";
+
+const STEP_CONFIGS: StepConfig[] = [
+  {
+    id: 'domain',
+    name: 'Domain',
+    description: 'Enter your custom domain'
+  },
+  {
+    id: 'verify',
+    name: 'Verify',
+    description: 'Verify domain ownership'
+  },
+  {
+    id: 'success',
+    name: 'Success',
+    description: 'Domain setup complete'
+  }
+];
+
+// Reducer
+const stepReducer = (state: StepState, action: StepAction): StepState => {
+  switch (action.type) {
+    case 'NEXT_STEP':
+      return {
+        ...state,
+        currentIndex: Math.min(state.currentIndex + 1, state.totalSteps - 1),
+        errors: {}
+      };
+
+    case 'PREV_STEP':
+      return {
+        ...state,
+        currentIndex: Math.max(state.currentIndex - 1, 0),
+        errors: {}
+      };
+
+    case 'GO_TO_STEP':
+      const targetIndex = action.payload;
+      const canNavigate = targetIndex <= state.currentIndex || state.canNavigateBack;
+
+      return canNavigate ? {
+        ...state,
+        currentIndex: Math.max(0, Math.min(targetIndex, state.totalSteps - 1)),
+        errors: {}
+      } : state;
+
+    case 'SET_ERROR':
+      return {
+        ...state,
+        errors: {
+          ...state.errors,
+          [action.payload.stepId]: action.payload.error
+        }
+      };
+
+    case 'CLEAR_ERROR':
+      const newErrors = { ...state.errors };
+      delete newErrors[action.payload];
+      return {
+        ...state,
+        errors: newErrors
+      };
+
+    case 'RESET':
+      return {
+        ...state,
+        currentIndex: 0,
+        errors: {}
+      };
+
+    default:
+      return state;
+  }
+};
+
+// Main Dialog Component
+interface CustomDomainDialogProps {
+  open: boolean;
+  onClose: () => void;
+  isVerified: boolean;
+  setIsVerified: (value: boolean) => void;
+  setShowUpgradeModal: (arg: boolean) => void;
+}
+
+const CustomDomainDialog = ({
+  open,
+  onClose,
+  isVerified,
+  setIsVerified,
+  setShowUpgradeModal
+}: CustomDomainDialogProps) => {
+  const { activeOrganization, isSubscribed } = useDashboardContext();
+  const [domain, setDomain] = useState(
+    activeOrganization?.organization.customDomain || ""
+  );
+  const [verifying, setVerifying] = useState(false);
+  const [domainConfig, setDomainConfig] = useState<DomainConfig | null>(null);
+  const [initialConfigLoading, setInitialConfigLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+  const dialogRef = useRef<HTMLDivElement | null>(null);
+  const confettiRef = useRef<ConfettiRef>(null);
+
+  const pollInterval = useRef<NodeJS.Timeout>();
+
+
+  const [stepState, dispatch] = useReducer(stepReducer, {
+    currentIndex: 0,
+    totalSteps: STEP_CONFIGS.length,
+    canNavigateBack: true,
+    errors: {}
+  });
+
+  const steps = STEP_CONFIGS.map((config, index) => ({
+    ...config,
+    status: index < stepState.currentIndex ? StepStatus.COMPLETED :
+      index === stepState.currentIndex ?
+        // Mark success as completed when reached, others as current
+        (config.id === 'success' ? StepStatus.COMPLETED : StepStatus.CURRENT) :
+        StepStatus.PENDING,
+    hasError: !!stepState.errors[config.id]
+  }));
+
+  const currentStep = steps[stepState.currentIndex];
+  const canGoNext = stepState.currentIndex < STEP_CONFIGS.length - 1;
+
+  if (!currentStep) {
+    return null;
+  }
+
+  // Step navigation handlers
+  const handleNext = () => {
+    if (canGoNext) {
+      dispatch({ type: 'NEXT_STEP' });
+    }
+  };
+
+  const handleStepClick = (index: number) => {
+    dispatch({ type: 'GO_TO_STEP', payload: index });
+  };
+
+  const handleReset = () => {
+    dispatch({ type: 'RESET' });
+    setDomain('');
+  };
+
+  // Step-specific handlers
+  const handleDomainSubmit = async () => {
+    if (!domain.trim()) {
+      dispatch({
+        type: 'SET_ERROR',
+        payload: { stepId: 'domain', error: 'Domain is required' }
+      });
+      return;
+    }
+
+    if (domain === activeOrganization?.organization.customDomain) {
+      return handleNext();
+    }
+
+    const cleanDomain = (input: string) => {
+      if (!input) return "";
+
+      if (input === "cap.so" || input === "cap.link") {
+        return "";
+      }
+
+      const withoutProtocol = input.replace(/^(https?:\/\/)?(www\.)?/i, "");
+      const parts = withoutProtocol.split("/");
+      const domain = parts[0] || "";
+      const withoutQuery = domain.split("?")[0] || "";
+      const withoutHash = withoutQuery.split("#")[0] || "";
+      const cleanedDomain = withoutHash.trim();
+
+      const hasTLD =
+        /^(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/.test(
+          cleanedDomain
+        );
+
+      return hasTLD ? cleanedDomain : "";
+    };
+
+    const cleanedDomain = cleanDomain(domain);
+    if (!cleanedDomain) {
+      dispatch({
+        type: 'SET_ERROR',
+        payload: { stepId: 'domain', error: 'Please enter a valid domain' }
+      });
+      return;
+    }
+
+    dispatch({ type: 'CLEAR_ERROR', payload: 'domain' });
+
+    setLoading(true);
+    setDomain(cleanedDomain);
+
+    try {
+      if (activeOrganization?.organization.customDomain) {
+        await removeOrganizationDomain(
+          activeOrganization?.organization.id as string
+        );
+      }
+
+      const data = await updateDomain(
+        cleanedDomain,
+        activeOrganization?.organization.id as string
+      )
+
+      handleNext();
+
+      toast.success("Domain settings updated");
+      router.refresh();
+
+      if (data) {
+        setIsVerified(data.verified);
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to update domain settings"
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+    
+      const checkVerification = async (showToasts = true) => {
+        if (
+          !activeOrganization?.organization.id ||
+          !activeOrganization?.organization.customDomain
+        )
+          return;
+
+        setVerifying(true);
+    
+        try {
+
+          if (domainConfig === null) {
+            setInitialConfigLoading(true);
+          }
+          
+          const data = await checkOrganizationDomain(
+            activeOrganization.organization.id
+          );
+    
+          setIsVerified(data.verified);
+          setDomainConfig(data.config);
+
+          if (data.verified) {
+            handleNext();
+          }
+    
+          if (showToasts) {
+            if (data.verified) {
+              toast.success("Domain is verified!");
+    
+              if (pollInterval.current) {
+                clearInterval(pollInterval.current);
+                pollInterval.current = undefined;
+              }
+            } else {
+              toast.error(
+                "Domain is not verified. Please check your DNS settings."
+              );
+            }
+          }
+        } catch (error) {
+          if (showToasts) {
+            toast.error("Failed to check domain verification");
+          }
+        } finally {
+          setVerifying(false);
+          setInitialConfigLoading(false);
+        }
+      };
+  
+
+  const handleClose = () => {
+    handleReset();
+    onClose();
+  };
+
+  useEffect(() => {
+    //if current step is success, close dialog in 8 seconds
+    if (stepState.currentIndex === 2) {
+      setTimeout(() => {
+        handleClose();
+      }, 8000);
+    } else if (isVerified) {
+      handleNext();
+    }
+  }, [isVerified, stepState.currentIndex])
+
+  return (
+    <>
+    {stepState.currentIndex === 2 && (
+     <Confetti
+     ref={confettiRef}
+     className="absolute inset-0 w-full h-full z-[600] pointer-events-none"
+     options={{
+       particleCount: 150,
+       spread: 120,
+       origin: { x: 0.5, y: 0.5 },
+     }}
+      />
+    )}
+    <Dialog open={open} onOpenChange={(open) => !open && handleClose()}>
+      <DialogContent ref={dialogRef} className="p-0 w-[calc(100%-20px)] focus:outline-none focus:ring-0 max-w-[600px] rounded-xl border bg-gray-2 border-gray-4">
+        <DialogHeader
+          icon={<FontAwesomeIcon icon={faGlobe} />}
+          description="Let's get you setup with your custom domain for your caps."
+        >
+          <DialogTitle className="text-lg text-gray-12">
+            Custom Domain
+          </DialogTitle>
+        </DialogHeader>
+
+        <Stepper
+          steps={steps}
+          onStepClick={handleStepClick}
+        />
+
+        <div className="relative w-full h-full">
+
+        {!isSubscribed && <SubscribeContent/>}
+
+        <div className="p-5">
+          {/* Domain Step */}
+          {currentStep.id === 'domain' && (
+            <DomainStep
+              domain={domain}
+              setDomain={setDomain}
+              submitLoading={loading} 
+              onSubmit={handleDomainSubmit}
+              error={stepState.errors.domain}
+              onClearError={() => dispatch({ type: 'CLEAR_ERROR', payload: 'domain' })}
+            />
+          )}
+
+          {/* Verify Step */}
+          {currentStep.id === 'verify' && (
+            <VerifyStep
+              domain={domain}
+              initialConfigLoading={initialConfigLoading}
+              domainConfig={domainConfig}
+              checkVerification={checkVerification}
+              isVerified={isVerified}
+            />
+          )}
+
+          {/* Success Step */}
+          {currentStep.id === 'success' && (
+              <SuccesStep />
+          )}
+        </div>           
+        </div>
+
+        {currentStep.id !== 'success' && (
+          <DialogFooter>
+
+            {currentStep.id === "verify" && (
+                  <Button
+                    type="button"
+                    variant="gray"
+                    size="sm"
+                    onClick={() => checkVerification(false)}
+                    disabled={verifying}
+                    className="min-w-[100px]"
+                  >
+                    {verifying ? (
+                      <FontAwesomeIcon className="mr-1 opacity-70 animate-spin size-3.5" icon={faRefresh} />
+                    ) : (
+                      <FontAwesomeIcon className="mr-1 opacity-70 size-3.5" icon={faRefresh} />
+                    )}
+                    Check Status
+                  </Button>
+            )}
+
+            {currentStep.id === 'domain' && (
+              <>
+               {isSubscribed ?       
+              <Button
+                onClick={handleDomainSubmit}
+                size="sm"
+                spinner={loading}
+                disabled={loading || !domain.trim()}
+                variant="dark"
+                className="min-w-[100px]"
+              >
+                Next
+              </Button>
+              : (
+                <Button
+                variant="blue"
+                size="sm"
+                onClick={() => {
+                  setShowUpgradeModal(true)
+                  handleClose();
+                }}
+                >
+                  Upgrade To Cap Pro
+                 </Button> 
+              )
+              }
+              </>
+            )}
+          </DialogFooter>
+        )}
+
+      </DialogContent>
+    </Dialog>
+    </>
+  );
+};
+
+
+export default CustomDomainDialog;
diff --git a/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/DomainStep.tsx b/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/DomainStep.tsx
new file mode 100644
index 0000000000..5539d788e7
--- /dev/null
+++ b/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/DomainStep.tsx
@@ -0,0 +1,55 @@
+
+import { useDashboardContext } from "@/app/(org)/dashboard/Contexts";
+import { Input } from "@cap/ui";
+import clsx from "clsx";
+
+
+interface DomainStepProps {
+  domain: string;
+  setDomain: (domain: string) => void;
+  onSubmit: () => void;
+  error?: string;
+  submitLoading?: boolean;
+  onClearError: () => void;
+}
+
+const DomainStep = ({ domain, setDomain, onSubmit, error, onClearError, submitLoading }: DomainStepProps) => {
+  const { isSubscribed } = useDashboardContext();
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setDomain(e.target.value);
+    if (error) {
+      onClearError();
+    }
+  };
+
+  return (
+      <div className="space-y-6">
+        <div className="text-center">
+          <h3 className="text-lg font-semibold text-gray-12">Your domain</h3>
+          <p className="text-sm text-gray-11">
+            Enter the custom domain you'd like to use
+          </p>
+        </div>  
+        <div className="space-y-3">
+          <Input
+            type="text"
+            id="customDomain"
+            placeholder="your-domain.com"
+            value={domain}
+            disabled={!isSubscribed || submitLoading}
+            className={clsx(
+              "max-w-[400px] mx-auto",
+              error && "border-red-500 focus:border-red-500"
+            )}
+            onChange={handleInputChange}
+            onKeyDown={(e) => e.key === 'Enter' && onSubmit()}
+          />
+          {error && (
+            <p className="text-sm text-center text-red-500">{error}</p>
+          )}
+        </div>
+      </div>
+  );
+};
+
+export default DomainStep
diff --git a/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/Stepper.tsx b/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/Stepper.tsx
new file mode 100644
index 0000000000..9f426d187a
--- /dev/null
+++ b/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/Stepper.tsx
@@ -0,0 +1,78 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { Fragment } from "react";
+import clsx from "clsx";
+
+import { motion } from "motion/react";
+import { StepStatus } from "./types";
+
+interface StepperProps {
+  steps: Array<{
+    id: string;
+    name: string;
+    status: StepStatus;
+    hasError?: boolean;
+  }>;
+  onStepClick?: (index: number) => void;
+}
+
+export const Stepper = ({ steps, onStepClick }: StepperProps) => {
+  return (
+    <div className="flex justify-center items-center px-7 py-3 w-full border-b bg-gray-1 border-gray-4">
+      {steps.map((step, index) => (
+        <Fragment key={step.id}>
+          <div
+            className={clsx(
+              "flex gap-2 items-center",
+              onStepClick &&
+              step.status === StepStatus.COMPLETED &&
+              "cursor-pointer hover:opacity-80 transition-opacity"
+            )}
+            onClick={() => onStepClick && (step.status === StepStatus.COMPLETED) && onStepClick(index)}
+          >
+            <div
+              className={clsx(
+                "flex justify-center items-center rounded-full border size-5 transition-colors duration-200",
+                step.status === StepStatus.COMPLETED && "bg-green-500 border-green-500",
+                step.hasError ? "border-red-500 bg-red-500" :
+                  step.status !== StepStatus.PENDING
+                    ? "border-transparent bg-blue-9"
+                    : "bg-transparent border-gray-5"
+              )}
+            >
+              {step.hasError ? (
+                <span className="text-white text-[10px]">!</span>
+              ) : step.status === StepStatus.COMPLETED ? (
+                <FontAwesomeIcon icon={faCheck} className="text-white text-[8px]" />
+              ) : (
+                <p className={clsx(
+                  "text-[11px]",
+                  step.status !== StepStatus.PENDING ? "text-white" : "text-gray-10"
+                )}>
+                  {index + 1}
+                </p>
+              )}
+            </div>
+            <p className={clsx(
+              "whitespace-nowrap transition-colors duration-200 text-[13px]",
+              step.hasError ? "text-red-600" :
+                step.status !== StepStatus.PENDING ? "text-gray-12" : "text-gray-10"
+            )}>
+              {step.name}
+            </p>
+          </div>
+          {index !== steps.length - 1 && (
+            <div className="relative flex-1 mx-5 h-[2px] border-t border-dashed border-gray-5">
+              <motion.div
+                initial={{ width: step.status === StepStatus.COMPLETED ? "100%" : 0 }}
+                animate={{ width: step.status === StepStatus.COMPLETED ? "100%" : 0 }}
+                transition={{ duration: 0.3 }}
+                className="absolute left-0 -top-px z-10 h-full bg-gray-12"
+              />
+            </div>
+          )}
+        </Fragment>
+      ))}
+    </div>
+  );
+};
diff --git a/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/SubscribeContent.tsx b/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/SubscribeContent.tsx
new file mode 100644
index 0000000000..9a24d6d050
--- /dev/null
+++ b/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/SubscribeContent.tsx
@@ -0,0 +1,78 @@
+import { motion } from "motion/react";
+
+const SubscribeContent = () => {
+  const capsDomainText = "caps.yourdomain.com"
+
+  return (
+          <div className="flex absolute z-10 flex-col gap-3 justify-center items-center w-full h-full backdrop-blur-md">
+
+            <div className="flex flex-col items-center mb-1">
+            <motion.p
+            initial={{ y: -10, filter: "blur(5px)", opacity: 0 }}
+            animate={{ y: 0, filter: "blur(0px)", opacity: 1}}
+            transition={{ duration: 0.3, ease: "easeOut" }}
+            className="text-lg text-center text-gray-12">This feature requires Cap Pro</motion.p>
+               <motion.p
+            initial={{ y: -10, filter: "blur(5px)", opacity: 0 }}
+            animate={{ y: 0, filter: "blur(0px)", opacity: 1}}
+            transition={{ duration: 0.3, ease: "easeOut", delay: 0.3 }}
+            className="text-sm text-center text-gray-11">your domain could look like this</motion.p>
+            </div>
+          
+        
+      
+        <motion.div 
+        initial={{y: 10, scale: 1.4, opacity: 0}}
+        animate={{y: 0, scale: 1, opacity: 1}}
+        transition={{ duration: 0.3, ease: "easeOut", delay: 0.5}}
+        className="overflow-hidden relative px-3 py-1 rounded-xl"
+        style={{
+          background: 'linear-gradient(322deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 19%, rgba(199, 199, 199, 1) 29%, rgba(217, 217, 217, 1) 52%, rgba(255, 255, 255, 1) 62%, rgba(158, 158, 158, 1) 83%, rgba(163, 163, 163, 1) 93%)',
+        }}
+      >
+        {/* Moving shine overlay */}
+        <motion.div
+          className="absolute inset-0 z-10 rounded-xl"
+          initial={{ x: '-100%' }}
+          animate={{ 
+            x: ['-100%', '200%', '-100%'] 
+          }}
+          transition={{
+            delay: capsDomainText.length * 0.1 + 0.2,
+            duration: 1.5,
+            ease: "easeInOut",
+            repeat: Infinity,
+            repeatDelay: 2
+          }}
+          style={{
+            background: 'linear-gradient(90deg, transparent, rgba(255,255,255,1), transparent)',
+            mixBlendMode: "screen",
+            transform: 'skewX(-20deg)'
+          }}
+        />
+        
+        
+        <div
+        className="flex relative z-10">
+          {capsDomainText.split('').map((letter, idx) => (
+            <motion.span
+              key={idx}
+              className="text-[13px] font-medium relative z-0 text-black/50 mix-blend-screen"
+              initial={{ opacity: 0, y: -5 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                delay: 0.9 + idx * 0.075,
+                duration: 0.2,
+                ease: "easeOut"
+              }}
+            >
+              {letter === ' ' ? '\u00A0' : letter}
+            </motion.span>
+          ))}
+        </div>
+      </motion.div>
+      </div>
+  )
+}
+
+export default SubscribeContent;
diff --git a/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/SuccessStep.tsx b/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/SuccessStep.tsx
new file mode 100644
index 0000000000..5a520dc42e
--- /dev/null
+++ b/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/SuccessStep.tsx
@@ -0,0 +1,15 @@
+
+
+const SuccesStep = () => {
+  return (
+    <div className="py-10 space-y-1 text-center">
+      <h3 className="text-lg font-semibold text-gray-12">Domain has been set successfully</h3>
+      <p className="text-sm text-gray-11">
+        Your custom domain has been set!
+      </p>
+    </div>
+  )
+}
+
+export default SuccesStep
+
diff --git a/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/VerifyStep.tsx b/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/VerifyStep.tsx
new file mode 100644
index 0000000000..bcdffebc4d
--- /dev/null
+++ b/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/VerifyStep.tsx
@@ -0,0 +1,301 @@
+import { useState, useEffect } from "react";
+import clsx from "clsx";
+import { DomainConfig } from "./types";
+import { Check, Copy } from "lucide-react";
+import { toast } from "sonner";
+import { LoadingSpinner } from "@cap/ui";
+import { useDashboardContext } from "@/app/(org)/dashboard/Contexts";
+
+
+interface VerifyStepProps {
+  domain: string;
+  domainConfig?: DomainConfig | null;
+  isVerified?: boolean;
+  checkVerification: (showToasts?: boolean) => void;
+  initialConfigLoading: boolean;
+}
+
+const POLL_INTERVAL = 5000;
+
+const VerifyStep = ({
+  domain,
+  domainConfig,
+  isVerified,
+  checkVerification,
+  initialConfigLoading,
+}: VerifyStepProps) => {
+  const [copiedField, setCopiedField] = useState<string | null>(null);
+  const {activeOrganization} = useDashboardContext();
+
+  const recommendedCnames = domainConfig?.recommendedCNAME || [];
+  const recommendedIPv4 = domainConfig?.recommendedIPv4 || [];
+  const recommendedARecord = domainConfig?.requiredAValue;
+  const currentCnames = domainConfig?.cnames || [];
+  const currentAValues = domainConfig?.currentAValues || [];
+
+  const hasRecommendedCNAME = recommendedCnames.length > 0;
+
+  const getRecommendedAValues = () => {
+    if (recommendedARecord) return [recommendedARecord];
+
+    if (recommendedIPv4.length > 0) {
+      const sortedIPv4 = recommendedIPv4.sort((a, b) => a.rank - b.rank);
+      const primaryRecommendation = sortedIPv4[0];
+
+      if (!primaryRecommendation) return [];
+
+      if (Array.isArray(primaryRecommendation.value)) {
+        return primaryRecommendation.value;
+      }
+      return [primaryRecommendation.value];
+    }
+
+    return [];
+  };
+
+  const recommendedAValues = getRecommendedAValues();
+
+  // Check if DNS records are already correctly configured
+  const aRecordConfigured = recommendedAValues.length > 0 &&
+    recommendedAValues.some(ip => currentAValues.includes(ip));
+  const cnameConfigured = recommendedCnames.length > 0 &&
+    recommendedCnames.some(rec => currentCnames.includes(rec.value));
+
+  const showARecord = recommendedARecord && !aRecordConfigured;
+  const showCNAMERecord = hasRecommendedCNAME && !cnameConfigured;
+
+  const handleCopy = async (text: string, fieldId: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedField(fieldId);
+      setTimeout(() => setCopiedField(null), 2000);
+      toast.success("Copied to clipboard");
+    } catch (err) {
+      toast.error("Failed to copy to clipboard");
+    }
+  };
+
+   useEffect(() => {
+        let interval: NodeJS.Timeout;
+        if (activeOrganization?.organization.customDomain && !isVerified) {
+          checkVerification(false);
+    
+          interval = setInterval(() => {
+            checkVerification(false);
+          }, POLL_INTERVAL);
+        }
+    
+        return () => {
+          clearInterval(interval);
+        };
+      }, [activeOrganization?.organization.customDomain, isVerified]);
+  
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center">
+        <h3 className="text-lg font-semibold text-gray-12">{isVerified ? "Domain Verified" : "Verify your domain"}</h3>
+        <p className="text-sm text-gray-11">
+          {isVerified ? "Your domain is verified!" : `Add the DNS records below to verify ownership of ${domain}: wait a minute after updating to verify.`}
+        </p>
+      </div>
+
+      {initialConfigLoading && !domainConfig ? (
+        <div className="flex justify-center items-center w-full h-20">
+          <LoadingSpinner size={36} />
+        </div>
+      ) : (
+        !isVerified && domainConfig && (
+          <div className="space-y-4">
+
+            {/* A Record Configuration */}
+            {showARecord && (
+              <div className="overflow-hidden rounded-lg border border-gray-4">
+                <div className="px-4 py-3 border-b bg-gray-2 border-gray-4">
+                  <p className="font-medium text-md text-gray-12">
+                    A Record Configuration
+                  </p>
+                  <p className="mt-1 text-sm text-gray-10">
+                    Add this A record to your domain:
+                  </p>
+                </div>
+                <div className="px-4 py-3">
+                  <dl className="grid gap-4">
+                    {/* Current A Values */}
+                    {currentAValues.length > 0 && (
+                      <div className="grid grid-cols-[100px,1fr] items-center">
+                        <dt className="text-sm font-medium text-gray-12">Current</dt>
+                        <dd className="space-y-1.5 text-sm text-gray-10">
+                          {currentAValues.map((value, index) => (
+                            <div
+                              key={`a-${index}`}
+                              className={clsx(
+                                recommendedAValues.includes(value)
+                                  ? "flex items-center gap-2 text-green-300"
+                                  : "flex items-center gap-2 text-red-200"
+                              )}
+                            >
+                              <code
+                                className={clsx(
+                                  recommendedAValues.includes(value)
+                                    ? "px-2 py-1 rounded-lg bg-green-900"
+                                    : "px-2 py-1 rounded-lg bg-red-900",
+                                  "text-xs"
+                                )}
+                              >
+                                {value}
+                              </code>
+                              {recommendedAValues.includes(value) && (
+                                <span className="text-xs text-green-600">(Correct)</span>
+                              )}
+                            </div>
+                          ))}
+                        </dd>
+                      </div>
+                    )}
+                    <div className="grid grid-cols-[100px,1fr] items-center">
+                      <dt className="text-sm font-medium text-gray-12">Type</dt>
+                      <dd className="text-sm text-gray-10">A</dd>
+                    </div>
+                    <div className="grid grid-cols-[100px,1fr] items-center">
+                      <dt className="text-sm font-medium text-gray-12">Name</dt>
+                      <dd className="text-sm text-gray-10">@ (or leave blank)</dd>
+                    </div>
+                    <div className="grid grid-cols-[100px,1fr] items-center">
+                      <dt className="text-sm font-medium text-gray-12">Value</dt>
+                      <dd className="space-y-2 text-sm text-gray-10">
+                        {recommendedAValues.map((ipAddress, index) => (
+                          <div key={`ip-${index}`} className="flex gap-2 items-center">
+                            <div className="flex items-center justify-between gap-1.5 bg-gray-3 px-2 py-1 rounded-lg flex-1 min-w-0 border border-gray-4">
+                              <code className="text-xs text-gray-10">
+                                {ipAddress}
+                              </code>
+                              <button
+                                type="button"
+                                onClick={() => handleCopy(ipAddress, `a-record-${index}`)}
+                                className="p-1 rounded-md transition-colors hover:bg-gray-1 shrink-0"
+                                title="Copy to clipboard"
+                              >
+                                {copiedField === `a-record-${index}` ? (
+                                  <Check className="size-3.5 text-green-500" />
+                                ) : (
+                                  <Copy className="size-3.5 text-gray-10" />
+                                )}
+                              </button>
+                            </div>
+                            {index === 0 && recommendedAValues.length > 1 && (
+                              <span className="text-xs text-gray-11">(Primary)</span>
+                            )}
+                          </div>
+                        ))}
+                      </dd>
+                    </div>
+                  </dl>
+                </div>
+              </div>
+            )}
+
+            {/* CNAME Record Configuration */}
+            {showCNAMERecord && (
+              <div className="overflow-hidden rounded-lg border border-gray-4">
+                <div className="px-4 py-3 border-b bg-gray-2 border-gray-4">
+                  <p className="font-medium text-md text-gray-12">
+                    CNAME Record Configuration
+                  </p>
+                  <p className="mt-1 text-sm text-gray-10">
+                    Add this CNAME record to your domain:
+                  </p>
+                </div>
+                <div className="px-4 py-3">
+                  <dl className="grid gap-4">
+                    {/* Current CNAME Values */}
+                    {currentCnames.length > 0 && (
+                      <div className="grid grid-cols-[100px,1fr] items-center">
+                        <dt className="text-sm font-medium text-gray-12">Current</dt>
+                        <dd className="space-y-1.5 text-sm text-gray-10">
+                          {currentCnames.map((value, index) => (
+                            <div
+                              key={`cname-${index}`}
+                              className={clsx(
+                                recommendedCnames.some(rec => rec.value === value)
+                                  ? "flex items-center gap-2 text-green-300"
+                                  : "flex items-center gap-2 text-red-200"
+                              )}
+                            >
+                              <code
+                                className={clsx(
+                                  recommendedCnames.some(rec => rec.value === value)
+                                    ? "px-2 py-1 rounded-lg bg-green-900"
+                                    : "px-2 py-1 rounded-lg bg-red-900",
+                                  "text-xs"
+                                )}
+                              >
+                                {value}
+                              </code>
+                              {recommendedCnames.some(rec => rec.value === value) && (
+                                <span className="text-xs text-green-600">(Correct)</span>
+                              )}
+                            </div>
+                          ))}
+                        </dd>
+                      </div>
+                    )}
+                    <div className="grid grid-cols-[100px,1fr] items-center">
+                      <dt className="text-sm font-medium text-gray-12">Type</dt>
+                      <dd className="text-sm text-gray-10">CNAME</dd>
+                    </div>
+                    <div className="grid grid-cols-[100px,1fr] items-center">
+                      <dt className="text-sm font-medium text-gray-12">Name</dt>
+                      <dd className="text-sm text-gray-10">
+                        <code className="px-2 py-1 text-xs rounded bg-gray-4">
+                          {domain.split('.').length > 2 ? domain.split('.')[0] : '@'}
+                        </code>
+                      </dd>
+                    </div>
+
+                    {/* Show ranked CNAME options */}
+                    {recommendedCnames
+                      .sort((a, b) => a.rank - b.rank)
+                      .map((cname, index) => {
+                        const fieldId = `cname-${cname.rank}`;
+                        return (
+                          <div key={cname.rank} className="grid grid-cols-[100px,1fr] items-center">
+                            <dt className="text-sm font-medium text-gray-12">
+                              {index === 0 ? "Value" : `Option ${index + 1}`}
+                            </dt>
+                            <dd className="flex gap-2 items-center text-sm text-gray-10">
+                              <div className="flex items-center justify-between gap-1.5 bg-gray-3 px-2 py-1 rounded-lg flex-1 min-w-0 border border-gray-4">
+                                <code className="text-xs text-gray-10">
+                                  {cname.value}
+                                </code>
+                                <button
+                                  type="button"
+                                  onClick={() => handleCopy(cname.value, fieldId)}
+                                  className="p-1 rounded-md transition-colors hover:bg-gray-1 shrink-0"
+                                  title="Copy to clipboard"
+                                >
+                                  {copiedField === fieldId ? (
+                                    <Check className="size-3.5 text-green-500" />
+                                  ) : (
+                                    <Copy className="size-3.5 text-gray-10" />
+                                  )}
+                                </button>
+                              </div>
+                            </dd>
+                          </div>
+                        );
+                      })}
+                  </dl>
+                </div>
+              </div>
+            )}
+
+          </div>
+        )
+      )}
+
+    </div>
+  );
+};
+
+export default VerifyStep;
\ No newline at end of file
diff --git a/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/types.ts b/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/types.ts
new file mode 100644
index 0000000000..2f18b25b12
--- /dev/null
+++ b/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainDialog/types.ts
@@ -0,0 +1,51 @@
+export enum StepStatus {
+  PENDING = "pending",
+  CURRENT = "current",
+  COMPLETED = "completed",
+}
+
+export interface StepConfig {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+export interface StepState {
+  currentIndex: number;
+  totalSteps: number;
+  canNavigateBack: boolean;
+  errors: Record<string, string>;
+}
+
+export type StepAction =
+  | { type: "NEXT_STEP" }
+  | { type: "PREV_STEP" }
+  | { type: "GO_TO_STEP"; payload: number }
+  | { type: "SET_ERROR"; payload: { stepId: string; error: string } }
+  | { type: "CLEAR_ERROR"; payload: string }
+  | { type: "RESET" };
+
+export type DomainVerification = {
+  type: string;
+  domain: string;
+  value: string;
+  reason: string;
+};
+
+export type DomainConfig = {
+  name: string;
+  apexName: string;
+  verification: DomainVerification[];
+  verified: boolean;
+  misconfigured?: boolean;
+  aValues?: string[];
+  currentAValues?: string[];
+  requiredAValue?: string;
+  cnameValue?: string;
+  currentCnameValue?: string;
+  requiredCnameValue?: string;
+  isSubdomain?: boolean;
+  recommendedCNAME?: Array<{ rank: number; value: string }>;
+  recommendedIPv4?: Array<{ rank: number; value: string[] | string }>;
+  cnames?: string[];
+};
diff --git a/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainIconCard.tsx b/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainIconCard.tsx
deleted file mode 100644
index 10fbcaec9c..0000000000
--- a/apps/web/app/(org)/dashboard/settings/organization/components/CustomDomainIconCard.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client";
-
-import { Card, CardDescription, Label } from "@cap/ui";
-import { CustomDomain } from "./CustomDomain";
-import { OrganizationIcon } from "./OrganizationIcon";
-
-interface CustomDomainCardProps {
-  isOwner: boolean;
-  showOwnerToast: () => void;
-}
-
-export const CustomDomainIconCard = ({
-  isOwner,
-  showOwnerToast,
-}: CustomDomainCardProps) => {
-  return (
-    <Card className="flex flex-col flex-1 gap-6 w-full lg:flex-row">
-      <div className="order-first lg:order-last">
-        <OrganizationIcon isOwner={isOwner} showOwnerToast={showOwnerToast} />
-      </div>
-      <div className="order-last lg:order-first">
-        <div className="space-y-1">
-          <Label htmlFor="customDomain">Custom Domain</Label>
-          <CardDescription className="w-full max-w-[400px]">
-            Set up a custom domain for your organization's shared caps and make
-            it unique.
-          </CardDescription>
-        </div>
-        <CustomDomain isOwner={isOwner} showOwnerToast={showOwnerToast} />
-      </div>
-    </Card>
-  );
-};
diff --git a/apps/web/app/(org)/dashboard/settings/organization/components/OrganizationDetailsCard.tsx b/apps/web/app/(org)/dashboard/settings/organization/components/OrganizationDetailsCard.tsx
index 13e6f73f87..7ff11d4313 100644
--- a/apps/web/app/(org)/dashboard/settings/organization/components/OrganizationDetailsCard.tsx
+++ b/apps/web/app/(org)/dashboard/settings/organization/components/OrganizationDetailsCard.tsx
@@ -18,7 +18,9 @@ export const OrganizationDetailsCard = () => {
       </CardHeader>
       <OrgName />
       <AccessEmailDomain />
+      <div className="mt-2 w-full h-px border-t border-dashed border-gray-3" />
       <CustomDomain />
+      <div className="w-full h-px border-t border-dashed border-gray-3" />
       <OrganizationIcon />
     </Card>
   );
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 4db92a329e..2cfb38bea7 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -77,10 +77,6 @@ html {
   color: #ffffff;
 }
 
-input:-webkit-autofill {
-  transition: all 5000s ease-in-out 0s;
-}
-
 .wrapper {
   @apply mx-auto w-[92%] max-w-screen-2xl;
 }
diff --git a/apps/web/package.json b/apps/web/package.json
index 39d7926a9a..59c3cc41cb 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -57,6 +57,7 @@
     "@virtual-grid/react": "^2.0.3",
     "@workos-inc/node": "^7.34.0",
     "aws-sdk": "^2.1530.0",
+    "canvas-confetti": "^1.9.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cookies-next": "^4.1.0",
@@ -107,6 +108,7 @@
   },
   "devDependencies": {
     "@smithy/types": "^4.3.1",
+    "@types/canvas-confetti": "^1.9.0",
     "@types/file-saver": "^2.0.7",
     "@types/js-cookie": "^3.0.6",
     "@types/jsdom": "^21.1.7",
diff --git a/packages/ui/src/components/Dialog.tsx b/packages/ui/src/components/Dialog.tsx
index 42b05b4327..4f9f2432c1 100644
--- a/packages/ui/src/components/Dialog.tsx
+++ b/packages/ui/src/components/Dialog.tsx
@@ -15,7 +15,7 @@ const DialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
-    className={classNames("fixed inset-0 z-[100000] bg-black/60", className)}
+    className={classNames("fixed inset-0 z-[500] bg-black/60", className)}
     {...props}
   />
 ));
@@ -27,7 +27,7 @@ const DialogContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay className="animate-fadeIn" />
-    <div className="flex fixed inset-0 z-[10000000] justify-center items-center">
+    <div className="flex fixed inset-0 z-[501] justify-center items-center">
       <DialogPrimitive.Content
         ref={ref}
         className={classNames(
@@ -73,7 +73,7 @@ const DialogHeader = ({
     {...props}
   >
     {icon && (
-      <div className="flex justify-center items-center rounded-full border md:mb-0 text-gray-12 border-gray-5 bg-gray-3 size-10">
+      <div className="flex justify-center items-center rounded-full border md:mb-0 text-gray-12 border-gray-5 bg-gray-3 min-w-10 min-h-10 size-10">
         {icon}
       </div>
     )}
diff --git a/packages/ui/src/components/Table.tsx b/packages/ui/src/components/Table.tsx
index d63fcad221..8808e50f03 100644
--- a/packages/ui/src/components/Table.tsx
+++ b/packages/ui/src/components/Table.tsx
@@ -63,7 +63,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={classNames(
-      "border-b transition-colors border-gray-5 data-[state=selected]:bg-muted",
+      "border-b transition-colors border-gray-3 data-[state=selected]:bg-muted",
       className
     )}
     {...props}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e087e3ddd2..7672780d31 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -549,6 +549,9 @@ importers:
       aws-sdk:
         specifier: ^2.1530.0
         version: 2.1692.0
+      canvas-confetti:
+        specifier: ^1.9.3
+        version: 1.9.3
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -694,6 +697,9 @@ importers:
       '@smithy/types':
         specifier: ^4.3.1
         version: 4.3.1
+      '@types/canvas-confetti':
+        specifier: ^1.9.0
+        version: 1.9.0
       '@types/file-saver':
         specifier: ^2.0.7
         version: 2.0.7
@@ -5972,6 +5978,9 @@ packages:
   '@types/cacheable-request@6.0.3':
     resolution: {integrity: sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==}
 
+  '@types/canvas-confetti@1.9.0':
+    resolution: {integrity: sha512-aBGj/dULrimR1XDZLtG9JwxX1b4HPRF6CX9Yfwh3NvstZEm1ZL7RBnel4keCPSqs1ANRu1u2Aoz9R+VmtjYuTg==}
+
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
@@ -7084,6 +7093,9 @@ packages:
   caniuse-lite@1.0.30001723:
     resolution: {integrity: sha512-1R/elMjtehrFejxwmexeXAtae5UO9iSyFn6G/I806CYC/BLyyBk1EPhrKBkWhy6wM6Xnm47dSJQec+tLJ39WHw==}
 
+  canvas-confetti@1.9.3:
+    resolution: {integrity: sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==}
+
   castable-video@1.1.7:
     resolution: {integrity: sha512-L2GkREds6UJVI8yIuiKXVFv5xNiulR+9nNUIutsDT1av5icCma423cB3GyyYsOdvudQ83Y27eC/290HXUSSleA==}
 
@@ -10547,6 +10559,7 @@ packages:
   node-domexception@1.0.0:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
     engines: {node: '>=10.5.0'}
+    deprecated: Use your platform's native DOMException instead
 
   node-fetch-native@1.6.6:
     resolution: {integrity: sha512-8Mc2HhqPdlIfedsuZoc3yioPuzp6b+L5jRCRY1QzuWZh2EGJVQrGppC6V6cF0bLdbW0+O2YpqCA25aF/1lvipQ==}
@@ -19245,6 +19258,8 @@ snapshots:
       '@types/node': 20.17.43
       '@types/responselike': 1.0.3
 
+  '@types/canvas-confetti@1.9.0': {}
+
   '@types/connect@3.4.38':
     dependencies:
       '@types/node': 20.17.43
@@ -20642,6 +20657,8 @@ snapshots:
 
   caniuse-lite@1.0.30001723: {}
 
+  canvas-confetti@1.9.3: {}
+
   castable-video@1.1.7:
     dependencies:
       custom-media-element: 1.4.2
@@ -21761,8 +21778,8 @@ snapshots:
       '@typescript-eslint/parser': 5.62.0(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3)
       eslint: 9.30.1(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2))
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0)(eslint@9.30.1(jiti@2.4.2))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.30.1(jiti@2.4.2))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.30.1(jiti@2.4.2))
       eslint-plugin-react: 7.37.5(eslint@9.30.1(jiti@2.4.2))
       eslint-plugin-react-hooks: 4.6.2(eslint@9.30.1(jiti@2.4.2))
@@ -21790,33 +21807,33 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)):
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0)(eslint@8.57.1):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.0(supports-color@5.5.0)
-      eslint: 9.30.1(jiti@2.4.2)
+      eslint: 8.57.1
       get-tsconfig: 4.10.0
       is-bun-module: 2.0.0
       stable-hash: 0.0.5
       tinyglobby: 0.2.13
       unrs-resolver: 1.7.2
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0)(eslint@8.57.1):
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0)(eslint@9.30.1(jiti@2.4.2)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.0(supports-color@5.5.0)
-      eslint: 8.57.1
+      eslint: 9.30.1(jiti@2.4.2)
       get-tsconfig: 4.10.0
       is-bun-module: 2.0.0
       stable-hash: 0.0.5
       tinyglobby: 0.2.13
       unrs-resolver: 1.7.2
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.30.1(jiti@2.4.2))
     transitivePeerDependencies:
       - supports-color
 
@@ -21831,14 +21848,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@5.62.0(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@5.62.0(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.30.1(jiti@2.4.2)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 5.62.0(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3)
       eslint: 9.30.1(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0)(eslint@9.30.1(jiti@2.4.2))
     transitivePeerDependencies:
       - supports-color
 
@@ -21882,7 +21899,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.30.1(jiti@2.4.2)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -21893,7 +21910,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.30.1(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.31.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2))
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.30.1(jiti@2.4.2))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
