diff --git a/portal/src/BlockerDialog.tsx b/portal/src/BlockerDialog.tsx
index e1b95c534ca..76da39ac8f9 100644
--- a/portal/src/BlockerDialog.tsx
+++ b/portal/src/BlockerDialog.tsx
@@ -1,23 +1,14 @@
-import React, { useContext, useMemo } from "react";
-import {
-  IDialogContentProps,
-  Dialog,
-  DialogType,
-  DialogFooter,
-  IDialogProps,
-  IButtonProps,
-} from "@fluentui/react";
-import PrimaryButton from "./PrimaryButton";
-import DefaultButton from "./DefaultButton";
-import { Context, FormattedMessage } from "./intl";
-import { useSystemConfig } from "./context/SystemConfigContext";
+import React from "react";
+import { FormattedMessage } from "./intl";
+import { ConfirmationDialog } from "./components/v2/ConfirmationDialog/ConfirmationDialog";
 
-export interface BlockerDialogProps extends IDialogProps {
+export interface BlockerDialogProps {
+  open: boolean;
   contentTitleId: string;
   contentSubTextId: string;
   contentConfirmId?: string;
   contentCancelId?: string;
-  onDialogConfirm?: IButtonProps["onClick"];
+  onDialogConfirm?: () => void;
   onDialogDismiss?: () => void;
 }
 
@@ -25,45 +16,31 @@ const BlockerDialog: React.VFC<BlockerDialogProps> = function BlockerDialog(
   props
 ) {
   const {
+    open,
     contentTitleId,
     contentSubTextId,
     contentConfirmId,
     contentCancelId,
     onDialogConfirm,
     onDialogDismiss,
-    ...rest
   } = props;
 
-  const { themes } = useSystemConfig();
-  const { renderToString } = useContext(Context);
-
-  const dialogContentProps: IDialogContentProps = useMemo(
-    () => ({
-      type: DialogType.normal,
-      title: <FormattedMessage id={contentTitleId} />,
-      subText: renderToString(contentSubTextId),
-    }),
-    [renderToString, contentTitleId, contentSubTextId]
-  );
-
   return (
-    <Dialog
-      dialogContentProps={dialogContentProps}
-      onDismiss={onDialogDismiss}
-      {...rest}
-    >
-      <DialogFooter>
-        <PrimaryButton
-          onClick={onDialogConfirm}
-          theme={themes.destructive}
-          text={<FormattedMessage id={contentConfirmId ?? "confirm"} />}
-        />
-        <DefaultButton
-          onClick={onDialogDismiss}
-          text={<FormattedMessage id={contentCancelId ?? "cancel"} />}
-        />
-      </DialogFooter>
-    </Dialog>
+    <ConfirmationDialog
+      open={open}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) {
+          onDialogDismiss?.();
+        }
+      }}
+      title={<FormattedMessage id={contentTitleId} />}
+      description={<FormattedMessage id={contentSubTextId} />}
+      confirmText={<FormattedMessage id={contentConfirmId ?? "confirm"} />}
+      cancelText={<FormattedMessage id={contentCancelId ?? "cancel"} />}
+      confirmColor="red"
+      onConfirm={() => onDialogConfirm?.()}
+      onCancel={() => onDialogDismiss?.()}
+    />
   );
 };
 
diff --git a/portal/src/FormContainer.tsx b/portal/src/FormContainer.tsx
index cf0848317d1..c6d6f4574be 100644
--- a/portal/src/FormContainer.tsx
+++ b/portal/src/FormContainer.tsx
@@ -1,10 +1,9 @@
-import React, { useCallback, useContext, useMemo, useState } from "react";
-import { Dialog, DialogFooter, Spinner, SpinnerSize } from "@fluentui/react";
+import React, { useCallback, useContext, useState } from "react";
+import { Spinner, SpinnerSize } from "@fluentui/react";
 import { Context, FormattedMessage } from "./intl";
 import { useSystemConfig } from "./context/SystemConfigContext";
 import { FormErrorMessageBar } from "./FormErrorMessageBar";
 import PrimaryButton from "./PrimaryButton";
-import DefaultButton from "./DefaultButton";
 import DefaultLayout from "./DefaultLayout";
 import {
   FormContainerBase,
@@ -13,6 +12,7 @@ import {
 } from "./FormContainerBase";
 import ActionButton from "./ActionButton";
 import styles from "./FormContainer.module.css";
+import { ConfirmationDialog } from "./components/v2/ConfirmationDialog/ConfirmationDialog";
 
 export interface SaveButtonProps {
   labelId: string;
@@ -60,13 +60,6 @@ const FormContainer_: React.VFC<FormContainerProps> = function FormContainer_(
     setTimeout(() => setIsResetDialogVisible(false), 0);
   }, [onReset]);
 
-  const resetDialogContentProps = useMemo(() => {
-    return {
-      title: <FormattedMessage id="FormContainer.reset-dialog.title" />,
-      subText: renderToString("FormContainer.reset-dialog.message"),
-    };
-  }, [renderToString]);
-
   return (
     <>
       <DefaultLayout
@@ -93,23 +86,25 @@ const FormContainer_: React.VFC<FormContainerProps> = function FormContainer_(
           {props.children}
         </form>
       </DefaultLayout>
-      <Dialog
-        hidden={!isResetDialogVisible}
-        dialogContentProps={resetDialogContentProps}
-        onDismiss={onDismissResetDialog}
-      >
-        <DialogFooter>
-          <PrimaryButton
-            onClick={doReset}
-            theme={themes.destructive}
-            text={<FormattedMessage id="FormContainer.reset-dialog.confirm" />}
-          />
-          <DefaultButton
-            onClick={onDismissResetDialog}
-            text={<FormattedMessage id="cancel" />}
-          />
-        </DialogFooter>
-      </Dialog>
+      <ConfirmationDialog
+        open={isResetDialogVisible}
+        onOpenChange={(open) => {
+          if (!open) {
+            onDismissResetDialog();
+          }
+        }}
+        title={<FormattedMessage id="FormContainer.reset-dialog.title" />}
+        description={
+          <FormattedMessage id="FormContainer.reset-dialog.message" />
+        }
+        confirmText={
+          <FormattedMessage id="FormContainer.reset-dialog.confirm" />
+        }
+        cancelText={<FormattedMessage id="cancel" />}
+        confirmColor="red"
+        onConfirm={doReset}
+        onCancel={onDismissResetDialog}
+      />
     </>
   );
 };
diff --git a/portal/src/NavigationBlockerDialog.tsx b/portal/src/NavigationBlockerDialog.tsx
index 58433b8d214..6f141082bad 100644
--- a/portal/src/NavigationBlockerDialog.tsx
+++ b/portal/src/NavigationBlockerDialog.tsx
@@ -64,7 +64,7 @@ const NavigationBlockerDialog: React.VFC<NavigationBlockerDialogProps> =
 
     return (
       <BlockerDialog
-        hidden={!navigationBlockerDialog.visible}
+        open={navigationBlockerDialog.visible}
         contentTitleId="NavigationBlockerDialog.title"
         contentSubTextId="NavigationBlockerDialog.content"
         contentConfirmId="NavigationBlockerDialog.confirm"
diff --git a/portal/src/components/saml/EditSAMLCertificateForm.module.css b/portal/src/components/saml/EditSAMLCertificateForm.module.css
index 8cbfc80e6ff..74dc7da0b33 100644
--- a/portal/src/components/saml/EditSAMLCertificateForm.module.css
+++ b/portal/src/components/saml/EditSAMLCertificateForm.module.css
@@ -1,3 +1,121 @@
-.addButtonIcon {
-  margin: 0 10px 0 0;
+.keysTableWrapper {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (min-width: 1081px) {
+  .keysTableWrapper {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .keysTableWrapper::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.keysTable {
+  min-width: 100%;
+}
+
+.keysTableHeader {
+  @apply flex w-full items-center;
+  min-width: 100%;
+  min-height: 2.75rem;
+}
+
+.keysTableHeaderCellFingerprint,
+.keysTableHeaderCellStatus,
+.keysTableHeaderCellActions {
+  @apply flex items-center px-3 py-3 text-sm font-semibold;
+  color: var(--gray-12);
+}
+
+.keysTableHeaderCellFingerprint {
+  @apply flex-1 min-w-0;
+}
+
+.keysTableHeaderCellStatus {
+  width: 6.5rem;
+  min-width: 6.5rem;
+  flex-shrink: 0;
+}
+
+.keysTableHeaderCellActions {
+  width: 3.5rem;
+  flex-shrink: 0;
+  @apply justify-end;
+}
+
+.keysTableRow {
+  @apply flex w-full items-center;
+  min-width: 100%;
+  min-height: 2.75rem;
+  border-top: 1px solid var(--gray-a6);
+  background-color: var(--gray-a2);
+}
+
+.keysTableCellFingerprint,
+.keysTableCellStatus,
+.keysTableCellActions {
+  @apply flex items-center px-3 py-3 text-sm;
+  color: var(--gray-12);
+}
+
+.keysTableCellFingerprint {
+  @apply flex min-w-0 flex-1 items-center overflow-hidden;
+}
+
+.keysTableCellFingerprintText {
+  @apply min-w-0 truncate;
+}
+
+.keysTableCellStatus {
+  width: 6.5rem;
+  min-width: 6.5rem;
+  flex-shrink: 0;
+}
+
+.keysTableCellActions {
+  width: 3.5rem;
+  flex-shrink: 0;
+  @apply justify-end;
+}
+
+.activeStatus {
+  position: relative;
+  width: fit-content;
+}
+
+.activeStatusText {
+  color: var(--green-11);
+}
+
+.activeStatusSpinner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.activateButton {
+  @apply inline-flex cursor-pointer items-center border-0 bg-transparent p-0 text-sm font-semibold whitespace-nowrap;
+  color: var(--accent-9);
+}
+
+.activateButton:disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+.generateKeyButton {
+  @apply inline-flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-sm font-semibold;
+  color: var(--accent-9);
+}
+
+.generateKeyButton:disabled {
+  @apply cursor-not-allowed opacity-50;
 }
diff --git a/portal/src/components/saml/EditSAMLCertificateForm.tsx b/portal/src/components/saml/EditSAMLCertificateForm.tsx
index 4d49cec1e4a..3a1a8066a29 100644
--- a/portal/src/components/saml/EditSAMLCertificateForm.tsx
+++ b/portal/src/components/saml/EditSAMLCertificateForm.tsx
@@ -1,37 +1,26 @@
-import React, {
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useState } from "react";
+import cn from "classnames";
+import {
+  DotsVerticalIcon,
+  DownloadIcon,
+  PlusIcon,
+  TrashIcon,
+} from "@radix-ui/react-icons";
+import {
+  DropdownMenu,
+  IconButton as RadixIconButton,
+  Spinner,
+  Text,
+} from "@radix-ui/themes";
 import { AppSecretConfigFormModel } from "../../hook/useAppSecretConfigForm";
 import { SAMLIdpSigningCertificate } from "../../types";
 import { FormState } from "../../hook/useSAMLCertificateForm";
-import WidgetTitle from "../../WidgetTitle";
-import { FormattedMessage, Context as MessageContext } from "../../intl";
+import { FormattedMessage } from "../../intl";
 import { useFormContainerBaseContext } from "../../FormContainerBase";
-import {
-  DetailsList,
-  IColumn,
-  SelectionMode,
-  Text,
-  ILinkStyles,
-  Dialog,
-  IDialogContentProps,
-  DialogFooter,
-  Spinner,
-  SpinnerSize,
-} from "@fluentui/react";
-import cn from "classnames";
-import LinkButton from "../../LinkButton";
 import { downloadStringAsFile } from "../../util/download";
-import { useSystemConfig } from "../../context/SystemConfigContext";
-import styles from "./EditSAMLCertificateForm.module.css";
-import ActionButton from "../../ActionButton";
-import ButtonWithLoading from "../../ButtonWithLoading";
-import DefaultButton from "../../DefaultButton";
 import { formatCertificateFilename } from "../../model/saml";
+import styles from "./EditSAMLCertificateForm.module.css";
+import { ConfirmationDialog } from "../v2/ConfirmationDialog/ConfirmationDialog";
 
 interface EditSAMLCertificateFormProps {
   configAppID: string;
@@ -40,7 +29,102 @@ interface EditSAMLCertificateFormProps {
   onGenerateNewCertitificate: () => Promise<void>;
 }
 
-const actionLinkButtonStyle: ILinkStyles = { root: { fontSize: 14 } };
+interface SAMLCertificatesTableProps {
+  certificates: SAMLIdpSigningCertificate[];
+  activeKeyID: string | undefined;
+  activatingKeyID: string | null;
+  formDisabled: boolean;
+  onDownload: (cert: SAMLIdpSigningCertificate) => void;
+  onRemove: (cert: SAMLIdpSigningCertificate) => void;
+  onActivate: (cert: SAMLIdpSigningCertificate) => void;
+}
+
+function SAMLCertificatesTable({
+  certificates,
+  activeKeyID,
+  activatingKeyID,
+  formDisabled,
+  onDownload,
+  onRemove,
+  onActivate,
+}: SAMLCertificatesTableProps): React.ReactElement {
+  return (
+    <div className={styles.keysTableWrapper}>
+      <div className={styles.keysTable}>
+        <div className={styles.keysTableHeader}>
+          <div className={styles.keysTableHeaderCellFingerprint}>
+            <FormattedMessage id="EditSAMLCertificateForm.certificates.column.fingerprint" />
+          </div>
+          <div className={styles.keysTableHeaderCellStatus}>
+            <FormattedMessage id="EditSAMLCertificateForm.certificates.column.status" />
+          </div>
+          <div
+            className={styles.keysTableHeaderCellActions}
+            aria-hidden={true}
+          />
+        </div>
+        {certificates.map((cert) => {
+          const isActive = activeKeyID === cert.keyID;
+          const isActivating = activatingKeyID === cert.keyID;
+          return (
+            <div key={cert.keyID} className={styles.keysTableRow}>
+              <div className={styles.keysTableCellFingerprint}>
+                <Text size="2" className={styles.keysTableCellFingerprintText}>
+                  {cert.certificateFingerprint}
+                </Text>
+              </div>
+              <div className={styles.keysTableCellStatus}>
+                {isActive || isActivating ? (
+                  <CertificateActiveStatus isLoading={isActivating} />
+                ) : (
+                  <button
+                    type="button"
+                    className={styles.activateButton}
+                    disabled={formDisabled}
+                    onClick={() => onActivate(cert)}
+                  >
+                    <FormattedMessage id="EditSAMLCertificateForm.certificates.column.status.activate" />
+                  </button>
+                )}
+              </div>
+              <div className={styles.keysTableCellActions}>
+                <DropdownMenu.Root>
+                  <DropdownMenu.Trigger>
+                    <RadixIconButton variant="soft" color="gray" size="2">
+                      <DotsVerticalIcon width="1rem" height="1rem" />
+                    </RadixIconButton>
+                  </DropdownMenu.Trigger>
+                  <DropdownMenu.Content align="end">
+                    <DropdownMenu.Item
+                      onSelect={() => {
+                        onDownload(cert);
+                      }}
+                    >
+                      <DownloadIcon />
+                      <FormattedMessage id="download" />
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item
+                      color="red"
+                      disabled={isActive || formDisabled}
+                      onSelect={() => {
+                        if (!isActive) {
+                          onRemove(cert);
+                        }
+                      }}
+                    >
+                      <TrashIcon />
+                      <FormattedMessage id="EditSAMLCertificateForm.certificates.remove" />
+                    </DropdownMenu.Item>
+                  </DropdownMenu.Content>
+                </DropdownMenu.Root>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
 
 export function EditSAMLCertificateForm({
   configAppID,
@@ -48,162 +132,62 @@ export function EditSAMLCertificateForm({
   certificates,
   onGenerateNewCertitificate,
 }: EditSAMLCertificateFormProps): React.ReactElement {
-  const submitElRef = useRef<HTMLButtonElement | null>(null);
   const { onSubmit } = useFormContainerBaseContext();
-  const { renderToString } = useContext(MessageContext);
-  const { themes } = useSystemConfig();
 
-  const [isLoading, setIsLoading] = useState(false);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [activatingKeyID, setActivatingKeyID] = useState<string | null>(null);
 
   const generateNewCert = useCallback(async () => {
-    setIsLoading(true);
+    setIsGenerating(true);
     try {
       await onGenerateNewCertitificate();
     } finally {
-      setIsLoading(false);
+      setIsGenerating(false);
     }
   }, [onGenerateNewCertitificate]);
 
-  const onClickDownloadCert = useMemo(() => {
-    const callbacks: Record<string, () => void> = {};
-    for (const cert of certificates) {
-      callbacks[cert.keyID] = () => {
-        downloadStringAsFile({
-          content: cert.certificatePEM,
-          mimeType: "application/x-pem-file",
-          filename: formatCertificateFilename(
-            configAppID,
-            cert.certificateFingerprint
-          ),
-        });
-      };
-    }
-    return callbacks;
-  }, [configAppID, certificates]);
+  const onClickDownloadCert = useCallback(
+    (cert: SAMLIdpSigningCertificate) => {
+      downloadStringAsFile({
+        content: cert.certificatePEM,
+        mimeType: "application/x-pem-file",
+        filename: formatCertificateFilename(
+          configAppID,
+          cert.certificateFingerprint
+        ),
+      });
+    },
+    [configAppID]
+  );
 
-  const onRemoveCert = useMemo(() => {
-    const callbacks: Record<string, () => void> = {};
-    for (const cert of certificates) {
-      callbacks[cert.keyID] = () => {
-        form.setState((prevState) => {
-          return {
-            ...prevState,
-            removingCertificateKeyID: cert.keyID,
-          };
-        });
-      };
-    }
-    return callbacks;
-  }, [certificates, form]);
+  const onRemoveCert = useCallback(
+    (cert: SAMLIdpSigningCertificate) => {
+      form.setState((prevState) => ({
+        ...prevState,
+        removingCertificateKeyID: cert.keyID,
+      }));
+    },
+    [form]
+  );
 
-  const onChangeActiveKey = useMemo(() => {
-    const callbacks: Record<string, () => Promise<void>> = {};
-    for (const cert of certificates) {
-      callbacks[cert.keyID] = async () => {
-        form.setState((prevState) => ({
-          ...prevState,
+  const onChangeActiveKey = useCallback(
+    async (cert: SAMLIdpSigningCertificate) => {
+      if (form.isUpdating || activatingKeyID != null) {
+        return;
+      }
+      setActivatingKeyID(cert.keyID);
+      try {
+        await form.saveWithState({
+          ...form.state,
           isUpdatingActiveKeyID: true,
           activeKeyID: cert.keyID,
-        }));
-        // Submit the form after the state is updated and all rerendering completed, i.e. next tick.
-        setTimeout(() => {
-          submitElRef.current?.click();
-        }, 0);
-      };
-    }
-    return callbacks;
-  }, [certificates, form]);
-
-  const columns: IColumn[] = useMemo(() => {
-    const renderFingerprint = (
-      item?: SAMLIdpSigningCertificate,
-      _index?: number,
-      _column?: IColumn
-    ) => {
-      if (!item) {
-        return null;
-      }
-      return (
-        <div className="grid grid-cols-1 gap-y-2">
-          <Text className={"text-neutral-secondary"} block={true}>
-            {item.certificateFingerprint}
-          </Text>
-          <div className="grid grid-rows-1 grid-flow-col gap-x-4 justify-start">
-            <LinkButton
-              styles={actionLinkButtonStyle}
-              onClick={onClickDownloadCert[item.keyID]}
-            >
-              <FormattedMessage id="EditSAMLCertificateForm.certificates.download" />
-            </LinkButton>
-            {form.state.activeKeyID !== item.keyID ? (
-              <LinkButton
-                styles={actionLinkButtonStyle}
-                onClick={onRemoveCert[item.keyID]}
-                theme={themes.destructive}
-                disabled={form.isLoading || form.isUpdating}
-              >
-                <FormattedMessage id="EditSAMLCertificateForm.certificates.remove" />
-              </LinkButton>
-            ) : null}
-          </div>
-        </div>
-      );
-    };
-    const renderStatus = (
-      item?: SAMLIdpSigningCertificate,
-      _index?: number,
-      _column?: IColumn
-    ) => {
-      if (!item) {
-        return null;
-      }
-      if (form.state.activeKeyID === item.keyID) {
-        return (
-          <CertificateActiveStatus
-            isLoading={form.state.isUpdatingActiveKeyID}
-          />
-        );
+        });
+      } finally {
+        setActivatingKeyID(null);
       }
-      return (
-        <LinkButton
-          styles={actionLinkButtonStyle}
-          onClick={onChangeActiveKey[item.keyID]}
-          disabled={form.isLoading || form.isUpdating}
-        >
-          <FormattedMessage id="EditSAMLCertificateForm.certificates.column.status.activate" />
-        </LinkButton>
-      );
-    };
-    return [
-      {
-        key: "certificateFingerprint",
-        fieldName: "certificateFingerprint",
-        name: renderToString(
-          "EditSAMLCertificateForm.certificates.column.fingerprint"
-        ),
-        minWidth: 150,
-        onRender: renderFingerprint,
-      },
-      {
-        key: "status",
-        name: renderToString(
-          "EditSAMLCertificateForm.certificates.column.status"
-        ),
-        minWidth: 150,
-        onRender: renderStatus,
-      },
-    ];
-  }, [
-    renderToString,
-    onClickDownloadCert,
-    form.state.activeKeyID,
-    form.state.isUpdatingActiveKeyID,
-    form.isLoading,
-    form.isUpdating,
-    onRemoveCert,
-    themes.destructive,
-    onChangeActiveKey,
-  ]);
+    },
+    [activatingKeyID, form]
+  );
 
   const dismissRemoveCertificateDialog = useCallback(() => {
     form.setState((state) => ({
@@ -224,97 +208,80 @@ export function EditSAMLCertificateForm({
     );
   }, [form, dismissRemoveCertificateDialog]);
 
-  const removeCertDialogContentProps: IDialogContentProps = useMemo(() => {
-    return {
-      title: renderToString(
-        "EditSAMLCertificateForm.removeCertificateDialog.title"
-      ),
-      subText: renderToString(
-        "EditSAMLCertificateForm.removeCertificateDialog.description"
-      ),
-    };
-  }, [renderToString]);
-
-  const isRemoveCertificateDialogVisible =
+  const isRemoveCertificateDialogOpen =
     form.state.removingCertificateKeyID != null;
 
+  const formDisabled =
+    form.isLoading || form.isUpdating || activatingKeyID != null;
+
   return (
     <form onSubmit={onSubmit}>
-      <button className="hidden" type="submit" ref={submitElRef} />
-      <WidgetTitle>
-        <FormattedMessage id="EditSAMLCertificateForm.certificates.title" />
-      </WidgetTitle>
-
-      <div className="grid grid-cols-1 gap-y-12">
-        <div>
-          <DetailsList
-            items={certificates}
-            columns={columns}
-            selectionMode={SelectionMode.none}
-          />
-          <ActionButton
-            className="mt-4"
-            theme={themes.actionButton}
-            iconProps={{
-              iconName: "CirclePlus",
-              className: styles.addButtonIcon,
-            }}
-            onClick={generateNewCert}
-            text={
-              <FormattedMessage
-                id={"EditSAMLCertificateForm.certificates.generate"}
-              />
-            }
-            disabled={certificates.length >= 2 || isLoading}
-          />
-        </div>
-      </div>
+      <SAMLCertificatesTable
+        certificates={certificates}
+        activeKeyID={form.state.activeKeyID}
+        activatingKeyID={activatingKeyID}
+        formDisabled={formDisabled}
+        onDownload={onClickDownloadCert}
+        onRemove={onRemoveCert}
+        onActivate={onChangeActiveKey}
+      />
 
-      <Dialog
-        hidden={!isRemoveCertificateDialogVisible}
-        dialogContentProps={removeCertDialogContentProps}
-        modalProps={{ isBlocking: form.isUpdating }}
-        onDismiss={dismissRemoveCertificateDialog}
+      <button
+        type="button"
+        className={cn(styles.generateKeyButton, "mt-4")}
+        onClick={generateNewCert}
+        disabled={certificates.length >= 2 || isGenerating || formDisabled}
       >
-        <DialogFooter>
-          <ButtonWithLoading
-            theme={themes.actionButton}
-            loading={form.isUpdating}
-            onClick={onConfirmRemoveCertificate}
-            disabled={!isRemoveCertificateDialogVisible}
-            labelId="confirm"
-          />
-          <DefaultButton
-            onClick={dismissRemoveCertificateDialog}
-            disabled={form.isUpdating || !isRemoveCertificateDialogVisible}
-            text={<FormattedMessage id="cancel" />}
-          />
-        </DialogFooter>
-      </Dialog>
+        <PlusIcon width="1rem" height="1rem" />
+        <FormattedMessage id="EditSAMLCertificateForm.certificates.generate" />
+        {isGenerating ? (
+          <Spinner size="1" className="ml-1" />
+        ) : null}
+      </button>
+
+      <ConfirmationDialog
+        open={isRemoveCertificateDialogOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            dismissRemoveCertificateDialog();
+          }
+        }}
+        title={
+          <FormattedMessage id="EditSAMLCertificateForm.removeCertificateDialog.title" />
+        }
+        description={
+          <FormattedMessage id="EditSAMLCertificateForm.removeCertificateDialog.description" />
+        }
+        confirmText={<FormattedMessage id="confirm" />}
+        cancelText={<FormattedMessage id="cancel" />}
+        loading={form.isUpdating}
+        confirmColor="red"
+        onConfirm={onConfirmRemoveCertificate}
+        onCancel={dismissRemoveCertificateDialog}
+      />
     </form>
   );
 }
+
 function CertificateActiveStatus({ isLoading }: { isLoading: boolean }) {
   return (
-    <div className="w-fit relative text-status-green">
+    <div className={styles.activeStatus}>
       <Text
-        styles={{
-          root: {
-            color: "inherit",
-            visibility: isLoading ? "hidden" : undefined,
-          },
-        }}
-      >
-        <FormattedMessage id="EditSAMLCertificateForm.certificates.column.status.active" />
-      </Text>
-      <div
+        as="p"
+        size="2"
+        weight="medium"
         className={cn(
-          "absolute top-0 left-0 bottom-0 right-0",
-          isLoading ? null : "hidden"
+          styles.activeStatusText,
+          isLoading ? "invisible" : undefined
         )}
       >
-        <Spinner size={SpinnerSize.xSmall} ariaLive="assertive" />
-      </div>
+        <FormattedMessage id="EditSAMLCertificateForm.certificates.column.status.active" />
+      </Text>
+      {isLoading ? (
+        <div className={styles.activeStatusSpinner}>
+          <Spinner size="1" />
+        </div>
+      ) : null}
     </div>
   );
 }
diff --git a/portal/src/components/v2/Button/SecondaryButton/SecondaryButton.module.css b/portal/src/components/v2/Button/SecondaryButton/SecondaryButton.module.css
index ccd84d48ac4..25a59dd31f8 100644
--- a/portal/src/components/v2/Button/SecondaryButton/SecondaryButton.module.css
+++ b/portal/src/components/v2/Button/SecondaryButton/SecondaryButton.module.css
@@ -1,3 +1,11 @@
 .secondaryButton {
   font-weight: var(--font-weight-medium);
 }
+
+.secondaryButton:where([data-disabled]) {
+  background-color: var(--gray-a3);
+  color: var(--gray-a8);
+  box-shadow: none;
+  opacity: 1;
+  cursor: not-allowed;
+}
diff --git a/portal/src/components/v2/Button/SecondaryButton/SecondaryButton.stories.ts b/portal/src/components/v2/Button/SecondaryButton/SecondaryButton.stories.ts
index 579255a949b..a4c214f6cd3 100644
--- a/portal/src/components/v2/Button/SecondaryButton/SecondaryButton.stories.ts
+++ b/portal/src/components/v2/Button/SecondaryButton/SecondaryButton.stories.ts
@@ -26,3 +26,10 @@ export const Default: Story = {
     disabled: false,
   },
 };
+
+export const Disabled: Story = {
+  args: {
+    size: "2",
+    disabled: true,
+  },
+};
diff --git a/portal/src/components/v2/Callout/Callout.module.css b/portal/src/components/v2/Callout/Callout.module.css
index c3fac0469d8..230e1f509d7 100644
--- a/portal/src/components/v2/Callout/Callout.module.css
+++ b/portal/src/components/v2/Callout/Callout.module.css
@@ -7,6 +7,10 @@
   grid-template-columns: auto 1fr auto;
 
   align-items: center;
+
+  /* Prevent the grid from overflowing its flex parent on small screens */
+  min-width: 0;
+  overflow: hidden;
 }
 
 .calloutRoot--toast {
@@ -19,6 +23,8 @@
 
 .calloutText {
   grid-area: text;
+  min-width: 0;
+  word-break: break-word;
 }
 
 .calloutAction {
diff --git a/portal/src/components/v2/ConfirmationDialog/ConfirmationDialog.module.css b/portal/src/components/v2/ConfirmationDialog/ConfirmationDialog.module.css
new file mode 100644
index 00000000000..b150d8c13cb
--- /dev/null
+++ b/portal/src/components/v2/ConfirmationDialog/ConfirmationDialog.module.css
@@ -0,0 +1,5 @@
+.actions {
+  @apply flex flex-row flex-wrap justify-end;
+  gap: var(--space-3);
+  margin-top: var(--space-4);
+}
diff --git a/portal/src/components/v2/ConfirmationDialog/ConfirmationDialog.stories.tsx b/portal/src/components/v2/ConfirmationDialog/ConfirmationDialog.stories.tsx
new file mode 100644
index 00000000000..d84c1d902bc
--- /dev/null
+++ b/portal/src/components/v2/ConfirmationDialog/ConfirmationDialog.stories.tsx
@@ -0,0 +1,82 @@
+import React, { useCallback, useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { FormattedMessage } from "../../../intl";
+import { SecondaryButton } from "../Button/SecondaryButton/SecondaryButton";
+import { ConfirmationDialog } from "./ConfirmationDialog";
+
+function ConfirmationDialogDemo({
+  loading = false,
+  confirmColor = "red",
+}: {
+  loading?: boolean;
+  confirmColor?: "red" | "indigo";
+}): React.ReactElement {
+  const [open, setOpen] = useState(false);
+
+  const onOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!loading) {
+        setOpen(nextOpen);
+      }
+    },
+    [loading]
+  );
+
+  const onCancel = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const onConfirm = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <>
+      <SecondaryButton
+        size="2"
+        text="Open Dialog"
+        onClick={() => setOpen(true)}
+      />
+      <ConfirmationDialog
+        open={open}
+        onOpenChange={onOpenChange}
+        title={
+          <FormattedMessage id="AdminAPIConfigurationScreen.keys.delete-dialog.title" />
+        }
+        description={
+          <FormattedMessage id="AdminAPIConfigurationScreen.keys.delete-dialog.message" />
+        }
+        confirmText={
+          <FormattedMessage id="AdminAPIConfigurationScreen.keys.delete-dialog.confirm" />
+        }
+        cancelText={<FormattedMessage id="cancel" />}
+        onConfirm={onConfirm}
+        onCancel={onCancel}
+        loading={loading}
+        confirmColor={confirmColor}
+      />
+    </>
+  );
+}
+
+const meta = {
+  component: ConfirmationDialogDemo,
+  tags: ["autodocs"],
+  args: {
+    loading: false,
+    confirmColor: "red",
+  },
+} satisfies Meta<typeof ConfirmationDialogDemo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DeleteAdminAPIKey: Story = {
+  name: "Delete Admin API key",
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
+};
diff --git a/portal/src/components/v2/ConfirmationDialog/ConfirmationDialog.tsx b/portal/src/components/v2/ConfirmationDialog/ConfirmationDialog.tsx
new file mode 100644
index 00000000000..4138f0822a8
--- /dev/null
+++ b/portal/src/components/v2/ConfirmationDialog/ConfirmationDialog.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import { Button, Dialog } from "@radix-ui/themes";
+import { SecondaryButton } from "../Button/SecondaryButton/SecondaryButton";
+import styles from "./ConfirmationDialog.module.css";
+
+export interface ConfirmationDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: React.ReactNode;
+  description: React.ReactNode;
+  confirmText: React.ReactNode;
+  cancelText: React.ReactNode;
+  onConfirm: () => void;
+  onCancel: () => void;
+  loading?: boolean;
+  confirmColor?: "red" | "indigo";
+  maxWidth?: string;
+}
+
+export function ConfirmationDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmText,
+  cancelText,
+  onConfirm,
+  onCancel,
+  loading = false,
+  confirmColor = "red",
+  maxWidth = "400px",
+}: ConfirmationDialogProps): React.ReactElement {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Content maxWidth={maxWidth} size="3">
+        <Dialog.Title>{title}</Dialog.Title>
+        <Dialog.Description size="2">{description}</Dialog.Description>
+        <div className={styles.actions}>
+          <Button
+            size="2"
+            variant="solid"
+            color={confirmColor}
+            loading={loading}
+            disabled={loading}
+            onClick={onConfirm}
+          >
+            {confirmText}
+          </Button>
+          <SecondaryButton
+            size="2"
+            disabled={loading}
+            text={cancelText}
+            onClick={onCancel}
+          />
+        </div>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}
diff --git a/portal/src/components/v2/FormField/FormField.tsx b/portal/src/components/v2/FormField/FormField.tsx
index 66587556393..bdab6d152cd 100644
--- a/portal/src/components/v2/FormField/FormField.tsx
+++ b/portal/src/components/v2/FormField/FormField.tsx
@@ -13,6 +13,8 @@ type FormFieldLabelSpace = "1" | "2";
 export interface FormFieldProps {
   darkMode?: boolean;
   size: FormFieldSize;
+  /** Label typography size; defaults to `size` when omitted. */
+  labelSize?: FormFieldSize;
   label?: React.ReactNode;
   optional?: boolean;
   error?: React.ReactNode;
@@ -29,6 +31,7 @@ export interface FormFieldProps {
 export function FormField({
   darkMode,
   size,
+  labelSize,
   label,
   optional,
   error: propsError,
@@ -68,7 +71,7 @@ export function FormField({
       {label ? (
         <Text
           as="p"
-          size={size}
+          size={labelSize ?? size}
           weight={"medium"}
           className={styles.formField__label}
         >
diff --git a/portal/src/components/v2/SaveFunctionBar/SaveFunctionBar.module.css b/portal/src/components/v2/SaveFunctionBar/SaveFunctionBar.module.css
new file mode 100644
index 00000000000..aac6b69281a
--- /dev/null
+++ b/portal/src/components/v2/SaveFunctionBar/SaveFunctionBar.module.css
@@ -0,0 +1,38 @@
+.root {
+  position: fixed;
+  bottom: var(--space-6);
+  z-index: 100;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-2) var(--space-4);
+  border: 1px solid var(--gray-6);
+  border-radius: 12px;
+  background-color: #fff;
+  box-shadow: var(--shadow-5);
+  box-sizing: border-box;
+}
+
+.message {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.messageIcon {
+  flex-shrink: 0;
+  width: var(--space-4);
+  height: var(--space-4);
+  color: var(--gray-a9);
+}
+
+.actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--space-3);
+}
diff --git a/portal/src/components/v2/SaveFunctionBar/SaveFunctionBar.stories.tsx b/portal/src/components/v2/SaveFunctionBar/SaveFunctionBar.stories.tsx
new file mode 100644
index 00000000000..2e6da58ab78
--- /dev/null
+++ b/portal/src/components/v2/SaveFunctionBar/SaveFunctionBar.stories.tsx
@@ -0,0 +1,93 @@
+import React, { useCallback, useRef, useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { createMemoryRouter, RouterProvider } from "react-router-dom";
+import {
+  FormContainerBase,
+  FormContainerBaseProps,
+} from "../../../FormContainerBase";
+import { SystemConfigContext } from "../../../context/SystemConfigContext";
+import { defaultSystemConfig, instantiateSystemConfig } from "../../../system-config";
+import { SaveFunctionBar } from "./SaveFunctionBar";
+
+const systemConfig = instantiateSystemConfig(defaultSystemConfig);
+
+function SaveFunctionBarStoryHarness({
+  startClean = false,
+}: {
+  startClean?: boolean;
+}): React.ReactElement {
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const [value, setValue] = useState(startClean ? "hello" : "hello!");
+  const [savedValue, setSavedValue] = useState("hello");
+  const isDirty = value !== savedValue;
+
+  const reset = useCallback(() => {
+    setValue(savedValue);
+  }, [savedValue]);
+
+  const save = useCallback(async () => {
+    setSavedValue(value);
+  }, [value]);
+
+  const form: FormContainerBaseProps["form"] = {
+    isDirty,
+    isUpdating: false,
+    updateError: null,
+    reset,
+    save,
+  };
+
+  return (
+    <FormContainerBase form={form}>
+      <div style={{ padding: 24, paddingBottom: 120, width: 752 }}>
+        <div ref={anchorRef} aria-hidden style={{ height: 0 }} />
+        <label>
+          Edit to show save bar
+          <input
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            style={{ display: "block", marginTop: 8, width: "100%" }}
+          />
+        </label>
+      </div>
+      <SaveFunctionBar anchorRef={anchorRef} />
+    </FormContainerBase>
+  );
+}
+
+const meta = {
+  component: SaveFunctionBar,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => {
+      const router = createMemoryRouter(
+        [
+          {
+            path: "/",
+            element: (
+              <SystemConfigContext.Provider value={systemConfig}>
+                <div style={{ minHeight: 320, position: "relative" }}>
+                  <Story />
+                </div>
+              </SystemConfigContext.Provider>
+            ),
+          },
+        ],
+        { initialEntries: ["/"] }
+      );
+
+      return <RouterProvider router={router} />;
+    },
+  ],
+} satisfies Meta<typeof SaveFunctionBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <SaveFunctionBarStoryHarness />,
+};
+
+export const HiddenWhenClean: Story = {
+  render: () => <SaveFunctionBarStoryHarness startClean />,
+};
diff --git a/portal/src/components/v2/SaveFunctionBar/SaveFunctionBar.tsx b/portal/src/components/v2/SaveFunctionBar/SaveFunctionBar.tsx
new file mode 100644
index 00000000000..9d9e6b09ea1
--- /dev/null
+++ b/portal/src/components/v2/SaveFunctionBar/SaveFunctionBar.tsx
@@ -0,0 +1,92 @@
+import React, { useCallback, useState } from "react";
+import cn from "classnames";
+import { Text } from "@radix-ui/themes";
+import { InfoCircledIcon } from "@radix-ui/react-icons";
+import { FormattedMessage } from "../../../intl";
+import { useFormContainerBaseContext } from "../../../FormContainerBase";
+import { PrimaryButton } from "../Button/PrimaryButton/PrimaryButton";
+import { SecondaryButton } from "../Button/SecondaryButton/SecondaryButton";
+import { ConfirmationDialog } from "../ConfirmationDialog/ConfirmationDialog";
+import styles from "./SaveFunctionBar.module.css";
+import { useSaveFunctionBarAlignment } from "./useSaveFunctionBarAlignment";
+
+export interface SaveFunctionBarProps {
+  className?: string;
+  anchorRef?: React.RefObject<HTMLElement | null>;
+}
+
+export function SaveFunctionBar({
+  className,
+  anchorRef,
+}: SaveFunctionBarProps): React.ReactElement | null {
+  const { canReset, canSave, isDirty, isUpdating, onReset, onSave } =
+    useFormContainerBaseContext();
+  const alignStyle = useSaveFunctionBarAlignment(anchorRef);
+
+  const [isDiscardDialogOpen, setIsDiscardDialogOpen] = useState(false);
+  const onOpenDiscardDialog = useCallback(() => {
+    setIsDiscardDialogOpen(true);
+  }, []);
+  const onDismissDiscardDialog = useCallback(() => {
+    setIsDiscardDialogOpen(false);
+  }, []);
+  const onConfirmDiscard = useCallback(() => {
+    onReset();
+    setTimeout(() => setIsDiscardDialogOpen(false), 0);
+  }, [onReset]);
+
+  if (!isDirty) {
+    return null;
+  }
+
+  const fixedStyle =
+    anchorRef != null && alignStyle != null ? alignStyle : undefined;
+
+  return (
+    <>
+      <div
+        className={cn(styles.root, className)}
+        style={fixedStyle}
+        role="region"
+        aria-live="polite"
+      >
+        <div className={styles.message}>
+          <InfoCircledIcon className={styles.messageIcon} aria-hidden />
+          <Text as="p" size="2" color="gray">
+            <FormattedMessage id="SaveFunctionBar.message" />
+          </Text>
+        </div>
+        <div className={styles.actions}>
+          <SecondaryButton
+            size="2"
+            disabled={!canReset}
+            text={<FormattedMessage id="SaveFunctionBar.discard" />}
+            onClick={onOpenDiscardDialog}
+          />
+          <PrimaryButton
+            size="2"
+            disabled={!canSave}
+            loading={isUpdating}
+            text={<FormattedMessage id="save" />}
+            onClick={onSave}
+          />
+        </div>
+      </div>
+      <ConfirmationDialog
+        open={isDiscardDialogOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setIsDiscardDialogOpen(false);
+          }
+        }}
+        title={<FormattedMessage id="FormContainer.reset-dialog.title" />}
+        description={<FormattedMessage id="FormContainer.reset-dialog.message" />}
+        confirmText={<FormattedMessage id="FormContainer.reset-dialog.confirm" />}
+        cancelText={<FormattedMessage id="cancel" />}
+        confirmColor="red"
+        onConfirm={onConfirmDiscard}
+        onCancel={onDismissDiscardDialog}
+      />
+    </>
+  );
+}
diff --git a/portal/src/components/v2/SaveFunctionBar/useSaveFunctionBarAlignment.ts b/portal/src/components/v2/SaveFunctionBar/useSaveFunctionBarAlignment.ts
new file mode 100644
index 00000000000..aed75f94747
--- /dev/null
+++ b/portal/src/components/v2/SaveFunctionBar/useSaveFunctionBarAlignment.ts
@@ -0,0 +1,55 @@
+import { useLayoutEffect, useState } from "react";
+
+function findScrollParent(element: HTMLElement | null): HTMLElement | null {
+  let parent = element?.parentElement ?? null;
+  while (parent != null) {
+    const { overflowY } = getComputedStyle(parent);
+    if (overflowY === "auto" || overflowY === "scroll") {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return null;
+}
+
+export function useSaveFunctionBarAlignment(
+  anchorRef: React.RefObject<HTMLElement | null> | undefined
+): React.CSSProperties | undefined {
+  const [style, setStyle] = useState<React.CSSProperties | undefined>(() =>
+    anchorRef != null ? { visibility: "hidden" } : undefined
+  );
+
+  useLayoutEffect(() => {
+    const anchor = anchorRef?.current;
+    if (anchor == null) {
+      setStyle(undefined);
+      return;
+    }
+
+    const update = () => {
+      const rect = anchor.getBoundingClientRect();
+      setStyle({
+        left: rect.left,
+        width: rect.width,
+        visibility: "visible",
+      });
+    };
+
+    update();
+
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(anchor);
+    window.addEventListener("resize", update);
+
+    const scrollParent = findScrollParent(anchor);
+    scrollParent?.addEventListener("scroll", update, { passive: true });
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", update);
+      scrollParent?.removeEventListener("scroll", update);
+    };
+  }, [anchorRef]);
+
+  return style;
+}
diff --git a/portal/src/components/v2/TextField/TextField.module.css b/portal/src/components/v2/TextField/TextField.module.css
index caad22bf244..6ac915cc466 100644
--- a/portal/src/components/v2/TextField/TextField.module.css
+++ b/portal/src/components/v2/TextField/TextField.module.css
@@ -12,3 +12,8 @@
   border-left: 1px solid var(--gray-a6);
   color: var(--gray-a11);
 }
+
+.textField__suffix--plain {
+  background-color: transparent;
+  border-left: none;
+}
diff --git a/portal/src/components/v2/TextField/TextField.tsx b/portal/src/components/v2/TextField/TextField.tsx
index 305778c0093..b43a4e74a5a 100644
--- a/portal/src/components/v2/TextField/TextField.tsx
+++ b/portal/src/components/v2/TextField/TextField.tsx
@@ -25,6 +25,7 @@ export enum TextFieldIcon {
 
 export interface TextInputProps {
   size: TextFieldSize;
+  type?: "text" | "password" | "email" | "number" | "search" | "tel" | "url" | "hidden" | "date" | "time" | "datetime-local" | "month" | "week";
   disabled?: boolean;
   readOnly?: boolean;
   placeholder?: string;
@@ -39,8 +40,12 @@ export interface TextInputProps {
 export interface TextFieldProps extends TextInputProps {
   darkMode?: boolean;
   label?: React.ReactNode;
+  /** Label typography size; defaults to `size` when omitted. */
+  labelSize?: TextFieldSize;
   optional?: boolean;
   suffix?: React.ReactNode;
+  /** Icon-only suffix (e.g. password visibility) without chip background/border. */
+  suffixPlain?: boolean;
   iconStart?: TextFieldIcon;
   iconEnd?: TextFieldIcon;
   hint?: React.ReactNode;
@@ -51,6 +56,7 @@ export interface TextFieldProps extends TextInputProps {
   parentJSONPointer?: string | RegExp;
   fieldName?: string;
   errorRules?: ErrorParseRule[];
+  inputClassName?: string;
 }
 
 function TextField_(props: TextFieldProps): React.ReactElement {
@@ -58,12 +64,14 @@ function TextField_(props: TextFieldProps): React.ReactElement {
     darkMode,
     size,
     label,
+    labelSize,
     optional,
     error,
     hint,
     iconStart,
     iconEnd,
     suffix,
+    suffixPlain,
 
     parentJSONPointer = "",
     fieldName,
@@ -87,6 +95,7 @@ function TextField_(props: TextFieldProps): React.ReactElement {
     <FormField
       darkMode={darkMode}
       size={size}
+      labelSize={labelSize}
       label={label}
       optional={optional}
       error={error}
@@ -108,7 +117,10 @@ function TextField_(props: TextFieldProps): React.ReactElement {
         ) : null}
         {suffix != null ? (
           <RadixTextField.Slot
-            className={styles.textField__suffix}
+            className={cn(
+              styles.textField__suffix,
+              suffixPlain && styles["textField__suffix--plain"]
+            )}
             side="right"
           >
             {suffix}
@@ -125,6 +137,7 @@ function TextField_(props: TextFieldProps): React.ReactElement {
 
 function Input({
   size,
+  type,
   disabled,
   readOnly,
   placeholder,
@@ -133,13 +146,21 @@ function Input({
   onChange,
   onBlur,
   onFocus,
+  inputClassName,
   children,
-}: TextInputProps & { children: React.ReactNode }): React.ReactElement {
+}: TextInputProps & {
+  children: React.ReactNode;
+  inputClassName?: string;
+}): React.ReactElement {
   return (
     <RadixTextField.Root
-      className={cn(error != null ? styles["textField--error"] : null)}
+      className={cn(
+        error != null ? styles["textField--error"] : null,
+        inputClassName
+      )}
       variant="surface"
       size={size}
+      type={type}
       placeholder={placeholder}
       disabled={disabled}
       readOnly={readOnly}
diff --git a/portal/src/components/v2/Toggle/Toggle.stories.tsx b/portal/src/components/v2/Toggle/Toggle.stories.tsx
index 55f1b9f3090..278f4afe291 100644
--- a/portal/src/components/v2/Toggle/Toggle.stories.tsx
+++ b/portal/src/components/v2/Toggle/Toggle.stories.tsx
@@ -15,8 +15,36 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
+export const Checked: Story = {
+  args: {
+    checked: true,
+  },
+};
+
 export const WithText: Story = {
   args: {
-    text: "On",
+    text: "Allow account deletion",
+  },
+};
+
+export const CheckedWithText: Story = {
+  args: {
+    checked: true,
+    text: "Allow account deletion",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    text: "Allow account deletion",
+  },
+};
+
+export const DisabledChecked: Story = {
+  args: {
+    checked: true,
+    disabled: true,
+    text: "Allow account deletion",
   },
 };
diff --git a/portal/src/graphql/portal/AccountAnonymizationConfigurationScreen.module.css b/portal/src/graphql/portal/AccountAnonymizationConfigurationScreen.module.css
index f4320eb8421..9be14de1a14 100644
--- a/portal/src/graphql/portal/AccountAnonymizationConfigurationScreen.module.css
+++ b/portal/src/graphql/portal/AccountAnonymizationConfigurationScreen.module.css
@@ -1,4 +1,28 @@
 .widget {
-  grid-column: 1 / span 8;
+  grid-column: 1 / span 9;
   @apply tablet:col-span-full;
 }
+
+.pageHeader {
+  @apply flex flex-col gap-2;
+}
+
+.pageTitle {
+  margin: 0;
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 600;
+  color: var(--gray-12);
+}
+
+.pageDescription {
+  color: var(--gray-a11);
+}
+
+.contentWithSaveBar {
+  padding-bottom: 5.5rem;
+}
+
+.settingsCardSaveBarClearance {
+  margin-bottom: 5.5rem;
+}
diff --git a/portal/src/graphql/portal/AccountAnonymizationConfigurationScreen.tsx b/portal/src/graphql/portal/AccountAnonymizationConfigurationScreen.tsx
index a7137c95ea0..62dd6677571 100644
--- a/portal/src/graphql/portal/AccountAnonymizationConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/AccountAnonymizationConfigurationScreen.tsx
@@ -1,6 +1,8 @@
-import React, { useCallback, useContext } from "react";
+import React, { useCallback, useRef } from "react";
 import { useParams } from "react-router-dom";
-import { FormattedMessage, Context } from "../../intl";
+import cn from "classnames";
+import { Text } from "@radix-ui/themes";
+import { FormattedMessage } from "../../intl";
 import { produce } from "immer";
 import {
   AppConfigFormModel,
@@ -10,13 +12,12 @@ import ShowLoading from "../../ShowLoading";
 import ShowError from "../../ShowError";
 import FormContainer from "../../FormContainer";
 import ScreenContent from "../../ScreenContent";
-import ScreenTitle from "../../ScreenTitle";
 import { PortalAPIAppConfig } from "../../types";
 import styles from "./AccountAnonymizationConfigurationScreen.module.css";
-import Widget from "../../Widget";
-import WidgetTitle from "../../WidgetTitle";
-import FormTextField from "../../FormTextField";
+import { TextField } from "../../components/v2/TextField/TextField";
+import { SaveFunctionBar } from "../../components/v2/SaveFunctionBar/SaveFunctionBar";
 import { checkIntegerInput } from "../../util/input";
+import { useFormContainerBaseContext } from "../../FormContainerBase";
 
 interface FormState {
   grace_period_days: string;
@@ -56,47 +57,66 @@ const AccountAnonymizationConfigurationContent: React.VFC<AccountAnonymizationCo
     const { form } = props;
     const { state, setState } = form;
     const { grace_period_days } = state;
-
-    const { renderToString } = useContext(Context);
+    const { isDirty } = useFormContainerBaseContext();
+    const contentWidthAnchorRef = useRef<HTMLDivElement>(null);
 
     const onChangeGracePeriod = useCallback(
-      (_e, value?: string) => {
-        if (value != null) {
-          if (checkIntegerInput(value)) {
-            setState((prev) => {
-              return {
-                ...prev,
-                grace_period_days: value,
-              };
-            });
-          }
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        if (checkIntegerInput(value)) {
+          setState((prev) => ({
+            ...prev,
+            grace_period_days: value,
+          }));
         }
       },
       [setState]
     );
 
     return (
-      <ScreenContent>
-        <ScreenTitle className={styles.widget}>
-          <FormattedMessage id="AccountAnonymizationConfigurationScreen.title" />
-        </ScreenTitle>
-        <Widget className={styles.widget}>
-          <WidgetTitle>
+      <ScreenContent className={cn(isDirty ? styles.contentWithSaveBar : null)}>
+        <div
+          ref={contentWidthAnchorRef}
+          className={cn(styles.widget, styles.pageHeader)}
+        >
+          <Text as="p" size="5" weight="bold" className={styles.pageTitle}>
+            <FormattedMessage id="AccountAnonymizationConfigurationScreen.title" />
+          </Text>
+          <Text as="p" size="2" color="gray" className={styles.pageDescription}>
+            <FormattedMessage id="AccountAnonymizationConfigurationScreen.description" />
+          </Text>
+        </div>
+
+        <div
+          className={cn(
+            styles.widget,
+            "border border-[var(--gray-5)] rounded-lg p-6 flex gap-8 bg-white",
+            isDirty && styles.settingsCardSaveBarClearance
+          )}
+        >
+          <Text as="p" size="3" weight="medium" className="shrink-0 w-[200px]">
             <FormattedMessage id="AccountAnonymizationConfigurationScreen.anonymization-schedule.title" />
-          </WidgetTitle>
-          <FormTextField
-            parentJSONPointer="/account_anonymization"
-            fieldName="grace_period_days"
-            label={renderToString(
-              "AccountAnonymizationConfigurationScreen.grace-period.label"
-            )}
-            description={renderToString(
-              "AccountAnonymizationConfigurationScreen.grace-period.description"
-            )}
-            value={grace_period_days}
-            onChange={onChangeGracePeriod}
-          />
-        </Widget>
+          </Text>
+          <div className="flex-1 flex flex-col gap-4 min-w-0">
+            <TextField
+              size="2"
+              labelSize="2"
+              type="text"
+              label={
+                <FormattedMessage id="AccountAnonymizationConfigurationScreen.grace-period.label" />
+              }
+              hint={
+                <FormattedMessage id="AccountAnonymizationConfigurationScreen.grace-period.description" />
+              }
+              value={grace_period_days}
+              onChange={onChangeGracePeriod}
+              parentJSONPointer="/account_anonymization"
+              fieldName="grace_period_days"
+            />
+          </div>
+        </div>
+
+        <SaveFunctionBar anchorRef={contentWidthAnchorRef} />
       </ScreenContent>
     );
   };
@@ -119,7 +139,7 @@ const AccountAnonymizationConfigurationScreen: React.VFC =
     }
 
     return (
-      <FormContainer form={form}>
+      <FormContainer form={form} hideFooterComponent={true}>
         <AccountAnonymizationConfigurationContent form={form} />
       </FormContainer>
     );
diff --git a/portal/src/graphql/portal/AccountDeletionConfigurationScreen.module.css b/portal/src/graphql/portal/AccountDeletionConfigurationScreen.module.css
index f4320eb8421..9be14de1a14 100644
--- a/portal/src/graphql/portal/AccountDeletionConfigurationScreen.module.css
+++ b/portal/src/graphql/portal/AccountDeletionConfigurationScreen.module.css
@@ -1,4 +1,28 @@
 .widget {
-  grid-column: 1 / span 8;
+  grid-column: 1 / span 9;
   @apply tablet:col-span-full;
 }
+
+.pageHeader {
+  @apply flex flex-col gap-2;
+}
+
+.pageTitle {
+  margin: 0;
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 600;
+  color: var(--gray-12);
+}
+
+.pageDescription {
+  color: var(--gray-a11);
+}
+
+.contentWithSaveBar {
+  padding-bottom: 5.5rem;
+}
+
+.settingsCardSaveBarClearance {
+  margin-bottom: 5.5rem;
+}
diff --git a/portal/src/graphql/portal/AccountDeletionConfigurationScreen.tsx b/portal/src/graphql/portal/AccountDeletionConfigurationScreen.tsx
index eec1eef0ed8..a2d1c78f018 100644
--- a/portal/src/graphql/portal/AccountDeletionConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/AccountDeletionConfigurationScreen.tsx
@@ -1,7 +1,9 @@
-import React, { useCallback, useContext } from "react";
+import React, { useCallback, useRef } from "react";
 import { useParams } from "react-router-dom";
-import { MessageBar } from "@fluentui/react";
-import { FormattedMessage, Context } from "../../intl";
+import cn from "classnames";
+import { Callout, Text } from "@radix-ui/themes";
+import { InfoCircledIcon } from "@radix-ui/react-icons";
+import { FormattedMessage } from "../../intl";
 import { produce } from "immer";
 import {
   AppConfigFormModel,
@@ -11,15 +13,14 @@ import ShowLoading from "../../ShowLoading";
 import ShowError from "../../ShowError";
 import FormContainer from "../../FormContainer";
 import ScreenContent from "../../ScreenContent";
-import ScreenTitle from "../../ScreenTitle";
 import { PortalAPIAppConfig } from "../../types";
 import styles from "./AccountDeletionConfigurationScreen.module.css";
-import Widget from "../../Widget";
-import WidgetTitle from "../../WidgetTitle";
-import FormTextField from "../../FormTextField";
-import Toggle from "../../Toggle";
+import { TextField } from "../../components/v2/TextField/TextField";
+import { Toggle } from "../../components/v2/Toggle/Toggle";
+import { SaveFunctionBar } from "../../components/v2/SaveFunctionBar/SaveFunctionBar";
 import { checkIntegerInput } from "../../util/input";
 import ExternalLink from "../../ExternalLink";
+import { useFormContainerBaseContext } from "../../FormContainerBase";
 
 interface FormState {
   scheduled_by_end_user_enabled: boolean;
@@ -66,83 +67,101 @@ const AccountDeletionConfigurationContent: React.VFC<AccountDeletionConfiguratio
     const { form } = props;
     const { state, setState } = form;
     const { scheduled_by_end_user_enabled, grace_period_days } = state;
-
-    const { renderToString } = useContext(Context);
+    const { isDirty } = useFormContainerBaseContext();
+    const contentWidthAnchorRef = useRef<HTMLDivElement>(null);
 
     const onChangeGracePeriod = useCallback(
-      (_e, value?: string) => {
-        if (value != null) {
-          if (checkIntegerInput(value)) {
-            setState((prev) => {
-              return {
-                ...prev,
-                grace_period_days: value,
-              };
-            });
-          }
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        if (checkIntegerInput(value)) {
+          setState((prev) => ({
+            ...prev,
+            grace_period_days: value,
+          }));
         }
       },
       [setState]
     );
 
     const onChangeEnabled = useCallback(
-      (_e, checked?: boolean) => {
-        if (checked != null) {
-          setState((prev) => {
-            return {
-              ...prev,
-              scheduled_by_end_user_enabled: checked,
-            };
-          });
-        }
+      (checked: boolean) => {
+        setState((prev) => ({
+          ...prev,
+          scheduled_by_end_user_enabled: checked,
+        }));
       },
       [setState]
     );
 
     return (
-      <ScreenContent>
-        <ScreenTitle className={styles.widget}>
-          <FormattedMessage id="AccountDeletionConfigurationScreen.title" />
-        </ScreenTitle>
-        <Widget className={styles.widget}>
-          <WidgetTitle>
+      <ScreenContent className={cn(isDirty ? styles.contentWithSaveBar : null)}>
+        <div
+          ref={contentWidthAnchorRef}
+          className={cn(styles.widget, styles.pageHeader)}
+        >
+          <Text as="p" size="5" weight="bold" className={styles.pageTitle}>
+            <FormattedMessage id="AccountDeletionConfigurationScreen.title" />
+          </Text>
+          <Text as="p" size="2" color="gray" className={styles.pageDescription}>
+            <FormattedMessage id="AccountDeletionConfigurationScreen.description" />
+          </Text>
+        </div>
+
+        <div
+          className={cn(
+            styles.widget,
+            "border border-[var(--gray-5)] rounded-lg p-6 flex gap-8 bg-white",
+            isDirty && styles.settingsCardSaveBarClearance
+          )}
+        >
+          <Text as="p" size="3" weight="medium" className="shrink-0 w-[200px]">
             <FormattedMessage id="AccountDeletionConfigurationScreen.deletion-schedule.title" />
-          </WidgetTitle>
-          <FormTextField
-            parentJSONPointer="/account_deletion"
-            fieldName="grace_period_days"
-            label={renderToString(
-              "AccountDeletionConfigurationScreen.grace-period.label"
-            )}
-            description={renderToString(
-              "AccountDeletionConfigurationScreen.grace-period.description"
-            )}
-            value={grace_period_days}
-            onChange={onChangeGracePeriod}
-          />
-          <Toggle
-            checked={scheduled_by_end_user_enabled}
-            onChange={onChangeEnabled}
-            label={renderToString(
-              "AccountDeletionConfigurationScreen.scheduled-by-end-user.label"
-            )}
-            inlineLabel={true}
-          />
-
-          <MessageBar>
-            <FormattedMessage
-              id="AccountDeletionConfigurationScreen.apple-app-store.description"
-              values={{
-                // eslint-disable-next-line react/no-unstable-nested-components
-                ExternalLink: (chunks: React.ReactNode) => (
-                  <ExternalLink href="https://developer.apple.com/app-store/review/guidelines/#5.1.1">
-                    {chunks}
-                  </ExternalLink>
-                ),
-              }}
+          </Text>
+          <div className="flex-1 flex flex-col gap-4 min-w-0">
+            <TextField
+              size="2"
+              labelSize="2"
+              type="text"
+              label={
+                <FormattedMessage id="AccountDeletionConfigurationScreen.grace-period.label" />
+              }
+              hint={
+                <FormattedMessage id="AccountDeletionConfigurationScreen.grace-period.description" />
+              }
+              value={grace_period_days}
+              onChange={onChangeGracePeriod}
+              parentJSONPointer="/account_deletion"
+              fieldName="grace_period_days"
+            />
+            <Toggle
+              checked={scheduled_by_end_user_enabled}
+              onCheckedChange={onChangeEnabled}
+              text={
+                <FormattedMessage id="AccountDeletionConfigurationScreen.scheduled-by-end-user.label" />
+              }
             />
-          </MessageBar>
-        </Widget>
+            <Callout.Root color="blue" variant="surface" size="1">
+              <Callout.Icon>
+                <InfoCircledIcon />
+              </Callout.Icon>
+              <Callout.Text>
+                <FormattedMessage
+                  id="AccountDeletionConfigurationScreen.apple-app-store.description"
+                  values={{
+                    // eslint-disable-next-line react/no-unstable-nested-components
+                    ExternalLink: (chunks: React.ReactNode) => (
+                      <ExternalLink href="https://developer.apple.com/app-store/review/guidelines/#5.1.1">
+                        {chunks}
+                      </ExternalLink>
+                    ),
+                  }}
+                />
+              </Callout.Text>
+            </Callout.Root>
+          </div>
+        </div>
+
+        <SaveFunctionBar anchorRef={contentWidthAnchorRef} />
       </ScreenContent>
     );
   };
@@ -165,7 +184,7 @@ const AccountDeletionConfigurationScreen: React.VFC =
     }
 
     return (
-      <FormContainer form={form}>
+      <FormContainer form={form} hideFooterComponent={true}>
         <AccountDeletionConfigurationContent form={form} />
       </FormContainer>
     );
diff --git a/portal/src/graphql/portal/AdminAPIConfigurationScreen.module.css b/portal/src/graphql/portal/AdminAPIConfigurationScreen.module.css
index 8a6216fdefa..b5a550c0f30 100644
--- a/portal/src/graphql/portal/AdminAPIConfigurationScreen.module.css
+++ b/portal/src/graphql/portal/AdminAPIConfigurationScreen.module.css
@@ -1,16 +1,192 @@
 .widget {
-  grid-column: 1 / span 8;
+  grid-column: 1 / span 9;
 
   @apply tablet:col-span-full;
 }
 
-.separator {
-  grid-column: 1 / span 8;
-  @apply tablet:col-span-full;
-  @apply my-2;
+.pageHeader {
+  @apply flex flex-col gap-2;
 }
 
-.actionButton {
+.pageTitle {
+  margin: 0;
+  font-size: 20px;
+  line-height: 28px;
   font-weight: 600;
-  height: auto;
+  color: var(--gray-12);
+}
+
+.pageDescription {
+  color: var(--gray-a11);
+}
+
+.sections {
+  grid-column: 1 / span 9;
+  @apply tablet:col-span-full;
+  @apply flex min-w-0 flex-col;
+  gap: 20px;
+}
+
+.section {
+  @apply min-w-0 rounded-xl border border-solid p-6;
+  border-color: var(--gray-a6);
+}
+
+.sectionInner {
+  @apply flex min-w-0 flex-row items-start gap-8;
+
+  @apply tablet:flex-col tablet:items-stretch tablet:gap-4;
+}
+
+.sectionHeading {
+  flex-shrink: 0;
+  width: 8.75rem;
+  color: var(--gray-12);
+}
+
+.sectionContent {
+  @apply flex w-full min-w-0 flex-1 flex-col gap-4;
+}
+
+.sectionDescription {
+  color: var(--gray-a11);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.keysTableWrapper {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Hide horizontal scrollbar on desktop (large screens). */
+@media (min-width: 1081px) {
+  .keysTableWrapper {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge Legacy */
+  }
+
+  .keysTableWrapper::-webkit-scrollbar {
+    display: none; /* Chrome/Safari */
+  }
+}
+
+.keysTable {
+  min-width: 36rem;
+}
+
+.keysTableHeader {
+  @apply flex w-full items-center;
+  min-width: 36rem;
+  min-height: 2.75rem;
+}
+
+.keysTableHeaderCellKeyId,
+.keysTableHeaderCellCreatedAt,
+.keysTableHeaderCellActions {
+  @apply flex items-center px-3 py-3 text-sm font-semibold;
+  color: var(--gray-12);
+}
+
+.keysTableHeaderCellKeyId {
+  @apply flex-1 min-w-0;
+}
+
+.keysTableHeaderCellCreatedAt {
+  width: 14rem;
+  min-width: 0;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.keysTableHeaderCellActions {
+  width: 3.5rem;
+  flex-shrink: 0;
+  @apply justify-end;
+}
+
+.keysTableRow {
+  @apply flex w-full items-center;
+  min-width: 36rem;
+  min-height: 2.75rem;
+  border-top: 1px solid var(--gray-a6);
+  background-color: var(--gray-a2);
+}
+
+.keysTableCellKeyId,
+.keysTableCellCreatedAt,
+.keysTableCellActions {
+  @apply flex items-center px-3 py-3 text-sm;
+  color: var(--gray-12);
+}
+
+.keysTableCellKeyId {
+  @apply flex min-w-0 flex-1 items-center overflow-hidden;
+}
+
+.keysTableCellKeyIdInner {
+  @apply flex max-w-full min-w-0 items-center;
+  gap: 0.375rem;
+}
+
+.keysTableCellKeyIdText {
+  @apply min-w-0 truncate;
+}
+
+.copyIconButton {
+  @apply shrink-0;
+  background: none;
+  border: none;
+  box-shadow: none;
+  color: var(--gray-11);
+}
+
+.keysTableCellCreatedAt {
+  width: 14rem;
+  min-width: 0;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.keysTableCellActions {
+  width: 3.5rem;
+  flex-shrink: 0;
+  @apply justify-end;
+}
+
+.generateKeyButton {
+  @apply inline-flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-sm font-semibold;
+  color: var(--accent-9);
+}
+
+.generateKeyButton:disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+.tokenRow {
+  @apply flex w-full min-w-0 flex-col gap-4;
+}
+
+.tokenFieldGroup {
+  @apply flex flex-col;
+  gap: var(--space-1);
+}
+
+.tokenInputRow {
+  @apply flex flex-row flex-wrap items-end gap-2;
+}
+
+.tokenInputRowField {
+  @apply min-w-0 flex-1;
+}
+
+.readOnlyCopyFieldTruncate {
+  @apply min-w-0 overflow-hidden;
+}
+
+.readOnlyCopyFieldTruncate input {
+  @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
 }
diff --git a/portal/src/graphql/portal/AdminAPIConfigurationScreen.tsx b/portal/src/graphql/portal/AdminAPIConfigurationScreen.tsx
index 138bcf8c2ce..0aab993bc99 100644
--- a/portal/src/graphql/portal/AdminAPIConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/AdminAPIConfigurationScreen.tsx
@@ -1,25 +1,22 @@
-import React, { useContext, useMemo, useCallback, useState } from "react";
+import React, { useContext, useMemo, useCallback, useState, useRef } from "react";
+import cn from "classnames";
 import { useParams, useLocation, useNavigate } from "react-router-dom";
 import {
-  DetailsList,
-  IColumn,
-  SelectionMode,
-  MessageBar,
-  MessageBarType,
-  TooltipHost,
-  Dialog,
-  DialogFooter,
-  IconButton,
-  useTheme,
-} from "@fluentui/react";
-import cn from "classnames";
+  CopyIcon,
+  DotsVerticalIcon,
+  Pencil1Icon,
+  PlusIcon,
+  TrashIcon,
+} from "@radix-ui/react-icons";
+import {
+  DropdownMenu,
+  Heading,
+  IconButton as RadixIconButton,
+  Text,
+  Tooltip as RadixTooltip,
+} from "@radix-ui/themes";
 import { FormattedMessage, Context } from "../../intl";
 import ScreenContent from "../../ScreenContent";
-import ScreenTitle from "../../ScreenTitle";
-import ScreenDescription from "../../ScreenDescription";
-import Widget from "../../Widget";
-import WidgetTitle from "../../WidgetTitle";
-import WidgetDescription from "../../WidgetDescription";
 import ShowLoading from "../../ShowLoading";
 import ShowError from "../../ShowError";
 import {
@@ -27,31 +24,28 @@ import {
   AppAndSecretConfigQueryResult,
 } from "./query/appAndSecretConfigQuery";
 import { formatDatetime } from "../../util/formatDatetime";
-import { useSystemConfig } from "../../context/SystemConfigContext";
 import { downloadStringAsFile } from "../../util/download";
 import { startReauthentication } from "./Authenticated";
 import { useLocationEffect } from "../../hook/useLocationEffect";
 import { makeGraphQLEndpoint } from "../adminapi/apollo";
 import styles from "./AdminAPIConfigurationScreen.module.css";
 import ScreenLayoutScrollView from "../../ScreenLayoutScrollView";
-import PrimaryButton from "../../PrimaryButton";
-import ActionButton from "../../ActionButton";
-import DefaultButton from "../../DefaultButton";
 import { useUpdateAppAndSecretConfigMutation } from "./mutations/updateAppAndSecretMutation";
 import { useIsLoading, useLoading } from "../../hook/loading";
 import { useProvideError } from "../../hook/error";
 import { AppSecretKey } from "./globalTypes.generated";
 import { useAppSecretVisitToken } from "./mutations/generateAppSecretVisitTokenMutation";
-import HorizontalDivider from "../../HorizontalDivider";
-import TextFieldWithCopyButton from "../../TextFieldWithCopyButton";
 import ExternalLink, { DEFAULT_EXTERNAL_LINK_PROPS } from "../../ExternalLink";
-import { TextWithCopyButton } from "../../components/common/TextWithCopyButton";
 import { useGenerateShortLivedAdminAPITokenMutation } from "./mutations/generateShortLivedAdminAPITokenMutation";
-import { useCopyFeedback } from "../../hook/useCopyFeedback";
-import TextField from "../../TextField";
+import { copyToClipboard } from "../../util/clipboard";
 import { parseAPIErrors, parseRawError } from "../../error/parse";
 import { APIError } from "../../error/error";
 import ErrorRenderer from "../../ErrorRenderer";
+import { TextField } from "../../components/v2/TextField/TextField";
+import { Callout } from "../../components/v2/Callout/Callout";
+import { PrimaryButton as RadixPrimaryButton } from "../../components/v2/Button/PrimaryButton/PrimaryButton";
+import { SecondaryButton } from "../../components/v2/Button/SecondaryButton/SecondaryButton";
+import { ConfirmationDialog } from "../../components/v2/ConfirmationDialog/ConfirmationDialog";
 
 interface AdminAPIConfigurationScreenContentProps {
   appID: string;
@@ -86,12 +80,6 @@ function isLocationState(raw: unknown): raw is LocationState {
   );
 }
 
-const messageBarStyles = {
-  root: {
-    width: "auto",
-  },
-};
-
 const EXAMPLE_QUERY = `# The Authgear Admin API follows GraphQL Cursor Connections Specification to handle pagination of results.
 # Read more about the Connection model to understand the types like "Edge", "Node", and "Cursor":
 # https://relay.dev/graphql/connections.htm
@@ -113,19 +101,194 @@ query {
 }
 `;
 
+interface SettingsSectionProps {
+  title: React.ReactNode;
+  children: React.ReactNode;
+}
+
+function SettingsSection({
+  title,
+  children,
+}: SettingsSectionProps): React.ReactElement {
+  return (
+    <section className={styles.section}>
+      <div className={styles.sectionInner}>
+        <Heading as="h2" size="3" weight="medium" className={styles.sectionHeading}>
+          {title}
+        </Heading>
+        <div className={styles.sectionContent}>{children}</div>
+      </div>
+    </section>
+  );
+}
+
+function CopyIconButton({
+  textToCopy,
+}: {
+  textToCopy: string;
+}): React.ReactElement {
+  const { renderToString } = useContext(Context);
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleCopy = useCallback(() => {
+    copyToClipboard(textToCopy);
+    setCopied(true);
+    if (timerRef.current != null) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  }, [textToCopy]);
+
+  return (
+    <RadixTooltip
+      content={
+        copied
+          ? renderToString("copied-to-clipboard")
+          : renderToString("copy")
+      }
+      open={copied ? true : undefined}
+    >
+      <RadixIconButton
+        type="button"
+        variant="ghost"
+        color="gray"
+        size="1"
+        aria-label={renderToString("copy")}
+        onClick={handleCopy}
+        className={styles.copyIconButton}
+      >
+        <CopyIcon width="1rem" height="1rem" />
+      </RadixIconButton>
+    </RadixTooltip>
+  );
+}
+
+interface ReadOnlyCopyFieldProps {
+  label: React.ReactNode;
+  value: string;
+  placeholder?: string;
+  hint?: React.ReactNode;
+  truncate?: boolean;
+}
+
+function ReadOnlyCopyField({
+  label,
+  value,
+  placeholder,
+  hint,
+  truncate,
+}: ReadOnlyCopyFieldProps): React.ReactElement {
+  const showCopy = value.length > 0;
+
+  return (
+    <TextField
+      size="2"
+      label={label}
+      value={value}
+      placeholder={placeholder}
+      readOnly={true}
+      hint={hint}
+      inputClassName={
+        truncate ? styles.readOnlyCopyFieldTruncate : undefined
+      }
+      suffixPlain={true}
+      suffix={showCopy ? <CopyIconButton textToCopy={value} /> : undefined}
+    />
+  );
+}
+
+interface AdminAPIKeysTableProps {
+  items: Item[];
+  onDownload: (keyID: string) => void;
+  onDelete: (keyID: string) => void;
+  canDelete: boolean;
+}
+
+function AdminAPIKeysTable({
+  items,
+  onDownload,
+  onDelete,
+  canDelete,
+}: AdminAPIKeysTableProps): React.ReactElement {
+  return (
+    <div className={styles.keysTableWrapper}>
+      <div className={styles.keysTable}>
+        <div className={styles.keysTableHeader}>
+          <div className={styles.keysTableHeaderCellKeyId}>
+            <FormattedMessage id="AdminAPIConfigurationScreen.column.key-id" />
+          </div>
+          <div className={styles.keysTableHeaderCellCreatedAt}>
+            <FormattedMessage id="AdminAPIConfigurationScreen.column.created-at" />
+          </div>
+          <div className={styles.keysTableHeaderCellActions} aria-hidden={true} />
+        </div>
+        {items.map((item) => (
+          <div key={item.keyID} className={styles.keysTableRow}>
+            <div className={styles.keysTableCellKeyId}>
+              <div className={styles.keysTableCellKeyIdInner}>
+                <Text size="2" className={styles.keysTableCellKeyIdText}>
+                  {item.keyID}
+                </Text>
+                <CopyIconButton textToCopy={item.keyID} />
+              </div>
+            </div>
+            <div className={styles.keysTableCellCreatedAt}>
+              <Text size="2" className="truncate">
+                {item.createdAt ?? ""}
+              </Text>
+            </div>
+            <div className={styles.keysTableCellActions}>
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger>
+                  <RadixIconButton variant="soft" color="gray" size="2">
+                    <DotsVerticalIcon width="1rem" height="1rem" />
+                  </RadixIconButton>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content align="end">
+                  <DropdownMenu.Item
+                    onSelect={() => {
+                      onDownload(item.keyID);
+                    }}
+                  >
+                    <Pencil1Icon />
+                    <FormattedMessage id="download" />
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Item
+                    color="red"
+                    disabled={!canDelete}
+                    onSelect={() => {
+                      if (canDelete) {
+                        onDelete(item.keyID);
+                      }
+                    }}
+                  >
+                    <TrashIcon />
+                    <FormattedMessage id="delete" />
+                  </DropdownMenu.Item>
+                </DropdownMenu.Content>
+              </DropdownMenu.Root>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 const AdminAPIConfigurationScreenContent: React.VFC<AdminAPIConfigurationScreenContentProps> =
   function AdminAPIConfigurationScreenContent(props) {
     const { appID, secretToken, queryResult, generateKey, deleteKey } = props;
     const { locale, renderToString } = useContext(Context);
     const { effectiveAppConfig } = useAppAndSecretConfigQuery(appID);
-    const { themes } = useSystemConfig();
     const isLoading = useIsLoading();
     const [deleteKeyID, setDeleteKeyID] = useState<string | null>(null);
     const [isDeleteDialogVisible, setIsDeleteDialogVisible] = useState(false);
     const [shortLivedAdminAPIToken, setShortLivedAdminAPIToken] = useState<
       string | null
     >(null);
-    const theme = useTheme();
     const [shortLivedAdminAPITokenError, setShortLivedAdminAPITokenError] =
       useState<APIError[]>([]);
 
@@ -133,14 +296,11 @@ const AdminAPIConfigurationScreenContent: React.VFC<AdminAPIConfigurationScreenC
       generateShortLivedAdminAPIToken,
       loading: generatingShortLivedAdminAPITokenLoading,
     } = useGenerateShortLivedAdminAPITokenMutation(appID);
-    const { copyButtonProps, Feedback } = useCopyFeedback({
-      textToCopy: shortLivedAdminAPIToken ?? "",
-    });
 
     const publicOrigin = effectiveAppConfig?.http?.public_origin;
     const adminAPIEndpoint =
       publicOrigin != null ? publicOrigin + "/_api/admin/graphql" : "";
-    const rawAppID = effectiveAppConfig?.id;
+    const rawAppID = effectiveAppConfig?.id ?? "";
 
     const graphqlEndpoint = useMemo(() => {
       const base = makeGraphQLEndpoint(appID);
@@ -196,8 +356,6 @@ const AdminAPIConfigurationScreenContent: React.VFC<AdminAPIConfigurationScreenC
 
     const generateShortLivedAdminAPITokenHandle = useCallback(async () => {
       if (secretToken == null) {
-        // generateShortLivedAdminAPITokenHandle should be called only
-        // when there is a secret token
         console.error("secret token should not be null");
         return;
       }
@@ -220,10 +378,6 @@ const AdminAPIConfigurationScreenContent: React.VFC<AdminAPIConfigurationScreenC
           console.error(e);
         });
       };
-      // There are two possible cases:
-      // 1. secretToken is null
-      // 2. secretToken is not null but failed to generate short-lived admin API token
-      // in both cases, reauthentication is needed
       if (secretToken != null) {
         generateShortLivedAdminAPITokenHandle().catch((e) => {
           const apiErrors = parseRawError(e);
@@ -258,29 +412,19 @@ const AdminAPIConfigurationScreenContent: React.VFC<AdminAPIConfigurationScreenC
       }
     });
 
-    const dialogContentProps = useMemo(() => {
-      return {
-        title: renderToString(
-          "AdminAPIConfigurationScreen.keys.delete-dialog.title"
-        ),
-        subText: renderToString(
-          "AdminAPIConfigurationScreen.keys.delete-dialog.message"
-        ),
-      };
-    }, [renderToString]);
-
-    const showDialogAndSetDeleteKeyID = useCallback(
-      (keyID: string) => {
-        setDeleteKeyID(keyID);
-        setIsDeleteDialogVisible(true);
-      },
-      [setIsDeleteDialogVisible]
-    );
-
     const dismissDialogAndResetDeleteKeyID = useCallback(() => {
       setIsDeleteDialogVisible(false);
       setDeleteKeyID(null);
-    }, [setIsDeleteDialogVisible]);
+    }, []);
+
+    const onDeleteDialogOpenChange = useCallback(
+      (open: boolean) => {
+        if (!open && !isLoading) {
+          dismissDialogAndResetDeleteKeyID();
+        }
+      },
+      [dismissDialogAndResetDeleteKeyID, isLoading]
+    );
 
     const onConfirmDelete = useCallback(() => {
       if (deleteKeyID == null) {
@@ -293,311 +437,220 @@ const AdminAPIConfigurationScreenContent: React.VFC<AdminAPIConfigurationScreenC
         .finally(dismissDialogAndResetDeleteKeyID);
     }, [deleteKey, deleteKeyID, dismissDialogAndResetDeleteKeyID]);
 
-    const keyIDColumnOnRender = useCallback((item?: Item) => {
-      return (
-        <span className={cn("flex", "items-center", "h-full")}>
-          <TextWithCopyButton text={item?.keyID ?? ""} />
-        </span>
-      );
+    const showDialogAndSetDeleteKeyID = useCallback((keyID: string) => {
+      setDeleteKeyID(keyID);
+      setIsDeleteDialogVisible(true);
     }, []);
 
-    const createdAtColumnOnRender = useCallback((item?: Item) => {
-      return (
-        <span className={cn("flex", "items-center", "h-full")}>
-          {item?.createdAt ?? ""}
-        </span>
-      );
-    }, []);
-
-    const actionColumnOnRender = useCallback(
-      (item?: Item, index?: number) => {
-        const deleteButtonID = `delete-button-${index}`;
-        const calloutProps = {
-          target: `#${deleteButtonID}`,
-        };
-        return (
-          <section className={cn("flex", "items-center", "h-full")}>
-            <ActionButton
-              className={styles.actionButton}
-              theme={themes.actionButton}
-              onClick={(e: React.MouseEvent<unknown>) => {
-                e.preventDefault();
-                e.stopPropagation();
-                if (item != null) {
-                  downloadItem(item.keyID);
-                }
-              }}
-              text={<FormattedMessage id="download" />}
-            />
-            {items.length > 1 ? (
-              <ActionButton
-                id={deleteButtonID}
-                className={styles.actionButton}
-                theme={themes.destructive}
-                onClick={(e: React.MouseEvent<unknown>) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  if (item != null) {
-                    showDialogAndSetDeleteKeyID(item.keyID);
-                  }
-                }}
-                text={<FormattedMessage id="delete" />}
-              />
-            ) : (
-              <TooltipHost
-                content={
-                  <FormattedMessage id="AdminAPIConfigurationScreen.keys.delete.tooltip" />
-                }
-                calloutProps={calloutProps}
-              >
-                <ActionButton
-                  id={deleteButtonID}
-                  className={styles.actionButton}
-                  theme={themes.destructive}
-                  disabled={true}
-                  text={<FormattedMessage id="delete" />}
-                />
-              </TooltipHost>
-            )}
-          </section>
-        );
-      },
-      [
-        downloadItem,
-        items.length,
-        showDialogAndSetDeleteKeyID,
-        themes.actionButton,
-        themes.destructive,
-      ]
+    const apiEndpointDocHint = (
+      <FormattedMessage
+        id="AdminAPIConfigurationScreen.details.description"
+        values={{
+          // eslint-disable-next-line react/no-unstable-nested-components
+          docLink: (chunks: React.ReactNode) => (
+            <ExternalLink href="https://docs.authgear.com/reference/apis/admin-api">
+              {chunks}
+            </ExternalLink>
+          ),
+          // eslint-disable-next-line react/no-unstable-nested-components
+          code: (chunks: React.ReactNode) => <code>{chunks}</code>,
+        }}
+      />
     );
 
-    const columns: IColumn[] = useMemo(() => {
-      return [
-        {
-          key: "keyID",
-          fieldName: "keyID",
-          name: renderToString("AdminAPIConfigurationScreen.column.key-id"),
-          minWidth: 150,
-          onRender: keyIDColumnOnRender,
-        },
-        {
-          key: "createdAt",
-          fieldName: "createdAt",
-          name: renderToString("AdminAPIConfigurationScreen.column.created-at"),
-          minWidth: 220,
-          onRender: createdAtColumnOnRender,
-        },
-        {
-          key: "action",
-          name: renderToString("action"),
-          minWidth: 150,
-          onRender: actionColumnOnRender,
-        },
-      ];
-    }, [
-      renderToString,
-      keyIDColumnOnRender,
-      createdAtColumnOnRender,
-      actionColumnOnRender,
-    ]);
+    const graphiqlWarning = (
+      <Callout
+        type="warning"
+        showCloseButton={false}
+        text={
+          <FormattedMessage
+            id="AdminAPIConfigurationScreen.graphiql.warning"
+            values={{
+              // eslint-disable-next-line react/no-unstable-nested-components
+              b: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
+            }}
+          />
+        }
+      />
+    );
 
     return (
       <>
         <ScreenLayoutScrollView>
           <ScreenContent>
-            <ScreenTitle className={styles.widget}>
-              <FormattedMessage id="AdminAPIConfigurationScreen.title" />
-            </ScreenTitle>
-            <ScreenDescription className={styles.widget}>
-              <FormattedMessage
-                id="AdminAPIConfigurationScreen.description"
-                values={{
-                  // eslint-disable-next-line react/no-unstable-nested-components
-                  b: (chunks: React.ReactNode) => <b>{chunks}</b>,
-                }}
-              />
-            </ScreenDescription>
-            <Widget className={styles.widget}>
-              <WidgetTitle>
-                <FormattedMessage id="AdminAPIConfigurationScreen.details.title" />
-              </WidgetTitle>
-              <TextFieldWithCopyButton
-                label={renderToString(
-                  "AdminAPIConfigurationScreen.api-endpoint.title"
-                )}
-                value={adminAPIEndpoint}
-                readOnly={true}
-              />
-              <TextFieldWithCopyButton
-                label={renderToString(
-                  "AdminAPIConfigurationScreen.project-id.title"
-                )}
-                value={rawAppID}
-                readOnly={true}
-              />
-              <WidgetDescription>
+            <div className={cn(styles.widget, styles.pageHeader)}>
+              <h1 className={styles.pageTitle}>
+                <FormattedMessage id="AdminAPIConfigurationScreen.title" />
+              </h1>
+              <Text
+                as="p"
+                size="2"
+                color="gray"
+                className={styles.pageDescription}
+              >
                 <FormattedMessage
-                  id="AdminAPIConfigurationScreen.details.description"
+                  id="AdminAPIConfigurationScreen.description"
                   values={{
                     // eslint-disable-next-line react/no-unstable-nested-components
-                    docLink: (chunks: React.ReactNode) => (
-                      <ExternalLink href="https://docs.authgear.com/reference/apis/admin-api">
-                        {chunks}
-                      </ExternalLink>
-                    ),
+                    b: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
                   }}
                 />
-              </WidgetDescription>
-            </Widget>
-            <HorizontalDivider className={styles.separator} />
-            <Widget className={styles.widget}>
-              <WidgetTitle>
-                <FormattedMessage id="AdminAPIConfigurationScreen.keys.title" />
-              </WidgetTitle>
-              <DetailsList
-                items={items}
-                columns={columns}
-                selectionMode={SelectionMode.none}
-              />
-              {items.length >= 2 ? (
-                <MessageBar
-                  messageBarType={MessageBarType.warning}
-                  styles={messageBarStyles}
-                >
-                  <FormattedMessage id="AdminAPIConfigurationScreen.keys.generate.warning" />
-                </MessageBar>
-              ) : (
-                <ActionButton
-                  className={styles.actionButton}
-                  theme={themes.actionButton}
-                  iconProps={{
-                    iconName: "CirclePlus",
-                  }}
-                  onClick={generateKey}
-                  disabled={isLoading}
-                  text={
-                    <FormattedMessage
-                      id={"AdminAPIConfigurationScreen.keys.generate.label"}
-                    />
+              </Text>
+            </div>
+
+            <div className={styles.sections}>
+              <SettingsSection
+                title={
+                  <FormattedMessage id="AdminAPIConfigurationScreen.api-endpoint.section-title" />
+                }
+              >
+                <ReadOnlyCopyField
+                  label={
+                    <FormattedMessage id="AdminAPIConfigurationScreen.graphql-url.label" />
                   }
+                  value={adminAPIEndpoint}
                 />
-              )}
-              <div className={cn("flex", "flex-col", "gap-2")}>
-                <div className={cn("flex", "flex-row", "gap-2")}>
-                  <div className={cn("flex", "flex-row", "flex-1")}>
-                    <TextField
-                      className={cn("flex-1")}
-                      type="text"
-                      label={renderToString(
-                        "AdminAPIConfigurationScreen.short-lived-admin-api-token.label"
-                      )}
-                      value={shortLivedAdminAPIToken ?? ""}
-                      placeholder={renderToString(
-                        "AdminAPIConfigurationScreen.short-lived-admin-api-token.generate.placeholder"
-                      )}
-                      readOnly={true}
-                    />
-                    {shortLivedAdminAPIToken ? (
-                      <>
-                        <IconButton
-                          {...copyButtonProps}
-                          styles={{
-                            root: {
-                              backgroundColor: theme.palette.neutralLight,
-                            },
-                          }}
-                          className={cn("self-end")}
-                          theme={themes.actionButton}
+                <ReadOnlyCopyField
+                  label={
+                    <FormattedMessage id="AdminAPIConfigurationScreen.project-id.title" />
+                  }
+                  value={rawAppID}
+                />
+                <Text
+                  as="p"
+                  size="1"
+                  color="gray"
+                  className={styles.sectionDescription}
+                >
+                  {apiEndpointDocHint}
+                </Text>
+              </SettingsSection>
+
+              <SettingsSection
+                title={
+                  <FormattedMessage id="AdminAPIConfigurationScreen.keys.title" />
+                }
+              >
+                <AdminAPIKeysTable
+                  items={items}
+                  onDownload={downloadItem}
+                  onDelete={showDialogAndSetDeleteKeyID}
+                  canDelete={items.length > 1}
+                />
+                {items.length >= 2 ? (
+                  <Callout
+                    type="warning"
+                    showCloseButton={false}
+                    text={
+                      <FormattedMessage id="AdminAPIConfigurationScreen.keys.generate.warning" />
+                    }
+                  />
+                ) : (
+                  <button
+                    type="button"
+                    className={styles.generateKeyButton}
+                    onClick={() => {
+                      generateKey().catch((e) => {
+                        console.error(e);
+                      });
+                    }}
+                    disabled={isLoading}
+                  >
+                    <PlusIcon width="1rem" height="1rem" />
+                    <FormattedMessage id="AdminAPIConfigurationScreen.keys.generate.label" />
+                  </button>
+                )}
+
+                <div className={styles.tokenRow}>
+                  <div className={styles.tokenFieldGroup}>
+                    <div className={styles.tokenInputRow}>
+                      <div className={styles.tokenInputRowField}>
+                        <ReadOnlyCopyField
+                          label={
+                            <FormattedMessage id="AdminAPIConfigurationScreen.short-lived-admin-api-token.label" />
+                          }
+                          value={shortLivedAdminAPIToken ?? ""}
+                          truncate={true}
+                          placeholder={renderToString(
+                            "AdminAPIConfigurationScreen.short-lived-admin-api-token.generate.placeholder"
+                          )}
                         />
-                        <Feedback />
-                      </>
-                    ) : null}
+                      </div>
+                      <RadixPrimaryButton
+                        size="2"
+                        text={
+                          <FormattedMessage id="AdminAPIConfigurationScreen.short-lived-admin-api-token.generate" />
+                        }
+                        onClick={onClickGenerateShortLivedAdminAPIToken}
+                        disabled={generatingShortLivedAdminAPITokenLoading}
+                        loading={generatingShortLivedAdminAPITokenLoading}
+                      />
+                    </div>
+                    <Text as="p" size="1" color="gray">
+                      <FormattedMessage id="AdminAPIConfigurationScreen.short-lived-admin-api-token.description" />
+                    </Text>
                   </div>
-                  <PrimaryButton
-                    className={cn("self-end")}
-                    onClick={onClickGenerateShortLivedAdminAPIToken}
+                  {shortLivedAdminAPITokenFieldErrors != null ? (
+                    <Callout
+                      type="error"
+                      showCloseButton={false}
+                      text={shortLivedAdminAPITokenFieldErrors}
+                    />
+                  ) : null}
+                </div>
+              </SettingsSection>
+
+              <SettingsSection
+                title={
+                  <FormattedMessage id="AdminAPIConfigurationScreen.graphiql.title" />
+                }
+              >
+                {graphiqlWarning}
+                <Text as="p" size="2" color="gray">
+                  <FormattedMessage
+                    id="AdminAPIConfigurationScreen.graphiql.description"
+                    values={{
+                      // eslint-disable-next-line react/no-unstable-nested-components
+                      br: () => <br />,
+                    }}
+                  />
+                </Text>
+                <div>
+                  <SecondaryButton
+                    size="2"
                     text={
-                      <FormattedMessage id="AdminAPIConfigurationScreen.short-lived-admin-api-token.generate" />
+                      <FormattedMessage id="AdminAPIConfigurationScreen.graphiql.open" />
                     }
-                    disabled={generatingShortLivedAdminAPITokenLoading}
+                    onClick={() => {
+                      window.open(
+                        graphqlEndpoint,
+                        DEFAULT_EXTERNAL_LINK_PROPS.target,
+                        DEFAULT_EXTERNAL_LINK_PROPS.rel
+                      );
+                    }}
                   />
                 </div>
-                {shortLivedAdminAPITokenFieldErrors ? (
-                  <MessageBar messageBarType={MessageBarType.error}>
-                    {shortLivedAdminAPITokenFieldErrors}
-                  </MessageBar>
-                ) : null}
-                <WidgetDescription>
-                  {}
-                  <FormattedMessage id="AdminAPIConfigurationScreen.short-lived-admin-api-token.description" />
-                </WidgetDescription>
-              </div>
-            </Widget>
-            <HorizontalDivider className={styles.separator} />
-            <Widget className={styles.widget}>
-              <WidgetTitle>
-                <FormattedMessage id="AdminAPIConfigurationScreen.graphiql.title" />
-              </WidgetTitle>
-              <MessageBar
-                messageBarType={MessageBarType.warning}
-                styles={messageBarStyles}
-              >
-                <FormattedMessage
-                  id="AdminAPIConfigurationScreen.graphiql.warning"
-                  values={{
-                    // eslint-disable-next-line react/no-unstable-nested-components
-                    b: (chunks: React.ReactNode) => <b>{chunks}</b>,
-                  }}
-                />
-              </MessageBar>
-              <WidgetDescription>
-                <FormattedMessage
-                  id="AdminAPIConfigurationScreen.graphiql.description"
-                  values={{
-                    graphqlEndpoint,
-
-                    // eslint-disable-next-line react/no-unstable-nested-components
-                    docLink: (chunks: React.ReactNode) => (
-                      <ExternalLink href="https://docs.authgear.com/reference/apis/admin-api">
-                        {chunks}
-                      </ExternalLink>
-                    ),
-                  }}
-                />
-              </WidgetDescription>
-              <div>
-                <DefaultButton
-                  {...DEFAULT_EXTERNAL_LINK_PROPS}
-                  href={graphqlEndpoint}
-                  text={
-                    <FormattedMessage id="AdminAPIConfigurationScreen.graphiql.open" />
-                  }
-                />
-              </div>
-            </Widget>
+              </SettingsSection>
+            </div>
           </ScreenContent>
         </ScreenLayoutScrollView>
-        <Dialog
-          hidden={!isDeleteDialogVisible}
-          dialogContentProps={dialogContentProps}
-          onDismiss={dismissDialogAndResetDeleteKeyID}
-        >
-          <DialogFooter>
-            <PrimaryButton
-              theme={themes.destructive}
-              onClick={onConfirmDelete}
-              disabled={isLoading || !isDeleteDialogVisible}
-              text={
-                <FormattedMessage id="AdminAPIConfigurationScreen.keys.delete-dialog.confirm" />
-              }
-            />
-            <DefaultButton
-              onClick={dismissDialogAndResetDeleteKeyID}
-              disabled={isLoading || !isDeleteDialogVisible}
-              text={<FormattedMessage id="cancel" />}
-            />
-          </DialogFooter>
-        </Dialog>
+        <ConfirmationDialog
+          open={isDeleteDialogVisible}
+          onOpenChange={onDeleteDialogOpenChange}
+          title={
+            <FormattedMessage id="AdminAPIConfigurationScreen.keys.delete-dialog.title" />
+          }
+          description={
+            <FormattedMessage id="AdminAPIConfigurationScreen.keys.delete-dialog.message" />
+          }
+          confirmText={
+            <FormattedMessage id="AdminAPIConfigurationScreen.keys.delete-dialog.confirm" />
+          }
+          cancelText={<FormattedMessage id="cancel" />}
+          onConfirm={onConfirmDelete}
+          onCancel={dismissDialogAndResetDeleteKeyID}
+          loading={isLoading}
+        />
       </>
     );
   };
diff --git a/portal/src/graphql/portal/CookieLifetimeConfigurationScreen.module.css b/portal/src/graphql/portal/CookieLifetimeConfigurationScreen.module.css
index 684649c6d16..0b6be4faa77 100644
--- a/portal/src/graphql/portal/CookieLifetimeConfigurationScreen.module.css
+++ b/portal/src/graphql/portal/CookieLifetimeConfigurationScreen.module.css
@@ -1,5 +1,29 @@
 .widget {
-  grid-column: 1 / span 8;
+  grid-column: 1 / span 9;
 
   @apply tablet:col-span-full;
 }
+
+.pageHeader {
+  @apply flex flex-col gap-2;
+}
+
+.pageTitle {
+  margin: 0;
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 600;
+  color: var(--gray-12);
+}
+
+.pageDescription {
+  color: var(--gray-a11);
+}
+
+.contentWithSaveBar {
+  padding-bottom: 5.5rem;
+}
+
+.settingsCardSaveBarClearance {
+  margin-bottom: 5.5rem;
+}
diff --git a/portal/src/graphql/portal/CookieLifetimeConfigurationScreen.tsx b/portal/src/graphql/portal/CookieLifetimeConfigurationScreen.tsx
index 7f28121350c..15eff279170 100644
--- a/portal/src/graphql/portal/CookieLifetimeConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/CookieLifetimeConfigurationScreen.tsx
@@ -1,6 +1,7 @@
-import React, { useCallback, useContext, useMemo } from "react";
-import { Text } from "@fluentui/react";
-import { Context, FormattedMessage } from "../../intl";
+import React, { useCallback, useMemo, useRef } from "react";
+import cn from "classnames";
+import { Text } from "@radix-ui/themes";
+import { FormattedMessage } from "../../intl";
 import { useParams } from "react-router-dom";
 import { produce } from "immer";
 
@@ -17,11 +18,10 @@ import FormContainer from "../../FormContainer";
 
 import styles from "./CookieLifetimeConfigurationScreen.module.css";
 import ScreenContent from "../../ScreenContent";
-import ScreenTitle from "../../ScreenTitle";
-import Widget from "../../Widget";
-import Toggle from "../../Toggle";
-import TextField from "../../TextField";
-
+import { TextField } from "../../components/v2/TextField/TextField";
+import { Toggle } from "../../components/v2/Toggle/Toggle";
+import { SaveFunctionBar } from "../../components/v2/SaveFunctionBar/SaveFunctionBar";
+import { useFormContainerBaseContext } from "../../FormContainerBase";
 function getHostname(publicOrigin: string): string {
   try {
     return new URL(publicOrigin).hostname;
@@ -60,15 +60,16 @@ function constructConfig(
   });
 }
 
-interface SessionConfigurationWidgetProps {
+interface CookieLifetimeConfigurationScreenContentProps {
   form: AppConfigFormModel<FormState>;
 }
 
-const SessionConfigurationWidget: React.VFC<SessionConfigurationWidgetProps> =
-  function SessionConfigurationWidget(props: SessionConfigurationWidgetProps) {
-    const { state, setState } = props.form;
-
-    const { renderToString } = useContext(Context);
+const CookieLifetimeConfigurationScreenContent: React.VFC<CookieLifetimeConfigurationScreenContentProps> =
+  function CookieLifetimeConfigurationScreenContent(props) {
+    const { form } = props;
+    const { state, setState } = form;
+    const { isDirty } = useFormContainerBaseContext();
+    const contentWidthAnchorRef = useRef<HTMLDivElement>(null);
 
     const hostname = useMemo(
       () => getHostname(state.publicOrigin),
@@ -76,100 +77,113 @@ const SessionConfigurationWidget: React.VFC<SessionConfigurationWidgetProps> =
     );
 
     const onSessionLifetimeSecondsChange = useCallback(
-      (_, value?: string) => {
+      (e: React.ChangeEvent<HTMLInputElement>) => {
         setState((prev) => ({
           ...prev,
-          sessionLifetimeSeconds: parseIntegerAllowLeadingZeros(value),
+          sessionLifetimeSeconds: parseIntegerAllowLeadingZeros(e.target.value),
         }));
       },
       [setState]
     );
 
     const onIdleTimeoutEnabledChange = useCallback(
-      (_, value?: boolean) => {
+      (checked: boolean) => {
         setState((state) => ({
           ...state,
-          idleTimeoutEnabled: value ?? false,
+          idleTimeoutEnabled: checked,
         }));
       },
       [setState]
     );
 
     const onIdleTimeoutSecondsChange = useCallback(
-      (_, value?: string) => {
+      (e: React.ChangeEvent<HTMLInputElement>) => {
         setState((prev) => ({
           ...prev,
-          idleTimeoutSeconds: parseIntegerAllowLeadingZeros(value),
+          idleTimeoutSeconds: parseIntegerAllowLeadingZeros(e.target.value),
         }));
       },
       [setState]
     );
 
     return (
-      <Widget className={styles.widget}>
-        <TextField
-          type="text"
-          label={renderToString(
-            "CookieLifetimeConfigurationScreen.session-lifetime.label"
-          )}
-          description={renderToString(
-            "CookieLifetimeConfigurationScreen.session-lifetime.description",
-            { hostname }
-          )}
-          value={state.sessionLifetimeSeconds?.toFixed(0) ?? ""}
-          onChange={onSessionLifetimeSecondsChange}
-        />
-        <Toggle
-          label={renderToString(
-            "CookieLifetimeConfigurationScreen.invalidate-session-after-idling.label"
-          )}
-          description={renderToString(
-            "CookieLifetimeConfigurationScreen.invalidate-session-after-idling.description"
-          )}
-          checked={state.idleTimeoutEnabled}
-          onChange={onIdleTimeoutEnabledChange}
-        />
-        <TextField
-          type="text"
-          disabled={!state.idleTimeoutEnabled}
-          label={renderToString(
-            "CookieLifetimeConfigurationScreen.idle-timeout.label"
-          )}
-          description={renderToString(
-            "CookieLifetimeConfigurationScreen.idle-timeout.description"
-          )}
-          value={state.idleTimeoutSeconds?.toFixed(0) ?? ""}
-          onChange={onIdleTimeoutSecondsChange}
-        />
-      </Widget>
-    );
-  };
-
-interface CookieLifetimeConfigurationScreenContentProps {
-  form: AppConfigFormModel<FormState>;
-}
-
-const CookieLifetimeConfigurationScreenContent: React.VFC<CookieLifetimeConfigurationScreenContentProps> =
-  function CookieLifetimeConfigurationScreenContent(props) {
-    const { form } = props;
-    return (
-      <ScreenContent>
-        <ScreenTitle className={styles.widget}>
-          <FormattedMessage id="CookieLifetimeConfigurationScreen.title" />
-        </ScreenTitle>
-        <Widget className={styles.widget}>
-          <Text>
+      <ScreenContent className={cn(isDirty ? styles.contentWithSaveBar : null)}>
+        <div
+          ref={contentWidthAnchorRef}
+          className={cn(styles.widget, styles.pageHeader)}
+        >
+          <Text as="p" size="5" weight="bold" className={styles.pageTitle}>
+            <FormattedMessage id="CookieLifetimeConfigurationScreen.title" />
+          </Text>
+          <Text as="p" size="2" color="gray" className={styles.pageDescription}>
             <FormattedMessage
               id="CookieLifetimeConfigurationScreen.description"
               values={{
-                hostname: getHostname(form.state.publicOrigin),
+                hostname,
                 // eslint-disable-next-line react/no-unstable-nested-components
                 b: (chunks: React.ReactNode) => <b>{chunks}</b>,
               }}
             />
           </Text>
-        </Widget>
-        <SessionConfigurationWidget form={form} />
+        </div>
+
+        <div
+          className={cn(
+            styles.widget,
+            "border border-[var(--gray-5)] rounded-lg p-6 flex gap-8 bg-white",
+            isDirty && styles.settingsCardSaveBarClearance
+          )}
+        >
+          <Text as="p" size="3" weight="medium" className="shrink-0 w-[200px]">
+            <FormattedMessage id="CookieLifetimeConfigurationScreen.settings.label" />
+          </Text>
+          <div className="flex-1 flex flex-col gap-4 min-w-0">
+          <TextField
+            size="2"
+            labelSize="2"
+            type="text"
+            label={
+              <FormattedMessage id="CookieLifetimeConfigurationScreen.session-lifetime.label" />
+            }
+            hint={
+              <FormattedMessage
+                id="CookieLifetimeConfigurationScreen.session-lifetime.description"
+                values={{ hostname }}
+              />
+            }
+            value={state.sessionLifetimeSeconds?.toFixed(0) ?? ""}
+            onChange={onSessionLifetimeSecondsChange}
+          />
+          <div className="flex flex-col gap-1">
+            <Toggle
+              checked={state.idleTimeoutEnabled}
+              onCheckedChange={onIdleTimeoutEnabledChange}
+              text={
+                <FormattedMessage id="CookieLifetimeConfigurationScreen.invalidate-session-after-idling.label" />
+              }
+            />
+            <Text as="p" size="1" color="gray">
+              <FormattedMessage id="CookieLifetimeConfigurationScreen.invalidate-session-after-idling.description" />
+            </Text>
+          </div>
+          <TextField
+            size="2"
+            labelSize="2"
+            type="text"
+            disabled={!state.idleTimeoutEnabled}
+            label={
+              <FormattedMessage id="CookieLifetimeConfigurationScreen.idle-timeout.label" />
+            }
+            hint={
+              <FormattedMessage id="CookieLifetimeConfigurationScreen.idle-timeout.description" />
+            }
+            value={state.idleTimeoutSeconds?.toFixed(0) ?? ""}
+            onChange={onIdleTimeoutSecondsChange}
+          />
+          </div>
+        </div>
+
+        <SaveFunctionBar anchorRef={contentWidthAnchorRef} />
       </ScreenContent>
     );
   };
@@ -193,7 +207,7 @@ const CookieLifetimeConfigurationScreen: React.VFC =
     }
 
     return (
-      <FormContainer form={form}>
+      <FormContainer form={form} hideFooterComponent={true}>
         <CookieLifetimeConfigurationScreenContent form={form} />
       </FormContainer>
     );
diff --git a/portal/src/graphql/portal/EditConfigurationScreen.module.css b/portal/src/graphql/portal/EditConfigurationScreen.module.css
index 9abbeaa0a6c..3ebf5c00e75 100644
--- a/portal/src/graphql/portal/EditConfigurationScreen.module.css
+++ b/portal/src/graphql/portal/EditConfigurationScreen.module.css
@@ -1,7 +1,43 @@
 .widget {
-  @apply col-span-8 tablet:col-span-full;
+  grid-column: 1 / span 9;
+
+  @apply tablet:col-span-full;
+}
+
+.pageHeader {
+  @apply flex flex-col gap-2;
+}
+
+.pageTitle {
+  margin: 0;
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 600;
+  color: var(--gray-12);
+}
+
+.contentWithSaveBar {
+  padding-bottom: 5.5rem;
+}
+
+.settingsCardSaveBarClearance {
+  margin-bottom: 5.5rem;
+}
+
+.editorCard {
+  @apply min-w-0 overflow-hidden rounded-xl border border-solid;
+  border-color: var(--gray-a6);
+}
+
+.editorCardHeader {
+  @apply border-b border-solid px-6 py-4;
+  border-color: var(--gray-a6);
 }
 
 .codeEditor {
-  height: 70vh; /* 680 / 960 ref https://www.figma.com/design/msiE4O5imHONAG5EjhZeiZ/Authgear-UI?node-id=10346-12112&t=ubpO59nWLEfmakyL-0 */
+  display: block;
+  height: 70vh;
+  margin: 0;
+  border: none;
+  border-radius: 0;
 }
diff --git a/portal/src/graphql/portal/EditConfigurationScreen.tsx b/portal/src/graphql/portal/EditConfigurationScreen.tsx
index 90d60101221..a6b5d01f28c 100644
--- a/portal/src/graphql/portal/EditConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/EditConfigurationScreen.tsx
@@ -1,15 +1,9 @@
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import cn from "classnames";
+import { Text } from "@radix-ui/themes";
 import ScreenContent from "../../ScreenContent";
-import ScreenTitle from "../../ScreenTitle";
 import { FormattedMessage } from "../../intl";
-import EditTemplatesWidget, {
-  EditTemplatesWidgetSection,
-} from "./EditTemplatesWidget";
-import {
-  Dialog,
-  DialogFooter,
-  IDialogContentProps,
-} from "@fluentui/react/lib/Dialog";
+import CodeEditor from "../../CodeEditor";
 
 import styles from "./EditConfigurationScreen.module.css";
 import { useParams, useNavigate } from "react-router-dom";
@@ -28,8 +22,9 @@ import {
 } from "../../util/resource";
 import { RESOURCE_AUTHGEAR_YAML } from "../../resources";
 import { useAppAndSecretConfigQuery } from "./query/appAndSecretConfigQuery";
-import DefaultButton from "../../DefaultButton";
-import PrimaryButton from "../../PrimaryButton";
+import { ConfirmationDialog } from "../../components/v2/ConfirmationDialog/ConfirmationDialog";
+import { SaveFunctionBar } from "../../components/v2/SaveFunctionBar/SaveFunctionBar";
+import { useFormContainerBaseContext } from "../../FormContainerBase";
 
 interface FormModel {
   isLoading: boolean;
@@ -51,6 +46,88 @@ const AUTHGEAR_YAML_RESOURCE_SPECIFIER: ResourceSpecifier = {
   extension: null,
 };
 
+interface EditConfigurationContentProps {
+  rawAuthgearYAML: string | null;
+  onChange: (value: string | undefined, e: unknown) => void;
+  isWarningDialogVisible: boolean;
+  onDismissWarning: () => void;
+  onCancelWarning: () => void;
+}
+
+const EditConfigurationContent: React.VFC<EditConfigurationContentProps> =
+  function EditConfigurationContent(props) {
+    const {
+      rawAuthgearYAML,
+      onChange,
+      isWarningDialogVisible,
+      onDismissWarning,
+      onCancelWarning,
+    } = props;
+    const { isDirty } = useFormContainerBaseContext();
+    const contentWidthAnchorRef = useRef<HTMLDivElement>(null);
+
+    return (
+      <>
+        <ConfirmationDialog
+          open={isWarningDialogVisible}
+          onOpenChange={() => {}}
+          maxWidth="500px"
+          title={
+            <FormattedMessage id="EditConfigurationScreen.warning.title" />
+          }
+          description={
+            <FormattedMessage
+              id="EditConfigurationScreen.warning.content"
+              values={{
+                // eslint-disable-next-line react/no-unstable-nested-components
+                br: () => <br />,
+              }}
+            />
+          }
+          confirmText={
+            <FormattedMessage id="EditConfigurationScreen.warning.confirm" />
+          }
+          cancelText={<FormattedMessage id="cancel" />}
+          onConfirm={onDismissWarning}
+          onCancel={onCancelWarning}
+          confirmColor="indigo"
+        />
+        <ScreenContent
+          className={cn(isDirty ? styles.contentWithSaveBar : null)}
+        >
+          <div
+            ref={contentWidthAnchorRef}
+            className={cn(styles.widget, styles.pageHeader)}
+          >
+            <h1 className={styles.pageTitle}>
+              <FormattedMessage id="EditConfigurationScreen.title" />
+            </h1>
+          </div>
+          <div
+            className={cn(
+              styles.widget,
+              styles.editorCard,
+              isDirty && styles.settingsCardSaveBarClearance
+            )}
+          >
+            <div className={styles.editorCardHeader}>
+              <Text as="p" size="3" weight="medium">
+                <FormattedMessage id="EditConfigurationScreen.config.label" />
+              </Text>
+            </div>
+            <CodeEditor
+              className={styles.codeEditor}
+              language="yaml"
+              value={rawAuthgearYAML ?? ""}
+              onChange={onChange}
+            />
+          </div>
+          <SaveFunctionBar anchorRef={contentWidthAnchorRef} />
+        </ScreenContent>
+      </>
+    );
+  };
+
 const EditConfigurationScreen: React.VFC = function EditConfigurationScreen() {
   const { appID } = useParams() as { appID: string };
   const navigate = useNavigate();
@@ -60,26 +137,14 @@ const EditConfigurationScreen: React.VFC = function EditConfigurationScreen() {
 
   const [isWarningDialogVisible, setWarningDialogVisible] = useState(true);
 
-  const onDismiss = useCallback(() => {
+  const onDismissWarning = useCallback(() => {
     setWarningDialogVisible(false);
   }, []);
 
-  const onCancel = useCallback(() => {
+  const onCancelWarning = useCallback(() => {
     navigate(-1);
   }, [navigate]);
 
-  const dialogContentProps: IDialogContentProps = useMemo(() => {
-    return {
-      title: (
-        <FormattedMessage id="EditConfigurationScreen.warning.title" />
-      ) as unknown as string,
-      subText: (
-        <FormattedMessage id="EditConfigurationScreen.warning.content" />
-      ) as unknown as string,
-      showCloseButton: false,
-    };
-  }, []);
-
   const form: FormModel = useMemo(
     () => ({
       ...resourceForm,
@@ -131,60 +196,15 @@ const EditConfigurationScreen: React.VFC = function EditConfigurationScreen() {
     return <ShowError error={form.loadError} onRetry={form.reload} />;
   }
 
-  const authgearYAMLSections: [EditTemplatesWidgetSection] = [
-    {
-      key: "authgear.yaml",
-      title: null,
-      items: [
-        {
-          key: "authgear.yaml",
-          title: null,
-          editor: "code",
-          language: "yaml",
-
-          value: rawAuthgearYAML ?? "",
-          onChange,
-        },
-      ],
-    },
-  ];
-
   return (
-    <FormContainer form={form}>
-      <Dialog
-        hidden={!isWarningDialogVisible}
-        dialogContentProps={dialogContentProps}
-        modalProps={{
-          isBlocking: true,
-          styles: {
-            main: { "@media (min-width: 480px)": { maxWidth: "500px" } },
-          },
-        }}
-        onDismiss={onDismiss}
-      >
-        <DialogFooter>
-          <DefaultButton
-            onClick={onCancel}
-            text={<FormattedMessage id="cancel" />}
-          />
-          <PrimaryButton
-            onClick={onDismiss}
-            text={
-              <FormattedMessage id="EditConfigurationScreen.warning.confirm" />
-            }
-          />
-        </DialogFooter>
-      </Dialog>
-      <ScreenContent>
-        <ScreenTitle className={styles.widget}>
-          <FormattedMessage id="EditConfigurationScreen.title" />
-        </ScreenTitle>
-        <EditTemplatesWidget
-          className={styles.widget}
-          codeEditorClassname={styles.codeEditor}
-          sections={authgearYAMLSections}
-        />
-      </ScreenContent>
+    <FormContainer form={form} hideFooterComponent={true}>
+      <EditConfigurationContent
+        rawAuthgearYAML={rawAuthgearYAML}
+        onChange={onChange}
+        isWarningDialogVisible={isWarningDialogVisible}
+        onDismissWarning={onDismissWarning}
+        onCancelWarning={onCancelWarning}
+      />
     </FormContainer>
   );
 };
diff --git a/portal/src/graphql/portal/EndpointDirectAccessScreen.module.css b/portal/src/graphql/portal/EndpointDirectAccessScreen.module.css
index 876e663d9e9..e6fbb36fafe 100644
--- a/portal/src/graphql/portal/EndpointDirectAccessScreen.module.css
+++ b/portal/src/graphql/portal/EndpointDirectAccessScreen.module.css
@@ -1,9 +1,34 @@
 .widget {
-  grid-column: 1 / span 8;
+  grid-column: 1 / span 9;
 
   @apply tablet:col-span-full;
 }
 
+.pageHeader {
+  @apply flex flex-col gap-2;
+}
+
+.pageTitle {
+  margin: 0;
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 600;
+  color: var(--gray-12);
+}
+
+.pageDescription {
+  color: var(--gray-a11);
+}
+
+.contentWithSaveBar {
+  padding-bottom: 5.5rem;
+}
+
+/* Space below the settings card when the fixed Save bar is visible */
+.settingsCardSaveBarClearance {
+  margin-bottom: 5.5rem;
+}
+
 .textFieldInOption {
-  @apply ml-6 my-1;
+  @apply ml-6;
 }
diff --git a/portal/src/graphql/portal/EndpointDirectAccessScreen.tsx b/portal/src/graphql/portal/EndpointDirectAccessScreen.tsx
index 5d7af8f1287..2e83238e75f 100644
--- a/portal/src/graphql/portal/EndpointDirectAccessScreen.tsx
+++ b/portal/src/graphql/portal/EndpointDirectAccessScreen.tsx
@@ -1,39 +1,26 @@
-import React, { useCallback, useContext, useMemo } from "react";
+import React, { useCallback, useMemo, useRef } from "react";
 import cn from "classnames";
-import {
-  Text,
-  ChoiceGroup,
-  IChoiceGroupOption,
-  IChoiceGroupOptionProps,
-  IChoiceGroupStyles,
-  ITextFieldStyles,
-  useTheme,
-} from "@fluentui/react";
+import { Flex, RadioGroup, Text } from "@radix-ui/themes";
 import {
   AppConfigFormModel,
   useAppConfigForm,
 } from "../../hook/useAppConfigForm";
-import { Context, FormattedMessage } from "../../intl";
-import {
-  FormContainerBase,
-  useFormContainerBaseContext,
-} from "../../FormContainerBase";
+import { FormattedMessage } from "../../intl";
 import { produce } from "immer";
-import { useId } from "../../hook/useId";
-import FormTextField from "../../FormTextField";
-import PrimaryButton from "../../PrimaryButton";
+import FormContainer from "../../FormContainer";
 import { PortalAPIAppConfig } from "../../types";
 import styles from "./EndpointDirectAccessScreen.module.css";
-import { useParams, Link } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { useDomainsQuery } from "./query/domainsQuery";
 import ShowLoading from "../../ShowLoading";
 import ShowError from "../../ShowError";
-import ScreenLayoutScrollView from "../../ScreenLayoutScrollView";
 import ScreenContent from "../../ScreenContent";
 import { Domain } from "./globalTypes.generated";
-import NavBreadcrumb, { BreadcrumbItem } from "../../NavBreadcrumb";
-import HorizontalDivider from "../../HorizontalDivider";
 import { getHostFromOrigin } from "../../util/domain";
+import { TextField } from "../../components/v2/TextField/TextField";
+import { SaveFunctionBar } from "../../components/v2/SaveFunctionBar/SaveFunctionBar";
+import { useFormContainerBaseContext } from "../../FormContainerBase";
+import Link from "../../Link";
 
 type ChoiceOption =
   | "ShowError"
@@ -89,8 +76,8 @@ function makeConstructRedirectURLFormState(domains: Domain[]) {
           ? "ShowError"
           : "ShowBrandPage"
         : default_redirect_uri === ""
-        ? "ShowLoginAndRedirectToSettings"
-        : "ShowLoginAndRedirectToCustomURL";
+          ? "ShowLoginAndRedirectToSettings"
+          : "ShowLoginAndRedirectToCustomURL";
 
     return {
       public_origin,
@@ -148,256 +135,186 @@ function constructConfigFromRedirectURLFormState(
   });
 }
 
-interface RedirectURLTextFieldProps {
-  fieldName: string;
-  value: string;
-  onChangeValue: (value: string) => void;
-
-  className?: string;
-  label?: React.ReactNode;
-  description?: React.ReactNode;
-  disabled?: boolean;
-  required?: boolean;
-}
-const RedirectURLTextField: React.VFC<RedirectURLTextFieldProps> =
-  function RedirectURLTextField(props) {
-    const {
-      fieldName,
-      className,
-      label,
-      description,
-      value,
-      onChangeValue,
-      disabled,
-      required,
-    } = props;
-    const id = useId();
-    const theme = useTheme();
-    const onChange = useCallback(
-      (_e: React.FormEvent<any>, value?: string) => {
-        onChangeValue(value ?? "");
-      },
-      [onChangeValue]
-    );
-
-    const textFieldStyles: Partial<ITextFieldStyles> = {
-      description: {
-        color: disabled ? theme.semanticColors.disabledText : "",
-      },
-    };
-
-    return (
-      <FormTextField
-        id={id}
-        fieldName={fieldName}
-        parentJSONPointer="/ui"
-        className={className}
-        /* @ts-expect-error label can be React.ReactNode */
-        label={label}
-        /* @ts-expect-error description can be React.ReactNode */
-        description={description}
-        value={value}
-        onChange={onChange}
-        disabled={disabled}
-        required={required}
-        styles={textFieldStyles}
-        placeholder="https://"
-      />
-    );
-  };
-
-// Workaround for hidden input of ChoiceGroupOption
-// ref: https://github.com/microsoft/fluentui/issues/21252#issuecomment-1168690443
-const WORKAROUND_HIDDEN_INPUT_OF_ChoiceGroupOption = {
-  input: {
-    zIndex: -1,
-  },
-};
-
 interface EndpointDirectAccessConfigOptionSelectorProps {
-  className?: string;
   form: AppConfigFormModel<RedirectURLFormState>;
   onChangeDirectAccessOption: (key: ChoiceOption) => void;
   onChangeBrandPageURL: (url: string) => void;
   onChangePostLoginURL: (url: string) => void;
-  onChangePostLogoutURL: (url: string) => void;
 }
 
 const EndpointDirectAccessConfigOptionSelector: React.VFC<EndpointDirectAccessConfigOptionSelectorProps> =
   function EndpointDirectAccessConfigOptionSelector(props) {
-    const {
-      className,
-      form,
-      onChangeDirectAccessOption,
-      onChangeBrandPageURL,
-      onChangePostLoginURL,
-    } = props;
-    const { renderToString } = useContext(Context);
+    const { form, onChangeDirectAccessOption, onChangeBrandPageURL, onChangePostLoginURL } =
+      props;
     const { appID } = useParams() as { appID: string };
 
     const {
+      currentChoiceOption,
       ShowLoginAndRedirectToSettingsDisabled,
       ShowLoginAndRedirectToCustomURLDisabled,
     } = form.state;
 
     const onOptionsChange = useCallback(
-      (
-        _?: React.FormEvent<HTMLElement | HTMLInputElement>,
-        option?: IChoiceGroupOption
-      ) => {
-        if (!option?.key) return;
-        onChangeDirectAccessOption(option.key as ChoiceOption);
+      (value: string) => {
+        onChangeDirectAccessOption(value as ChoiceOption);
       },
       [onChangeDirectAccessOption]
     );
 
-    const ChoiceGroupStyles: Partial<IChoiceGroupStyles> = {
-      flexContainer: {
-        selectors: {
-          ".ms-ChoiceField": {
-            display: "block",
-          },
-        },
-      },
-    };
-
-    const onRenderFieldShowBrandPage = useCallback(
-      (
-        props?: IChoiceGroupOption & IChoiceGroupOptionProps,
-        render?: (
-          props?: IChoiceGroupOption & IChoiceGroupOptionProps
-        ) => JSX.Element | null
-      ) => {
-        const checked = props?.checked ?? false;
-        return (
-          <>
-            {render?.(props)}
-            {checked ? (
-              <RedirectURLTextField
-                className={cn(styles.textFieldInOption)}
-                fieldName="brand_page_uri"
-                label={
-                  <FormattedMessage id="EndpointDirectAccessScreen.section1.option.ShowBrandPage.input.label" />
-                }
-                value={form.state.brand_page_uri}
-                onChangeValue={onChangeBrandPageURL}
-              />
-            ) : null}
-          </>
-        );
+    const onChangeBrandPage = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChangeBrandPageURL(e.target.value);
       },
-      [form.state.brand_page_uri, onChangeBrandPageURL]
+      [onChangeBrandPageURL]
     );
 
-    const onRenderFieldShowLoginAndRedirectToCustomURL = useCallback(
-      (
-        props?: IChoiceGroupOption & IChoiceGroupOptionProps,
-        render?: (
-          props?: IChoiceGroupOption & IChoiceGroupOptionProps
-        ) => JSX.Element | null
-      ) => {
-        const checked = props?.checked ?? false;
-        return (
-          <>
-            {render?.(props)}
-            {checked ? (
-              <RedirectURLTextField
-                className={cn(styles.textFieldInOption)}
-                fieldName="default_redirect_uri"
-                label={
-                  <FormattedMessage id="EndpointDirectAccessScreen.section1.option.ShowLoginAndRedirectToCustomURL.input.label" />
-                }
-                description={
-                  <FormattedMessage id="EndpointDirectAccessScreen.section1.option.ShowLoginAndRedirectToCustomURL.input.description" />
-                }
-                value={form.state.default_redirect_uri}
-                onChangeValue={onChangePostLoginURL}
-              />
-            ) : null}
-          </>
-        );
+    const onChangePostLogin = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChangePostLoginURL(e.target.value);
       },
-      [form.state.default_redirect_uri, onChangePostLoginURL]
+      [onChangePostLoginURL]
     );
 
-    const options: IChoiceGroupOption[] = [
-      {
-        key: "ShowError",
-        text: renderToString(
-          "EndpointDirectAccessScreen.section1.option.ShowError.label"
-        ),
-      },
-      {
-        key: "ShowBrandPage",
-        text: renderToString(
-          "EndpointDirectAccessScreen.section1.option.ShowBrandPage.label"
-        ),
-        styles: WORKAROUND_HIDDEN_INPUT_OF_ChoiceGroupOption,
-        onRenderField: onRenderFieldShowBrandPage,
-      },
-      {
-        key: "ShowLoginAndRedirectToSettings",
-        disabled: ShowLoginAndRedirectToSettingsDisabled,
-        // @ts-expect-error text can be React.Element.
-        text: ShowLoginAndRedirectToSettingsDisabled ? (
-          <FormattedMessage
-            id="EndpointDirectAccessScreen.section1.option.ShowLoginAndRedirectToSettings.label--disabled"
-            values={{
-              // eslint-disable-next-line react/no-unstable-nested-components
-              reactRouterLink: (chunks: React.ReactNode) => (
-                <Link to={`/project/${appID}/branding/custom-domains`}>
-                  {chunks}
-                </Link>
-              ),
-            }}
-          />
-        ) : (
-          <FormattedMessage id="EndpointDirectAccessScreen.section1.option.ShowLoginAndRedirectToSettings.label" />
-        ),
-      },
-      {
-        key: "ShowLoginAndRedirectToCustomURL",
-        disabled: ShowLoginAndRedirectToCustomURLDisabled,
-        // @ts-expect-error text can be React.Element.
-        text: ShowLoginAndRedirectToSettingsDisabled ? (
-          <FormattedMessage
-            id="EndpointDirectAccessScreen.section1.option.ShowLoginAndRedirectToCustomURL.label--disabled"
-            values={{
-              // eslint-disable-next-line react/no-unstable-nested-components
-              reactRouterLink: (chunks: React.ReactNode) => (
-                <Link to={`/project/${appID}/branding/custom-domains`}>
-                  {chunks}
-                </Link>
-              ),
-            }}
-          />
-        ) : (
-          <FormattedMessage id="EndpointDirectAccessScreen.section1.option.ShowLoginAndRedirectToCustomURL.label" />
-        ),
-        onRenderField: onRenderFieldShowLoginAndRedirectToCustomURL,
-      },
-    ];
+    const customDomainsLink = useCallback(
+      (chunks: React.ReactNode) => (
+        <Link to={`/project/${appID}/branding/custom-domains`}>{chunks}</Link>
+      ),
+      [appID]
+    );
 
     return (
-      <ChoiceGroup
-        className={className}
-        options={options}
-        styles={ChoiceGroupStyles}
-        selectedKey={form.state.currentChoiceOption}
-        onChange={onOptionsChange}
-      />
+      <RadioGroup.Root
+        value={currentChoiceOption}
+        onValueChange={onOptionsChange}
+      >
+        <Flex direction="column" gap="3">
+          <Text as="label" size="2">
+            <Flex gap="2" align="start">
+              <RadioGroup.Item value="ShowError" />
+              <FormattedMessage id="EndpointDirectAccessScreen.section1.option.ShowError.label" />
+            </Flex>
+          </Text>
+
+          <div className="flex flex-col gap-2">
+            <Text as="label" size="2">
+              <Flex gap="2" align="start">
+                <RadioGroup.Item value="ShowBrandPage" />
+                <FormattedMessage id="EndpointDirectAccessScreen.section1.option.ShowBrandPage.label" />
+              </Flex>
+            </Text>
+            {currentChoiceOption === "ShowBrandPage" ? (
+              <div className={styles.textFieldInOption}>
+                <TextField
+                  size="2"
+                  labelSize="2"
+                  type="text"
+                  placeholder="https://"
+                  label={
+                    <FormattedMessage id="EndpointDirectAccessScreen.section1.option.ShowBrandPage.input.label" />
+                  }
+                  value={form.state.brand_page_uri}
+                  onChange={onChangeBrandPage}
+                  parentJSONPointer="/ui"
+                  fieldName="brand_page_uri"
+                />
+              </div>
+            ) : null}
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <Flex gap="2" align="start">
+              <RadioGroup.Item
+                value="ShowLoginAndRedirectToSettings"
+                disabled={ShowLoginAndRedirectToSettingsDisabled}
+                className="shrink-0 mt-0.5"
+              />
+              <div className="flex flex-col gap-1 min-w-0">
+                <Text
+                  as="span"
+                  size="2"
+                  color={ShowLoginAndRedirectToSettingsDisabled ? "gray" : undefined}
+                >
+                  <FormattedMessage id="EndpointDirectAccessScreen.section1.option.ShowLoginAndRedirectToSettings.label" />
+                </Text>
+                {ShowLoginAndRedirectToSettingsDisabled ? (
+                  <Text as="p" size="1" color="gray">
+                    <FormattedMessage
+                      id="EndpointDirectAccessScreen.section1.option.requires-custom-domain.hint"
+                      values={{
+                        // eslint-disable-next-line react/no-unstable-nested-components
+                        reactRouterLink: customDomainsLink,
+                      }}
+                    />
+                  </Text>
+                ) : null}
+              </div>
+            </Flex>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <Flex gap="2" align="start">
+              <RadioGroup.Item
+                value="ShowLoginAndRedirectToCustomURL"
+                disabled={ShowLoginAndRedirectToCustomURLDisabled}
+                className="shrink-0 mt-0.5"
+              />
+              <div className="flex flex-col gap-1 min-w-0">
+                <Text
+                  as="span"
+                  size="2"
+                  color={ShowLoginAndRedirectToCustomURLDisabled ? "gray" : undefined}
+                >
+                  <FormattedMessage id="EndpointDirectAccessScreen.section1.option.ShowLoginAndRedirectToCustomURL.label" />
+                </Text>
+                {ShowLoginAndRedirectToCustomURLDisabled ? (
+                  <Text as="p" size="1" color="gray">
+                    <FormattedMessage
+                      id="EndpointDirectAccessScreen.section1.option.requires-custom-domain.hint"
+                      values={{
+                        // eslint-disable-next-line react/no-unstable-nested-components
+                        reactRouterLink: customDomainsLink,
+                      }}
+                    />
+                  </Text>
+                ) : null}
+              </div>
+            </Flex>
+            {currentChoiceOption === "ShowLoginAndRedirectToCustomURL" ? (
+              <div className={styles.textFieldInOption}>
+                <TextField
+                  size="2"
+                  labelSize="2"
+                  type="text"
+                  placeholder="https://"
+                  label={
+                    <FormattedMessage id="EndpointDirectAccessScreen.section1.option.ShowLoginAndRedirectToCustomURL.input.label" />
+                  }
+                  hint={
+                    <FormattedMessage id="EndpointDirectAccessScreen.section1.option.ShowLoginAndRedirectToCustomURL.input.description" />
+                  }
+                  value={form.state.default_redirect_uri}
+                  onChange={onChangePostLogin}
+                  parentJSONPointer="/ui"
+                  fieldName="default_redirect_uri"
+                />
+              </div>
+            ) : null}
+          </div>
+        </Flex>
+      </RadioGroup.Root>
     );
   };
 
-interface RedirectURLFormProps {
+interface EndpointDirectAccessContentProps {
   form: AppConfigFormModel<RedirectURLFormState>;
 }
-const RedirectURLForm: React.VFC<RedirectURLFormProps> =
-  function RedirectURLForm(props) {
+
+const EndpointDirectAccessContent: React.VFC<EndpointDirectAccessContentProps> =
+  function EndpointDirectAccessContent(props) {
     const { form } = props;
     const { public_origin: publicOrigin } = form.state;
-
-    const { canSave, onSubmit } = useFormContainerBaseContext();
+    const { isDirty } = useFormContainerBaseContext();
+    const contentWidthAnchorRef = useRef<HTMLDivElement>(null);
 
     const onChangeBrandPageURL = useCallback(
       (url: string) => {
@@ -422,10 +339,10 @@ const RedirectURLForm: React.VFC<RedirectURLFormProps> =
     );
 
     const onChangePostLogoutURL = useCallback(
-      (url: string) => {
+      (e: React.ChangeEvent<HTMLInputElement>) => {
         form.setState((prev) =>
           produce(prev, (draft) => {
-            draft.default_post_logout_redirect_uri = url;
+            draft.default_post_logout_redirect_uri = e.target.value;
           })
         );
       },
@@ -444,94 +361,81 @@ const RedirectURLForm: React.VFC<RedirectURLFormProps> =
     );
 
     return (
-      <form
-        className={cn(styles.widget, "flex flex-col gap-12")}
-        onSubmit={onSubmit}
-      >
-        <div /* this div exists for gap to work, do not remove */>
-          <div className="flex flex-col gap-6">
-            <Text as="h2">
-              <FormattedMessage
-                id="EndpointDirectAccessScreen.section1.description"
-                values={{
-                  endpoint: publicOrigin,
-                  // eslint-disable-next-line react/no-unstable-nested-components
-                  strong: (chunks: React.ReactNode) => (
-                    <strong>{chunks}</strong>
-                  ),
-                }}
-              />
-            </Text>
-            <EndpointDirectAccessConfigOptionSelector
-              form={form}
-              onChangeDirectAccessOption={onChangeDirectAccessOption}
-              onChangeBrandPageURL={onChangeBrandPageURL}
-              onChangePostLoginURL={onChangePostLoginURL}
-              onChangePostLogoutURL={onChangePostLogoutURL}
-            />
-          </div>
+      <ScreenContent className={cn(isDirty ? styles.contentWithSaveBar : null)}>
+        <div
+          ref={contentWidthAnchorRef}
+          className={cn(styles.widget, styles.pageHeader)}
+        >
+          <Text as="p" size="5" weight="bold" className={styles.pageTitle}>
+            <FormattedMessage id="EndpointDirectAccessScreen.title" />
+          </Text>
+          <Text as="p" size="2" color="gray" className={styles.pageDescription}>
+            <FormattedMessage id="EndpointDirectAccessScreen.description" />
+          </Text>
+        </div>
 
-          <HorizontalDivider className="my-12" />
-
-          <div className="flex flex-col gap-4">
-            <Text as="h2" className="block">
-              <FormattedMessage
-                id="EndpointDirectAccessScreen.section2.description"
-                values={{
-                  endpoint: publicOrigin,
-                  // eslint-disable-next-line react/no-unstable-nested-components
-                  strong: (chunks: React.ReactNode) => (
-                    <strong>{chunks}</strong>
-                  ),
-                }}
+        <div
+          className={cn(
+            styles.widget,
+            "border border-[var(--gray-5)] rounded-lg p-6 flex gap-8 bg-white",
+            isDirty && styles.settingsCardSaveBarClearance
+          )}
+        >
+          <Text as="p" size="3" weight="medium" className="shrink-0 w-[200px]">
+            <FormattedMessage id="EndpointDirectAccessScreen.settings.label" />
+          </Text>
+          <div className="flex-1 flex flex-col gap-6 min-w-0">
+            <div className="flex flex-col gap-4">
+              <Text as="p" size="2" color="gray">
+                <FormattedMessage
+                  id="EndpointDirectAccessScreen.section1.description"
+                  values={{
+                    endpoint: publicOrigin,
+                    // eslint-disable-next-line react/no-unstable-nested-components
+                    strong: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
+                  }}
+                />
+              </Text>
+              <EndpointDirectAccessConfigOptionSelector
+                form={form}
+                onChangeDirectAccessOption={onChangeDirectAccessOption}
+                onChangeBrandPageURL={onChangeBrandPageURL}
+                onChangePostLoginURL={onChangePostLoginURL}
               />
-            </Text>
-
-            <RedirectURLTextField
-              fieldName="default_post_logout_redirect_uri"
-              value={form.state.default_post_logout_redirect_uri}
-              label={
-                <FormattedMessage id="EndpointDirectAccessScreen.section2.input.label" />
-              }
-              onChangeValue={onChangePostLogoutURL}
-            />
+            </div>
+
+            <hr className="border-0 border-t border-[var(--gray-5)]" />
+
+            <div className="flex flex-col gap-4">
+              <Text as="p" size="2" color="gray">
+                <FormattedMessage
+                  id="EndpointDirectAccessScreen.section2.description"
+                  values={{
+                    endpoint: publicOrigin,
+                    // eslint-disable-next-line react/no-unstable-nested-components
+                    strong: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
+                  }}
+                />
+              </Text>
+              <TextField
+                size="2"
+                labelSize="2"
+                type="text"
+                placeholder="https://"
+                label={
+                  <FormattedMessage id="EndpointDirectAccessScreen.section2.input.label" />
+                }
+                value={form.state.default_post_logout_redirect_uri}
+                onChange={onChangePostLogoutURL}
+                parentJSONPointer="/ui"
+                fieldName="default_post_logout_redirect_uri"
+              />
+            </div>
           </div>
         </div>
 
-        <PrimaryButton
-          className="self-start"
-          type="submit"
-          disabled={!canSave}
-          text={<FormattedMessage id="save" />}
-        />
-      </form>
-    );
-  };
-
-interface EndpointDirectAccessContentProps {
-  form: AppConfigFormModel<RedirectURLFormState>;
-}
-
-const EndpointDirectAccessContent: React.VFC<EndpointDirectAccessContentProps> =
-  function EndpointDirectAccessContent(props) {
-    const { form } = props;
-
-    const navBreadcrumbItems: BreadcrumbItem[] = useMemo(() => {
-      return [
-        {
-          to: ".",
-          label: <FormattedMessage id="EndpointDirectAccessScreen.title" />,
-        },
-      ];
-    }, []);
-
-    return (
-      <ScreenLayoutScrollView>
-        <ScreenContent>
-          <NavBreadcrumb className={styles.widget} items={navBreadcrumbItems} />
-          <RedirectURLForm form={form} />
-        </ScreenContent>
-      </ScreenLayoutScrollView>
+        <SaveFunctionBar anchorRef={contentWidthAnchorRef} />
+      </ScreenContent>
     );
   };
 
@@ -566,9 +470,9 @@ function EndpointDirectAccessScreen1(props: EndpointDirectAccessScreen1Props) {
   }
 
   return (
-    <FormContainerBase form={redirectURLForm}>
+    <FormContainer form={redirectURLForm} hideFooterComponent={true}>
       <EndpointDirectAccessContent form={redirectURLForm} />
-    </FormContainerBase>
+    </FormContainer>
   );
 }
 
diff --git a/portal/src/graphql/portal/HookConfigurationScreen.module.css b/portal/src/graphql/portal/HookConfigurationScreen.module.css
index 8016800dfe4..d59a1cfe9fd 100644
--- a/portal/src/graphql/portal/HookConfigurationScreen.module.css
+++ b/portal/src/graphql/portal/HookConfigurationScreen.module.css
@@ -4,6 +4,98 @@
   @apply tablet:col-span-full;
 }
 
+.pageHeader {
+  grid-column: 1 / span 9;
+  @apply tablet:col-span-full;
+  @apply flex flex-col gap-2;
+}
+
+.pageTitle {
+  margin: 0;
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 600;
+  color: var(--gray-12);
+}
+
+.pageDescription {
+  color: var(--gray-a11);
+}
+
+.tabsRoot {
+  grid-column: 1 / span 9;
+  @apply tablet:col-span-full;
+  @apply flex min-w-0 flex-col;
+}
+
+.tabsList {
+  width: 100%;
+  box-shadow: none;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-color: var(--gray-a6);
+  margin-bottom: 20px;
+}
+
+.tabContent {
+  @apply flex min-w-0 flex-col;
+}
+
+.section {
+  @apply min-w-0 rounded-xl border border-solid bg-white p-6;
+  border-color: var(--gray-a6);
+}
+
+.sectionInner {
+  @apply flex min-w-0 flex-row items-start gap-8;
+
+  @apply tablet:flex-col tablet:items-stretch tablet:gap-4;
+}
+
+.sectionHeading {
+  flex-shrink: 0;
+  width: 12.5rem;
+  color: var(--gray-12);
+}
+
+.sectionContent {
+  @apply flex w-full min-w-0 flex-1 flex-col gap-4;
+}
+
+.sectionDescription {
+  color: var(--gray-a11);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.hookListLabel {
+  color: var(--gray-12);
+}
+
+.hookTableWrapper {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (min-width: 1081px) {
+  .hookTableWrapper {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .hookTableWrapper::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.hookListHeaderLabel {
+  @apply flex items-center px-3 py-3 text-sm font-semibold;
+  color: var(--gray-12);
+}
+
 .separator {
   grid-column: 1 / span 8;
   @apply tablet:col-span-full;
@@ -18,36 +110,30 @@
   @apply gap-y-5;
 }
 
-.columnFull {
-  grid-column: 1 / span 8;
-
-  @apply tablet:col-span-full;
-}
-
-.secretInput {
-  grid-column: 1 / span 7;
-}
-
-.secretButton {
-  grid-column: span 1 / span 1;
-  justify-self: center;
-  align-self: end;
+.copyIconButton {
+  @apply shrink-0;
+  background: none;
+  border: none;
+  box-shadow: none;
+  color: var(--gray-11);
 }
 
 .hookContainer {
   display: flex;
   flex-direction: row;
-  column-gap: 12px;
   flex: 1 0 0;
 }
 
+.hookCellContent {
+  @apply flex items-center px-3 py-2;
+}
+
 .hookHeader {
   display: flex;
   flex-direction: row;
-  column-gap: 12px;
-  padding: 8px 32px 8px 0;
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
+  align-items: center;
+  min-height: 2.75rem;
+  min-width: 40rem;
 }
 
 .blockingHookKind {
@@ -103,13 +189,15 @@
 .hookList {
   /* stylelint-disable-next-line */
   row-gap: 0 !important;
+  min-width: 40rem;
 }
 
 .hookListItem {
-  column-gap: 4px;
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
+  border-top: 1px solid var(--gray-a6);
+  background-color: var(--gray-a2);
+  min-height: 2.75rem;
+  min-width: 40rem;
+  align-items: center;
   overflow-y: hidden;
-  overflow-x: auto;
-  padding: 10px 0;
+  overflow-x: visible;
 }
diff --git a/portal/src/graphql/portal/HookConfigurationScreen.tsx b/portal/src/graphql/portal/HookConfigurationScreen.tsx
index 247e4c07fb0..36faf61a48d 100644
--- a/portal/src/graphql/portal/HookConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/HookConfigurationScreen.tsx
@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { useCallback, useContext, useMemo, useState } from "react";
+import React, { useCallback, useContext, useMemo, useRef, useState } from "react";
 import { Context, FormattedMessage } from "../../intl";
 import { useLocation, useParams, useNavigate } from "react-router-dom";
 import {
@@ -7,7 +7,6 @@ import {
   IDropdownOption,
   Label,
   FontIcon,
-  Text,
   Dialog,
   useTheme,
   DialogFooter,
@@ -15,11 +14,15 @@ import {
 import { produce } from "immer";
 import ShowError from "../../ShowError";
 import ShowLoading from "../../ShowLoading";
+import { CopyIcon, EyeOpenIcon } from "@radix-ui/react-icons";
+import {
+  IconButton as RadixIconButton,
+  Tabs,
+  Text as RadixText,
+  Tooltip as RadixTooltip,
+} from "@radix-ui/themes";
 import ScreenContent from "../../ScreenContent";
-import ScreenTitle from "../../ScreenTitle";
-import ScreenDescription from "../../ScreenDescription";
 import WidgetTitle from "../../WidgetTitle";
-import Widget from "../../Widget";
 import {
   BlockingHookHandlerConfig,
   HookFeatureConfig,
@@ -41,8 +44,8 @@ import {
   getDenoScriptPathFromURL,
   makeDenoScriptSpecifier,
 } from "../../util/resource";
-import { useCopyFeedback } from "../../hook/useCopyFeedback";
 import FieldList, { ListItemProps } from "../../FieldList";
+import { copyToClipboard } from "../../util/clipboard";
 import FormContainer from "../../FormContainer";
 import FormTextField from "../../FormTextField";
 import { clearEmptyObject } from "../../util/misc";
@@ -58,6 +61,7 @@ import { useErrorMessage, useErrorMessageString } from "../../formbinding";
 import { useLoading, useIsLoading } from "../../hook/loading";
 import { useProvideError } from "../../hook/error";
 import TextField from "../../TextField";
+import { TextField as RadixTextField } from "../../components/v2/TextField/TextField";
 import ExternalLink from "../../ExternalLink";
 import FeatureDisabledMessageBar from "./FeatureDisabledMessageBar";
 import PrimaryButton from "../../PrimaryButton";
@@ -67,7 +71,6 @@ import DefaultButton from "../../DefaultButton";
 import { useSystemConfig } from "../../context/SystemConfigContext";
 import { AppSecretKey } from "./globalTypes.generated";
 import { useAppSecretVisitToken } from "./mutations/generateAppSecretVisitTokenMutation";
-import HorizontalDivider from "../../HorizontalDivider";
 import { DENO_TYPES_URL } from "../../util/deno";
 
 const CODE_EDITOR_OPTIONS = {
@@ -280,6 +283,74 @@ const MASKED_SECRET = "***************";
 
 const WEBHOOK_SIGNATURE_ID = "webhook-signature";
 
+function CopyIconButton({
+  textToCopy,
+}: {
+  textToCopy: string;
+}): React.ReactElement {
+  const { renderToString } = useContext(Context);
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleCopy = useCallback(() => {
+    copyToClipboard(textToCopy);
+    setCopied(true);
+    if (timerRef.current != null) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  }, [textToCopy]);
+
+  return (
+    <RadixTooltip
+      content={
+        copied
+          ? renderToString("copied-to-clipboard")
+          : renderToString("copy")
+      }
+      open={copied ? true : undefined}
+    >
+      <RadixIconButton
+        type="button"
+        variant="ghost"
+        color="gray"
+        size="1"
+        aria-label={renderToString("copy")}
+        onClick={handleCopy}
+        className={styles.copyIconButton}
+      >
+        <CopyIcon width="1rem" height="1rem" />
+      </RadixIconButton>
+    </RadixTooltip>
+  );
+}
+
+function RevealIconButton({
+  onClick,
+}: {
+  onClick: () => void;
+}): React.ReactElement {
+  const { renderToString } = useContext(Context);
+
+  return (
+    <RadixTooltip content={renderToString("reveal")}>
+      <RadixIconButton
+        type="button"
+        variant="ghost"
+        color="gray"
+        size="1"
+        aria-label={renderToString("reveal")}
+        onClick={onClick}
+        className={styles.copyIconButton}
+      >
+        <EyeOpenIcon width="1rem" height="1rem" />
+      </RadixIconButton>
+    </RadixTooltip>
+  );
+}
+
 const EDIT_BUTTON_ICON_PROPS = {
   iconName: "Edit",
 };
@@ -540,26 +611,25 @@ const BlockingHandlerItemEdit: React.VFC<BlockingHandlerItemEditProps> =
           </DialogFooter>
         </Dialog>
         <div className={styles.hookContainer}>
-          <Dropdown
-            className={styles.blockingHookKind}
-            options={kindOptions}
-            selectedKey={value.kind}
-            onChange={onChangeHookKind}
-            ariaLabel={"HookConfigurationScreen.hook-kind.label"}
-          />
-          <Dropdown
-            className={styles.blockingHookEvent}
-            options={eventOptions}
-            selectedKey={value.event}
-            onChange={onBlockingEventChange}
-            ariaLabel={"HookConfigurationScreen.blocking-events.label"}
-            {...eventFieldProps}
-          />
+          <div className={cn(styles.blockingHookKind, styles.hookCellContent)}>
+            <Dropdown
+              options={kindOptions}
+              selectedKey={value.kind}
+              onChange={onChangeHookKind}
+              ariaLabel={"HookConfigurationScreen.hook-kind.label"}
+            />
+          </div>
+          <div className={cn(styles.blockingHookEvent, styles.hookCellContent)}>
+            <Dropdown
+              options={eventOptions}
+              selectedKey={value.event}
+              onChange={onBlockingEventChange}
+              ariaLabel={"HookConfigurationScreen.blocking-events.label"}
+              {...eventFieldProps}
+            />
+          </div>
           {value.kind === "webhook" ? (
-            <div className={cn(styles.blockingHookConfig, styles.hookConfig)}>
-              <Label>
-                <FormattedMessage id="HookConfigurationScreen.action.endpoint.label" />
-              </Label>
+            <div className={cn(styles.blockingHookConfig, styles.hookCellContent)}>
               <TextField
                 className={styles.hookConfigConfig}
                 value={value.url}
@@ -570,10 +640,7 @@ const BlockingHandlerItemEdit: React.VFC<BlockingHandlerItemEditProps> =
             </div>
           ) : null}
           {value.kind === "denohook" ? (
-            <div className={cn(styles.blockingHookConfig, styles.hookConfig)}>
-              <Label>
-                <FormattedMessage id="HookConfigurationScreen.action.script.label" />
-              </Label>
+            <div className={cn(styles.blockingHookConfig, styles.hookCellContent)}>
               <ActionButton
                 className={styles.hookConfigConfig}
                 iconProps={EDIT_BUTTON_ICON_PROPS}
@@ -745,11 +812,8 @@ interface CodeEditorState {
 const HookConfigurationScreenContent: React.VFC<HookConfigurationScreenContentProps> =
   function HookConfigurationScreenContent(props) {
     const { appID } = useParams() as { appID: string };
-    const { renderToString } = useContext(Context);
     const { hookFeatureConfig, form: config } = props;
 
-    const theme = useTheme();
-
     const [codeEditorState, setCodeEditorState] =
       useState<CodeEditorState | null>(null);
 
@@ -915,20 +979,20 @@ const HookConfigurationScreenContent: React.VFC<HookConfigurationScreenContentPr
     );
 
     const onTimeoutChange = useCallback(
-      (_, value?: string) => {
+      (e: React.ChangeEvent<HTMLInputElement>) => {
         setState((state) => ({
           ...state,
-          timeout: parseIntegerAllowLeadingZeros(value),
+          timeout: parseIntegerAllowLeadingZeros(e.target.value),
         }));
       },
       [setState]
     );
 
     const onTotalTimeoutChange = useCallback(
-      (_, value?: string) => {
+      (e: React.ChangeEvent<HTMLInputElement>) => {
         setState((state) => ({
           ...state,
-          totalTimeout: parseIntegerAllowLeadingZeros(value),
+          totalTimeout: parseIntegerAllowLeadingZeros(e.target.value),
         }));
       },
       [setState]
@@ -1112,31 +1176,24 @@ const HookConfigurationScreenContent: React.VFC<HookConfigurationScreenContentPr
 
     const navigate = useNavigate();
 
-    const onClickReveal = useCallback(
-      (e: React.MouseEvent<unknown>) => {
-        e.preventDefault();
-        e.stopPropagation();
+    const onRevealSecret = useCallback(() => {
+      if (state.secret != null) {
+        setRevealed(true);
+        return;
+      }
 
-        if (state.secret != null) {
-          setRevealed(true);
-          return;
-        }
+      const locationState: LocationState = {
+        isOAuthRedirect: true,
+      };
 
-        const locationState: LocationState = {
-          isOAuthRedirect: true,
-        };
+      startReauthentication(navigate, locationState).catch((e) => {
+        // Normally there should not be any error.
+        console.error(e);
+      });
+    }, [navigate, state.secret]);
 
-        startReauthentication(navigate, locationState).catch((e) => {
-          // Normally there should not be any error.
-          console.error(e);
-        });
-      },
-      [navigate, state.secret]
-    );
-
-    const { copyButtonProps, Feedback } = useCopyFeedback({
-      textToCopy: state.secret ?? "",
-    });
+    const isSecretMasked = !revealed || state.secret == null;
+    const secretKeyValue = isSecretMasked ? MASKED_SECRET : (state.secret ?? "");
 
     const blockingHandlerMax = useMemo(() => {
       return hookFeatureConfig?.blocking_handler?.maximum ?? 99;
@@ -1254,270 +1311,322 @@ const HookConfigurationScreenContent: React.VFC<HookConfigurationScreenContentPr
             </div>
           ) : (
             <>
-              <ScreenTitle className={styles.widget}>
-                <FormattedMessage id="HookConfigurationScreen.title" />
-              </ScreenTitle>
-              <ScreenDescription className={styles.widget}>
-                <FormattedMessage id="HookConfigurationScreen.description" />
-              </ScreenDescription>
-
-              <Widget className={styles.widget}>
-                <WidgetTitle>
-                  <FormattedMessage id="HookConfigurationScreen.blocking-events" />
-                </WidgetTitle>
-                <WidgetDescription>
-                  <FormattedMessage
-                    id="HookConfigurationScreen.blocking-events.description"
-                    values={{
-                      // eslint-disable-next-line react/no-unstable-nested-components
-                      docLink: (chunks: React.ReactNode) => (
-                        <ExternalLink href="https://docs.authgear.com/customization/events-hooks/blocking-events">
-                          {chunks}
-                        </ExternalLink>
-                      ),
-                    }}
-                  />
-                </WidgetDescription>
-                {blockingHandlerMax < 99 ? (
-                  blockingHandlerDisabled ? (
-                    <FeatureDisabledMessageBar messageID="FeatureConfig.webhook.blocking-events.disabled" />
-                  ) : (
-                    <FeatureDisabledMessageBar
-                      messageID="FeatureConfig.webhook.blocking-events.maximum"
-                      messageValues={{
-                        maximum: blockingHandlerMax,
-                      }}
-                    />
-                  )
-                ) : null}
-                {!hideBlockingHandlerList ? (
-                  <FieldList
-                    listClassName={styles.hookList}
-                    listItemClassName={styles.hookListItem}
-                    listItemStyle={{
-                      borderBottomColor: theme.semanticColors.bodyDivider,
-                    }}
-                    label={
-                      <>
-                        <Label>
-                          <FormattedMessage id="HookConfigurationScreen.blocking-handlers.label" />
-                        </Label>
-                        <div
-                          className={styles.hookHeader}
-                          style={{
-                            borderBottomColor: theme.semanticColors.bodyDivider,
-                          }}
+              <div className={cn(styles.widget, styles.pageHeader)}>
+                <RadixText as="p" size="5" weight="bold" className={styles.pageTitle}>
+                  <FormattedMessage id="HookConfigurationScreen.title" />
+                </RadixText>
+                <RadixText
+                  as="p"
+                  size="2"
+                  color="gray"
+                  className={styles.pageDescription}
+                >
+                  <FormattedMessage id="HookConfigurationScreen.description" />
+                </RadixText>
+              </div>
+
+              <Tabs.Root
+                className={styles.tabsRoot}
+                defaultValue="blocking-events"
+              >
+                <Tabs.List className={styles.tabsList}>
+                  <Tabs.Trigger value="blocking-events">
+                    <FormattedMessage id="HookConfigurationScreen.blocking-events" />
+                  </Tabs.Trigger>
+                  <Tabs.Trigger value="non-blocking-events">
+                    <FormattedMessage id="HookConfigurationScreen.non-blocking-events" />
+                  </Tabs.Trigger>
+                  <Tabs.Trigger value="hook-settings">
+                    <FormattedMessage id="HookConfigurationScreen.hook-settings" />
+                  </Tabs.Trigger>
+                  <Tabs.Trigger value="webhook-signature">
+                    <FormattedMessage id="HookConfigurationScreen.signature.title" />
+                  </Tabs.Trigger>
+                </Tabs.List>
+
+                <Tabs.Content value="blocking-events" className={styles.tabContent}>
+                  <section className={styles.section}>
+                    <div className={styles.sectionInner}>
+                      <RadixText
+                        as="p"
+                        size="3"
+                        weight="medium"
+                        className={styles.sectionHeading}
+                      >
+                        <FormattedMessage id="HookConfigurationScreen.blocking-handlers.label" />
+                      </RadixText>
+                      <div className={styles.sectionContent}>
+                        <RadixText
+                          as="p"
+                          size="1"
+                          color="gray"
+                          className={styles.sectionDescription}
                         >
-                          <Text
-                            block={true}
-                            className={styles.blockingHookKind}
-                            styles={{
-                              root: {
-                                color: theme.semanticColors.bodySubtext,
-                              },
-                            }}
-                          >
-                            <FormattedMessage id="HookConfigurationScreen.header.type.label" />
-                          </Text>
-                          <Text
-                            block={true}
-                            className={styles.blockingHookEvent}
-                            styles={{
-                              root: {
-                                color: theme.semanticColors.bodySubtext,
-                              },
-                            }}
-                          >
-                            <FormattedMessage id="HookConfigurationScreen.header.event.label" />
-                          </Text>
-                          <Text
-                            block={true}
-                            className={styles.blockingHookConfig}
-                            styles={{
-                              root: {
-                                color: theme.semanticColors.bodySubtext,
-                              },
+                          <FormattedMessage
+                            id="HookConfigurationScreen.blocking-events.description"
+                            values={{
+                              // eslint-disable-next-line react/no-unstable-nested-components
+                              docLink: (chunks: React.ReactNode) => (
+                                <ExternalLink href="https://docs.authgear.com/customization/events-hooks/blocking-events">
+                                  {chunks}
+                                </ExternalLink>
+                              ),
                             }}
-                          >
-                            <FormattedMessage id="HookConfigurationScreen.header.config.label" />
-                          </Text>
-                        </div>
-                      </>
-                    }
-                    parentJSONPointer="/hook"
-                    fieldName="blocking_handlers"
-                    list={blockingHandlers}
-                    onListItemAdd={onBlockingHandlersChange}
-                    onListItemChange={onBlockingHandlersChangeItemChange}
-                    onListItemDelete={onBlockingHandlersChange}
-                    makeDefaultItem={makeDefaultHandler}
-                    ListItemComponent={BlockingHandlerListItem}
-                    addButtonLabelMessageID="add"
-                    addDisabled={blockingHandlerLimitReached}
-                  />
-                ) : null}
-              </Widget>
-              <Widget className={styles.widget}>
-                <HorizontalDivider />
-              </Widget>
-              <Widget className={styles.widget}>
-                <WidgetTitle>
-                  <FormattedMessage id="HookConfigurationScreen.non-blocking-events" />
-                </WidgetTitle>
-                <WidgetDescription>
-                  <FormattedMessage
-                    id="HookConfigurationScreen.non-blocking-events.description"
-                    values={{
-                      // eslint-disable-next-line react/no-unstable-nested-components
-                      docLink: (chunks: React.ReactNode) => (
-                        <ExternalLink href="https://docs.authgear.com/customization/events-hooks/non-blocking-events">
-                          {chunks}
-                        </ExternalLink>
-                      ),
-                    }}
-                  />
-                </WidgetDescription>
-                {nonBlockingHandlerMax < 99 ? (
-                  nonBlockingHandlerDisabled ? (
-                    <FeatureDisabledMessageBar messageID="FeatureConfig.webhook.non-blocking-events.disabled" />
-                  ) : (
-                    <FeatureDisabledMessageBar
-                      messageID="FeatureConfig.webhook.non-blocking-events.maximum"
-                      messageValues={{
-                        maximum: nonBlockingHandlerMax,
-                      }}
-                    />
-                  )
-                ) : null}
-                {!hideNonBlockingHandlerList ? (
-                  <FieldList
-                    listClassName={styles.hookList}
-                    listItemClassName={styles.hookListItem}
-                    listItemStyle={{
-                      borderBottomColor: theme.semanticColors.bodyDivider,
-                    }}
-                    label={
-                      <>
-                        <Label>
-                          <FormattedMessage id="HookConfigurationScreen.non-blocking-events-endpoints.label" />
-                        </Label>
-                        <div
-                          className={styles.hookHeader}
-                          style={{
-                            borderBottomColor: theme.semanticColors.bodyDivider,
-                          }}
+                          />
+                        </RadixText>
+                        {blockingHandlerMax < 99 ? (
+                          blockingHandlerDisabled ? (
+                            <FeatureDisabledMessageBar messageID="FeatureConfig.webhook.blocking-events.disabled" />
+                          ) : (
+                            <FeatureDisabledMessageBar
+                              messageID="FeatureConfig.webhook.blocking-events.maximum"
+                              messageValues={{
+                                maximum: blockingHandlerMax,
+                              }}
+                            />
+                          )
+                        ) : null}
+                        {!hideBlockingHandlerList ? (
+                          <div className={styles.hookTableWrapper}>
+                            <FieldList
+                              listClassName={styles.hookList}
+                              listItemClassName={styles.hookListItem}
+                              label={
+                                <div className={styles.hookHeader}>
+                                  <RadixText
+                                    as="span"
+                                    size="1"
+                                    className={cn(
+                                      styles.blockingHookKind,
+                                      styles.hookListHeaderLabel
+                                    )}
+                                  >
+                                    <FormattedMessage id="HookConfigurationScreen.header.type.label" />
+                                  </RadixText>
+                                  <RadixText
+                                    as="span"
+                                    size="1"
+                                    className={cn(
+                                      styles.blockingHookEvent,
+                                      styles.hookListHeaderLabel
+                                    )}
+                                  >
+                                    <FormattedMessage id="HookConfigurationScreen.header.event.label" />
+                                  </RadixText>
+                                  <RadixText
+                                    as="span"
+                                    size="1"
+                                    className={cn(
+                                      styles.blockingHookConfig,
+                                      styles.hookListHeaderLabel
+                                    )}
+                                  >
+                                    <FormattedMessage id="HookConfigurationScreen.header.config.label" />
+                                  </RadixText>
+                                </div>
+                              }
+                              parentJSONPointer="/hook"
+                              fieldName="blocking_handlers"
+                              list={blockingHandlers}
+                              onListItemAdd={onBlockingHandlersChange}
+                              onListItemChange={onBlockingHandlersChangeItemChange}
+                              onListItemDelete={onBlockingHandlersChange}
+                              makeDefaultItem={makeDefaultHandler}
+                              ListItemComponent={BlockingHandlerListItem}
+                              addButtonLabelMessageID="add"
+                              addDisabled={blockingHandlerLimitReached}
+                            />
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
+                  </section>
+                </Tabs.Content>
+
+                <Tabs.Content value="non-blocking-events" className={styles.tabContent}>
+                  <section className={styles.section}>
+                    <div className={styles.sectionInner}>
+                      <RadixText
+                        as="p"
+                        size="3"
+                        weight="medium"
+                        className={styles.sectionHeading}
+                      >
+                        <FormattedMessage id="EndpointDirectAccessScreen.settings.label" />
+                      </RadixText>
+                      <div className={styles.sectionContent}>
+                        <RadixText
+                          as="p"
+                          size="1"
+                          color="gray"
+                          className={styles.sectionDescription}
                         >
-                          <Text
-                            block={true}
-                            className={styles.nonblockingHookEvent}
-                            styles={{
-                              root: {
-                                color: theme.semanticColors.bodySubtext,
-                              },
-                            }}
-                          >
-                            <FormattedMessage id="HookConfigurationScreen.header.event.label" />
-                          </Text>
-                          <Text
-                            block={true}
-                            className={styles.nonblockingHookConfig}
-                            styles={{
-                              root: {
-                                color: theme.semanticColors.bodySubtext,
-                              },
+                          <FormattedMessage
+                            id="HookConfigurationScreen.non-blocking-events.description"
+                            values={{
+                              // eslint-disable-next-line react/no-unstable-nested-components
+                              docLink: (chunks: React.ReactNode) => (
+                                <ExternalLink href="https://docs.authgear.com/customization/events-hooks/non-blocking-events">
+                                  {chunks}
+                                </ExternalLink>
+                              ),
                             }}
-                          >
-                            <FormattedMessage id="HookConfigurationScreen.header.config.label" />
-                          </Text>
-                        </div>
-                      </>
-                    }
-                    parentJSONPointer="/hook"
-                    fieldName="non_blocking_handlers"
-                    list={nonBlockingHandlers}
-                    onListItemAdd={onNonBlockingHandlersChange}
-                    onListItemChange={onNonBlockingHandlersChange}
-                    onListItemDelete={onNonBlockingHandlersChange}
-                    makeDefaultItem={makeDefaultNonBlockingHandler}
-                    ListItemComponent={NonBlockingHandlerListItem}
-                    addButtonLabelMessageID="add"
-                    addDisabled={nonBlockingHandlerLimitReached}
-                  />
-                ) : null}
-              </Widget>
-              <HorizontalDivider className={styles.separator} />
-              <Widget className={styles.widget}>
-                <WidgetTitle>
-                  <FormattedMessage id="HookConfigurationScreen.hook-settings" />
-                </WidgetTitle>
-                <TextField
-                  type="text"
-                  label={renderToString(
-                    "HookConfigurationScreen.total-timeout.label"
-                  )}
-                  value={state.totalTimeout?.toFixed(0) ?? ""}
-                  onChange={onTotalTimeoutChange}
-                />
-                <TextField
-                  type="text"
-                  label={renderToString(
-                    "HookConfigurationScreen.timeout.label"
-                  )}
-                  value={state.timeout?.toFixed(0) ?? ""}
-                  onChange={onTimeoutChange}
-                />
-              </Widget>
-
-              <Widget className={styles.widget} contentLayout="grid">
-                <WidgetTitle
-                  className={styles.columnFull}
-                  id={WEBHOOK_SIGNATURE_ID}
-                >
-                  <FormattedMessage id="HookConfigurationScreen.signature.title" />
-                </WidgetTitle>
-                <WidgetDescription className={styles.columnFull}>
-                  <FormattedMessage
-                    id="HookConfigurationScreen.signature.description"
-                    values={{
-                      // eslint-disable-next-line react/no-unstable-nested-components
-                      docLink: (chunks: React.ReactNode) => (
-                        <ExternalLink href="https://docs.authgear.com/customization/events-hooks/webhooks#verifying-signature">
-                          {chunks}
-                        </ExternalLink>
-                      ),
-                    }}
-                  />
-                </WidgetDescription>
-                <TextField
-                  className={styles.secretInput}
-                  type="text"
-                  label={renderToString(
-                    "HookConfigurationScreen.signature.secret-key"
-                  )}
-                  value={
-                    revealed && state.secret != null
-                      ? state.secret
-                      : MASKED_SECRET
-                  }
-                  readOnly={true}
-                />
-                <PrimaryButton
-                  className={styles.secretButton}
-                  id={copyButtonProps.id}
-                  onClick={revealed ? copyButtonProps.onClick : onClickReveal}
-                  onMouseLeave={
-                    revealed ? copyButtonProps.onMouseLeave : undefined
-                  }
-                  text={
-                    revealed ? (
-                      <FormattedMessage id="copy" />
-                    ) : (
-                      <FormattedMessage id="reveal" />
-                    )
-                  }
-                />
-                <Feedback />
-              </Widget>
+                          />
+                        </RadixText>
+                        {nonBlockingHandlerMax < 99 ? (
+                          nonBlockingHandlerDisabled ? (
+                            <FeatureDisabledMessageBar messageID="FeatureConfig.webhook.non-blocking-events.disabled" />
+                          ) : (
+                            <FeatureDisabledMessageBar
+                              messageID="FeatureConfig.webhook.non-blocking-events.maximum"
+                              messageValues={{
+                                maximum: nonBlockingHandlerMax,
+                              }}
+                            />
+                          )
+                        ) : null}
+                        {!hideNonBlockingHandlerList ? (
+                          <FieldList
+                            listClassName={styles.hookList}
+                            listItemClassName={styles.hookListItem}
+                            label={
+                              <>
+                                <RadixText
+                                  as="p"
+                                  size="2"
+                                  weight="medium"
+                                  className={styles.hookListLabel}
+                                >
+                                  <FormattedMessage id="HookConfigurationScreen.non-blocking-events-endpoints.label" />
+                                </RadixText>
+                                <div className={styles.hookHeader}>
+                                  <RadixText
+                                    as="span"
+                                    size="1"
+                                    className={cn(
+                                      styles.nonblockingHookEvent,
+                                      styles.hookListHeaderLabel
+                                    )}
+                                  >
+                                    <FormattedMessage id="HookConfigurationScreen.header.event.label" />
+                                  </RadixText>
+                                  <RadixText
+                                    as="span"
+                                    size="1"
+                                    className={cn(
+                                      styles.nonblockingHookConfig,
+                                      styles.hookListHeaderLabel
+                                    )}
+                                  >
+                                    <FormattedMessage id="HookConfigurationScreen.header.config.label" />
+                                  </RadixText>
+                                </div>
+                              </>
+                            }
+                            parentJSONPointer="/hook"
+                            fieldName="non_blocking_handlers"
+                            list={nonBlockingHandlers}
+                            onListItemAdd={onNonBlockingHandlersChange}
+                            onListItemChange={onNonBlockingHandlersChange}
+                            onListItemDelete={onNonBlockingHandlersChange}
+                            makeDefaultItem={makeDefaultNonBlockingHandler}
+                            ListItemComponent={NonBlockingHandlerListItem}
+                            addButtonLabelMessageID="add"
+                            addDisabled={nonBlockingHandlerLimitReached}
+                          />
+                        ) : null}
+                      </div>
+                    </div>
+                  </section>
+                </Tabs.Content>
+
+                <Tabs.Content value="hook-settings" className={styles.tabContent}>
+                  <section className={styles.section}>
+                    <div className={styles.sectionInner}>
+                      <RadixText
+                        as="p"
+                        size="3"
+                        weight="medium"
+                        className={styles.sectionHeading}
+                      >
+                        <FormattedMessage id="EndpointDirectAccessScreen.settings.label" />
+                      </RadixText>
+                      <div className={styles.sectionContent}>
+                        <RadixTextField
+                          size="2"
+                          labelSize="2"
+                          type="text"
+                          label={
+                            <FormattedMessage id="HookConfigurationScreen.total-timeout.label" />
+                          }
+                          value={state.totalTimeout?.toFixed(0) ?? ""}
+                          onChange={onTotalTimeoutChange}
+                        />
+                        <RadixTextField
+                          size="2"
+                          labelSize="2"
+                          type="text"
+                          label={
+                            <FormattedMessage id="HookConfigurationScreen.timeout.label" />
+                          }
+                          value={state.timeout?.toFixed(0) ?? ""}
+                          onChange={onTimeoutChange}
+                        />
+                      </div>
+                    </div>
+                  </section>
+                </Tabs.Content>
+
+                <Tabs.Content value="webhook-signature" className={styles.tabContent}>
+                  <section className={styles.section}>
+                    <div className={styles.sectionInner}>
+                      <RadixText
+                        as="p"
+                        size="3"
+                        weight="medium"
+                        className={styles.sectionHeading}
+                      >
+                        <span id={WEBHOOK_SIGNATURE_ID}>
+                          <FormattedMessage id="EndpointDirectAccessScreen.settings.label" />
+                        </span>
+                      </RadixText>
+                      <div className={styles.sectionContent}>
+                        <RadixTextField
+                          size="2"
+                          labelSize="2"
+                          type="text"
+                          label={
+                            <FormattedMessage id="HookConfigurationScreen.signature.secret-key" />
+                          }
+                          value={secretKeyValue}
+                          readOnly={true}
+                          suffixPlain={true}
+                          suffix={
+                            isSecretMasked ? (
+                              <RevealIconButton onClick={onRevealSecret} />
+                            ) : secretKeyValue.length > 0 ? (
+                              <CopyIconButton textToCopy={secretKeyValue} />
+                            ) : undefined
+                          }
+                          hint={
+                            <FormattedMessage
+                              id="HookConfigurationScreen.signature.description"
+                              values={{
+                                // eslint-disable-next-line react/no-unstable-nested-components
+                                docLink: (chunks: React.ReactNode) => (
+                                  <ExternalLink href="https://docs.authgear.com/customization/events-hooks/webhooks#verifying-signature">
+                                    {chunks}
+                                  </ExternalLink>
+                                ),
+                              }}
+                            />
+                          }
+                        />
+                      </div>
+                    </div>
+                  </section>
+                </Tabs.Content>
+              </Tabs.Root>
             </>
           )}
         </ScreenContent>
diff --git a/portal/src/graphql/portal/SAMLCertificateScreen.module.css b/portal/src/graphql/portal/SAMLCertificateScreen.module.css
index 684649c6d16..c82d21bed3b 100644
--- a/portal/src/graphql/portal/SAMLCertificateScreen.module.css
+++ b/portal/src/graphql/portal/SAMLCertificateScreen.module.css
@@ -1,5 +1,35 @@
 .widget {
-  grid-column: 1 / span 8;
+  grid-column: 1 / span 9;
 
   @apply tablet:col-span-full;
 }
+
+.pageHeader {
+  @apply flex flex-col gap-2;
+}
+
+.pageTitle {
+  margin: 0;
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 600;
+  color: var(--gray-12);
+}
+
+.pageDescription {
+  color: var(--gray-a11);
+}
+
+.contentWithSaveBar {
+  padding-bottom: 5.5rem;
+}
+
+.settingsCardSaveBarClearance {
+  margin-bottom: 5.5rem;
+}
+
+.sectionHeading {
+  flex-shrink: 0;
+  width: 8.75rem;
+  color: var(--gray-12);
+}
diff --git a/portal/src/graphql/portal/SAMLCertificateScreen.tsx b/portal/src/graphql/portal/SAMLCertificateScreen.tsx
index 95f5441e454..0e1a6561a33 100644
--- a/portal/src/graphql/portal/SAMLCertificateScreen.tsx
+++ b/portal/src/graphql/portal/SAMLCertificateScreen.tsx
@@ -1,4 +1,6 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useRef } from "react";
+import cn from "classnames";
+import { Text } from "@radix-ui/themes";
 import { useParams } from "react-router-dom";
 import {
   useSAMLCertificateForm,
@@ -7,18 +9,17 @@ import {
 import { useAppAndSecretConfigQuery } from "./query/appAndSecretConfigQuery";
 import ShowError from "../../ShowError";
 import ShowLoading from "../../ShowLoading";
-import { FormContainerBase } from "../../FormContainerBase";
+import FormContainer from "../../FormContainer";
 import { SAMLIdpSigningCertificate } from "../../types";
 import { useUpdateAppAndSecretConfigMutation } from "./mutations/updateAppAndSecretMutation";
 import { AppSecretConfigFormModel } from "../../hook/useAppSecretConfigForm";
-import ScreenLayoutScrollView from "../../ScreenLayoutScrollView";
 import ScreenContent from "../../ScreenContent";
-import NavBreadcrumb, { BreadcrumbItem } from "../../NavBreadcrumb";
-import ScreenDescription from "../../ScreenDescription";
 import { FormattedMessage } from "../../intl";
 import styles from "./SAMLCertificateScreen.module.css";
 import { EditSAMLCertificateForm } from "../../components/saml/EditSAMLCertificateForm";
 import { AutoGenerateFirstCertificate } from "../../components/saml/AutoGenerateFirstCertificate";
+import { SaveFunctionBar } from "../../components/v2/SaveFunctionBar/SaveFunctionBar";
+import { useFormContainerBaseContext } from "../../FormContainerBase";
 
 function EditSAMLCertificateContent({
   configAppID,
@@ -31,23 +32,34 @@ function EditSAMLCertificateContent({
   certificates: SAMLIdpSigningCertificate[];
   generateNewCertificate: () => Promise<void>;
 }) {
-  const navBreadcrumbItems: BreadcrumbItem[] = useMemo(() => {
-    return [
-      {
-        to: ".",
-        label: <FormattedMessage id="SAMLCertificateScreen.title" />,
-      },
-    ];
-  }, []);
+  const { isDirty } = useFormContainerBaseContext();
+  const contentWidthAnchorRef = useRef<HTMLDivElement>(null);
 
   return (
-    <ScreenLayoutScrollView>
-      <ScreenContent>
-        <NavBreadcrumb className={styles.widget} items={navBreadcrumbItems} />
-        <ScreenDescription className={styles.widget}>
+    <ScreenContent className={cn(isDirty ? styles.contentWithSaveBar : null)}>
+      <div
+        ref={contentWidthAnchorRef}
+        className={cn(styles.widget, styles.pageHeader)}
+      >
+        <Text as="p" size="5" weight="bold" className={styles.pageTitle}>
+          <FormattedMessage id="SAMLCertificateScreen.title" />
+        </Text>
+        <Text as="p" size="2" color="gray" className={styles.pageDescription}>
           <FormattedMessage id="SAMLCertificateScreen.desc" />
-        </ScreenDescription>
-        <div className={styles.widget}>
+        </Text>
+      </div>
+
+      <div
+        className={cn(
+          styles.widget,
+          "border border-[var(--gray-5)] rounded-lg p-6 flex gap-8 bg-white",
+          isDirty && styles.settingsCardSaveBarClearance
+        )}
+      >
+        <Text as="p" size="3" weight="medium" className={styles.sectionHeading}>
+          <FormattedMessage id="EditSAMLCertificateForm.certificates.title" />
+        </Text>
+        <div className="flex-1 min-w-0">
           <EditSAMLCertificateForm
             configAppID={configAppID}
             form={form}
@@ -55,8 +67,10 @@ function EditSAMLCertificateContent({
             onGenerateNewCertitificate={generateNewCertificate}
           />
         </div>
-      </ScreenContent>
-    </ScreenLayoutScrollView>
+      </div>
+
+      <SaveFunctionBar anchorRef={contentWidthAnchorRef} />
+    </ScreenContent>
   );
 }
 
@@ -93,14 +107,14 @@ function EditSAMLCertificateFormContainer({
   }
 
   return (
-    <FormContainerBase form={form} canSave={true}>
+    <FormContainer form={form} hideFooterComponent={true}>
       <EditSAMLCertificateContent
         configAppID={configAppID}
         certificates={certificates}
         form={form}
         generateNewCertificate={generateNewCertificate}
       />
-    </FormContainerBase>
+    </FormContainer>
   );
 }
 
diff --git a/portal/src/graphql/portal/SMSProviderConfigurationScreen.module.css b/portal/src/graphql/portal/SMSProviderConfigurationScreen.module.css
index 9c057b9bff2..544b4b8d121 100644
--- a/portal/src/graphql/portal/SMSProviderConfigurationScreen.module.css
+++ b/portal/src/graphql/portal/SMSProviderConfigurationScreen.module.css
@@ -1,19 +1,48 @@
 .widget {
-  grid-column: 1 / span 8;
+  grid-column: 1 / span 9;
 
   @apply tablet:col-span-full;
 }
 
-.columnFull {
-  grid-column: 1 / span 8;
+.providerSelector {
+  @apply flex flex-col gap-1;
+}
 
-  @apply tablet:col-span-full;
+.pageHeader {
+  @apply flex flex-col gap-2;
+}
+
+.pageTitle {
+  margin: 0;
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 600;
+  color: var(--gray-12);
+}
+
+.pageDescription,
+.providerDescription {
+  color: var(--gray-a11);
+}
+
+.providerDescription {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.contentWithSaveBar {
+  padding-bottom: 8rem;
 }
 
-.providerGrid {
-  @apply grid gap-4 grid-cols-2;
+.senderInfoIcon {
+  cursor: default;
+  color: var(--accent-9);
 }
 
-.textFieldInOption {
-  @apply ml-6 my-1;
+.copyIconButton {
+  @apply shrink-0;
+  background: none;
+  border: none;
+  box-shadow: none;
+  color: var(--gray-11);
 }
diff --git a/portal/src/graphql/portal/SMSProviderConfigurationScreen.tsx b/portal/src/graphql/portal/SMSProviderConfigurationScreen.tsx
index ee232c64b4c..bd9b082886c 100644
--- a/portal/src/graphql/portal/SMSProviderConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/SMSProviderConfigurationScreen.tsx
@@ -12,6 +12,7 @@ import React, {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from "react";
 import { useLocationEffect } from "../../hook/useLocationEffect";
@@ -23,7 +24,7 @@ import {
   useAppSecretConfigForm,
 } from "../../hook/useAppSecretConfigForm";
 import { useAppFeatureConfigQuery } from "./query/appFeatureConfigQuery";
-import FormContainer, { FormSaveButton } from "../../FormContainer";
+import FormContainer from "../../FormContainer";
 import {
   PortalAPIAppConfig,
   PortalAPISecretConfig,
@@ -34,31 +35,15 @@ import {
 } from "../../types";
 import { produce } from "immer";
 import { FormattedMessage, Context as MessageContext } from "../../intl";
-import {
-  ChoiceGroup,
-  IChoiceGroupOption,
-  IChoiceGroupOptionProps,
-  IChoiceGroupStyles,
-  Text,
-} from "@fluentui/react";
 import ScreenContent from "../../ScreenContent";
-import ScreenTitle from "../../ScreenTitle";
 import styles from "./SMSProviderConfigurationScreen.module.css";
-import Widget from "../../Widget";
-import ScreenDescription from "../../ScreenDescription";
-import Toggle from "../../Toggle";
-import { ProviderCard } from "../../components/common/ProviderCard";
 import logoTwilio from "../../images/twilio_logo.svg";
 import logoWebhook from "../../images/webhook_logo.svg";
-import logoDeno from "../../images/deno_logo.svg";
-import FormTextField from "../../FormTextField";
-import PrimaryButton from "../../PrimaryButton";
+import logoAuthgear from "../../images/authgear_logo.svg";
 import { startReauthentication } from "./Authenticated";
 import { CodeField } from "../../components/common/CodeField";
-import TextField from "../../TextField";
-import DefaultButton from "../../DefaultButton";
-import { useCopyFeedback } from "../../hook/useCopyFeedback";
 import CodeEditor from "../../CodeEditor";
+import { copyToClipboard } from "../../util/clipboard";
 import { useResourceForm } from "../../hook/useResourceForm";
 import {
   Resource,
@@ -75,12 +60,35 @@ import { useCheckDenoHookMutation } from "./mutations/checkDenoHook";
 import FeatureDisabledMessageBar from "./FeatureDisabledMessageBar";
 import { ErrorParseRule, makeLocalErrorParseRule } from "../../error/parse";
 import { APIError, LocalError } from "../../error/error";
-import { ReauthDialog } from "../../components/common/ReauthDialog";
+import { ConfirmationDialog } from "../../components/v2/ConfirmationDialog/ConfirmationDialog";
 import { TestSMSDialog } from "../../components/sms-provider/TestSMSDialog";
-import Tooltip from "../../Tooltip";
 import { useSystemConfig } from "../../context/SystemConfigContext";
 import { RedMessageBar_RemindConfigureSMSProviderInSMSProviderScreen } from "../../RedMessageBar";
 import ExternalLink from "../../ExternalLink";
+import {
+  IconRadioCards,
+  IconRadioCardOption,
+} from "../../components/v2/IconRadioCards/IconRadioCards";
+import { TextField } from "../../components/v2/TextField/TextField";
+import { PrimaryButton } from "../../components/v2/Button/PrimaryButton/PrimaryButton";
+import { SecondaryButton } from "../../components/v2/Button/SecondaryButton/SecondaryButton";
+import {
+  Flex,
+  IconButton as RadixIconButton,
+  RadioGroup,
+  Text,
+  Tooltip as RadixTooltip,
+} from "@radix-ui/themes";
+import {
+  CodeIcon,
+  CopyIcon,
+  EyeOpenIcon,
+  InfoCircledIcon,
+} from "@radix-ui/react-icons";
+import { FormField } from "../../components/v2/FormField/FormField";
+import { Tooltip } from "../../components/v2/Tooltip/Tooltip";
+import { SaveFunctionBar } from "../../components/v2/SaveFunctionBar/SaveFunctionBar";
+import { useFormContainerBaseContext } from "../../FormContainerBase";
 
 const SECRETS = [AppSecretKey.SmsProviderSecrets, AppSecretKey.WebhookSecret];
 
@@ -102,6 +110,7 @@ export type FormModel = Omit<
 >;
 
 enum SMSProviderType {
+  Authgear = "authgear",
   Twilio = "twilio",
   Webhook = "webhook",
   Deno = "deno",
@@ -114,6 +123,9 @@ enum TwilioSenderType {
 
 const MASK = "********";
 
+// Matches v2 IconRadioCards storybook inner icon size (SquareIcon iconSize).
+const PROVIDER_RADIO_ICON_SIZE = "1.375rem";
+
 interface ConfigFormState {
   enabled: boolean;
   providerType: SMSProviderType;
@@ -183,7 +195,7 @@ function constructFormState(
         : SMSProviderType.Webhook;
   } else {
     enabled = false;
-    providerType = SMSProviderType.Twilio;
+    providerType = SMSProviderType.Authgear;
   }
 
   let twilioCredentialType: TwilioCredentialType = TwilioCredentialType.ApiKey;
@@ -295,6 +307,10 @@ function constructConfig(
 
       let newProvider: SMSProvider;
       switch (currentState.providerType) {
+        case SMSProviderType.Authgear:
+          config.messaging.sms_gateway = undefined;
+          config.messaging.sms_provider = undefined;
+          return;
         case SMSProviderType.Twilio:
           newProvider = "twilio";
           break;
@@ -318,6 +334,9 @@ function constructConfig(
       secrets.smsProviderSecrets = null;
     } else {
       switch (currentState.providerType) {
+        case SMSProviderType.Authgear:
+          secrets.smsProviderSecrets = null;
+          break;
         case SMSProviderType.Twilio: {
           const twilioCredentials: SMSProviderTwilioCredentials = {
             credentialType: currentState.twilioCredentialType,
@@ -382,6 +401,13 @@ function constructSecretUpdateInstruction(
   }
 
   switch (currentState.providerType) {
+    case SMSProviderType.Authgear:
+      return {
+        smsProviderSecrets: {
+          action: "set",
+          setData: {},
+        },
+      };
     case SMSProviderType.Twilio:
       if (secrets.smsProviderSecrets.twilioCredentials == null) {
         console.error("unexpected null twilioCredentials");
@@ -547,6 +573,8 @@ function useTestSMSConfig(
       return null;
     }
     switch (state.providerType) {
+      case SMSProviderType.Authgear:
+        return null;
       case SMSProviderType.Twilio: {
         if (!state.twilioSID) {
           return null;
@@ -637,6 +665,8 @@ function computeIsSecretMasked(state: FormState): boolean {
     return false;
   }
   switch (state.providerType) {
+    case SMSProviderType.Authgear:
+      return false;
     case SMSProviderType.Twilio:
       switch (state.twilioCredentialType) {
         case TwilioCredentialType.ApiKey:
@@ -885,10 +915,11 @@ function SMSProviderConfigurationContent(props: {
   const { appID } = useParams() as { appID: string };
   const { state, setState } = form;
   const { isSMSRequiredForSomeEnabledFeatures, smsProviderConfigured } = state;
-  const { renderToString } = useContext(MessageContext);
+  const { isDirty } = useFormContainerBaseContext();
   const navigate = useNavigate();
+  const contentWidthAnchorRef = useRef<HTMLDivElement>(null);
 
-  const [isReauthDialogHidden, setIsReauthDialogHidden] = useState(true);
+  const [isReauthDialogOpen, setIsReauthDialogOpen] = useState(false);
   const [isTestSMSDialogHidden, setIsTestSMSDialogHidden] = useState(true);
 
   const { checkDenoHook, loading: checkDenoHookLoading } = checkDenoHookHandle;
@@ -898,20 +929,17 @@ function SMSProviderConfigurationContent(props: {
     [form.state]
   );
 
-  const onChangeEnabled = useCallback(
-    (_event, checked?: boolean) => {
-      if (checked != null) {
-        if (isSecretMasked) {
-          setIsReauthDialogHidden(false);
-          return;
-        }
-        setState((state) => {
-          return {
-            ...state,
-            enabled: checked,
-          };
-        });
+  const onChangeProviderType = useCallback(
+    (value: SMSProviderType) => {
+      if (isSecretMasked) {
+        setIsReauthDialogOpen(true);
+        return;
       }
+      setState((s) => ({
+        ...s,
+        enabled: value !== SMSProviderType.Authgear,
+        providerType: value,
+      }));
     },
     [isSecretMasked, setState]
   );
@@ -929,14 +957,14 @@ function SMSProviderConfigurationContent(props: {
   }, [navigate, form]);
 
   const onRevealSecrets = useCallback(() => {
-    setIsReauthDialogHidden(false);
+    setIsReauthDialogOpen(true);
   }, []);
 
   const testConfig = useTestSMSConfig(form.state);
 
   const onTestSMS = useCallback(async () => {
     if (isSecretMasked) {
-      setIsReauthDialogHidden(false);
+      setIsReauthDialogOpen(true);
       return;
     }
     if (form.state.providerType === SMSProviderType.Deno) {
@@ -954,167 +982,86 @@ function SMSProviderConfigurationContent(props: {
     setIsTestSMSDialogHidden(true);
   }, []);
 
-  return (
-    <>
-      <ScreenContent>
-        <ScreenTitle className={styles.widget}>
-          {isAuthgearOnce ? (
-            <FormattedMessage id="SMSProviderConfigurationScreen.title--authgearonce" />
-          ) : (
-            <FormattedMessage id="SMSProviderConfigurationScreen.title" />
-          )}
-        </ScreenTitle>
-        <ScreenDescription className={styles.widget}>
-          <FormattedMessage id="SMSProviderConfigurationScreen.description" />
-        </ScreenDescription>
-        {isCustomSMSProviderDisabled ? (
-          <FeatureDisabledMessageBar
-            className={styles.widget}
-            messageID="FeatureConfig.custom-sms-provider.disabled"
+  const providerOptions = useMemo(
+    (): IconRadioCardOption<SMSProviderType>[] => [
+      {
+        value: SMSProviderType.Authgear,
+        icon: (
+          <img
+            src={logoAuthgear}
+            alt=""
+            className="object-contain"
+            style={{
+              width: PROVIDER_RADIO_ICON_SIZE,
+              height: PROVIDER_RADIO_ICON_SIZE,
+            }}
           />
-        ) : null}
-        {isAuthgearOnce &&
-        isSMSRequiredForSomeEnabledFeatures &&
-        !smsProviderConfigured ? (
-          <div className={cn(styles.widget, "flex flex-col")}>
-            <RedMessageBar_RemindConfigureSMSProviderInSMSProviderScreen className="self-start w-fit" />
-          </div>
-        ) : null}
-        <Widget className={styles.widget} contentLayout="grid">
-          <Toggle
-            className={styles.columnFull}
-            disabled={isCustomSMSProviderDisabled}
-            checked={state.enabled}
-            onChange={onChangeEnabled}
-            label={renderToString(
-              isAuthgearOnce
-                ? "SMSProviderConfigurationScreen.enable.label--authgearonce"
-                : "SMSProviderConfigurationScreen.enable.label"
-            )}
-            inlineLabel={true}
+        ),
+        title: (
+          <FormattedMessage id="SMSProviderConfigurationScreen.provider.authgear" />
+        ),
+      },
+      {
+        value: SMSProviderType.Twilio,
+        icon: (
+          <img
+            src={logoTwilio}
+            alt=""
+            className="object-contain"
+            style={{
+              width: PROVIDER_RADIO_ICON_SIZE,
+              height: PROVIDER_RADIO_ICON_SIZE,
+            }}
           />
-        </Widget>
-
-        {state.enabled ? (
-          <Widget className={cn(styles.widget, "flex flex-col gap-y-4")}>
-            <ProviderSection
-              form={form}
-              isSecretMasked={isSecretMasked}
-              onRevealSecrets={onRevealSecrets}
-            />
-            <FormSection form={form} onRevealSecrets={onRevealSecrets} />
-          </Widget>
-        ) : null}
-
-        {form.state.enabled ? (
-          <>
-            <div className={cn(styles.widget, "flex w-max pt-1 gap-4")}>
-              <DefaultButton
-                className="w-max"
-                text={
-                  <FormattedMessage id="SMSProviderConfigurationScreen.testSMS" />
-                }
-                disabled={testConfig == null || checkDenoHookLoading}
-                onClick={onTestSMS}
-              />
-              {isSecretMasked ? (
-                <PrimaryButton
-                  className="w-max"
-                  onClick={onRevealSecrets}
-                  text={<FormattedMessage id="edit" />}
-                />
-              ) : (
-                <FormSaveButton />
-              )}
-            </div>
-          </>
-        ) : (
-          <div className={styles.widget}>
-            <FormSaveButton />
-          </div>
-        )}
-      </ScreenContent>
-      <ReauthDialog
-        isHidden={isReauthDialogHidden}
-        onConfirm={useCallback(() => {
-          triggerReauth();
-        }, [triggerReauth])}
-        onCancel={useCallback(() => {
-          setIsReauthDialogHidden(true);
-        }, [])}
-      />
-      {testConfig != null ? (
-        <TestSMSDialog
-          appID={appID}
-          isHidden={isTestSMSDialogHidden}
-          effectiveAppConfig={effectiveAppConfig}
-          input={testConfig}
-          onDismiss={onCancelTestSMS}
-        />
-      ) : null}
-    </>
-  );
-}
-
-function ProviderSection({
-  isSecretMasked,
-  form,
-  onRevealSecrets,
-}: {
-  isSecretMasked: boolean;
-  form: FormModel;
-  onRevealSecrets: () => void;
-}) {
-  const onSelectProviderCallbacks = useMemo(() => {
-    const makeCallback = (provider: SMSProviderType) => {
-      return () => {
-        if (isSecretMasked) {
-          onRevealSecrets();
-          return;
-        }
-        form.setState((state) => {
-          return { ...state, providerType: provider };
-        });
-      };
-    };
-
-    return {
-      twilio: makeCallback(SMSProviderType.Twilio),
-      webhook: makeCallback(SMSProviderType.Webhook),
-      deno: makeCallback(SMSProviderType.Deno),
-    };
-  }, [form, isSecretMasked, onRevealSecrets]);
-
-  return (
-    <div className="flex flex-col gap-y-3">
-      <Text variant="xLarge">
-        <FormattedMessage id="SMSProviderConfigurationScreen.provider.title" />
-      </Text>
-      <div className={styles.providerGrid}>
-        <ProviderCard
-          onClick={onSelectProviderCallbacks.twilio}
-          isSelected={form.state.providerType === SMSProviderType.Twilio}
-          logoSrc={logoTwilio}
-        >
+        ),
+        title: (
           <FormattedMessage id="SMSProviderConfigurationScreen.provider.twilio" />
-        </ProviderCard>
-        <ProviderCard
-          onClick={onSelectProviderCallbacks.webhook}
-          isSelected={form.state.providerType === SMSProviderType.Webhook}
-          logoSrc={logoWebhook}
-        >
+        ),
+        disabled: isCustomSMSProviderDisabled,
+      },
+      {
+        value: SMSProviderType.Webhook,
+        icon: (
+          <img
+            src={logoWebhook}
+            alt=""
+            className="object-contain"
+            style={{
+              width: PROVIDER_RADIO_ICON_SIZE,
+              height: PROVIDER_RADIO_ICON_SIZE,
+            }}
+          />
+        ),
+        title: (
           <FormattedMessage id="SMSProviderConfigurationScreen.provider.webhook" />
-        </ProviderCard>
-        <ProviderCard
-          onClick={onSelectProviderCallbacks.deno}
-          isSelected={form.state.providerType === SMSProviderType.Deno}
-          logoSrc={logoDeno}
-        >
+        ),
+        disabled: isCustomSMSProviderDisabled,
+      },
+      {
+        value: SMSProviderType.Deno,
+        icon: (
+          <CodeIcon
+            width={PROVIDER_RADIO_ICON_SIZE}
+            height={PROVIDER_RADIO_ICON_SIZE}
+          />
+        ),
+        title: (
           <FormattedMessage id="SMSProviderConfigurationScreen.provider.deno" />
-        </ProviderCard>
-      </div>
-      <Text block={true}>
-        {form.state.providerType === SMSProviderType.Twilio ? (
+        ),
+        disabled: isCustomSMSProviderDisabled,
+      },
+    ],
+    [isCustomSMSProviderDisabled]
+  );
+
+  const providerDescription = useMemo(() => {
+    switch (state.providerType) {
+      case SMSProviderType.Authgear:
+        return (
+          <FormattedMessage id="SMSProviderConfigurationScreen.provider.authgear.description" />
+        );
+      case SMSProviderType.Twilio:
+        return (
           <FormattedMessage
             id="SMSProviderConfigurationScreen.provider.twilio.description"
             values={{
@@ -1126,7 +1073,9 @@ function ProviderSection({
               ),
             }}
           />
-        ) : form.state.providerType === SMSProviderType.Webhook ? (
+        );
+      case SMSProviderType.Webhook:
+        return (
           <FormattedMessage
             id="SMSProviderConfigurationScreen.provider.webhook.description"
             values={{
@@ -1138,7 +1087,9 @@ function ProviderSection({
               ),
             }}
           />
-        ) : (
+        );
+      case SMSProviderType.Deno:
+        return (
           <FormattedMessage
             id="SMSProviderConfigurationScreen.provider.deno.description"
             values={{
@@ -1150,9 +1101,138 @@ function ProviderSection({
               ),
             }}
           />
-        )}
-      </Text>
-    </div>
+        );
+      default:
+        return null;
+    }
+  }, [state.providerType]);
+
+  const showSettings = state.providerType !== SMSProviderType.Authgear;
+
+  return (
+    <>
+      <ScreenContent className={cn(isDirty ? styles.contentWithSaveBar : null)}>
+        <div
+          ref={contentWidthAnchorRef}
+          className={cn(styles.widget, styles.pageHeader)}
+        >
+          <h1 className={styles.pageTitle}>
+            {isAuthgearOnce ? (
+              <FormattedMessage id="SMSProviderConfigurationScreen.title--authgearonce" />
+            ) : (
+              <FormattedMessage id="SMSProviderConfigurationScreen.title" />
+            )}
+          </h1>
+          <Text as="p" size="2" color="gray" className={styles.pageDescription}>
+            <FormattedMessage id="SMSProviderConfigurationScreen.description" />
+          </Text>
+        </div>
+        {isCustomSMSProviderDisabled ? (
+          <FeatureDisabledMessageBar
+            className={styles.widget}
+            messageID="FeatureConfig.custom-sms-provider.disabled"
+          />
+        ) : null}
+        {isAuthgearOnce &&
+        isSMSRequiredForSomeEnabledFeatures &&
+        !smsProviderConfigured ? (
+          <div className={cn(styles.widget, "flex flex-col")}>
+            <RedMessageBar_RemindConfigureSMSProviderInSMSProviderScreen className="self-start w-fit" />
+          </div>
+        ) : null}
+
+        <div className={cn(styles.widget, styles.providerSelector)}>
+          <IconRadioCards
+            size="3"
+            value={state.providerType}
+            onValueChange={onChangeProviderType}
+            options={providerOptions}
+            numberOfColumns={4}
+            itemFillSpaces={true}
+          />
+          {providerDescription != null ? (
+            <Text
+              as="p"
+              size="1"
+              color="gray"
+              className={styles.providerDescription}
+            >
+              {providerDescription}
+            </Text>
+          ) : null}
+        </div>
+
+        {showSettings ? (
+          <div
+            className={cn(
+              styles.widget,
+              "border border-[var(--gray-5)] rounded-lg p-6 flex gap-8 bg-white"
+            )}
+          >
+            <Text
+              as="p"
+              size="3"
+              weight="medium"
+              className="shrink-0 w-[200px]"
+            >
+              <FormattedMessage id="SMSProviderConfigurationScreen.settings.label" />
+            </Text>
+            <div className="flex-1 flex flex-col gap-4 min-w-0">
+              <FormSection form={form} onRevealSecrets={onRevealSecrets} />
+              {isSecretMasked ? (
+                <div>
+                  <PrimaryButton
+                    size="3"
+                    disabled={isCustomSMSProviderDisabled}
+                    onClick={onRevealSecrets}
+                    text={<FormattedMessage id="edit" />}
+                  />
+                </div>
+              ) : (
+                <div>
+                  <SecondaryButton
+                    size="2"
+                    onClick={onTestSMS}
+                    disabled={testConfig == null || checkDenoHookLoading}
+                    text={
+                      <FormattedMessage id="SMSProviderConfigurationScreen.testSMS" />
+                    }
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        ) : null}
+
+        <SaveFunctionBar anchorRef={contentWidthAnchorRef} />
+      </ScreenContent>
+      <ConfirmationDialog
+        open={isReauthDialogOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setIsReauthDialogOpen(false);
+          }
+        }}
+        title={<FormattedMessage id="ReauthDialog.title" />}
+        description={<FormattedMessage id="ReauthDialog.description" />}
+        confirmText={<FormattedMessage id="confirm" />}
+        cancelText={<FormattedMessage id="cancel" />}
+        confirmColor="indigo"
+        onConfirm={triggerReauth}
+        onCancel={useCallback(() => {
+          setIsReauthDialogOpen(false);
+        }, [])}
+      />
+      {testConfig != null ? (
+        <TestSMSDialog
+          appID={appID}
+          isHidden={isTestSMSDialogHidden}
+          effectiveAppConfig={effectiveAppConfig}
+          input={testConfig}
+          onDismiss={onCancelTestSMS}
+        />
+      ) : null}
+    </>
   );
 }
 
@@ -1164,6 +1244,8 @@ function FormSection({
   onRevealSecrets: () => void;
 }) {
   switch (form.state.providerType) {
+    case SMSProviderType.Authgear:
+      return null;
     case SMSProviderType.Twilio:
       return <TwilioForm form={form} />;
     case SMSProviderType.Webhook:
@@ -1186,10 +1268,8 @@ function TwilioForm({ form }: { form: FormModel }) {
         | "twilioMessagingServiceSID"
         | "twilioFrom"
     ) => {
-      return (
-        event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>
-      ) => {
-        const value = event.currentTarget.value;
+      return (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         form.setState((prevState) => {
           const s: FormState = {
             ...prevState,
@@ -1214,137 +1294,91 @@ function TwilioForm({ form }: { form: FormModel }) {
       ? form.state.twilioAuthToken == null
       : form.state.twilioAPIKeySecret == null;
 
-  const credentialTypeOptions = useMemo<IChoiceGroupOption[]>(() => {
-    return [
-      {
-        key: TwilioCredentialType.AuthToken,
-        text: renderToString(
-          "SMSProviderConfigurationScreen.form.twilio.credentialType.options.authToken"
-        ),
-      },
-      {
-        key: TwilioCredentialType.ApiKey,
-        text: renderToString(
-          "SMSProviderConfigurationScreen.form.twilio.credentialType.options.apiKey"
-        ),
-      },
-    ];
-  }, [renderToString]);
-
   const onCredentialTypeChange = useCallback(
-    (_: unknown, option?: IChoiceGroupOption) => {
-      if (option == null) {
-        return;
-      }
-      form.setState((prev) => {
-        return {
-          ...prev,
-          twilioCredentialType: option.key as TwilioCredentialType,
-        };
-      });
+    (value: string) => {
+      form.setState((prev) => ({
+        ...prev,
+        twilioCredentialType: value as TwilioCredentialType,
+      }));
     },
     [form]
   );
 
-  const senderOptions = useMemo<IChoiceGroupOption[]>(() => {
-    return [
-      {
-        key: TwilioSenderType.MessagingServiceSID,
-        text: renderToString(
-          "SMSProviderConfigurationScreen.form.twilio.twilioMessagingServiceSID"
-        ),
-        // eslint-disable-next-line react/no-unstable-nested-components
-        onRenderLabel: (
-          props?: IChoiceGroupOption & IChoiceGroupOptionProps,
-          render?: (
-            props?: IChoiceGroupOption & IChoiceGroupOptionProps
-          ) => JSX.Element | null
-        ) => (
-          <>
-            {render?.(props)}
-            <div className="inline-flex">
-              <Tooltip tooltipMessageId="SMSProviderConfigurationScreen.form.twilio.twilioMessagingServiceSID.tooltip" />
-            </div>
-          </>
-        ),
-      },
-      {
-        key: TwilioSenderType.From,
-        text: renderToString(
-          "SMSProviderConfigurationScreen.form.twilio.twilioFrom"
-        ), // eslint-disable-next-line react/no-unstable-nested-components
-        onRenderLabel: (
-          props?: IChoiceGroupOption & IChoiceGroupOptionProps,
-          render?: (
-            props?: IChoiceGroupOption & IChoiceGroupOptionProps
-          ) => JSX.Element | null
-        ) => (
-          <>
-            {render?.(props)}
-            <div className="inline-flex">
-              <Tooltip tooltipMessageId="SMSProviderConfigurationScreen.form.twilio.twilioFrom.tooltip" />
-            </div>
-          </>
-        ),
-      },
-    ];
-  }, [renderToString]);
-
   const onSenderTypeChange = useCallback(
-    (_: unknown, option?: IChoiceGroupOption) => {
-      if (option == null) {
-        return;
-      }
-      form.setState((prev) => {
-        return {
-          ...prev,
-          twilioSenderType: option.key as TwilioSenderType,
-        };
-      });
+    (value: string) => {
+      form.setState((prev) => ({
+        ...prev,
+        twilioSenderType: value as TwilioSenderType,
+      }));
     },
     [form]
   );
 
-  const horizontalChoiceGroupStyles: Partial<IChoiceGroupStyles> = useMemo(
-    () => ({
-      flexContainer: {
-        display: "flex",
-        columnGap: "16px",
-      },
-    }),
-    []
-  );
-
   return (
     <div className="flex flex-col gap-y-4">
-      <FormTextField
+      <TextField
+        size="2"
+        labelSize="2"
         type="text"
-        label={renderToString(
-          "SMSProviderConfigurationScreen.form.twilio.twilioSID"
-        )}
+        label={
+          <FormattedMessage id="SMSProviderConfigurationScreen.form.twilio.twilioSID" />
+        }
         value={form.state.twilioSID}
-        required={true}
         onChange={onStringChangeCallbacks.twilioSID}
         disabled={isTwilioSecretMasked}
         parentJSONPointer={/\/secrets\/\d+\/data/}
         fieldName="account_sid"
       />
       <div className="flex flex-col gap-3">
-        <ChoiceGroup
-          selectedKey={form.state.twilioSenderType}
-          options={senderOptions}
-          onChange={onSenderTypeChange}
-          disabled={isTwilioSecretMasked}
-          label={renderToString(
-            "SMSProviderConfigurationScreen.form.twilio.sender"
-          )}
-          required={true}
-          styles={horizontalChoiceGroupStyles}
-        />
+        <FormField
+          size="2"
+          labelSize="2"
+          label={
+            <FormattedMessage id="SMSProviderConfigurationScreen.form.twilio.sender" />
+          }
+          labelSpace="1"
+        >
+          <RadioGroup.Root
+            value={form.state.twilioSenderType}
+            onValueChange={onSenderTypeChange}
+            disabled={isTwilioSecretMasked}
+          >
+            <Flex direction="column" gap="2">
+              <Text as="label" size="2">
+                <Flex gap="2" align="center">
+                  <RadioGroup.Item value={TwilioSenderType.MessagingServiceSID} />
+                  <FormattedMessage id="SMSProviderConfigurationScreen.form.twilio.twilioMessagingServiceSID" />
+                  <Tooltip
+                    content={
+                      <FormattedMessage id="SMSProviderConfigurationScreen.form.twilio.twilioMessagingServiceSID.tooltip" />
+                    }
+                  >
+                    <InfoCircledIcon className={styles.senderInfoIcon} />
+                  </Tooltip>
+                </Flex>
+              </Text>
+              <Text as="label" size="2">
+                <Flex gap="2" align="center">
+                  <RadioGroup.Item value={TwilioSenderType.From} />
+                  <FormattedMessage id="SMSProviderConfigurationScreen.form.twilio.twilioFrom" />
+                  <Tooltip
+                    content={
+                      <FormattedMessage id="SMSProviderConfigurationScreen.form.twilio.twilioFrom.tooltip" />
+                    }
+                  >
+                    <InfoCircledIcon className={styles.senderInfoIcon} />
+                  </Tooltip>
+                </Flex>
+              </Text>
+            </Flex>
+          </RadioGroup.Root>
+        </FormField>
         {form.state.twilioSenderType ===
         TwilioSenderType.MessagingServiceSID ? (
-          <div className="flex flex-col gap-2">
-            <FormTextField
+          <div className="flex flex-col">
+            <TextField
+              size="2"
+              labelSize="2"
               type="text"
               placeholder={renderToString(
                 "SMSProviderConfigurationScreen.form.twilio.twilioMessagingServiceSID.placeholder"
@@ -1356,7 +1390,7 @@ function TwilioForm({ form }: { form: FormModel }) {
               parentJSONPointer={/\/secrets\/\d+\/data/}
               fieldName="message_service_sid"
             />
-            <Text>
+            <Text as="p" size="1" color="gray">
               <FormattedMessage
                 id="SMSProviderConfigurationScreen.form.twilio.twilioMessagingServiceSID.hint"
                 values={{
@@ -1371,7 +1405,9 @@ function TwilioForm({ form }: { form: FormModel }) {
             </Text>
           </div>
         ) : (
-          <FormTextField
+          <TextField
+            size="2"
+            labelSize="2"
             type="text"
             placeholder={renderToString(
               "SMSProviderConfigurationScreen.form.twilio.twilioFrom.placeholder"
@@ -1385,20 +1421,40 @@ function TwilioForm({ form }: { form: FormModel }) {
           />
         )}
       </div>
-      <div className="flex flex-col gap-3">
-        <ChoiceGroup
-          label={renderToString(
-            "SMSProviderConfigurationScreen.form.twilio.credentialType"
-          )}
-          required={true}
-          options={credentialTypeOptions}
-          selectedKey={form.state.twilioCredentialType}
-          onChange={onCredentialTypeChange}
-          styles={horizontalChoiceGroupStyles}
-          disabled={isTwilioSecretMasked}
-        />
+      <div className="flex flex-col gap-4">
+        <FormField
+          size="2"
+          labelSize="2"
+          label={
+            <FormattedMessage id="SMSProviderConfigurationScreen.form.twilio.credentialType" />
+          }
+          labelSpace="1"
+        >
+          <RadioGroup.Root
+            value={form.state.twilioCredentialType}
+            onValueChange={onCredentialTypeChange}
+            disabled={isTwilioSecretMasked}
+          >
+            <Flex direction="column" gap="2">
+              <Text as="label" size="2">
+                <Flex gap="2" align="center">
+                  <RadioGroup.Item value={TwilioCredentialType.AuthToken} />
+                  <FormattedMessage id="SMSProviderConfigurationScreen.form.twilio.credentialType.options.authToken" />
+                </Flex>
+              </Text>
+              <Text as="label" size="2">
+                <Flex gap="2" align="center">
+                  <RadioGroup.Item value={TwilioCredentialType.ApiKey} />
+                  <FormattedMessage id="SMSProviderConfigurationScreen.form.twilio.credentialType.options.apiKey" />
+                </Flex>
+              </Text>
+            </Flex>
+          </RadioGroup.Root>
+        </FormField>
         {form.state.twilioCredentialType === TwilioCredentialType.AuthToken ? (
-          <FormTextField
+          <TextField
+            size="2"
+            labelSize="2"
             type="text"
             placeholder={renderToString(
               "SMSProviderConfigurationScreen.form.twilio.credentialType.options.authToken"
@@ -1412,22 +1468,26 @@ function TwilioForm({ form }: { form: FormModel }) {
         ) : null}
         {form.state.twilioCredentialType === TwilioCredentialType.ApiKey ? (
           <>
-            <FormTextField
+            <TextField
+              size="2"
+              labelSize="2"
               type="text"
-              label={renderToString(
-                "SMSProviderConfigurationScreen.form.twilio.apiKeySID"
-              )}
+              label={
+                <FormattedMessage id="SMSProviderConfigurationScreen.form.twilio.apiKeySID" />
+              }
               value={form.state.twilioAPIKeySID}
               onChange={onStringChangeCallbacks.twilioAPIKeySID}
               disabled={isTwilioSecretMasked}
               parentJSONPointer={/\/secrets\/\d+\/data/}
               fieldName="api_key_sid"
             />
-            <FormTextField
+            <TextField
+              size="2"
+              labelSize="2"
               type="text"
-              label={renderToString(
-                "SMSProviderConfigurationScreen.form.twilio.apiKeySecret"
-              )}
+              label={
+                <FormattedMessage id="SMSProviderConfigurationScreen.form.twilio.apiKeySecret" />
+              }
               value={form.state.twilioAPIKeySecret ?? MASK}
               onChange={onStringChangeCallbacks.twilioAPIKeySecret}
               disabled={isTwilioSecretMasked}
@@ -1441,6 +1501,74 @@ function TwilioForm({ form }: { form: FormModel }) {
   );
 }
 
+function CopyIconButton({
+  textToCopy,
+}: {
+  textToCopy: string;
+}): React.ReactElement {
+  const { renderToString } = useContext(MessageContext);
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleCopy = useCallback(() => {
+    copyToClipboard(textToCopy);
+    setCopied(true);
+    if (timerRef.current != null) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  }, [textToCopy]);
+
+  return (
+    <RadixTooltip
+      content={
+        copied
+          ? renderToString("copied-to-clipboard")
+          : renderToString("copy")
+      }
+      open={copied ? true : undefined}
+    >
+      <RadixIconButton
+        type="button"
+        variant="ghost"
+        color="gray"
+        size="1"
+        aria-label={renderToString("copy")}
+        onClick={handleCopy}
+        className={styles.copyIconButton}
+      >
+        <CopyIcon width="1rem" height="1rem" />
+      </RadixIconButton>
+    </RadixTooltip>
+  );
+}
+
+function RevealIconButton({
+  onClick,
+}: {
+  onClick: () => void;
+}): React.ReactElement {
+  const { renderToString } = useContext(MessageContext);
+
+  return (
+    <RadixTooltip content={renderToString("reveal")}>
+      <RadixIconButton
+        type="button"
+        variant="ghost"
+        color="gray"
+        size="1"
+        aria-label={renderToString("reveal")}
+        onClick={onClick}
+        className={styles.copyIconButton}
+      >
+        <EyeOpenIcon width="1rem" height="1rem" />
+      </RadixIconButton>
+    </RadixTooltip>
+  );
+}
+
 function WebhookForm({
   form,
   onRevealSecrets,
@@ -1451,8 +1579,8 @@ function WebhookForm({
   const { renderToString } = useContext(MessageContext);
 
   const onURLChange = useCallback(
-    (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      const value = event.currentTarget.value;
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
       form.setState((prevState) => {
         return {
           ...prevState,
@@ -1464,8 +1592,8 @@ function WebhookForm({
   );
 
   const onTimeoutChange = useCallback(
-    (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      const value = parseInt(event.currentTarget.value, 10);
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseInt(e.target.value, 10);
       if (isNaN(value)) {
         return;
       }
@@ -1479,21 +1607,19 @@ function WebhookForm({
     [form]
   );
 
-  const { copyButtonProps, Feedback: CopyFeedbackComponent } = useCopyFeedback({
-    textToCopy: form.state.webhookSecretKey ?? "",
-  });
-
   const isWebhookSecretMasked = form.state.webhookSecretKey == null;
+  const webhookSecretKey = form.state.webhookSecretKey ?? "";
 
   return (
     <div className="flex flex-col gap-y-4">
-      <FormTextField
+      <TextField
+        size="2"
+        labelSize="2"
         type="text"
-        label={renderToString(
-          "SMSProviderConfigurationScreen.form.webhook.url"
-        )}
+        label={
+          <FormattedMessage id="SMSProviderConfigurationScreen.form.webhook.url" />
+        }
         value={form.state.webhookURL}
-        required={true}
         onChange={onURLChange}
         disabled={isWebhookSecretMasked}
         parentJSONPointer={/\/secrets\/\d+\/data/}
@@ -1512,39 +1638,24 @@ function WebhookForm({
   "body": "You OTP is 123456"
 }`}
       </CodeField>
-      <div>
-        <div className="flex items-end gap-x-2">
-          <TextField
-            className="flex-1"
-            type="text"
-            label={renderToString(
-              "SMSProviderConfigurationScreen.form.webhook.signatureKey"
-            )}
-            value={
-              isWebhookSecretMasked ? MASK : form.state.webhookSecretKey ?? ""
-            }
-            readOnly={true}
-          />
-          <DefaultButton
-            className={styles.secretButton}
-            id={copyButtonProps.id}
-            onClick={
-              !isWebhookSecretMasked ? copyButtonProps.onClick : onRevealSecrets
-            }
-            onMouseLeave={
-              !isWebhookSecretMasked ? copyButtonProps.onMouseLeave : undefined
-            }
-            text={
-              !isWebhookSecretMasked ? (
-                <FormattedMessage id="copy" />
-              ) : (
-                <FormattedMessage id="reveal" />
-              )
-            }
-          />
-          <CopyFeedbackComponent />
-        </div>
-        <Text block={true} variant="medium" className="mt-2">
+      <TextField
+        size="2"
+        labelSize="2"
+        type="text"
+        label={
+          <FormattedMessage id="SMSProviderConfigurationScreen.form.webhook.signatureKey" />
+        }
+        value={isWebhookSecretMasked ? MASK : webhookSecretKey}
+        readOnly={true}
+        suffixPlain={true}
+        suffix={
+          isWebhookSecretMasked ? (
+            <RevealIconButton onClick={onRevealSecrets} />
+          ) : webhookSecretKey.length > 0 ? (
+            <CopyIconButton textToCopy={webhookSecretKey} />
+          ) : undefined
+        }
+        hint={
           <FormattedMessage
             id="SMSProviderConfigurationScreen.form.webhook.signatureKey.description"
             values={{
@@ -1556,21 +1667,23 @@ function WebhookForm({
               ),
             }}
           />
-        </Text>
-      </div>
-      <FormTextField
+        }
+      />
+      <TextField
+        size="2"
+        labelSize="2"
         type="number"
-        label={renderToString(
-          "SMSProviderConfigurationScreen.form.webhook.timeout"
+        label={
+          <FormattedMessage id="SMSProviderConfigurationScreen.form.webhook.timeout" />
+        }
+        hint={renderToString(
+          "SMSProviderConfigurationScreen.form.webhook.timeout.description"
         )}
         value={String(form.state.webhookTimeout)}
         onChange={onTimeoutChange}
         disabled={isWebhookSecretMasked}
         parentJSONPointer={/\/secrets\/\d+\/data/}
         fieldName="timeout"
-        description={renderToString(
-          "SMSProviderConfigurationScreen.form.webhook.timeout.description"
-        )}
       />
     </div>
   );
@@ -1581,8 +1694,8 @@ function DenoHookForm({ form }: { form: FormModel }) {
   const { state, setState } = form;
 
   const onTimeoutChange = useCallback(
-    (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      const value = parseInt(event.currentTarget.value, 10);
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseInt(e.target.value, 10);
       if (isNaN(value)) {
         return;
       }
@@ -1645,34 +1758,40 @@ function DenoHookForm({ form }: { form: FormModel }) {
 
   return (
     <div className="flex flex-col gap-y-4">
-      <div>
-        <Text block={true} variant="medium" className="font-semibold leading-5">
-          <FormattedMessage id="SMSProviderConfigurationScreen.form.deno.script" />
-        </Text>
-        <CodeEditor
-          className="block h-120"
-          language="typescript"
-          value={
-            resourceIdx !== -1
-              ? state.resources[resourceIdx].nullableValue ?? ""
-              : ""
-          }
-          onChange={onChangeCode}
-          options={CODE_EDITOR_OPTIONS}
-        />
+      <div className="border border-[var(--gray-5)] rounded-xl overflow-hidden">
+        <div className="px-6 py-4 border-b border-[var(--gray-5)]">
+          <Text as="p" size="3" weight="medium">
+            <FormattedMessage id="SMSProviderConfigurationScreen.form.deno.script" />
+          </Text>
+        </div>
+        <div className="px-0 py-0">
+          <CodeEditor
+            className="block h-[412px]"
+            language="typescript"
+            value={
+              resourceIdx !== -1
+                ? state.resources[resourceIdx].nullableValue ?? ""
+                : ""
+            }
+            onChange={onChangeCode}
+            options={CODE_EDITOR_OPTIONS}
+          />
+        </div>
       </div>
-      <FormTextField
+      <TextField
+        size="2"
+        labelSize="2"
         type="number"
-        label={renderToString(
-          "SMSProviderConfigurationScreen.form.deno.timeout"
+        label={
+          <FormattedMessage id="SMSProviderConfigurationScreen.form.deno.timeout" />
+        }
+        hint={renderToString(
+          "SMSProviderConfigurationScreen.form.deno.timeout.description"
         )}
         value={String(form.state.denoHookTimeout)}
         onChange={onTimeoutChange}
         parentJSONPointer={/\/secrets\/\d+\/data/}
         fieldName="timeout"
-        description={renderToString(
-          "SMSProviderConfigurationScreen.form.deno.timeout.description"
-        )}
       />
     </div>
   );
diff --git a/portal/src/graphql/portal/SMTPConfigurationScreen.module.css b/portal/src/graphql/portal/SMTPConfigurationScreen.module.css
index 6d167d4fa06..1d7340a6a9e 100644
--- a/portal/src/graphql/portal/SMTPConfigurationScreen.module.css
+++ b/portal/src/graphql/portal/SMTPConfigurationScreen.module.css
@@ -1,11 +1,11 @@
 .widget {
-  grid-column: 1 / span 8;
+  grid-column: 1 / span 9;
 
   @apply tablet:col-span-full;
 }
 
 .columnFull {
-  grid-column: 1 / span 8;
+  grid-column: 1 / span 9;
 
   @apply tablet:col-span-full;
 }
@@ -26,3 +26,33 @@
 
   @apply tablet:col-span-full;
 }
+
+.providerSelector {
+  @apply flex flex-col gap-1;
+}
+
+.pageHeader {
+  @apply flex flex-col gap-2;
+}
+
+.pageTitle {
+  margin: 0;
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 600;
+  color: var(--gray-12);
+}
+
+.pageDescription,
+.providerDescription {
+  color: var(--gray-a11);
+}
+
+.providerDescription {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.contentWithSaveBar {
+  padding-bottom: 8rem;
+}
diff --git a/portal/src/graphql/portal/SMTPConfigurationScreen.tsx b/portal/src/graphql/portal/SMTPConfigurationScreen.tsx
index 3489c7f3529..a7d2fb5ea5f 100644
--- a/portal/src/graphql/portal/SMTPConfigurationScreen.tsx
+++ b/portal/src/graphql/portal/SMTPConfigurationScreen.tsx
@@ -1,25 +1,18 @@
 import cn from "classnames";
-import React, { useCallback, useContext, useState, useMemo } from "react";
+import React, { useCallback, useContext, useState, useMemo, useRef } from "react";
 import { useLocation, useParams, useNavigate } from "react-router-dom";
 import { produce } from "immer";
 import { Dialog, DialogFooter } from "@fluentui/react";
 import { FormattedMessage, Context } from "../../intl";
 import { parseSender } from "email-addresses";
-import { useTextFieldTooltip } from "../../useTextFieldTooltip";
 import ShowError from "../../ShowError";
 import ShowLoading from "../../ShowLoading";
 import FormContainer from "../../FormContainer";
-import FormTextField from "../../FormTextField";
 import {
   AppSecretConfigFormModel,
   useAppSecretConfigForm,
 } from "../../hook/useAppSecretConfigForm";
 import ScreenContent from "../../ScreenContent";
-import ScreenTitle from "../../ScreenTitle";
-import ScreenDescription from "../../ScreenDescription";
-import Widget from "../../Widget";
-import TextField from "../../TextField";
-import Toggle from "../../Toggle";
 import { startReauthentication } from "./Authenticated";
 import {
   PortalAPIAppConfig,
@@ -32,27 +25,32 @@ import {
   useSendTestEmailMutation,
   UseSendTestEmailMutationReturnType,
 } from "./mutations/sendTestEmail";
-import logoSendgrid from "../../images/sendgrid_logo.png";
+import logoSendgrid from "../../images/sendgrid_logo.svg";
+import logoAuthgear from "../../images/authgear_logo.svg";
 import styles from "./SMTPConfigurationScreen.module.css";
-import PrimaryButton from "../../PrimaryButton";
-import DefaultButton from "../../DefaultButton";
 import ExternalLink from "../../ExternalLink";
-
 import { AppSecretKey } from "./globalTypes.generated";
 import { useLocationEffect } from "../../hook/useLocationEffect";
 import { useAppSecretVisitToken } from "./mutations/generateAppSecretVisitTokenMutation";
 import { useAppAndSecretConfigQuery } from "./query/appAndSecretConfigQuery";
 import { useAppFeatureConfigQuery } from "./query/appFeatureConfigQuery";
 import FeatureDisabledMessageBar from "./FeatureDisabledMessageBar";
-import {
-  ProviderCard,
-  ProviderCardDescription,
-} from "../../components/common/ProviderCard";
 import { ErrorParseRule, ErrorParseRuleResult } from "../../error/parse";
 import { APIError, APISMTPTestFailedError } from "../../error/error";
 import { useSystemConfig } from "../../context/SystemConfigContext";
 import { RedMessageBar_RemindConfigureSMTPInSMTPConfigurationScreen } from "../../RedMessageBar";
 import { useCalloutToast } from "../../components/v2/Callout/Callout";
+import {
+  IconRadioCards,
+  IconRadioCardOption,
+} from "../../components/v2/IconRadioCards/IconRadioCards";
+import { TextField } from "../../components/v2/TextField/TextField";
+import { PrimaryButton } from "../../components/v2/Button/PrimaryButton/PrimaryButton";
+import { SecondaryButton } from "../../components/v2/Button/SecondaryButton/SecondaryButton";
+import { Text } from "@radix-ui/themes";
+import { EnvelopeClosedIcon, EyeNoneIcon, EyeOpenIcon } from "@radix-ui/react-icons";
+import { SaveFunctionBar } from "../../components/v2/SaveFunctionBar/SaveFunctionBar";
+import { useFormContainerBaseContext } from "../../FormContainerBase";
 
 interface LocationState {
   isEdit: boolean;
@@ -66,6 +64,7 @@ function isLocationState(raw: unknown): raw is LocationState {
 }
 
 enum ProviderType {
+  Authgear = "authgear",
   Sendgrid = "sendgrid",
   Custom = "custom",
 }
@@ -76,6 +75,9 @@ const SENDGRID_HOST = "smtp.sendgrid.net";
 const SENDGRID_PORT_STRING = "587";
 const SENDGRID_USERNAME = "apikey";
 
+// Matches v2 IconRadioCards storybook inner icon size (SquareIcon iconSize).
+const PROVIDER_RADIO_ICON_SIZE = "1.375rem";
+
 interface ConfigFormState {
   enabled: boolean;
   providerType: ProviderType;
@@ -108,7 +110,11 @@ function constructFormState(
     secrets.smtpSecret?.host === SENDGRID_HOST &&
     String(secrets.smtpSecret.port) === SENDGRID_PORT_STRING &&
     secrets.smtpSecret.username === SENDGRID_USERNAME;
-  const providerType = isSendgrid ? ProviderType.Sendgrid : ProviderType.Custom;
+  const providerType = !enabled
+    ? ProviderType.Authgear
+    : isSendgrid
+      ? ProviderType.Sendgrid
+      : ProviderType.Custom;
   const isPasswordMasked = enabled && secrets.smtpSecret?.password == null;
 
   let sendgridAPIKey = "";
@@ -251,10 +257,6 @@ function constructSecretUpdateInstruction(
   };
 }
 
-const CUSTOM_PROVIDER_ICON_PROPS = {
-  iconName: "Mail",
-};
-
 const ERROR_RULES: ErrorParseRule[] = [
   (apiError: APIError): ErrorParseRuleResult => {
     if (apiError.reason === "SMTPTestFailed") {
@@ -290,108 +292,69 @@ const SMTPConfigurationScreenContent: React.VFC<SMTPConfigurationScreenContentPr
 
     const [isDialogHidden, setIsDialogHidden] = useState(true);
     const [toAddress, setToAddress] = useState("");
+    const [showPassword, setShowPassword] = useState(false);
     const { viewer } = useViewerQuery();
     const { renderToString } = useContext(Context);
+    const { isDirty } = useFormContainerBaseContext();
+    const contentWidthAnchorRef = useRef<HTMLDivElement>(null);
+
+    const onChangeProviderType = useCallback(
+      (value: ProviderType) => {
+        setState((s) => ({
+          ...s,
+          enabled: value !== ProviderType.Authgear,
+          providerType: value,
+        }));
+      },
+      [setState]
+    );
 
-    const openSendTestEmailDialogButtonEnabled = useMemo(() => {
-      if (!state.enabled) {
-        return false;
-      }
-      switch (state.providerType) {
-        case ProviderType.Sendgrid:
-          return (
-            state.sendgridAPIKey !== "" && state.sendgridSenderAddress !== ""
-          );
-        case ProviderType.Custom:
-          return (
-            state.customHost !== "" &&
-            state.customPortString !== "" &&
-            state.customUsername !== "" &&
-            state.customPassword !== "" &&
-            state.customSenderAddress !== ""
-          );
-      }
-    }, [state]);
-
-    const sendTestEmailButtonEnabled = useMemo(() => {
-      return toAddress !== "";
-    }, [toAddress]);
-
-    const onStringChangeCallbacks = useMemo(() => {
-      const callbackFactory = (
-        key:
-          | "sendgridAPIKey"
-          | "sendgridSenderName"
-          | "sendgridSenderAddress"
-          | "customHost"
-          | "customUsername"
-          | "customPassword"
-          | "customSenderName"
-          | "customSenderAddress"
-      ) => {
-        return (_: unknown, value?: string) => {
-          if (value != null) {
-            setState((state) => {
-              const s: FormState = {
-                ...state,
-              };
-              s[key] = value;
-              return s;
-            });
-          }
+    const fieldCallbacks = useMemo(() => {
+      const make =
+        (
+          key:
+            | "sendgridAPIKey"
+            | "sendgridSenderName"
+            | "sendgridSenderAddress"
+            | "customHost"
+            | "customUsername"
+            | "customPassword"
+            | "customSenderName"
+            | "customSenderAddress"
+        ) =>
+        (e: React.ChangeEvent<HTMLInputElement>) => {
+          const value = e.target.value;
+          setState((s) => {
+            const next: FormState = { ...s };
+            next[key] = value;
+            return next;
+          });
         };
-      };
       return {
-        sendgridAPIKey: callbackFactory("sendgridAPIKey"),
-        sendgridSenderName: callbackFactory("sendgridSenderName"),
-        sendgridSenderAddress: callbackFactory("sendgridSenderAddress"),
-        customHost: callbackFactory("customHost"),
-        customUsername: callbackFactory("customUsername"),
-        customPassword: callbackFactory("customPassword"),
-        customSenderName: callbackFactory("customSenderName"),
-        customSenderAddress: callbackFactory("customSenderAddress"),
+        sendgridAPIKey: make("sendgridAPIKey"),
+        sendgridSenderName: make("sendgridSenderName"),
+        sendgridSenderAddress: make("sendgridSenderAddress"),
+        customHost: make("customHost"),
+        customUsername: make("customUsername"),
+        customPassword: make("customPassword"),
+        customSenderName: make("customSenderName"),
+        customSenderAddress: make("customSenderAddress"),
       };
     }, [setState]);
 
     const onCustomPortChange = useCallback(
-      (_: unknown, value?: string) => {
-        if (value != null) {
-          let newValue: string | undefined;
-          if (value !== "") {
-            const port = Number(value);
-            if (!isNaN(port)) {
-              newValue = value;
-            }
-          } else {
-            newValue = "";
-          }
-          if (newValue !== undefined) {
-            const v = newValue;
-            setState((state) => {
-              return {
-                ...state,
-                customPortString: v,
-              };
-            });
-          }
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        if (value === "" || !isNaN(Number(value))) {
+          setState((s) => ({ ...s, customPortString: value }));
         }
       },
       [setState]
     );
 
-    const onChangeEnabled = useCallback(
-      (_event, checked?: boolean) => {
-        if (checked != null) {
-          setState((state) => {
-            return {
-              ...state,
-              enabled: checked,
-            };
-          });
-        }
-      },
-      [setState]
-    );
+    const onToggleShowPassword = useCallback(() => {
+      setShowPassword((v) => !v);
+    }, []);
 
     const navigate = useNavigate();
 
@@ -400,23 +363,44 @@ const SMTPConfigurationScreenContent: React.VFC<SMTPConfigurationScreenContentPr
         e.preventDefault();
         e.stopPropagation();
 
-        const state: LocationState = {
+        const locationState: LocationState = {
           isEdit: true,
         };
 
-        startReauthentication(navigate, state).catch((e) => {
-          // Normally there should not be any error.
+        startReauthentication(navigate, locationState).catch((e) => {
           console.error(e);
         });
       },
       [navigate]
     );
 
+    const openSendTestEmailDialogButtonEnabled = useMemo(() => {
+      switch (state.providerType) {
+        case ProviderType.Authgear:
+          return false;
+        case ProviderType.Sendgrid:
+          return (
+            state.sendgridAPIKey !== "" && state.sendgridSenderAddress !== ""
+          );
+        case ProviderType.Custom:
+          return (
+            state.customHost !== "" &&
+            state.customPortString !== "" &&
+            state.customUsername !== "" &&
+            state.customPassword !== "" &&
+            state.customSenderAddress !== ""
+          );
+        default:
+          return false;
+      }
+    }, [state]);
+
+    const sendTestEmailButtonEnabled = useMemo(() => toAddress !== "", [toAddress]);
+
     const onClickSendTestEmail = useCallback(
       (e: React.MouseEvent<unknown>) => {
         e.preventDefault();
         e.stopPropagation();
-
         setToAddress(viewer?.email ?? "");
         setIsDialogHidden(false);
       },
@@ -427,7 +411,6 @@ const SMTPConfigurationScreenContent: React.VFC<SMTPConfigurationScreenContentPr
       (e?: React.MouseEvent<unknown>) => {
         e?.preventDefault();
         e?.stopPropagation();
-
         if (!loading) {
           setIsDialogHidden(true);
         }
@@ -442,6 +425,8 @@ const SMTPConfigurationScreenContent: React.VFC<SMTPConfigurationScreenContentPr
 
         let input: SendTestEmailOptions;
         switch (state.providerType) {
+          case ProviderType.Authgear:
+            return;
           case ProviderType.Sendgrid:
             input = {
               smtpHost: SENDGRID_HOST,
@@ -468,6 +453,8 @@ const SMTPConfigurationScreenContent: React.VFC<SMTPConfigurationScreenContentPr
               to: toAddress,
             };
             break;
+          default:
+            return;
         }
 
         sendTestEmail(input).then(
@@ -488,79 +475,142 @@ const SMTPConfigurationScreenContent: React.VFC<SMTPConfigurationScreenContentPr
       [sendTestEmail, showToast, state, toAddress]
     );
 
-    const onChangeToAddress = useCallback((_, value?: string) => {
-      if (value != null) {
-        setToAddress(value);
-      }
-    }, []);
+    const onChangeToAddress = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        setToAddress(e.target.value);
+      },
+      []
+    );
 
-    const dialogContentProps = useMemo(() => {
-      return {
+    const dialogContentProps = useMemo(
+      () => ({
         title: renderToString(
           "SMTPConfigurationScreen.send-test-email-dialog.title"
         ),
         subText: renderToString(
           "SMTPConfigurationScreen.send-test-email-dialog.description"
         ),
-      };
-    }, [renderToString]);
-
-    const onClickProviderSendgrid = useCallback(
-      (e: React.MouseEvent<unknown>) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        setState((state) => {
-          return {
-            ...state,
-            providerType: ProviderType.Sendgrid,
-          };
-        });
-      },
-      [setState]
+      }),
+      [renderToString]
     );
 
-    const onClickProviderCustom = useCallback(
-      (e: React.MouseEvent<unknown>) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        setState((state) => {
-          return {
-            ...state,
-            providerType: ProviderType.Custom,
-          };
-        });
-      },
-      [setState]
+    const providerOptions = useMemo(
+      (): IconRadioCardOption<ProviderType>[] => [
+        {
+          value: ProviderType.Authgear,
+          icon: (
+            <img
+              src={logoAuthgear}
+              alt=""
+              className="object-contain"
+              style={{
+                width: PROVIDER_RADIO_ICON_SIZE,
+                height: PROVIDER_RADIO_ICON_SIZE,
+              }}
+            />
+          ),
+          title: (
+            <FormattedMessage id="SMTPConfigurationScreen.provider.authgear" />
+          ),
+          disabled: state.isPasswordMasked,
+        },
+        {
+          value: ProviderType.Sendgrid,
+          icon: (
+            <img
+              src={logoSendgrid}
+              alt=""
+              className="object-contain"
+              style={{
+                width: PROVIDER_RADIO_ICON_SIZE,
+                height: PROVIDER_RADIO_ICON_SIZE,
+              }}
+            />
+          ),
+          title: (
+            <FormattedMessage id="SMTPConfigurationScreen.provider.sendgrid" />
+          ),
+          disabled: state.isPasswordMasked || isCustomSMTPDisabled,
+        },
+        {
+          value: ProviderType.Custom,
+          icon: (
+            <EnvelopeClosedIcon
+              width={PROVIDER_RADIO_ICON_SIZE}
+              height={PROVIDER_RADIO_ICON_SIZE}
+            />
+          ),
+          title: (
+            <FormattedMessage id="SMTPConfigurationScreen.provider.custom" />
+          ),
+          disabled: state.isPasswordMasked || isCustomSMTPDisabled,
+        },
+      ],
+      [isCustomSMTPDisabled, state.isPasswordMasked]
     );
 
-    const hostProps = useTextFieldTooltip({
-      tooltipLabel: renderToString("SMTPConfigurationScreen.host.tooltip"),
-    });
-
-    const portProps = useTextFieldTooltip({
-      tooltipLabel: renderToString("SMTPConfigurationScreen.port.tooltip"),
-    });
+    const providerDescription = useMemo(() => {
+      switch (state.providerType) {
+        case ProviderType.Authgear:
+          return (
+            <FormattedMessage id="SMTPConfigurationScreen.authgear.description" />
+          );
+        case ProviderType.Sendgrid:
+          return (
+            <FormattedMessage
+              id="SMTPConfigurationScreen.sendgrid.description"
+              values={{
+                // eslint-disable-next-line react/no-unstable-nested-components
+                DocLink: (chunks: React.ReactNode) => (
+                  <ExternalLink href="https://docs.authgear.com/customization/custom-providers/custom-email-provider">
+                    {chunks}
+                  </ExternalLink>
+                ),
+              }}
+            />
+          );
+        case ProviderType.Custom:
+          return (
+            <FormattedMessage
+              id="SMTPConfigurationScreen.custom.description"
+              values={{
+                // eslint-disable-next-line react/no-unstable-nested-components
+                DocLink: (chunks: React.ReactNode) => (
+                  <ExternalLink href="https://docs.authgear.com/customization/custom-providers/custom-email-provider">
+                    {chunks}
+                  </ExternalLink>
+                ),
+              }}
+            />
+          );
+        default:
+          return null;
+      }
+    }, [state.providerType]);
 
-    const sendgridAPIKeyProps = useTextFieldTooltip({
-      tooltipLabel: renderToString(
-        "SMTPConfigurationScreen.sendgrid.api-key.tooltip"
-      ),
-    });
+    const showSettings =
+      state.providerType === ProviderType.Sendgrid ||
+      state.providerType === ProviderType.Custom;
 
     return (
-      <ScreenContent>
-        <ScreenTitle className={styles.widget}>
-          {isAuthgearOnce ? (
-            <FormattedMessage id="SMTPConfigurationScreen.title--authgearonce" />
-          ) : (
-            <FormattedMessage id="SMTPConfigurationScreen.title" />
-          )}
-        </ScreenTitle>
-        <ScreenDescription className={styles.widget}>
-          <FormattedMessage id="SMTPConfigurationScreen.description" />
-        </ScreenDescription>
+      <ScreenContent
+        className={cn(isDirty ? styles.contentWithSaveBar : null)}
+      >
+        <div
+          ref={contentWidthAnchorRef}
+          className={cn(styles.widget, styles.pageHeader)}
+        >
+          <h1 className={styles.pageTitle}>
+            {isAuthgearOnce ? (
+              <FormattedMessage id="SMTPConfigurationScreen.title--authgearonce" />
+            ) : (
+              <FormattedMessage id="SMTPConfigurationScreen.title" />
+            )}
+          </h1>
+          <Text as="p" size="2" color="gray" className={styles.pageDescription}>
+            <FormattedMessage id="SMTPConfigurationScreen.description" />
+          </Text>
+        </div>
         {isCustomSMTPDisabled ? (
           <FeatureDisabledMessageBar
             className={styles.widget}
@@ -574,239 +624,239 @@ const SMTPConfigurationScreenContent: React.VFC<SMTPConfigurationScreenContentPr
             <RedMessageBar_RemindConfigureSMTPInSMTPConfigurationScreen className="self-start w-fit" />
           </div>
         ) : null}
-        <Widget className={styles.widget} contentLayout="grid">
-          <Toggle
-            className={styles.columnFull}
-            checked={state.enabled}
-            onChange={onChangeEnabled}
-            label={renderToString("SMTPConfigurationScreen.enable.label")}
-            inlineLabel={true}
-            disabled={state.isPasswordMasked || isCustomSMTPDisabled}
+
+        <div className={cn(styles.widget, styles.providerSelector)}>
+          <IconRadioCards
+            size="3"
+            value={state.providerType}
+            onValueChange={onChangeProviderType}
+            options={providerOptions}
+            numberOfColumns={3}
+            itemFillSpaces={true}
           />
-          {state.enabled ? (
-            <>
-              <ProviderCard
-                className={styles.columnLeft}
-                onClick={onClickProviderSendgrid}
-                isSelected={state.providerType === ProviderType.Sendgrid}
-                disabled={state.isPasswordMasked}
-                logoSrc={logoSendgrid}
-              >
-                <FormattedMessage id="SMTPConfigurationScreen.provider.sendgrid" />
-              </ProviderCard>
-              <ProviderCard
-                className={styles.columnRight}
-                onClick={onClickProviderCustom}
-                isSelected={state.providerType === ProviderType.Custom}
-                disabled={state.isPasswordMasked}
-                iconProps={CUSTOM_PROVIDER_ICON_PROPS}
-              >
-                <FormattedMessage id="SMTPConfigurationScreen.provider.custom" />
-              </ProviderCard>
-              {form.state.providerType === ProviderType.Custom ? (
+          {providerDescription != null ? (
+            <Text as="p" size="1" color="gray" className={styles.providerDescription}>
+              {providerDescription}
+            </Text>
+          ) : null}
+        </div>
+
+        {showSettings ? (
+          <div
+            className={cn(
+              styles.widget,
+              "border border-[var(--gray-5)] rounded-lg p-6 flex gap-8 bg-white"
+            )}
+          >
+            <Text
+              as="p"
+              size="3"
+              weight="medium"
+              className="shrink-0 w-[200px]"
+            >
+              <FormattedMessage id="SMTPConfigurationScreen.settings.label" />
+            </Text>
+            <div className="flex-1 flex flex-col gap-4 min-w-0">
+              {state.providerType === ProviderType.Sendgrid ? (
                 <>
-                  <ProviderCardDescription>
-                    <FormattedMessage
-                      id="SMTPConfigurationScreen.custom.description"
-                      values={{
-                        // eslint-disable-next-line react/no-unstable-nested-components
-                        DocLink: (chunks: React.ReactNode) => (
-                          <ExternalLink href="https://docs.authgear.com/customization/custom-providers/custom-email-provider">
-                            {chunks}
-                          </ExternalLink>
-                        ),
-                      }}
-                    />
-                  </ProviderCardDescription>
-                  <FormTextField
-                    className={styles.columnLeft}
-                    type="text"
-                    label={renderToString("SMTPConfigurationScreen.host.label")}
-                    value={state.customHost}
-                    disabled={state.isPasswordMasked}
-                    required={true}
-                    onChange={onStringChangeCallbacks.customHost}
-                    parentJSONPointer={/\/secrets\/\d+\/data/}
-                    fieldName="host"
-                    {...hostProps}
-                  />
-                  <FormTextField
-                    className={styles.columnLeft}
-                    type="text"
-                    label={renderToString("SMTPConfigurationScreen.port.label")}
-                    value={state.customPortString}
-                    disabled={state.isPasswordMasked}
-                    required={true}
-                    onChange={onCustomPortChange}
-                    parentJSONPointer={/\/secrets\/\d+\/data/}
-                    fieldName="port"
-                    {...portProps}
-                  />
-                  <FormTextField
-                    className={styles.columnLeft}
-                    type="text"
-                    label={renderToString(
-                      "SMTPConfigurationScreen.username.label"
-                    )}
-                    value={state.customUsername}
-                    disabled={state.isPasswordMasked}
-                    required={true}
-                    onChange={onStringChangeCallbacks.customUsername}
-                    parentJSONPointer={/\/secrets\/\d+\/data/}
-                    fieldName="username"
-                  />
-                  <FormTextField
-                    className={styles.columnLeft}
+                  <TextField
+                    size="2"
+                    labelSize="2"
                     type="password"
-                    label={renderToString(
-                      "SMTPConfigurationScreen.password.label"
+                    label={
+                      <FormattedMessage id="SMTPConfigurationScreen.sendgrid.api-key.label" />
+                    }
+                    hint={renderToString(
+                      "SMTPConfigurationScreen.sendgrid.api-key.tooltip"
                     )}
                     value={
                       state.isPasswordMasked
                         ? MASKED_PASSWORD_VALUE
-                        : state.customPassword
+                        : state.sendgridAPIKey
                     }
                     disabled={state.isPasswordMasked}
-                    required={true}
-                    onChange={onStringChangeCallbacks.customPassword}
+                    onChange={fieldCallbacks.sendgridAPIKey}
                     parentJSONPointer={/\/secrets\/\d+\/data/}
                     fieldName="password"
                   />
-                  <FormTextField
-                    className={styles.columnLeft}
-                    type="text"
-                    label={renderToString(
-                      "SMTPConfigurationScreen.senderName.label"
-                    )}
-                    value={state.customSenderName}
+                  <TextField
+                    size="2"
+                    labelSize="2"
+                    label={
+                      <FormattedMessage id="SMTPConfigurationScreen.senderName.label" />
+                    }
+                    value={state.sendgridSenderName}
                     disabled={state.isPasswordMasked}
-                    onChange={onStringChangeCallbacks.customSenderName}
+                    onChange={fieldCallbacks.sendgridSenderName}
                     parentJSONPointer={/\/secrets\/\d+\/data/}
-                    /* Otherwise, the field is registered twice, and the error will be shown twice. */
-                    /* Luckily, this field will not have any error so we can work around this way. */
                     fieldName="__THIS_IS_INTENTIONALLY_CHANGED_TO_A_NONEXISTENT_FIELD_NAME__"
                   />
-                  <FormTextField
-                    className={styles.columnLeft}
-                    type="text"
-                    label={renderToString(
-                      "SMTPConfigurationScreen.senderAddress.label"
-                    )}
-                    value={state.customSenderAddress}
+                  <TextField
+                    size="2"
+                    labelSize="2"
+                    label={
+                      <FormattedMessage id="SMTPConfigurationScreen.senderAddress.label" />
+                    }
+                    value={state.sendgridSenderAddress}
                     disabled={state.isPasswordMasked}
-                    required={true}
-                    onChange={onStringChangeCallbacks.customSenderAddress}
+                    onChange={fieldCallbacks.sendgridSenderAddress}
                     parentJSONPointer={/\/secrets\/\d+\/data/}
                     fieldName="sender"
                   />
                 </>
               ) : null}
-              {form.state.providerType === ProviderType.Sendgrid ? (
+              {state.providerType === ProviderType.Custom ? (
                 <>
-                  <ProviderCardDescription>
-                    <FormattedMessage
-                      id="SMTPConfigurationScreen.sendgrid.description"
-                      values={{
-                        // eslint-disable-next-line react/no-unstable-nested-components
-                        DocLink: (chunks: React.ReactNode) => (
-                          <ExternalLink href="https://docs.authgear.com/customization/custom-providers/custom-email-provider">
-                            {chunks}
-                          </ExternalLink>
-                        ),
-                      }}
-                    />
-                  </ProviderCardDescription>
-                  <FormTextField
-                    className={styles.columnLeft}
-                    type="password"
-                    label={renderToString(
-                      "SMTPConfigurationScreen.sendgrid.api-key.label"
+                  <TextField
+                    size="2"
+                    labelSize="2"
+                    label={
+                      <FormattedMessage id="SMTPConfigurationScreen.host.label" />
+                    }
+                    hint={renderToString(
+                      "SMTPConfigurationScreen.host.tooltip"
+                    )}
+                    value={state.customHost}
+                    disabled={state.isPasswordMasked}
+                    onChange={fieldCallbacks.customHost}
+                    parentJSONPointer={/\/secrets\/\d+\/data/}
+                    fieldName="host"
+                  />
+                  <TextField
+                    size="2"
+                    labelSize="2"
+                    label={
+                      <FormattedMessage id="SMTPConfigurationScreen.port.label" />
+                    }
+                    hint={renderToString(
+                      "SMTPConfigurationScreen.port.tooltip"
                     )}
+                    value={state.customPortString}
+                    disabled={state.isPasswordMasked}
+                    onChange={onCustomPortChange}
+                    parentJSONPointer={/\/secrets\/\d+\/data/}
+                    fieldName="port"
+                  />
+                  <TextField
+                    size="2"
+                    labelSize="2"
+                    label={
+                      <FormattedMessage id="SMTPConfigurationScreen.username.label" />
+                    }
+                    value={state.customUsername}
+                    disabled={state.isPasswordMasked}
+                    onChange={fieldCallbacks.customUsername}
+                    parentJSONPointer={/\/secrets\/\d+\/data/}
+                    fieldName="username"
+                  />
+                  <TextField
+                    size="2"
+                    labelSize="2"
+                    type={showPassword ? "text" : "password"}
+                    label={
+                      <FormattedMessage id="SMTPConfigurationScreen.password.label" />
+                    }
                     value={
                       state.isPasswordMasked
                         ? MASKED_PASSWORD_VALUE
-                        : state.sendgridAPIKey
+                        : state.customPassword
                     }
-                    required={true}
                     disabled={state.isPasswordMasked}
-                    onChange={onStringChangeCallbacks.sendgridAPIKey}
+                    onChange={fieldCallbacks.customPassword}
                     parentJSONPointer={/\/secrets\/\d+\/data/}
                     fieldName="password"
-                    {...sendgridAPIKeyProps}
+                    suffixPlain
+                    suffix={
+                      !state.isPasswordMasked ? (
+                        <button
+                          type="button"
+                          onClick={onToggleShowPassword}
+                          className="flex items-center text-[var(--gray-9)]"
+                        >
+                          {showPassword ? <EyeNoneIcon /> : <EyeOpenIcon />}
+                        </button>
+                      ) : undefined
+                    }
                   />
-
-                  <FormTextField
-                    className={styles.columnLeft}
-                    type="text"
-                    label={renderToString(
-                      "SMTPConfigurationScreen.senderName.label"
-                    )}
-                    value={state.sendgridSenderName}
+                  <TextField
+                    size="2"
+                    labelSize="2"
+                    label={
+                      <FormattedMessage id="SMTPConfigurationScreen.senderName.label" />
+                    }
+                    value={state.customSenderName}
                     disabled={state.isPasswordMasked}
-                    onChange={onStringChangeCallbacks.sendgridSenderName}
+                    onChange={fieldCallbacks.customSenderName}
                     parentJSONPointer={/\/secrets\/\d+\/data/}
-                    fieldName="sender"
+                    fieldName="__THIS_IS_INTENTIONALLY_CHANGED_TO_A_NONEXISTENT_FIELD_NAME__"
                   />
-                  <FormTextField
-                    className={styles.columnLeft}
-                    type="text"
-                    label={renderToString(
-                      "SMTPConfigurationScreen.senderAddress.label"
-                    )}
-                    value={state.sendgridSenderAddress}
+                  <TextField
+                    size="2"
+                    labelSize="2"
+                    label={
+                      <FormattedMessage id="SMTPConfigurationScreen.senderAddress.label" />
+                    }
+                    value={state.customSenderAddress}
                     disabled={state.isPasswordMasked}
-                    required={true}
-                    onChange={onStringChangeCallbacks.sendgridSenderAddress}
+                    onChange={fieldCallbacks.customSenderAddress}
                     parentJSONPointer={/\/secrets\/\d+\/data/}
                     fieldName="sender"
                   />
                 </>
               ) : null}
               {state.isPasswordMasked ? (
-                <PrimaryButton
-                  className={styles.columnSmall}
-                  disabled={isCustomSMTPDisabled}
-                  onClick={onClickEdit}
-                  text={<FormattedMessage id="edit" />}
-                />
-              ) : (
-                <DefaultButton
-                  className={styles.columnSmall}
-                  onClick={onClickSendTestEmail}
-                  disabled={!openSendTestEmailDialogButtonEnabled}
-                  text={
-                    <FormattedMessage id="SMTPConfigurationScreen.send-test-email.label" />
-                  }
-                />
-              )}
-              <Dialog
-                hidden={isDialogHidden}
-                onDismiss={onDismissDialog}
-                dialogContentProps={dialogContentProps}
-              >
-                <TextField
-                  type="email"
-                  placeholder="user@example.com"
-                  value={toAddress}
-                  required={true}
-                  onChange={onChangeToAddress}
-                />
-                <DialogFooter>
+                <div>
                   <PrimaryButton
-                    onClick={onClickSend}
-                    disabled={!sendTestEmailButtonEnabled || loading}
-                    text={<FormattedMessage id="send" />}
+                    size="3"
+                    disabled={isCustomSMTPDisabled}
+                    onClick={onClickEdit}
+                    text={<FormattedMessage id="edit" />}
                   />
-                  <DefaultButton
-                    onClick={onDismissDialog}
-                    disabled={loading}
-                    text={<FormattedMessage id="cancel" />}
+                </div>
+              ) : (
+                <div>
+                  <SecondaryButton
+                    size="2"
+                    onClick={onClickSendTestEmail}
+                    disabled={!openSendTestEmailDialogButtonEnabled}
+                    text={
+                      <FormattedMessage id="SMTPConfigurationScreen.send-test-email.label" />
+                    }
                   />
-                </DialogFooter>
-              </Dialog>
-            </>
-          ) : null}
-        </Widget>
+                </div>
+              )}
+            </div>
+          </div>
+        ) : null}
+
+        <Dialog
+          hidden={isDialogHidden}
+          onDismiss={onDismissDialog}
+          dialogContentProps={dialogContentProps}
+        >
+          <TextField
+            size="3"
+            type="email"
+            placeholder="user@example.com"
+            value={toAddress}
+            onChange={onChangeToAddress}
+          />
+          <DialogFooter>
+            <PrimaryButton
+              size="3"
+              onClick={onClickSend}
+              disabled={!sendTestEmailButtonEnabled || loading}
+              text={<FormattedMessage id="send" />}
+            />
+            <SecondaryButton
+              size="3"
+              onClick={onDismissDialog}
+              disabled={loading}
+              text={<FormattedMessage id="cancel" />}
+            />
+          </DialogFooter>
+        </Dialog>
+        <SaveFunctionBar anchorRef={contentWidthAnchorRef} />
       </ScreenContent>
     );
   };
@@ -909,6 +959,7 @@ const SMTPConfigurationScreen1: React.VFC<{
   return (
     <FormContainer
       form={form}
+      hideFooterComponent
       errorRules={ERROR_RULES}
       localError={sendTestEmailHandle.error}
     >
diff --git a/portal/src/images/authgear_logo.svg b/portal/src/images/authgear_logo.svg
new file mode 100644
index 00000000000..66c3cf45f7d
--- /dev/null
+++ b/portal/src/images/authgear_logo.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0541 2.29944C11.8727 2.29944 11.6855 2.30698 11.5135 2.31415L11.5123 2.31421L11.5109 2.31427C7.52041 2.50897 4.09927 5.21975 2.99109 9.06765C2.74404 9.90669 2.6171 10.782 2.60963 11.6637L2.60961 11.6652V11.7315C2.60961 12.4576 2.76859 13.2822 2.89208 13.8271L2.89295 13.8309L2.8939 13.8348C2.90316 13.8718 2.9143 13.908 2.93167 13.9482C3.00625 14.231 3.09145 14.5098 3.19157 14.7888C3.04302 15.0789 2.76834 15.5243 2.44563 16.0159C2.07991 16.573 1.66869 17.1654 1.35153 17.6077C1.33099 17.6335 1.31828 17.6557 1.31336 17.6644C1.30811 17.6736 1.30327 17.6827 1.29956 17.69C0.899977 18.3633 0.904217 19.2081 1.28791 19.8818L1.28827 19.8824L1.28862 19.883C1.6831 20.5692 2.41262 20.9908 3.19588 20.9908H11.4129L11.4287 20.9914C11.592 20.9982 11.7578 21.0051 11.9244 21.0051C14.4236 21.0051 16.7753 20.0387 18.5562 18.265C20.3364 16.499 21.325 14.1474 21.34 11.6544V11.6534V11.5875C21.34 11.0955 21.2711 10.5012 21.1308 9.82916L21.1266 9.80895L21.1201 9.78937C21.1201 9.78937 21.1199 9.78899 21.1196 9.78791C21.1193 9.78684 21.1189 9.7854 21.1183 9.78347C21.117 9.77935 21.1157 9.77474 21.1139 9.76812L21.1133 9.7661C21.1116 9.76005 21.1091 9.75151 21.1062 9.742C21.0338 9.37816 20.934 9.01664 20.8171 8.66694C20.8278 8.63982 20.8363 8.6139 20.8432 8.58997C20.8649 8.51782 20.9382 8.36268 21.0696 8.12955C21.1959 7.90546 21.3604 7.63602 21.5428 7.34921C21.9073 6.776 22.336 6.14525 22.6573 5.69189L22.673 5.66965L22.679 5.65768C22.6838 5.65025 22.6911 5.63866 22.6988 5.6244C23.0997 4.9442 23.0963 4.10605 22.713 3.42448C22.3249 2.73439 21.5932 2.31385 20.8041 2.31385H12.5656L12.5498 2.31319C12.3864 2.30636 12.2207 2.29944 12.0541 2.29944ZM4.63916 9.48373C5.54794 6.35699 8.33613 4.1553 11.6026 3.99755C11.7625 3.99027 11.9124 3.98353 12.0541 3.98353C12.1956 3.98353 12.3459 3.99029 12.498 3.99753L12.5065 3.99793H20.8186C20.9969 3.99793 21.1684 4.09911 21.2581 4.25713C21.3449 4.41023 21.3474 4.59463 21.2655 4.74953C20.8838 5.28975 20.5524 5.86427 20.2315 6.42045L20.2232 6.4349C19.8938 7.00577 19.5753 7.55687 19.2124 8.06523C19.0396 8.3015 19.0051 8.59885 19.1014 8.86369L19.1024 8.86658L19.1036 8.86946C19.2614 9.28118 19.3858 9.72305 19.476 10.1672L19.4776 10.1749L19.4795 10.1826C19.4846 10.2029 19.4896 10.2204 19.493 10.2326L19.4934 10.2337C19.4947 10.2383 19.4958 10.2422 19.4967 10.2457C19.4977 10.2489 19.4985 10.2518 19.4991 10.2544C19.6033 10.7848 19.6561 11.2464 19.6561 11.5947V11.6512C19.6279 15.8777 16.1576 19.321 11.9316 19.321C11.7901 19.321 11.6397 19.3143 11.4877 19.3071L11.4791 19.3067H3.20309C3.01909 19.3067 2.85043 19.2078 2.76357 19.0547L2.76254 19.0528L2.76147 19.051C2.6784 18.9086 2.67257 18.7246 2.75138 18.5659C2.76305 18.5494 2.77589 18.5312 2.78983 18.5115C2.99386 18.223 3.43121 17.6044 3.85525 16.9583C4.08757 16.6043 4.31833 16.2384 4.50569 15.9112C4.6861 15.5962 4.84323 15.2885 4.9114 15.0565C4.97284 14.8662 4.95935 14.6658 4.88603 14.4918C4.74933 14.1494 4.63926 13.7988 4.54933 13.4389L4.54601 13.4256L4.52599 13.3656C4.38024 12.702 4.30789 12.1456 4.30789 11.7315V11.6756C4.31492 10.9516 4.41837 10.2361 4.62444 9.54214L4.63916 9.49256V9.48373Z" fill="#0043E0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.79733 11.7461C8.79733 13.5254 10.2462 14.9747 12.0252 14.9747C13.8042 14.9747 15.2531 13.5254 15.2531 11.7461C15.2531 9.96669 13.8042 8.51746 12.0252 8.51746C10.2462 8.51746 8.79733 9.96669 8.79733 11.7461ZM10.5409 11.7461C10.5409 10.9234 11.2029 10.2614 12.0252 10.2614C12.8367 10.2614 13.5095 10.9239 13.5095 11.7461C13.5095 12.5687 12.8476 13.2307 12.0252 13.2307C11.2029 13.2307 10.5409 12.5687 10.5409 11.7461Z" fill="#0043E0"/>
+<path d="M11.4123 7.11246C11.8857 7.0524 12.2209 6.61991 12.1607 6.14646C12.1007 5.67301 11.6683 5.3379 11.1947 5.39795C10.6311 5.46945 10.0784 5.61584 9.55126 5.83417C8.7749 6.15575 8.06949 6.6271 7.47529 7.22129C7.13783 7.55875 7.13783 8.10589 7.47529 8.44334C7.81276 8.78081 8.35989 8.78081 8.69735 8.44334C9.13106 8.00963 9.64595 7.66559 10.2126 7.43087C10.5973 7.2715 11.0008 7.16465 11.4123 7.11246Z" fill="#0043E0"/>
+<path d="M13.0481 6.24311C13.2086 5.79368 13.7031 5.55949 14.1526 5.72003C15.3953 6.16396 16.4705 6.98131 17.2307 8.06009C17.9909 9.13887 18.3989 10.4263 18.3989 11.7461C18.3989 12.2233 18.012 12.6101 17.5348 12.6101C17.0575 12.6101 16.6707 12.2233 16.6707 11.7461C16.6707 10.7828 16.3729 9.84303 15.818 9.05561C15.2631 8.26819 14.4783 7.67159 13.5711 7.34755C13.1217 7.18702 12.8875 6.69254 13.0481 6.24311Z" fill="#0043E0"/>
+<path d="M17.1967 13.8377C17.6066 14.0821 17.7409 14.6125 17.4965 15.0224C17.1627 15.5823 16.7474 16.0845 16.2673 16.5143C15.9116 16.8325 15.3653 16.8022 15.047 16.4466C14.7287 16.0909 14.7591 15.5447 15.1147 15.2264C15.4652 14.9128 15.7684 14.5462 16.012 14.1375C16.2563 13.7276 16.7867 13.5933 17.1967 13.8377Z" fill="#0043E0"/>
+<path d="M8.90025 16.4119C9.09985 15.9785 9.61307 15.7889 10.0466 15.9885C10.8306 16.3495 11.6993 16.4862 12.5562 16.3834C13.0301 16.3265 13.4603 16.6646 13.5171 17.1385C13.574 17.6123 13.2359 18.0425 12.7621 18.0993C11.588 18.2401 10.3979 18.0528 9.32375 17.5583C8.89025 17.3587 8.70065 16.8455 8.90025 16.4119Z" fill="#0043E0"/>
+<path d="M7.54679 10.3375C7.69071 9.88245 7.43851 9.39691 6.9835 9.25299C6.52847 9.10906 6.04293 9.36126 5.89901 9.81628C5.65345 10.5926 5.55772 11.4106 5.61913 12.2264C5.65495 12.7023 6.06979 13.0591 6.54568 13.0232C7.02157 12.9873 7.37832 12.5725 7.3425 12.0966C7.29768 11.5012 7.36755 10.9041 7.54679 10.3375Z" fill="#0043E0"/>
+</svg>
diff --git a/portal/src/images/sendgrid_logo.png b/portal/src/images/sendgrid_logo.png
deleted file mode 100644
index 66c3cbd1100..00000000000
Binary files a/portal/src/images/sendgrid_logo.png and /dev/null differ
diff --git a/portal/src/images/sendgrid_logo.svg b/portal/src/images/sendgrid_logo.svg
new file mode 100644
index 00000000000..eac62cb5619
--- /dev/null
+++ b/portal/src/images/sendgrid_logo.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <image width="24" height="24" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACrElEQVR4AbSVPZLaQBCFn7a8B9jYwXILCKgy5L6HA3MH4A448D2cI1cRsLfAgeM9gKkaf69bGtAivJGpedM9/fd6ZoT0oP/8e5fgdTZfgM3rdL7vUGI9m2+Qi/f6u0vgZAoWFe1VtKaQixmS1wmTBiH+0TFKQOE9RfajGWPGojUNbcZcNwQULwRmpyiMVo2WAk8vh8awDrYBAmIUSKZz58aynwYEN1002lJw+XQ8tEafZB1sjAEJATQ42HkliOJ0QUwOd3w8jG47A3LuSJa5itkPRT2BSsCZr8PtqaFzuqabHfgDfJEnuwyaOfU25A6SdrATPxgOBEFAQmV0IAnZeaPPxHwAooFnFyP2ZL23Ib8AdTmtdYO4qBkEGGKBHI6i54HBhEU/BjYpG7CRnVt0iJoPsSj6FDKn2gW7+ZWmnOlywqWvctXNjQYxndU7jppJIAWb+FGkEqBPlAW+UbjBHSP03n48TMLIRHzNZRk1e4JrB76r4SPx0VyZQr1nD+dl6gmqpb8cG9BPyK/iLrjg+ifq9LTP5o4hTCI+uo5Fdx9J0OhnGN9OFL42UXhHkVowfEUfQ+Z0Ici1kkC6HFHRWpff+aKi+ah8NKh1NPpd9aHSehkEby+HLvN/IH1XXubZkrh8itLm/LM6wsgpqs0R2zogCKxQYBnSU+HFxXeAp2VFoIs+WtplWMfnF98jckXxhcixL9BoG5KpEpDU6spBwp7EfieEjo+IuXo1uAa1al4lcHrnaK0HSuzEXy6jXiBF44XGpe9ppB6Lc7oaVgMDAlvY8tJdWA8UrZXIr9eUd747NqRKKh4UcuufkXWMGwJbo4tG9Rxt+yf8an85LMdiRgkcaJLoiGQ12sqwg04RbazxOYbYFtvouEvQRzsZxNcritEp0l852+4W7vP/AgAA//8eyfzdAAAABklEQVQDAFvBN0Dc2P4eAAAAAElFTkSuQmCC"/>
+</svg>
diff --git a/portal/src/locale-data/en.json b/portal/src/locale-data/en.json
index fffd39f314c..bfea6a7ab8c 100644
--- a/portal/src/locale-data/en.json
+++ b/portal/src/locale-data/en.json
@@ -994,12 +994,15 @@
   "CustomDomainListScreen.verify-success-message": "Verified domain successfully",
   "CustomDomainListScreen.rediect-endpoint-direct-access.message": "Please go to <reactRouterLink>Endpoint Direct Access</reactRouterLink> to configure what happens when the users access the endpoint URL directly",
   "EndpointDirectAccessScreen.title": "Endpoint Direct Access",
+  "EndpointDirectAccessScreen.description": "Control what users see when they access Authgear's hosted pages directly from a browser, outside of your app's normal login flow.",
+  "EndpointDirectAccessScreen.settings.label": "Settings",
   "EndpointDirectAccessScreen.section1.description": "When users visit the endpoint <strong>{endpoint}</strong> from a browser unexpectedly:",
   "EndpointDirectAccessScreen.section1.option.ShowError.label": "Show an error page",
   "EndpointDirectAccessScreen.section1.option.ShowBrandPage.label": "Show a simple brand page with a back to home link",
   "EndpointDirectAccessScreen.section1.option.ShowBrandPage.input.label": "Home URL",
   "EndpointDirectAccessScreen.section1.option.ShowLoginAndRedirectToSettings.label": "Show a Login page, after login show the hosted settings page",
   "EndpointDirectAccessScreen.section1.option.ShowLoginAndRedirectToSettings.label--disabled": "Show a Login page, after login show the hosted settings page <br></br> <small>Only available when <reactRouterLink>custom domain</reactRouterLink> is set</small>",
+  "EndpointDirectAccessScreen.section1.option.requires-custom-domain.hint": "Only available when <reactRouterLink>custom domain</reactRouterLink> is set",
   "EndpointDirectAccessScreen.section1.option.ShowLoginAndRedirectToCustomURL.label": "Show a Login page, after login redirect to a custom URL",
   "EndpointDirectAccessScreen.section1.option.ShowLoginAndRedirectToCustomURL.label--disabled": "Show a Login page, after login redirect to a custom URL <br></br> <small>Only available when <reactRouterLink>custom domain</reactRouterLink> is set</small>",
   "EndpointDirectAccessScreen.section1.option.ShowLoginAndRedirectToCustomURL.input.label": "Post-login URL",
@@ -1229,6 +1232,7 @@
   "AcceptAdminInvitationScreen.accept-error.title": "Accept Invitation Error",
   "GeneralSettings.app-id.label": "App ID",
   "CookieLifetimeConfigurationScreen.title": "Cookie Lifetime",
+  "CookieLifetimeConfigurationScreen.settings.label": "Settings",
   "CookieLifetimeConfigurationScreen.description": "Change cookie session lifetime and timeout for <b>{hostname}</b>. If you use token-based authentication only (single page applications and native apps), you can simply ignore this config.",
   "CookieLifetimeConfigurationScreen.persistent-cookie.label": "Persistent Cookie",
   "CookieLifetimeConfigurationScreen.persistent-cookie.description": "The cookie persists after the browser is closed.",
@@ -1265,10 +1269,10 @@
   "HookConfigurationScreen.non-blocking-events-endpoints.label": "Non-blocking Hooks",
   "HookConfigurationScreen.signature.title": "Webhook Signature",
   "HookConfigurationScreen.signature.description": "Each webhook event request is signed with a secret key. You must validate the signature to ensure the request originates from Authgear. The signature is calculated as the hex encoded value of HMAC-SHA256 of the request body and is set as the HTTP header <code>x-authgear-body-signature</code>. <br></br> <docLink>Learn more about validating the signature</docLink>",
-  "HookConfigurationScreen.signature.secret-key": "Secret Key",
+  "HookConfigurationScreen.signature.secret-key": "Webhook Signature Secret Key",
   "AdminAPIConfigurationScreen.title": "Admin API",
   "AdminAPIConfigurationScreen.description": "The Admin API allows your server to manage your project and users via a GraphQL endpoint.",
-  "AdminAPIConfigurationScreen.keys.title": "Admin API keys",
+  "AdminAPIConfigurationScreen.keys.title": "API Keys",
   "AdminAPIConfigurationScreen.keys.generate.label": "Generate new key pair",
   "AdminAPIConfigurationScreen.keys.generate.warning": "Max. 2 keys per project",
   "AdminAPIConfigurationScreen.keys.delete.tooltip": "At least 1 key per project",
@@ -1282,12 +1286,14 @@
   "AdminAPIConfigurationScreen.column.key-id": "Key ID",
   "AdminAPIConfigurationScreen.column.created-at": "Created At",
   "AdminAPIConfigurationScreen.graphiql.title": "GraphiQL Explorer",
-  "AdminAPIConfigurationScreen.graphiql.description": "Inspect the GraphQL schema and build queries with GraphiQL. <br></br> On your server you should always use the Admin API endpoint and the API keys.",
+  "AdminAPIConfigurationScreen.graphiql.description": "Inspect the GraphQL schema and build queries with GraphiQL.<br></br>On your server you should always use the Admin API endpoint and the API keys.",
   "AdminAPIConfigurationScreen.graphiql.warning": "Please beware this is <strong>NOT</strong> a sandbox environment, changes are made to <strong>REAL DATA</strong>.",
   "AdminAPIConfigurationScreen.graphiql.open": "Open GraphiQL Explorer",
   "AdminAPIConfigurationScreen.details.title": "Details",
   "AdminAPIConfigurationScreen.details.description": "Accessing the Admin API GraphQL endpoint requires your server to generate a valid JWT and include it as <code>Authorization</code> HTTP header. Read the <docLink>Admin API documentation</docLink> for more details.",
   "AdminAPIConfigurationScreen.api-endpoint.title": "API Endpoint",
+  "AdminAPIConfigurationScreen.api-endpoint.section-title": "API Endpoint",
+  "AdminAPIConfigurationScreen.graphql-url.label": "GraphQL URL",
   "AdminAPIConfigurationScreen.project-id.title": "Project ID",
   "PasswordStrengthMeter.password-strength": "Password Strength",
   "ModifiedIndicator.message": "You have made unsaved changes",
@@ -1296,6 +1302,8 @@
   "FormContainer.reset-dialog.title": "Discard unsaved changes",
   "FormContainer.reset-dialog.message": "Are you sure you want to discard unsaved changes?",
   "FormContainer.reset-dialog.confirm": "Yes, discard",
+  "SaveFunctionBar.message": "You have unsaved changes.",
+  "SaveFunctionBar.discard": "Discard",
   "AuthenticatorType.primary.password": "Password",
   "AuthenticatorType.primary.passkey": "Passkey",
   "AuthenticatorType.primary.oob-otp-email": "Passwordless via Email",
@@ -1601,6 +1609,9 @@
   "SMTPConfigurationScreen.title--authgearonce": "Email Provider",
   "SMTPConfigurationScreen.description": "Optimize for email deliverability by using your own SMTP server to send Authgear Emails (such as password reset code, verification) in your own domains",
   "SMTPConfigurationScreen.enable.label": "Use my own provider",
+  "SMTPConfigurationScreen.provider.authgear": "Authgear",
+  "SMTPConfigurationScreen.authgear.description": "Send emails directly with Authgear's built-in service. No extra setup needed.",
+  "SMTPConfigurationScreen.settings.label": "Settings",
   "SMTPConfigurationScreen.host.label": "Host",
   "SMTPConfigurationScreen.host.tooltip": "Hostname or IP address of your SMTP server",
   "SMTPConfigurationScreen.port.label": "Port",
@@ -1625,12 +1636,15 @@
   "SMSProviderConfigurationScreen.enable.label": "Enable Custom SMS Gateway",
   "SMSProviderConfigurationScreen.enable.label--authgearonce": "Enable SMS Gateway",
   "SMSProviderConfigurationScreen.provider.title": "SMS Gateway Provider",
+  "SMSProviderConfigurationScreen.provider.authgear": "Authgear",
+  "SMSProviderConfigurationScreen.provider.authgear.description": "Send SMS directly with Authgear's built-in service. No extra setup needed.",
   "SMSProviderConfigurationScreen.provider.twilio": "Twilio",
   "SMSProviderConfigurationScreen.provider.twilio.description": "Learn more about <ExternalLink>Twilio integration</ExternalLink>.",
   "SMSProviderConfigurationScreen.provider.webhook": "Webhook",
   "SMSProviderConfigurationScreen.provider.webhook.description": "Learn more about <ExternalLink>Webhook integration</ExternalLink>.",
   "SMSProviderConfigurationScreen.provider.deno": "Custom JS/TS",
   "SMSProviderConfigurationScreen.provider.deno.description": "Learn more about <ExternalLink>Custom JS/TS integration</ExternalLink>.",
+  "SMSProviderConfigurationScreen.settings.label": "Settings",
   "SMSProviderConfigurationScreen.form.twilio.credentialType": "Credentials",
   "SMSProviderConfigurationScreen.form.twilio.credentialType.options.authToken": "Auth Token",
   "SMSProviderConfigurationScreen.form.twilio.credentialType.options.apiKey": "API Key",
@@ -1693,12 +1707,14 @@
   "UserProfileAttributesList.dialog.adjustment.condition": "If you change the <strong>{party, select, portal_ui{Portal Admin} bearer{Token Bearer} end_user{End-user} other{}}</strong> Access Right of <strong>“{fieldName}”</strong> to <strong>{level}</strong>, then:",
   "UserProfileAttributesList.dialog.adjustment.consequence": "The Access Right of <strong>{party, select, end_user{End-user} bearer{Token Bearer} portal_ui{Portal Admin} other{}}</strong> will also be changed to <strong>{level}</strong>.",
   "AccountDeletionConfigurationScreen.title": "Account Deletion",
+  "AccountDeletionConfigurationScreen.description": "Allow end-users to delete their own accounts. Accounts are disabled immediately upon deletion request and permanently removed after the configured grace period.",
   "AccountDeletionConfigurationScreen.deletion-schedule.title": "Deletion Schedule",
   "AccountDeletionConfigurationScreen.grace-period.label": "Grace Period (Days)",
   "AccountDeletionConfigurationScreen.grace-period.description": "The end-user account will be disabled immediately upon request and deleted after the grace period",
   "AccountDeletionConfigurationScreen.scheduled-by-end-user.label": "Show \"Delete Account\" button in the end-user settings page",
   "AccountDeletionConfigurationScreen.apple-app-store.description": "Apps submitted to Apple App Store must offer account deletion within the app. Please refer to <ExternalLink>App Store Review Guidelines 5.1.1(v)</ExternalLink>",
   "AccountAnonymizationConfigurationScreen.title": "Account Anonymization",
+  "AccountAnonymizationConfigurationScreen.description": "Replace personally identifiable information with anonymized data after the grace period, while preserving activity records for compliance purposes.",
   "AccountAnonymizationConfigurationScreen.anonymization-schedule.title": "Anonymization Schedule",
   "AccountAnonymizationConfigurationScreen.grace-period.label": "Grace Period (Days)",
   "AccountAnonymizationConfigurationScreen.grace-period.description": "The end-user account will be disabled immediately upon request and anonymized after the grace period",
@@ -2200,6 +2216,7 @@
   "LoginMethodConfigurationScreen.combineLoginSignup.title": "Automatically signup a new user if a login ID is not found during login",
   "LoginMethodConfigurationScreen.custom-login-methods.authenticator.password-warning": "If no password authenticator is configured, users logging in with a username may be unable to access their accounts.",
   "EditConfigurationScreen.title": "Edit Project Configurations",
+  "EditConfigurationScreen.config.label": "Project configurations",
   "EditConfigurationScreen.warning.title": "Warning!",
   "EditConfigurationScreen.warning.content": "This page allows users to directly edit the Authgear project configuration in the Portal, but it is not recommended. Direct modifications to the config may cause incompatibilities that could lead to service downtime.<br></br><br></br>If you decide to proceed with directly editing the configuration, first copy the content for backup. This helps restore normal operation if errors occur.",
   "EditConfigurationScreen.warning.confirm": "I understand the risks of this operation",
diff --git a/portal/src/radix-theme-overrides.css b/portal/src/radix-theme-overrides.css
index ac312a1b4c3..d9ec2f87570 100644
--- a/portal/src/radix-theme-overrides.css
+++ b/portal/src/radix-theme-overrides.css
@@ -16,3 +16,9 @@
   --cursor-slider-thumb-active: grabbing;
   --cursor-switch: pointer;
 }
+
+/* Radix dialog overlay has no z-index by default; Monaco editor minimap (z-index: 5)
+   can paint above the mask without this. Keep above ScreenHeader (9999). */
+.rt-BaseDialogOverlay {
+  z-index: 10000;
+}