diff --git a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
index 261746b733d..6ce9eb610cb 100644
--- a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
+++ b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
@@ -36,46 +36,42 @@ const CustomDomainConfig = () => {
   return (
     <section>
       <FormHeader title="Custom Domains" description="Present a branded experience to your users" />
-      {data?.status === '0_no_hostname_configured' ? (
+      {isLoading ? (
+        <Panel>
+          <Panel.Content className="space-y-6">
+            <CustomDomainsShimmerLoader />
+          </Panel.Content>
+        </Panel>
+      ) : isError ? (
+        <Panel>
+          <Panel.Content className="space-y-6">
+            <div className="flex items-center justify-center space-x-2 py-8">
+              <IconAlertCircle size={16} strokeWidth={1.5} />
+              <p className="text-sm text-scale-1100">
+                Failed to retrieve custom domain configuration. Please try again later or{' '}
+                <Link href={`/support/new?ref=${ref}&category=sales`}>
+                  <a className="underline">contact support</a>
+                </Link>
+                .
+              </p>
+            </div>
+          </Panel.Content>
+        </Panel>
+      ) : data?.status === '0_no_hostname_configured' ? (
         <CustomDomainsConfigureHostname />
+      ) : data?.status === '0_not_allowed' ? (
+        <UpgradeToPro
+          icon={<IconAlertCircle size={18} strokeWidth={1.5} />}
+          primaryText="Custom domains are a Pro plan add-on"
+          projectRef={ref as string}
+          secondaryText={
+            tier === PRICING_TIER_PRODUCT_IDS.FREE
+              ? 'To configure a custom domain for your project, please upgrade to the Pro plan with the custom domains add-on selected'
+              : 'To configure a custom domain for your project, please enable the add-on'
+          }
+        />
       ) : (
         <Panel>
-          {isLoading && (
-            <Panel.Content className="space-y-6">
-              <CustomDomainsShimmerLoader />
-            </Panel.Content>
-          )}
-
-          {data?.status === '0_not_allowed' && (
-            <Panel.Content className="space-y-6">
-              <UpgradeToPro
-                icon={<IconAlertCircle size={18} strokeWidth={1.5} />}
-                primaryText="Custom domains are a Pro plan add-on"
-                projectRef={ref as string}
-                secondaryText={
-                  tier === PRICING_TIER_PRODUCT_IDS.FREE
-                    ? 'To configure a custom domain for your project, please upgrade to the Pro plan with the custom domains add-on selected'
-                    : 'To configure a custom domain for your project, please enable the add-on'
-                }
-              />
-            </Panel.Content>
-          )}
-
-          {isError && (
-            <Panel.Content className="space-y-6">
-              <div className="flex items-center justify-center space-x-2 py-8">
-                <IconAlertCircle size={16} strokeWidth={1.5} />
-                <p className="text-sm text-scale-1100">
-                  Failed to retrieve custom domain configuration. Please try again later or{' '}
-                  <Link href={`/support/new?ref=${ref}&category=sales`}>
-                    <a className="underline">contact support</a>
-                  </Link>
-                  .
-                </p>
-              </div>
-            </Panel.Content>
-          )}
-
           {isSuccess && (
             <div className="flex flex-col">
               {(data.status === '2_initiated' || data.status === '3_challenge_verified') && (