diff --git a/apps/builder/app/builder/features/topbar/add-domain.tsx b/apps/builder/app/builder/features/topbar/add-domain.tsx
index 8a87a750e243..b8dcc66120b6 100644
--- a/apps/builder/app/builder/features/topbar/add-domain.tsx
+++ b/apps/builder/app/builder/features/topbar/add-domain.tsx
@@ -7,46 +7,38 @@ import {
   theme,
   Text,
   Grid,
+  toast,
 } from "@webstudio-is/design-system";
 import { validateDomain } from "@webstudio-is/domain";
 import type { Project } from "@webstudio-is/project";
-import { useId, useState } from "react";
+import { useId, useOptimistic, useRef, useState } from "react";
 import { CustomCodeIcon } from "@webstudio-is/icons";
-import { trpcClient } from "~/shared/trpc/trpc-client";
+import { nativeClient } from "~/shared/trpc/trpc-client";
 
 type DomainsAddProps = {
   projectId: Project["id"];
   onCreate: (domain: string) => void;
   onExportClick: () => void;
-  refreshDomainResult: (
-    input: { projectId: Project["id"] },
-    onSuccess: () => void
-  ) => void;
-  domainState: "idle" | "submitting";
-  isPublishing: boolean;
+  refresh: () => Promise<void>;
 };
 
 export const AddDomain = ({
   projectId,
   onCreate,
-  refreshDomainResult,
-  domainState,
-  isPublishing,
+  refresh,
   onExportClick,
 }: DomainsAddProps) => {
   const id = useId();
-  const {
-    send: create,
-    state: сreateState,
-    error: сreateSystemError,
-  } = trpcClient.domain.create.useMutation();
   const [isOpen, setIsOpen] = useState(false);
-  const [domain, setDomain] = useState("");
   const [error, setError] = useState<string>();
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [isPending, setIsPendingOptimistic] = useOptimistic(false);
 
-  const handleCreate = () => {
-    setError(undefined);
+  const handleCreateDomain = async (formData: FormData) => {
+    // Will be automatically reset on action end
+    setIsPendingOptimistic(true);
 
+    const domain = formData.get("domain")?.toString() ?? "";
     const validationResult = validateDomain(domain);
 
     if (validationResult.success === false) {
@@ -54,18 +46,22 @@ export const AddDomain = ({
       return;
     }
 
-    create({ domain: validationResult.domain, projectId }, (data) => {
-      if (data.success === false) {
-        setError(data.error);
-        return;
-      }
-
-      refreshDomainResult({ projectId }, () => {
-        setDomain("");
-        setIsOpen(false);
-        onCreate(validationResult.domain);
-      });
+    const result = await nativeClient.domain.create.mutate({
+      domain,
+      projectId,
     });
+
+    if (result.success === false) {
+      toast.error(result.error);
+      setError(result.error);
+      return;
+    }
+
+    onCreate(domain);
+
+    await refresh();
+
+    setIsOpen(false);
   };
 
   return (
@@ -81,7 +77,6 @@ export const AddDomain = ({
         direction={"column"}
         onKeyDown={(event) => {
           if (event.key === "Escape") {
-            setDomain("");
             setIsOpen(false);
             event.preventDefault();
           }
@@ -94,26 +89,21 @@ export const AddDomain = ({
             </Label>
             <InputField
               id={id}
+              name="domain"
               autoFocus
               placeholder="your-domain.com"
-              value={domain}
-              disabled={
-                isPublishing || сreateState !== "idle" || domainState !== "idle"
-              }
+              disabled={isPending}
               onKeyDown={(event) => {
                 if (event.key === "Enter") {
-                  handleCreate();
+                  buttonRef.current
+                    ?.closest("form")
+                    ?.requestSubmit(buttonRef.current);
                 }
                 if (event.key === "Escape") {
-                  setDomain("");
                   setIsOpen(false);
                   event.preventDefault();
                 }
               }}
-              onChange={(event) => {
-                setError(undefined);
-                setDomain(event.target.value);
-              }}
               color={error !== undefined ? "error" : undefined}
             />
             {error !== undefined && (
@@ -121,29 +111,21 @@ export const AddDomain = ({
                 <Text color="destructive">{error}</Text>
               </>
             )}
-            {сreateSystemError !== undefined && (
-              <>
-                {/* Something happened with network, api etc */}
-                <Text color="destructive">{сreateSystemError}</Text>
-                <Text color="subtle">Please try again later</Text>
-              </>
-            )}
           </>
         )}
 
         <Grid gap={2} columns={2}>
           <Button
-            disabled={
-              isPublishing || сreateState !== "idle" || domainState !== "idle"
-            }
+            ref={buttonRef}
+            formAction={handleCreateDomain}
+            state={isPending ? "pending" : undefined}
             color={isOpen ? "primary" : "neutral"}
-            onClick={() => {
+            onClick={(event) => {
               if (isOpen === false) {
                 setIsOpen(true);
+                event.preventDefault();
                 return;
               }
-
-              handleCreate();
             }}
           >
             {isOpen ? "Add domain" : "Add a new domain"}
diff --git a/apps/builder/app/builder/features/topbar/domains.tsx b/apps/builder/app/builder/features/topbar/domains.tsx
index 3efbf74d8d9a..ebe43228fc3a 100644
--- a/apps/builder/app/builder/features/topbar/domains.tsx
+++ b/apps/builder/app/builder/features/topbar/domains.tsx
@@ -10,6 +10,7 @@ import {
   Flex,
   NestedInputButton,
   Separator,
+  toast,
 } from "@webstudio-is/design-system";
 import type { Project } from "@webstudio-is/project";
 import {
@@ -20,14 +21,21 @@ import {
 } from "@webstudio-is/icons";
 import type { DomainStatus } from "@webstudio-is/prisma-client";
 import { CollapsibleDomainSection } from "./collapsible-domain-section";
-import { useCallback, useEffect, useState } from "react";
+import {
+  startTransition,
+  useEffect,
+  useOptimistic,
+  useRef,
+  useState,
+} from "react";
 import { formatDistance } from "date-fns/formatDistance";
 import { Entri } from "./entri";
-import { trpcClient } from "~/shared/trpc/trpc-client";
+import { nativeClient } from "~/shared/trpc/trpc-client";
 import { useStore } from "@nanostores/react";
 import { $publisherHost } from "~/shared/nano-states";
 import { extractCname } from "./cname";
 import type { Database } from "@webstudio-is/postrest/index.server";
+import { useEffectEvent } from "~/shared/hook-utils/effect-event";
 
 export type Domain = Project["domainsVirtual"][number];
 
@@ -207,151 +215,113 @@ const StatusIcon = (props: { projectDomain: Domain; isLoading: boolean }) => {
 const DomainItem = (props: {
   initiallyOpen: boolean;
   projectDomain: Domain;
-  refreshDomainResult: (
-    input: { projectId: Project["id"] },
-    onSuccess?: () => void
-  ) => void;
-  domainState: "idle" | "submitting";
+  refresh: () => Promise<void>;
   isPublishing: boolean;
 }) => {
-  const {
-    send: verify,
-    state: verifyState,
-    data: verifyData,
-    error: verifySystemError,
-  } = trpcClient.domain.verify.useMutation();
-
-  const {
-    send: remove,
-    state: removeState,
-    data: removeData,
-    error: removeSystemError,
-  } = trpcClient.domain.remove.useMutation();
-
-  const {
-    send: updateStatus,
-    state: updateStatusState,
-    data: updateStatusData,
-    error: updateStatusError,
-  } = trpcClient.domain.updateStatus.useMutation();
-
-  const [isStatusLoading, setIsStatusLoading] = useState(true);
-
-  const isRemoveInProgress =
-    removeState !== "idle" || props.domainState !== "idle";
-
-  const isCheckStateInProgress =
-    verifyState !== "idle" ||
-    updateStatusState !== "idle" ||
-    props.domainState !== "idle";
+  const timeSinceLastUpdateMs =
+    Date.now() - new Date(props.projectDomain.updatedAt).getTime();
+
+  const DAY_IN_MS = 24 * 60 * 60 * 1000;
 
   const status = props.projectDomain.verified
     ? (`VERIFIED_${props.projectDomain.status}` as `VERIFIED_${DomainStatus}`)
     : `UNVERIFIED`;
 
-  const { initiallyOpen } = props;
-
-  const domainId = props.projectDomain.domainId;
-  const domain = props.projectDomain.domain;
-  const domainStatus = props.projectDomain.status;
-  const domainError = props.projectDomain.error;
-  const domainUpdatedAt = props.projectDomain.updatedAt;
-
-  const projectId = props.projectDomain.projectId;
-  // const domain
-
-  const refreshDomainResult = props.refreshDomainResult;
-
-  // @todo this should gone https://github.com/webstudio-is/webstudio/issues/1723
-  const handleVerify = useCallback(() => {
-    verify(
-      {
-        domainId,
-        projectId,
-      },
-      (verifyResponse) => {
-        setIsStatusLoading(false);
-
-        if (verifyResponse.success) {
-          refreshDomainResult({
-            projectId,
-          });
-        }
-      }
-    );
-  }, [domainId, projectId, refreshDomainResult, verify]);
-
-  // @todo this should gone https://github.com/webstudio-is/webstudio/issues/1723
-  const handleUpdateStatus = useCallback(() => {
-    updateStatus(
-      {
-        domain,
-        projectId,
-      },
-      (data) => {
-        setIsStatusLoading(false);
-
-        if (data.success) {
-          if (
-            domainStatus !== data.domain.status ||
-            domainError !== data.domain.error
-          ) {
-            refreshDomainResult({
-              projectId,
-            });
-          }
-        }
-      }
-    );
-  }, [
-    domain,
-    domainError,
-    domainStatus,
-    projectId,
-    refreshDomainResult,
-    updateStatus,
-  ]);
-
-  // @todo this should gone https://github.com/webstudio-is/webstudio/issues/1723
-  useEffect(() => {
-    if (initiallyOpen) {
-      setIsStatusLoading(false);
+  const [isStatusLoading, setIsStatusLoading] = useState(
+    props.initiallyOpen ||
+      status === "VERIFIED_ACTIVE" ||
+      timeSinceLastUpdateMs > DAY_IN_MS
+      ? false
+      : true
+  );
+
+  const [isCheckStateInProgress, setIsCheckStateInProgress] =
+    useOptimistic(false);
+
+  const [isRemoveInProgress, setIsRemoveInProgress] = useOptimistic(false);
+
+  const handleRemoveDomain = async () => {
+    setIsRemoveInProgress(true);
+    const result = await nativeClient.domain.remove.mutate({
+      projectId: props.projectDomain.projectId,
+      domainId: props.projectDomain.domainId,
+    });
+
+    if (result.success === false) {
+      toast.error(result.error);
       return;
     }
 
-    if (status === "VERIFIED_ACTIVE") {
-      setIsStatusLoading(false);
+    await props.refresh();
+  };
+
+  const [verifyError, setVerifyError] = useState<string | undefined>(undefined);
+
+  const handleVerify = useEffectEvent(async () => {
+    setVerifyError(undefined);
+    setIsCheckStateInProgress(true);
+
+    const verifyResult = await nativeClient.domain.verify.mutate({
+      projectId: props.projectDomain.projectId,
+      domainId: props.projectDomain.domainId,
+    });
+
+    if (verifyResult.success === false) {
+      setVerifyError(verifyResult.error);
       return;
     }
 
-    const timeSinceLastUpdateMs =
-      Date.now() - new Date(domainUpdatedAt).getTime();
+    await props.refresh();
+  });
+
+  const [updateStatusError, setUpdateStatusError] = useState<
+    string | undefined
+  >(undefined);
+
+  const handleUpdateStatus = useEffectEvent(async () => {
+    setUpdateStatusError(undefined);
+    setIsCheckStateInProgress(true);
+
+    const updateStatusResult = await nativeClient.domain.updateStatus.mutate({
+      projectId: props.projectDomain.projectId,
+      domain: props.projectDomain.domain,
+    });
 
-    const DAY_IN_MS = 24 * 60 * 60 * 1000;
-    // Do not check status if it updated more than one day ago
-    if (timeSinceLastUpdateMs > DAY_IN_MS) {
-      setIsStatusLoading(false);
+    setIsStatusLoading(false);
+
+    if (updateStatusResult.success === false) {
+      setUpdateStatusError(updateStatusResult.error);
       return;
     }
 
-    if (status === "UNVERIFIED") {
-      handleVerify();
+    await props.refresh();
+  });
+
+  const onceRef = useRef(false);
+  useEffect(() => {
+    if (onceRef.current) {
       return;
     }
+    onceRef.current = true;
 
-    handleUpdateStatus();
+    if (isStatusLoading === false) {
+      return;
+    }
 
-    // Update status automatically
-  }, [
-    status,
-    initiallyOpen,
-    handleVerify,
-    handleUpdateStatus,
-    domainUpdatedAt,
-  ]);
+    if (status === "UNVERIFIED") {
+      startTransition(async () => {
+        await handleVerify();
+        await handleUpdateStatus();
+      });
+      return;
+    }
+    startTransition(async () => {
+      await handleUpdateStatus();
+    });
+  }, [status, handleVerify, handleUpdateStatus, isStatusLoading]);
 
   const publisherHost = useStore($publisherHost);
-  const cnameEntryName = extractCname(domain);
+  const cnameEntryName = extractCname(props.projectDomain.domain);
   const cnameEntryValue = `${props.projectDomain.cname}.customers.${publisherHost}`;
 
   const txtEntryName =
@@ -383,7 +353,7 @@ const DomainItem = (props: {
   return (
     <CollapsibleDomainSection
       initiallyOpen={props.initiallyOpen}
-      title={domain}
+      title={props.projectDomain.domain}
       suffix={
         <Grid flow="column">
           <StatusIcon
@@ -391,12 +361,12 @@ const DomainItem = (props: {
             projectDomain={props.projectDomain}
           />
 
-          <Tooltip content={`Proceed to ${domain}`}>
+          <Tooltip content={`Proceed to ${props.projectDomain.domain}`}>
             <IconButton
               tabIndex={-1}
               disabled={status !== "VERIFIED_ACTIVE"}
               onClick={(event) => {
-                const url = new URL(`https://${domain}`);
+                const url = new URL(`https://${props.projectDomain.domain}`);
                 window.open(url.href, "_blank");
                 event.preventDefault();
               }}
@@ -409,14 +379,11 @@ const DomainItem = (props: {
     >
       {status === "UNVERIFIED" && (
         <>
-          {verifySystemError !== undefined && (
-            <Text color="destructive">{verifySystemError}</Text>
-          )}
           <Button
-            disabled={props.isPublishing || isCheckStateInProgress}
+            formAction={handleVerify}
+            state={isCheckStateInProgress ? "pending" : undefined}
             color="primary"
             css={{ width: "100%", flexShrink: 0, mt: theme.spacing[3] }}
-            onClick={handleVerify}
           >
             Check status
           </Button>
@@ -425,40 +392,28 @@ const DomainItem = (props: {
 
       {status !== "UNVERIFIED" && (
         <>
-          {updateStatusData?.success === false && (
-            <Text color="destructive">{updateStatusData.error}</Text>
+          {updateStatusError && (
+            <Text color="destructive">{updateStatusError}</Text>
           )}
           {updateStatusError !== undefined && (
             <Text color="destructive">{updateStatusError}</Text>
           )}
           <Button
-            disabled={props.isPublishing || isCheckStateInProgress}
+            formAction={handleUpdateStatus}
+            state={isCheckStateInProgress ? "pending" : undefined}
             color="primary"
             css={{ width: "100%", flexShrink: 0, mt: theme.spacing[3] }}
-            onClick={handleUpdateStatus}
           >
             Check status
           </Button>
         </>
       )}
 
-      {removeData?.success === false && (
-        <Text color="destructive">{removeData.error}</Text>
-      )}
-
-      {removeSystemError !== undefined && (
-        <Text color="destructive">{removeSystemError}</Text>
-      )}
-
       <Button
-        disabled={props.isPublishing || isRemoveInProgress}
+        formAction={handleRemoveDomain}
+        state={isRemoveInProgress ? "pending" : undefined}
         color="neutral"
         css={{ width: "100%", flexShrink: 0 }}
-        onClick={() => {
-          remove({ projectId, domainId }, () => {
-            props.refreshDomainResult({ projectId });
-          });
-        }}
       >
         Remove domain
       </Button>
@@ -467,11 +422,11 @@ const DomainItem = (props: {
         <Grid gap={1}>
           {status === "UNVERIFIED" && (
             <>
-              {verifyData?.success === false ? (
+              {verifyError ? (
                 <Text color="destructive">
                   Status: Failed to verify
                   <br />
-                  {verifyData.error}
+                  {verifyError}
                 </Text>
               ) : (
                 <>
@@ -558,16 +513,20 @@ const DomainItem = (props: {
 
         <Entri
           dnsRecords={dnsRecords}
-          domain={domain}
+          domain={props.projectDomain.domain}
           onClose={() => {
             // Sometimes Entri modal dialog hangs even if it's successful,
             // until they fix that, we'll just refresh the status here on every onClose event
             if (status === "UNVERIFIED") {
-              handleVerify();
+              startTransition(async () => {
+                await handleVerify();
+                await handleUpdateStatus();
+              });
               return;
             }
-
-            handleUpdateStatus();
+            startTransition(async () => {
+              await handleUpdateStatus();
+            });
           }}
           isPublishing={props.isPublishing}
         />
@@ -579,19 +538,14 @@ const DomainItem = (props: {
 type DomainsProps = {
   newDomains: Set<string>;
   domains: Domain[];
-  refreshDomainResult: (
-    input: { projectId: Project["id"] },
-    onSuccess?: () => void
-  ) => void;
-  domainState: "idle" | "submitting";
+  refresh: () => Promise<void>;
   isPublishing: boolean;
 };
 
 export const Domains = ({
   newDomains,
   domains,
-  refreshDomainResult,
-  domainState,
+  refresh,
   isPublishing,
 }: DomainsProps) => {
   return (
@@ -601,8 +555,7 @@ export const Domains = ({
           key={projectDomain.domain}
           projectDomain={projectDomain}
           initiallyOpen={newDomains.has(projectDomain.domain)}
-          refreshDomainResult={refreshDomainResult}
-          domainState={domainState}
+          refresh={refresh}
           isPublishing={isPublishing}
         />
       ))}
diff --git a/apps/builder/app/builder/features/topbar/publish.tsx b/apps/builder/app/builder/features/topbar/publish.tsx
index 2003a16f779f..3190aaf8515c 100644
--- a/apps/builder/app/builder/features/topbar/publish.tsx
+++ b/apps/builder/app/builder/features/topbar/publish.tsx
@@ -1,5 +1,4 @@
 import {
-  useCallback,
   useEffect,
   useMemo,
   useState,
@@ -24,7 +23,6 @@ import {
   InputField,
   Separator,
   ScrollArea,
-  Box,
   rawTheme,
   Select,
   theme,
@@ -62,24 +60,11 @@ import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import type { Templates } from "@webstudio-is/sdk";
 import { formatDistance } from "date-fns/formatDistance";
 
-type ProjectData =
-  | {
-      success: true;
-      project: Project;
-    }
-  | {
-      success: false;
-      error: string;
-    };
-
 type ChangeProjectDomainProps = {
   project: Project;
   projectState: "idle" | "submitting";
   isPublishing: boolean;
-  projectLoad: (
-    props: { projectId: Project["id"] },
-    callback: (projectData: ProjectData) => void
-  ) => void;
+  projectLoad: () => void;
 };
 
 type TimeoutId = undefined | ReturnType<typeof setTimeout>;
@@ -102,32 +87,6 @@ const ChangeProjectDomain = ({
   const [domain, setDomain] = useState(project.domain);
   const [error, setError] = useState<string>();
 
-  const refreshProject = useCallback(
-    () =>
-      projectLoad({ projectId: project.id }, (projectData) => {
-        if (projectData?.success === false) {
-          setError(projectData.error);
-          return;
-        }
-
-        const currenProject = $project.get();
-
-        if (currenProject?.id === projectData.project.id) {
-          $project.set({
-            ...currenProject,
-            domain: projectData.project.domain,
-          });
-        }
-
-        setDomain(projectData.project.domain);
-      }),
-    [projectLoad, project.id]
-  );
-
-  useEffect(() => {
-    refreshProject();
-  }, [refreshProject]);
-
   const handleUpdateProjectDomain = () => {
     const validationResult = validateProjectDomain(domain);
 
@@ -149,7 +108,7 @@ const ChangeProjectDomain = ({
         return;
       }
 
-      refreshProject();
+      projectLoad();
     });
   };
 
@@ -537,6 +496,7 @@ const PublishStatic = ({
   );
 };
 
+/*
 const ErrorText = ({ children }: { children: string }) => (
   <Flex
     css={{
@@ -550,6 +510,7 @@ const ErrorText = ({ children }: { children: string }) => (
     <Text color="subtle">Please try again later</Text>
   </Flex>
 );
+*/
 
 const useCanAddDomain = () => {
   const { load, data } = trpcClient.domain.countTotalDomains.useQuery();
@@ -569,38 +530,45 @@ const useCanAddDomain = () => {
   return { canAddDomain, maxDomainsAllowedPerUser };
 };
 
+const refreshProject = async () => {
+  const result = await nativeClient.domain.project.query({
+    projectId: $project.get()!.id,
+  });
+
+  if (result.success) {
+    $project.set(result.project);
+    return;
+  }
+
+  toast.error(result.error);
+};
+
 const Content = (props: {
   projectId: Project["id"];
   onExportClick: () => void;
 }) => {
   const [newDomains, setNewDomains] = useState(new Set<string>());
 
-  const {
-    load: projectLoad,
-    data: projectData,
-    state: projectState,
-    error: projectSystemError,
-  } = trpcClient.domain.project.useQuery();
+  const project = useStore($project);
 
-  useEffect(() => {
-    projectLoad({ projectId: props.projectId });
-  }, [props.projectId, projectLoad]);
+  if (project == null) {
+    throw new Error("Project not found");
+  }
+  const projectState = "idle";
 
-  projectData?.success;
+  const handleLoadProject = () => {
+    refreshProject();
+  };
 
   const domainsToPublish = useMemo(
     () =>
-      projectData?.success
-        ? projectData.project.domainsVirtual.filter(
-            (projectDomain) => getStatus(projectDomain) === "VERIFIED_ACTIVE"
-          )
-        : [],
-    [projectData]
+      project.domainsVirtual.filter(
+        (projectDomain) => getStatus(projectDomain) === "VERIFIED_ACTIVE"
+      ),
+    [project.domainsVirtual]
   );
 
-  const latestBuildVirtual = projectData?.success
-    ? (projectData.project.latestBuildVirtual ?? undefined)
-    : undefined;
+  const latestBuildVirtual = project.latestBuildVirtual;
 
   const hasPendingState = latestBuildVirtual
     ? getPublishStatusAndTextNew(latestBuildVirtual).status === "PENDING"
@@ -615,7 +583,7 @@ const Content = (props: {
   const { canAddDomain, maxDomainsAllowedPerUser } = useCanAddDomain();
 
   return (
-    <>
+    <form>
       <ScrollArea>
         {canAddDomain === false && (
           <PanelBanner>
@@ -639,59 +607,44 @@ const Content = (props: {
             </Link>
           </PanelBanner>
         )}
-        {projectSystemError !== undefined && (
-          <ErrorText>{projectSystemError}</ErrorText>
-        )}
 
-        {projectData?.success && (
-          <ChangeProjectDomain
-            projectLoad={projectLoad}
-            projectState={projectState}
-            project={projectData.project}
-            isPublishing={isPublishing}
-          />
-        )}
+        <ChangeProjectDomain
+          projectLoad={handleLoadProject}
+          projectState={projectState}
+          project={project}
+          isPublishing={isPublishing}
+        />
 
-        {projectData?.success && (
-          <Domains
-            newDomains={newDomains}
-            domains={projectData.project.domainsVirtual}
-            refreshDomainResult={projectLoad}
-            domainState={projectState}
-            isPublishing={isPublishing}
-          />
-        )}
+        <Domains
+          newDomains={newDomains}
+          domains={project.domainsVirtual}
+          refresh={refreshProject}
+          isPublishing={isPublishing}
+        />
       </ScrollArea>
       <Flex direction="column" justify="end" css={{ height: 0 }}>
         <Separator />
       </Flex>
+
       <AddDomain
         projectId={props.projectId}
-        refreshDomainResult={projectLoad}
-        domainState={projectState}
+        refresh={refreshProject}
         onCreate={(domain) => {
           setNewDomains((prev) => {
             return new Set([...prev, domain]);
           });
         }}
-        isPublishing={isPublishing}
         onExportClick={props.onExportClick}
       />
-      {projectData?.success === true && (
-        <Publish
-          project={projectData.project}
-          domainsToPublish={domainsToPublish}
-          refresh={() => {
-            projectLoad({ projectId: props.projectId });
-          }}
-          isPublishing={isPublishing}
-          setIsPublishing={setIsPublishing}
-        />
-      )}
-      {projectData?.success !== true && (
-        <Box css={{ height: theme.spacing[8] }} />
-      )}
-    </>
+
+      <Publish
+        project={project}
+        domainsToPublish={domainsToPublish}
+        refresh={handleLoadProject}
+        isPublishing={isPublishing}
+        setIsPublishing={setIsPublishing}
+      />
+    </form>
   );
 };
 
diff --git a/packages/prisma-client/prisma/migrations/20240920091253_domain-ordering/migration.sql b/packages/prisma-client/prisma/migrations/20240920091253_domain-ordering/migration.sql
new file mode 100644
index 000000000000..78ead59d2f29
--- /dev/null
+++ b/packages/prisma-client/prisma/migrations/20240920091253_domain-ordering/migration.sql
@@ -0,0 +1,34 @@
+-- Create the "domainsVirtual" function to return all domain-related data for a specific project.
+CREATE OR REPLACE FUNCTION "domainsVirtual"("Project")
+RETURNS SETOF "domainsVirtual" AS $$
+    -- This function retrieves all the domain information associated with a specific project by joining the Domain and ProjectDomain tables.
+    -- It returns a result set conforming to the "domainsVirtual" structure, including fields such as domain status, error, verification status, etc.
+    SELECT
+        "Domain".id || '-' || "ProjectDomain"."projectId" as id,
+        "Domain".id AS "domainId", -- Domain ID from Domain table
+        "ProjectDomain"."projectId", -- Project ID from ProjectDomain table
+        "Domain".domain, -- Domain name
+        "Domain".status, -- Current domain status
+        "Domain".error, -- Error message, if any
+        "Domain"."txtRecord" AS "domainTxtRecord", -- Current TXT record from Domain table
+        "ProjectDomain"."txtRecord" AS "expectedTxtRecord", -- Expected TXT record from ProjectDomain table
+        "ProjectDomain"."cname" AS "cname",
+        CASE
+            WHEN "Domain"."txtRecord" = "ProjectDomain"."txtRecord" THEN true -- If TXT records match, domain is verified
+            ELSE false
+        END AS "verified", -- Boolean flag for verification status
+        "ProjectDomain"."createdAt", -- Creation timestamp from ProjectDomain table
+        "Domain"."updatedAt" -- Last updated timestamp from Domain table
+    FROM
+        "Domain"
+    JOIN
+        "ProjectDomain" ON "Domain".id = "ProjectDomain"."domainId" -- Joining Domain and ProjectDomain on domainId
+    WHERE
+        "ProjectDomain"."projectId" = $1.id -- Filtering by projectId passed as an argument to the function
+    ORDER BY "ProjectDomain"."createdAt", "Domain".id; -- Stable sort
+$$
+STABLE
+LANGUAGE sql;
+
+-- Add function-specific comments to explain its behavior.
+COMMENT ON FUNCTION "domainsVirtual"("Project") IS 'Function that retrieves domain-related data for a given project by joining the Domain and ProjectDomain tables. It returns a result set that conforms to the structure defined in the domainsVirtual virtual table.';