diff --git a/web/packages/accounts/pages/credentials.tsx b/web/packages/accounts/pages/credentials.tsx
index b44bc4e103..312eba6b4b 100644
--- a/web/packages/accounts/pages/credentials.tsx
+++ b/web/packages/accounts/pages/credentials.tsx
@@ -1,13 +1,11 @@
-import { isDevBuild } from "@/next/env";
 import log from "@/next/log";
 import { ensure } from "@/utils/ensure";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
-import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
 import LinkButton from "@ente/shared/components/LinkButton";
 import {
-    ConnectionDetails,
+    LoginFlowFormFooter,
     PasswordHeader,
     VerifyingPasskey,
 } from "@ente/shared/components/LoginComponents";
@@ -42,6 +40,7 @@ import {
     setKey,
 } from "@ente/shared/storage/sessionStorage";
 import type { KeyAttributes, User } from "@ente/shared/user/types";
+import { Stack } from "@mui/material";
 import { t } from "i18next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
@@ -321,16 +320,16 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
                     srpAttributes={srpAttributes}
                 />
 
-                <FormPaperFooter style={{ justifyContent: "space-between" }}>
-                    <LinkButton onClick={() => router.push(PAGES.RECOVER)}>
-                        {t("FORGOT_PASSWORD")}
-                    </LinkButton>
-                    <LinkButton onClick={logout}>
-                        {t("CHANGE_EMAIL")}
-                    </LinkButton>
-                </FormPaperFooter>
-
-                {isDevBuild && <ConnectionDetails />}
+                <LoginFlowFormFooter>
+                    <Stack direction="row" justifyContent="space-between">
+                        <LinkButton onClick={() => router.push(PAGES.RECOVER)}>
+                            {t("FORGOT_PASSWORD")}
+                        </LinkButton>
+                        <LinkButton onClick={logout}>
+                            {t("CHANGE_EMAIL")}
+                        </LinkButton>
+                    </Stack>
+                </LoginFlowFormFooter>
             </FormPaper>
         </VerticallyCentered>
     );
diff --git a/web/packages/accounts/pages/verify.tsx b/web/packages/accounts/pages/verify.tsx
index 2217f30298..20ecd52069 100644
--- a/web/packages/accounts/pages/verify.tsx
+++ b/web/packages/accounts/pages/verify.tsx
@@ -229,7 +229,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
                 />
 
                 <FormPaperFooter>
-                    <Stack gap={4} sx={{ width: "100%", textAlign: "start" }}>
+                    <Stack gap={1} sx={{ width: "100%", textAlign: "start" }}>
                         <Stack direction="row" justifyContent="space-between">
                             {resend === 0 && (
                                 <LinkButton onClick={resendEmail}>
diff --git a/web/packages/shared/components/LoginComponents.tsx b/web/packages/shared/components/LoginComponents.tsx
index b3e5880593..024ac894b4 100644
--- a/web/packages/shared/components/LoginComponents.tsx
+++ b/web/packages/shared/components/LoginComponents.tsx
@@ -1,6 +1,5 @@
-import { isDevBuild } from "@/next/env";
 import log from "@/next/log";
-import { apiOrigin } from "@/next/origins";
+import { customAPIHost } from "@/next/origins";
 import type { BaseAppContextT } from "@/next/types/app";
 import {
     checkPasskeyVerificationStatus,
@@ -8,7 +7,7 @@ import {
     saveCredentialsAndNavigateTo,
 } from "@ente/accounts/services/passkey";
 import EnteButton from "@ente/shared/components/EnteButton";
-import { CircularProgress, Typography, styled } from "@mui/material";
+import { CircularProgress, Stack, Typography, styled } from "@mui/material";
 import { t } from "i18next";
 import { useRouter } from "next/router";
 import React, { useState } from "react";
@@ -46,22 +45,26 @@ const Header_ = styled("div")`
     gap: 8px;
 `;
 
-export const ConnectionDetails: React.FC = () => {
-    const host = new URL(apiOrigin()).host;
+export const LoginFlowFormFooter: React.FC<React.PropsWithChildren> = ({
+    children,
+}) => {
+    const host = customAPIHost();
 
     return (
-        <ConnectionDetails_>
-            <Typography variant="small" color="text.faint">
-                {host}
-            </Typography>
-        </ConnectionDetails_>
+        <FormPaperFooter>
+            <Stack gap={"16px"} sx={{ width: "100%", textAlign: "start" }}>
+                {children}
+
+                {host && (
+                    <Typography variant="small" color="text.faint">
+                        {host}
+                    </Typography>
+                )}
+            </Stack>
+        </FormPaperFooter>
     );
 };
 
-const ConnectionDetails_ = styled("div")`
-    margin-block-start: 1rem;
-`;
-
 interface VerifyingPasskeyProps {
     /** ID of the current passkey verification session. */
     passkeySessionID: string;
@@ -161,16 +164,16 @@ export const VerifyingPasskey: React.FC<VerifyingPasskeyProps> = ({
                     </ButtonStack>
                 </VerifyingPasskeyMiddle>
 
-                <FormPaperFooter style={{ justifyContent: "space-between" }}>
-                    <LinkButton onClick={handleRecover}>
-                        {t("RECOVER_ACCOUNT")}
-                    </LinkButton>
-                    <LinkButton onClick={logout}>
-                        {t("CHANGE_EMAIL")}
-                    </LinkButton>
-                </FormPaperFooter>
-
-                {isDevBuild && <ConnectionDetails />}
+                <LoginFlowFormFooter>
+                    <Stack direction="row" justifyContent="space-between">
+                        <LinkButton onClick={handleRecover}>
+                            {t("RECOVER_ACCOUNT")}
+                        </LinkButton>
+                        <LinkButton onClick={logout}>
+                            {t("CHANGE_EMAIL")}
+                        </LinkButton>
+                    </Stack>
+                </LoginFlowFormFooter>
             </FormPaper>
         </VerticallyCentered>
     );