diff --git a/web/src/app/admin/configuration/llm/forms/components/FormWrapper.tsx b/web/src/app/admin/configuration/llm/forms/components/FormWrapper.tsx
index a4342b1887d..c66d78c0691 100644
--- a/web/src/app/admin/configuration/llm/forms/components/FormWrapper.tsx
+++ b/web/src/app/admin/configuration/llm/forms/components/FormWrapper.tsx
@@ -120,9 +120,7 @@ export function ProviderFormEntrypointWrapper({
                 title={`Setup ${providerName}`}
                 onClose={onClose}
               />
-              <Modal.Body className="max-h-[70vh] overflow-y-auto">
-                {children(context)}
-              </Modal.Body>
+              <Modal.Body>{children(context)}</Modal.Body>
             </Modal.Content>
           </Modal>
         )}
@@ -208,9 +206,7 @@ export function ProviderFormEntrypointWrapper({
               }`}
               onClose={onClose}
             />
-            <Modal.Body className="max-h-[70vh] overflow-y-auto">
-              {children(context)}
-            </Modal.Body>
+            <Modal.Body>{children(context)}</Modal.Body>
           </Modal.Content>
         </Modal>
       )}
diff --git a/web/src/app/admin/configuration/search/UpgradingPage.tsx b/web/src/app/admin/configuration/search/UpgradingPage.tsx
index 1c7974dcd07..e99dfaad4d1 100644
--- a/web/src/app/admin/configuration/search/UpgradingPage.tsx
+++ b/web/src/app/admin/configuration/search/UpgradingPage.tsx
@@ -142,7 +142,7 @@ export default function UpgradingPage({
                 previous model and all progress will be lost.
               </div>
             </Modal.Body>
-            <Modal.Footer className="p-4 flex gap-x-2 w-full justify-end">
+            <Modal.Footer>
               <Button onClick={onCancel}>Confirm</Button>
               <Button onClick={() => setIsCancelling(false)} secondary>
                 Cancel
diff --git a/web/src/app/admin/configuration/web-search/WebProviderSetupModal.tsx b/web/src/app/admin/configuration/web-search/WebProviderSetupModal.tsx
index 91f394de980..dade565a8f6 100644
--- a/web/src/app/admin/configuration/web-search/WebProviderSetupModal.tsx
+++ b/web/src/app/admin/configuration/web-search/WebProviderSetupModal.tsx
@@ -239,7 +239,7 @@ export const WebProviderSetupModal = memo(
               </FormField>
             )}
           </Modal.Body>
-          <Modal.Footer className="gap-2">
+          <Modal.Footer>
             <Button type="button" main secondary onClick={onClose}>
               Cancel
             </Button>
diff --git a/web/src/app/admin/configuration/web-search/page.tsx b/web/src/app/admin/configuration/web-search/page.tsx
index c24d7da135d..3af5599c0c8 100644
--- a/web/src/app/admin/configuration/web-search/page.tsx
+++ b/web/src/app/admin/configuration/web-search/page.tsx
@@ -935,7 +935,6 @@ export default function Page() {
                                 provider
                               );
                             }}
-                            className="h-6 w-6 opacity-70 hover:opacity-100"
                             aria-label={`Edit ${label}`}
                           />
                         )}
@@ -1134,7 +1133,6 @@ export default function Page() {
                                 provider
                               );
                             }}
-                            className="h-6 w-6 opacity-70 hover:opacity-100"
                             aria-label={`Edit ${label}`}
                           />
                         )}
diff --git a/web/src/app/admin/connector/[ccPairId]/IndexAttemptErrorsModal.tsx b/web/src/app/admin/connector/[ccPairId]/IndexAttemptErrorsModal.tsx
index a8bdd156df9..048c2966bbc 100644
--- a/web/src/app/admin/connector/[ccPairId]/IndexAttemptErrorsModal.tsx
+++ b/web/src/app/admin/connector/[ccPairId]/IndexAttemptErrorsModal.tsx
@@ -136,7 +136,7 @@ export default function IndexAttemptErrorsModal({
           }
           onClose={onClose}
         />
-        <Modal.Body className="flex flex-col gap-4 min-h-0">
+        <Modal.Body>
           {!isResolvingErrors && (
             <div className="flex flex-col gap-2 flex-shrink-0">
               <Text as="p">
diff --git a/web/src/app/admin/connector/[ccPairId]/InlineFileManagement.tsx b/web/src/app/admin/connector/[ccPairId]/InlineFileManagement.tsx
index d2509833c8e..c5849daee58 100644
--- a/web/src/app/admin/connector/[ccPairId]/InlineFileManagement.tsx
+++ b/web/src/app/admin/connector/[ccPairId]/InlineFileManagement.tsx
@@ -37,7 +37,7 @@ interface InlineFileManagementProps {
   onRefresh: () => void;
 }
 
-export function InlineFileManagement({
+export default function InlineFileManagement({
   connectorId,
   onRefresh,
 }: InlineFileManagementProps) {
@@ -360,7 +360,7 @@ export function InlineFileManagement({
             description="When you save these changes, the following will happen:"
           />
 
-          <Modal.Body className="px-6 space-y-3">
+          <Modal.Body>
             {selectedFilesToRemove.size > 0 && (
               <div className="p-3 bg-red-50 dark:bg-red-900/10 rounded-md">
                 <Text
@@ -402,7 +402,7 @@ export function InlineFileManagement({
             )}
           </Modal.Body>
 
-          <Modal.Footer className="p-6 pt-4">
+          <Modal.Footer>
             <Button
               onClick={() => setShowSaveConfirm(false)}
               secondary
@@ -410,7 +410,7 @@ export function InlineFileManagement({
             >
               Cancel
             </Button>
-            <Button onClick={handleConfirmSave} primary disabled={isSaving}>
+            <Button onClick={handleConfirmSave} disabled={isSaving}>
               {isSaving ? "Saving..." : "Confirm & Save"}
             </Button>
           </Modal.Footer>
diff --git a/web/src/app/admin/connector/[ccPairId]/page.tsx b/web/src/app/admin/connector/[ccPairId]/page.tsx
index d2f9cbe3ac4..65ac6aea9e2 100644
--- a/web/src/app/admin/connector/[ccPairId]/page.tsx
+++ b/web/src/app/admin/connector/[ccPairId]/page.tsx
@@ -25,7 +25,7 @@ import {
 } from "./ConfigDisplay";
 import DeletionErrorStatus from "./DeletionErrorStatus";
 import { IndexAttemptsTable } from "./IndexAttemptsTable";
-import { InlineFileManagement } from "./InlineFileManagement";
+import InlineFileManagement from "./InlineFileManagement";
 import { buildCCPairInfoUrl, triggerIndexing } from "./lib";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
diff --git a/web/src/app/admin/embeddings/RerankingFormPage.tsx b/web/src/app/admin/embeddings/RerankingFormPage.tsx
index b647ae79043..98e2d25288e 100644
--- a/web/src/app/admin/embeddings/RerankingFormPage.tsx
+++ b/web/src/app/admin/embeddings/RerankingFormPage.tsx
@@ -339,7 +339,7 @@ const RerankingDetailsForm = forwardRef<
                           better performance.
                         </p>
                       </Modal.Body>
-                      <Modal.Footer className="p-4 flex justify-end">
+                      <Modal.Footer>
                         <Button
                           onClick={() => setShowGpuWarningModalModel(null)}
                         >
@@ -433,7 +433,7 @@ const RerankingDetailsForm = forwardRef<
                           />
                         </div>
                       </Modal.Body>
-                      <Modal.Footer className="p-4 flex w-full justify-end">
+                      <Modal.Footer>
                         <Button
                           onClick={() => {
                             setShowLiteLLMConfigurationModal(false);
@@ -513,7 +513,7 @@ const RerankingDetailsForm = forwardRef<
                           />
                         </div>
                       </Modal.Body>
-                      <Modal.Footer className="p-4 flex w-full justify-end">
+                      <Modal.Footer>
                         <Button onClick={() => setIsApiKeyModalOpen(false)}>
                           Update
                         </Button>
diff --git a/web/src/app/admin/embeddings/modals/InstantSwitchConfirmModal.tsx b/web/src/app/admin/embeddings/modals/InstantSwitchConfirmModal.tsx
index 60b7caa3068..f75aa6ec234 100644
--- a/web/src/app/admin/embeddings/modals/InstantSwitchConfirmModal.tsx
+++ b/web/src/app/admin/embeddings/modals/InstantSwitchConfirmModal.tsx
@@ -29,7 +29,7 @@ export default function InstantSwitchConfirmModal({
             <strong>This is not reversible.</strong>
           </Text>
         </Modal.Body>
-        <Modal.Footer className="p-4 gap-2">
+        <Modal.Footer>
           <Button onClick={onConfirm}>Confirm</Button>
           <Button secondary onClick={onClose}>
             Cancel
diff --git a/web/src/app/admin/embeddings/modals/ModelSelectionModal.tsx b/web/src/app/admin/embeddings/modals/ModelSelectionModal.tsx
index cc31d1068af..59eaeeb32c5 100644
--- a/web/src/app/admin/embeddings/modals/ModelSelectionModal.tsx
+++ b/web/src/app/admin/embeddings/modals/ModelSelectionModal.tsx
@@ -55,7 +55,7 @@ export default function ModelSelectionConfirmationModal({
             </Callout>
           )}
         </Modal.Body>
-        <Modal.Footer className="p-4 gap-2 justify-end">
+        <Modal.Footer>
           <Button onClick={onConfirm}>Confirm</Button>
           <Button secondary onClick={onCancel}>
             Cancel
diff --git a/web/src/app/admin/embeddings/modals/SelectModelModal.tsx b/web/src/app/admin/embeddings/modals/SelectModelModal.tsx
index d85bc154b2b..937d3265b26 100644
--- a/web/src/app/admin/embeddings/modals/SelectModelModal.tsx
+++ b/web/src/app/admin/embeddings/modals/SelectModelModal.tsx
@@ -30,7 +30,7 @@ export default function SelectModelModal({
             you will need to undergo a complete re-indexing. Are you sure?
           </Text>
         </Modal.Body>
-        <Modal.Footer className="p-4 gap-2 justify-end">
+        <Modal.Footer>
           <Button onClick={onConfirm}>Confirm</Button>
           <Button secondary onClick={onCancel}>
             Cancel
diff --git a/web/src/app/admin/oauth-configs/OAuthConfigForm.tsx b/web/src/app/admin/oauth-configs/OAuthConfigForm.tsx
deleted file mode 100644
index cebbddbf8c3..00000000000
--- a/web/src/app/admin/oauth-configs/OAuthConfigForm.tsx
+++ /dev/null
@@ -1,267 +0,0 @@
-import { Form, Formik } from "formik";
-import { PopupSpec } from "@/components/admin/connectors/Popup";
-import { TextFormField } from "@/components/Field";
-import Button from "@/refresh-components/buttons/Button";
-import Separator from "@/refresh-components/Separator";
-import { Callout } from "@/components/ui/callout";
-import Text from "@/refresh-components/texts/Text";
-import Modal from "@/refresh-components/Modal";
-import { SvgKey } from "@opal/icons";
-import {
-  OAuthConfig,
-  OAuthConfigCreate,
-  OAuthConfigUpdate,
-} from "@/lib/tools/interfaces";
-import { createOAuthConfig, updateOAuthConfig } from "@/lib/oauth/api";
-import * as Yup from "yup";
-
-interface OAuthConfigFormProps {
-  onClose: () => void;
-  setPopup: (popupSpec: PopupSpec | null) => void;
-  config?: OAuthConfig;
-  onConfigSubmitted?: (config: OAuthConfig) => void;
-}
-
-const OAuthConfigSchema = Yup.object().shape({
-  name: Yup.string().required("Name is required"),
-  authorization_url: Yup.string()
-    .url("Must be a valid URL")
-    .required("Authorization URL is required"),
-  token_url: Yup.string()
-    .url("Must be a valid URL")
-    .required("Token URL is required"),
-  client_id: Yup.string().when("isUpdate", {
-    is: false,
-    then: (schema) => schema.required("Client ID is required"),
-    otherwise: (schema) => schema,
-  }),
-  client_secret: Yup.string().when("isUpdate", {
-    is: false,
-    then: (schema) => schema.required("Client Secret is required"),
-    otherwise: (schema) => schema,
-  }),
-  scopes: Yup.string(),
-});
-
-export const OAuthConfigForm = ({
-  onClose,
-  setPopup,
-  config,
-  onConfigSubmitted,
-}: OAuthConfigFormProps) => {
-  const isUpdate = config !== undefined;
-
-  return (
-    <Modal
-      open
-      onOpenChange={(open) => {
-        if (!open) {
-          onClose();
-        }
-      }}
-    >
-      <Modal.Content medium className="w-[60%] max-h-[80vh]">
-        <Modal.Header
-          icon={SvgKey}
-          title={
-            isUpdate
-              ? "Update OAuth Configuration"
-              : "Create OAuth Configuration"
-          }
-          onClose={onClose}
-        />
-        <Formik
-          initialValues={{
-            name: config?.name || "",
-            authorization_url: config?.authorization_url || "",
-            token_url: config?.token_url || "",
-            client_id: "",
-            client_secret: "",
-            scopes: config?.scopes?.join(", ") || "",
-            isUpdate,
-          }}
-          validationSchema={OAuthConfigSchema}
-          onSubmit={async (values, formikHelpers) => {
-            formikHelpers.setSubmitting(true);
-
-            try {
-              // Parse scopes from comma-separated string
-              const scopesArray = values.scopes
-                .split(",")
-                .map((s) => s.trim())
-                .filter((s) => s.length > 0);
-
-              if (isUpdate && config) {
-                // Build update payload - only include fields that are provided
-                const updatePayload: OAuthConfigUpdate = {
-                  name: values.name,
-                  authorization_url: values.authorization_url,
-                  token_url: values.token_url,
-                  scopes: scopesArray,
-                };
-
-                // Only include client credentials if they are provided
-                if (values.client_id) {
-                  updatePayload.client_id = values.client_id;
-                }
-                if (values.client_secret) {
-                  updatePayload.client_secret = values.client_secret;
-                }
-
-                const updatedConfig = await updateOAuthConfig(
-                  config.id,
-                  updatePayload
-                );
-                setPopup({
-                  message: "Successfully updated OAuth configuration!",
-                  type: "success",
-                });
-
-                // Call the callback to refresh the list
-                if (onConfigSubmitted) {
-                  onConfigSubmitted(updatedConfig);
-                }
-              } else {
-                // Create new config
-                const createPayload: OAuthConfigCreate = {
-                  name: values.name,
-                  authorization_url: values.authorization_url,
-                  token_url: values.token_url,
-                  client_id: values.client_id,
-                  client_secret: values.client_secret,
-                  scopes: scopesArray,
-                };
-
-                const createdConfig = await createOAuthConfig(createPayload);
-                setPopup({
-                  message: "Successfully created OAuth configuration!",
-                  type: "success",
-                });
-
-                // Call the callback with the created config
-                if (onConfigSubmitted && createdConfig) {
-                  onConfigSubmitted(createdConfig);
-                }
-              }
-              onClose();
-            } catch (error: any) {
-              setPopup({
-                message: isUpdate
-                  ? `Error updating OAuth configuration - ${error.message}`
-                  : `Error creating OAuth configuration - ${error.message}`,
-                type: "error",
-              });
-            } finally {
-              formikHelpers.setSubmitting(false);
-            }
-          }}
-        >
-          {({ isSubmitting }) => (
-            <Form className="w-full overflow-visible">
-              <Modal.Body className="overflow-y-auto px-6 w-full">
-                <Separator noPadding />
-
-                <Text>
-                  Configure an OAuth provider that can be shared across multiple
-                  custom tools. Users will authenticate with this provider when
-                  using tools that require it.
-                </Text>
-
-                <Callout
-                  type="notice"
-                  icon="📋"
-                  title="Redirect URI for OAuth App Configuration"
-                  className="my-0"
-                >
-                  <Text as="p" className="text-sm mb-2">
-                    When configuring your OAuth application in the
-                    provider&apos;s dashboard, use this redirect URI:
-                  </Text>
-                  <code className="block p-2 bg-background-100 rounded text-sm font-mono">
-                    {typeof window !== "undefined"
-                      ? `${window.location.origin}/oauth-config/callback`
-                      : "{YOUR_DOMAIN}/oauth-config/callback"}
-                  </code>
-                </Callout>
-
-                <TextFormField
-                  name="name"
-                  label="Configuration Name:"
-                  subtext="A friendly name to identify this OAuth configuration (e.g., 'GitHub OAuth', 'Google OAuth')"
-                  placeholder="e.g., GitHub OAuth"
-                />
-
-                <TextFormField
-                  name="authorization_url"
-                  label="Authorization URL:"
-                  subtext="The OAuth provider's authorization endpoint"
-                  placeholder="e.g., https://github.com/login/oauth/authorize"
-                />
-
-                <TextFormField
-                  name="token_url"
-                  label="Token URL:"
-                  subtext="The OAuth provider's token exchange endpoint"
-                  placeholder="e.g., https://github.com/login/oauth/access_token"
-                />
-
-                <TextFormField
-                  name="client_id"
-                  label={isUpdate ? "Client ID (optional):" : "Client ID:"}
-                  subtext={
-                    isUpdate
-                      ? "Leave empty to keep existing client ID"
-                      : "Your OAuth application's client ID"
-                  }
-                  placeholder={
-                    isUpdate
-                      ? "Enter new client ID to update"
-                      : "Your client ID"
-                  }
-                />
-
-                <TextFormField
-                  name="client_secret"
-                  label={
-                    isUpdate ? "Client Secret (optional):" : "Client Secret:"
-                  }
-                  subtext={
-                    isUpdate
-                      ? "Leave empty to keep existing client secret"
-                      : "Your OAuth application's client secret"
-                  }
-                  placeholder={
-                    isUpdate
-                      ? "Enter new client secret to update"
-                      : "Your client secret"
-                  }
-                  type="password"
-                />
-
-                <TextFormField
-                  name="scopes"
-                  label="Scopes (optional):"
-                  subtext="Comma-separated list of OAuth scopes to request (e.g., 'repo, user')"
-                  placeholder="e.g., repo, user"
-                />
-              </Modal.Body>
-              <Modal.Footer className="w-full">
-                <Button
-                  type="button"
-                  onClick={onClose}
-                  disabled={isSubmitting}
-                  secondary
-                >
-                  Cancel
-                </Button>
-                <Button type="submit" disabled={isSubmitting} primary>
-                  {isUpdate ? "Update" : "Create"}
-                </Button>
-              </Modal.Footer>
-            </Form>
-          )}
-        </Formik>
-      </Modal.Content>
-    </Modal>
-  );
-};
diff --git a/web/src/app/admin/settings/SettingsForm.tsx b/web/src/app/admin/settings/SettingsForm.tsx
index 82693088e9c..c82d7206524 100644
--- a/web/src/app/admin/settings/SettingsForm.tsx
+++ b/web/src/app/admin/settings/SettingsForm.tsx
@@ -320,7 +320,7 @@ export function SettingsForm() {
                 anyone to use Onyx without signing in.
               </p>
             </Modal.Body>
-            <Modal.Footer className="p-4 flex justify-end gap-2">
+            <Modal.Footer>
               <Button secondary onClick={() => setShowConfirmModal(false)}>
                 Cancel
               </Button>
diff --git a/web/src/app/chat/components/ChatPopup.tsx b/web/src/app/chat/components/ChatPopup.tsx
index fa7949c8f8c..8b34fc05034 100644
--- a/web/src/app/chat/components/ChatPopup.tsx
+++ b/web/src/app/chat/components/ChatPopup.tsx
@@ -79,7 +79,7 @@ export function ChatPopup() {
           icon={headerIcon}
           title={popupTitle || "Welcome to Onyx!"}
         />
-        <Modal.Body className="bg-background-tint-01 py-4">
+        <Modal.Body>
           <div className="overflow-y-auto text-left">
             <ReactMarkdown
               className="prose prose-neutral dark:prose-invert max-w-full"
diff --git a/web/src/app/chat/components/modal/FeedbackModal.tsx b/web/src/app/chat/components/modal/FeedbackModal.tsx
index 33f474448b7..7910d843d02 100644
--- a/web/src/app/chat/components/modal/FeedbackModal.tsx
+++ b/web/src/app/chat/components/modal/FeedbackModal.tsx
@@ -111,7 +111,7 @@ export default function FeedbackModal({
               ))}
             </div>
           )}
-          <Modal.Body className="items-center justify-center bg-background-tint-01">
+          <Modal.Body>
             <FieldInput
               label="Feedback"
               placeholder={`What did you ${feedbackType} about this response?`}
@@ -119,7 +119,7 @@ export default function FeedbackModal({
               ref={fieldInputRef}
             />
           </Modal.Body>
-          <Modal.Footer className="flex flex-row p-4 items-center justify-end w-full gap-2">
+          <Modal.Footer>
             <Button onClick={() => modal.toggle(false)} secondary>
               Cancel
             </Button>
diff --git a/web/src/app/css/z-index.css b/web/src/app/css/z-index.css
index 510f387fbbf..9aff2c688b4 100644
--- a/web/src/app/css/z-index.css
+++ b/web/src/app/css/z-index.css
@@ -7,7 +7,6 @@
   /* Interactive overlays */
   --z-modal-overlay: 900;
   --z-modal: 1000;
-  --z-confirmation: 1050;
   --z-toast: 1100;
   --z-popover: 1200;
   --z-tooltip: 1300;
@@ -31,9 +30,6 @@
 .z-modal {
   z-index: var(--z-modal);
 }
-.z-confirmation {
-  z-index: var(--z-confirmation);
-}
 .z-toast {
   z-index: var(--z-toast);
 }
diff --git a/web/src/components/chat/TextView.tsx b/web/src/components/chat/TextView.tsx
index d4061a9ec26..080138a06b3 100644
--- a/web/src/components/chat/TextView.tsx
+++ b/web/src/components/chat/TextView.tsx
@@ -201,10 +201,9 @@ export default function TextView({
       }}
     >
       <Modal.Content
-        medium
+        large
         preventAccidentalClose={false}
         onOpenAutoFocus={(e) => e.preventDefault()}
-        className="overflow-hidden h-[80dvh] max-h-[calc(100dvh-4rem)]"
       >
         <div className="relative flex flex-row items-center gap-2 p-4 shadow-01">
           <SvgFileText className="w-[1.5rem] h-[1.5rem] stroke-text-04 shrink-0" />
@@ -242,7 +241,7 @@ export default function TextView({
           </div>
         </div>
 
-        <Modal.Body className="p-0 flex-1 min-h-0 overflow-hidden bg-background-tint-01">
+        <Modal.Body>
           {isLoading ? (
             <div className="flex flex-col items-center justify-center flex-1 min-h-0 p-6 gap-4">
               <SimpleLoader className="h-8 w-8" />
diff --git a/web/src/components/credentials/actions/ModifyCredential.tsx b/web/src/components/credentials/actions/ModifyCredential.tsx
index 0d5a280ea7c..a4982530825 100644
--- a/web/src/components/credentials/actions/ModifyCredential.tsx
+++ b/web/src/components/credentials/actions/ModifyCredential.tsx
@@ -202,7 +202,7 @@ export default function ModifyCredential({
                 delete credentials that are linked to live connectors.
               </Text>
             </Modal.Body>
-            <Modal.Footer className="p-4 gap-2 justify-end">
+            <Modal.Footer>
               <Button
                 onClick={async () => {
                   onDeleteCredential(confirmDeletionCredential);
diff --git a/web/src/components/health/healthcheck.tsx b/web/src/components/health/healthcheck.tsx
index 1ccc10731d1..640196a118d 100644
--- a/web/src/components/health/healthcheck.tsx
+++ b/web/src/components/health/healthcheck.tsx
@@ -192,7 +192,7 @@ export const HealthCheckBanner = () => {
               Your session has expired. Please log in again to continue.
             </p>
           </Modal.Body>
-          <Modal.Footer className="p-4 flex justify-end">
+          <Modal.Footer>
             <Button onClick={handleLogin}>Log In</Button>
           </Modal.Footer>
         </Modal.Content>
diff --git a/web/src/components/modals/AddInstructionModal.tsx b/web/src/components/modals/AddInstructionModal.tsx
index dde9b7c6b97..6da14e9b3e7 100644
--- a/web/src/components/modals/AddInstructionModal.tsx
+++ b/web/src/components/modals/AddInstructionModal.tsx
@@ -38,14 +38,14 @@ export default function AddInstructionModal() {
           description="Instruct specific behaviors, focus, tones, or formats for the response in this project."
           onClose={() => modal.toggle(false)}
         />
-        <Modal.Body className="bg-background-tint-01 p-4">
+        <Modal.Body>
           <InputTextarea
             value={instructionText}
             onChange={(event) => setInstructionText(event.target.value)}
             placeholder="Think step by step and show reasoning for complex problems. Use specific examples."
           />
         </Modal.Body>
-        <Modal.Footer className="flex flex-row justify-end gap-2 p-4 w-full">
+        <Modal.Footer>
           <Button secondary onClick={() => modal.toggle(false)}>
             Cancel
           </Button>
diff --git a/web/src/components/modals/CreateProjectModal.tsx b/web/src/components/modals/CreateProjectModal.tsx
index f8b15c51d69..95f148871c2 100644
--- a/web/src/components/modals/CreateProjectModal.tsx
+++ b/web/src/components/modals/CreateProjectModal.tsx
@@ -42,14 +42,14 @@ export default function CreateProjectModal() {
           description="Use projects to organize your files and chats in one place, and add custom instructions for ongoing work."
           onClose={() => modal.toggle(false)}
         />
-        <Modal.Body className="flex flex-col p-4 bg-background-tint-01">
+        <Modal.Body>
           <FieldInput
             label="Project Name"
             placeholder="What are you working on?"
             ref={fieldInputRef}
           />
         </Modal.Body>
-        <Modal.Footer className="flex flex-row justify-end gap-2 p-4 w-full">
+        <Modal.Footer>
           <Button secondary onClick={() => modal.toggle(false)}>
             Cancel
           </Button>
diff --git a/web/src/components/modals/ExceptionTraceModal.tsx b/web/src/components/modals/ExceptionTraceModal.tsx
index b29ea10b56e..4f5fa44f66a 100644
--- a/web/src/components/modals/ExceptionTraceModal.tsx
+++ b/web/src/components/modals/ExceptionTraceModal.tsx
@@ -22,7 +22,7 @@ export default function ExceptionTraceModal({
           title="Full Exception Trace"
           onClose={onOutsideClick}
         />
-        <Modal.Body className="overflow-y-auto overflow-x-hidden pr-3 max-h-[70vh]">
+        <Modal.Body>
           <div className="mb-6">
             {!copyClicked ? (
               <button
diff --git a/web/src/components/modals/ProviderModal.tsx b/web/src/components/modals/ProviderModal.tsx
index 2bfdba07789..a645922d55c 100644
--- a/web/src/components/modals/ProviderModal.tsx
+++ b/web/src/components/modals/ProviderModal.tsx
@@ -72,12 +72,10 @@ export default function ProviderModal({
           onClose={() => onOpenChange(false)}
         />
 
-        <Modal.Body className="flex-1 overflow-y-auto bg-background-tint-01">
-          {children}
-        </Modal.Body>
+        <Modal.Body>{children}</Modal.Body>
 
         {onSubmit && (
-          <Modal.Footer className="flex justify-end gap-2 p-4 ">
+          <Modal.Footer>
             <Button type="button" secondary onClick={() => onOpenChange(false)}>
               {cancelLabel}
             </Button>
diff --git a/web/src/components/modals/UserFilesModal.tsx b/web/src/components/modals/UserFilesModal.tsx
index ccb89db03a0..ba338a1ec8a 100644
--- a/web/src/components/modals/UserFilesModal.tsx
+++ b/web/src/components/modals/UserFilesModal.tsx
@@ -14,10 +14,8 @@ import IconButton from "@/refresh-components/buttons/IconButton";
 import SimpleLoader from "@/refresh-components/loaders/SimpleLoader";
 import AttachmentButton from "@/refresh-components/buttons/AttachmentButton";
 import Modal from "@/refresh-components/Modal";
-import ScrollIndicatorDiv from "@/refresh-components/ScrollIndicatorDiv";
 import { useModal } from "@/refresh-components/contexts/ModalContext";
 import CounterSeparator from "@/refresh-components/CounterSeparator";
-import useFilter from "@/hooks/useFilter";
 import {
   SvgEye,
   SvgFiles,
@@ -26,6 +24,9 @@ import {
   SvgTrash,
   SvgXCircle,
 } from "@opal/icons";
+import { Section } from "@/layouts/general-layouts";
+import useFilter from "@/hooks/useFilter";
+import ScrollIndicatorDiv from "@/refresh-components/ScrollIndicatorDiv";
 
 function getIcon(
   file: ProjectFile,
@@ -127,16 +128,13 @@ export default function UserFilesModal({
   const triggerUploadPicker = () => fileInputRef.current?.click();
 
   useEffect(() => {
-    if (selectedFileIds) {
-      setSelectedIds(new Set(selectedFileIds));
-    } else {
-      setSelectedIds(new Set());
-    }
+    if (selectedFileIds) setSelectedIds(new Set(selectedFileIds));
+    else setSelectedIds(new Set());
   }, [selectedFileIds]);
 
   const selectedCount = selectedIds.size;
 
-  const handleDeselectAll = () => {
+  function handleDeselectAll() {
     selectedIds.forEach((id) => {
       const file = recentFiles.find((f) => f.id === id);
       if (file) {
@@ -144,7 +142,7 @@ export default function UserFilesModal({
       }
     });
     setSelectedIds(new Set());
-  };
+  }
 
   const files = useMemo(
     () =>
@@ -180,7 +178,7 @@ export default function UserFilesModal({
         >
           <Modal.Header icon={SvgFiles} title={title} description={description}>
             {/* Search bar section */}
-            <div className="flex flex-row items-center gap-2">
+            <Section flexDirection="row" gap={0.5}>
               <InputTypeIn
                 ref={searchInputRef}
                 placeholder="Search files..."
@@ -202,19 +200,19 @@ export default function UserFilesModal({
                   Add Files
                 </CreateButton>
               )}
-            </div>
+            </Section>
           </Modal.Header>
 
-          <Modal.Body className="flex flex-col flex-1 overflow-hidden bg-background-tint-01">
+          <Modal.Body
+            padding={filtered.length === 0 ? 0.5 : 0}
+            gap={0.5}
+            alignItems="center"
+          >
             {/* File display section */}
             {filtered.length === 0 ? (
-              <div className="p-4 flex w-full h-full items-center justify-center">
-                <Text as="p" text03>
-                  No files found
-                </Text>
-              </div>
+              <Text text03>No files found</Text>
             ) : (
-              <ScrollIndicatorDiv className="p-2 gap-2" variant="shadow">
+              <ScrollIndicatorDiv className="p-2 gap-2 max-h-[70vh]">
                 {filtered.map((projectFle) => {
                   const isSelected = selectedIds.has(projectFle.id);
                   return (
@@ -262,10 +260,10 @@ export default function UserFilesModal({
             )}
           </Modal.Body>
 
-          <Modal.Footer className="flex items-center justify-between p-4">
+          <Modal.Footer>
             {/* Left side: file count and controls */}
             {onPickRecent && (
-              <div className="flex items-center gap-2">
+              <Section flexDirection="row" justifyContent="start" gap={0.5}>
                 <Text as="p" text03>
                   {selectedCount} {selectedCount === 1 ? "file" : "files"}{" "}
                   selected
@@ -274,7 +272,7 @@ export default function UserFilesModal({
                   icon={SvgEye}
                   internal
                   onClick={() => setShowOnlySelected(!showOnlySelected)}
-                  className={showOnlySelected ? "bg-background-tint-02" : ""}
+                  transient={showOnlySelected}
                 />
                 <IconButton
                   icon={SvgXCircle}
@@ -282,11 +280,11 @@ export default function UserFilesModal({
                   onClick={handleDeselectAll}
                   disabled={selectedCount === 0}
                 />
-              </div>
+              </Section>
             )}
 
             {/* Right side: Done button */}
-            <Button secondary onClick={() => toggle(false)} className="ml-auto">
+            <Button secondary onClick={() => toggle(false)}>
               Done
             </Button>
           </Modal.Footer>
diff --git a/web/src/components/oauth/OAuthConfigSelector.tsx b/web/src/components/oauth/OAuthConfigSelector.tsx
deleted file mode 100644
index a55bf0892ca..00000000000
--- a/web/src/components/oauth/OAuthConfigSelector.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import { OAuthConfig } from "@/lib/tools/interfaces";
-import { SelectorFormField } from "@/components/Field";
-import Button from "@/refresh-components/buttons/Button";
-import { useState } from "react";
-import { OAuthConfigForm } from "@/app/admin/oauth-configs/OAuthConfigForm";
-import { PopupSpec } from "@/components/admin/connectors/Popup";
-import { useFormikContext } from "formik";
-import CreateButton from "@/refresh-components/buttons/CreateButton";
-import { KeyedMutator } from "swr";
-import { SvgEdit, SvgPlusCircle } from "@opal/icons";
-interface OAuthConfigSelectorProps {
-  name: string;
-  label?: string;
-  oauthConfigs: OAuthConfig[];
-  onSelect?: (configId: number | null) => void;
-  onConfigCreated?: (config: OAuthConfig) => void;
-  setPopup: (popupSpec: PopupSpec | null) => void;
-  mutateOAuthConfigs?: KeyedMutator<OAuthConfig[]>;
-}
-
-export const OAuthConfigSelector = ({
-  name,
-  label = "OAuth Configuration:",
-  oauthConfigs,
-  onSelect,
-  onConfigCreated,
-  setPopup,
-  mutateOAuthConfigs,
-}: OAuthConfigSelectorProps) => {
-  const [showModal, setShowModal] = useState(false);
-  const [editingConfig, setEditingConfig] = useState<OAuthConfig | null>(null);
-  const { setFieldValue, values } = useFormikContext<any>();
-
-  // Get the currently selected config ID
-  const selectedConfigId = values[name];
-
-  const options = [
-    { name: "None", value: -1 },
-    ...oauthConfigs.map((config) => ({
-      name: config.name,
-      value: config.id,
-    })),
-  ];
-
-  const handleConfigSaved = (savedConfig: OAuthConfig) => {
-    const isCreating = !editingConfig;
-
-    // Refresh the OAuth configs list
-    if (mutateOAuthConfigs) {
-      mutateOAuthConfigs();
-    }
-
-    // If creating a new config, also call the onConfigCreated callback
-    // and select the new config
-    if (isCreating && onConfigCreated) {
-      onConfigCreated(savedConfig);
-
-      // Wait a moment for the options list to update before setting the field value
-      // This ensures the new config is in the options when the selector tries to find it
-      setTimeout(() => {
-        // Now set the newly created config as selected
-        setFieldValue(name, savedConfig.id.toString(), true);
-
-        // Call the onSelect callback if provided
-        if (onSelect) {
-          onSelect(savedConfig.id);
-        }
-      }, 100);
-    }
-  };
-
-  const handleModalClose = () => {
-    setShowModal(false);
-    setEditingConfig(null);
-  };
-
-  const handleEditClick = () => {
-    // Find the selected config
-    const configId =
-      typeof selectedConfigId === "string"
-        ? parseInt(selectedConfigId)
-        : selectedConfigId;
-    const config = oauthConfigs.find((c) => c.id === configId);
-    if (config) {
-      setEditingConfig(config);
-      setShowModal(true);
-    }
-  };
-
-  // Check if a valid config is selected (not null and not "None")
-  const hasValidSelection =
-    selectedConfigId &&
-    selectedConfigId !== -1 &&
-    selectedConfigId !== "-1" &&
-    selectedConfigId !== "null";
-
-  return (
-    <div className="space-y-2">
-      <SelectorFormField
-        name={name}
-        label={label}
-        options={options}
-        subtext="Select an OAuth configuration for this tool. Users will be prompted to authenticate when using this tool."
-        onSelect={(selected) => {
-          // SelectorFormField passes the value string directly, not an object
-          let configId: number | null;
-          if (
-            !selected ||
-            selected === "null" ||
-            selected === -1 ||
-            selected === "-1"
-          ) {
-            configId = null;
-          } else if (typeof selected === "number") {
-            configId = selected;
-          } else {
-            configId = parseInt(selected);
-          }
-          if (onSelect) {
-            onSelect(configId);
-          }
-        }}
-      />
-      <div className="flex gap-2">
-        <CreateButton onClick={() => setShowModal(true)}>
-          New OAuth Configuration
-        </CreateButton>
-        {hasValidSelection && (
-          <Button
-            onClick={handleEditClick}
-            secondary
-            leftIcon={SvgEdit}
-            type="button"
-          >
-            Edit Configuration
-          </Button>
-        )}
-      </div>
-
-      {showModal && (
-        <OAuthConfigForm
-          onClose={handleModalClose}
-          setPopup={setPopup}
-          config={editingConfig || undefined}
-          onConfigSubmitted={handleConfigSaved}
-        />
-      )}
-    </div>
-  );
-};
diff --git a/web/src/layouts/general-layouts.tsx b/web/src/layouts/general-layouts.tsx
index 575526b7285..aba703807a1 100644
--- a/web/src/layouts/general-layouts.tsx
+++ b/web/src/layouts/general-layouts.tsx
@@ -1,9 +1,9 @@
 import { cn } from "@/lib/utils";
 import { WithoutStyles } from "@/types";
-import React from "react";
+import React, { forwardRef } from "react";
 
 export type FlexDirection = "row" | "column";
-export type JustifyContent = "start" | "center" | "end";
+export type JustifyContent = "start" | "center" | "end" | "between";
 export type AlignItems = "start" | "center" | "end";
 
 const directionClassMap: Record<FlexDirection, string> = {
@@ -14,6 +14,7 @@ const justifyClassMap: Record<JustifyContent, string> = {
   start: "justify-start",
   center: "justify-center",
   end: "justify-end",
+  between: "justify-between",
 };
 const alignClassMap: Record<AlignItems, string> = {
   start: "items-start",
@@ -81,30 +82,39 @@ export interface SectionProps
   wrap?: boolean;
 }
 
-export function Section({
-  flexDirection = "column",
-  justifyContent = "center",
-  alignItems = "center",
-  gap = 1,
-  padding = 0,
-  fit,
-  wrap,
-  ...rest
-}: SectionProps) {
-  const width = fit ? "w-fit" : "w-full";
+const Section = forwardRef<HTMLDivElement, SectionProps>(
+  (
+    {
+      flexDirection = "column",
+      justifyContent = "center",
+      alignItems = "center",
+      gap = 1,
+      padding = 0,
+      fit,
+      wrap,
+      ...rest
+    },
+    ref
+  ) => {
+    const width = fit ? "w-fit" : "w-full";
 
-  return (
-    <div
-      className={cn(
-        "flex w-full",
-        wrap && "flex-wrap",
-        justifyClassMap[justifyContent],
-        alignClassMap[alignItems],
-        width,
-        directionClassMap[flexDirection]
-      )}
-      style={{ gap: `${gap}rem`, padding: `${padding}rem` }}
-      {...rest}
-    />
-  );
-}
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          wrap && "flex-wrap",
+          justifyClassMap[justifyContent],
+          alignClassMap[alignItems],
+          width,
+          directionClassMap[flexDirection]
+        )}
+        style={{ gap: `${gap}rem`, padding: `${padding}rem` }}
+        {...rest}
+      />
+    );
+  }
+);
+Section.displayName = "Section";
+
+export { Section };
diff --git a/web/src/layouts/input-layouts.tsx b/web/src/layouts/input-layouts.tsx
index 73f78ac44a5..903587a3388 100644
--- a/web/src/layouts/input-layouts.tsx
+++ b/web/src/layouts/input-layouts.tsx
@@ -5,7 +5,7 @@ import Text from "@/refresh-components/texts/Text";
 import { SvgXOctagon, SvgAlertCircle } from "@opal/icons";
 import { useField, useFormikContext } from "formik";
 
-export interface OrientationLayoutProps extends LabelLayoutProps {
+interface OrientationLayoutProps extends LabelLayoutProps {
   name?: string;
   children?: React.ReactNode;
 }
@@ -32,28 +32,30 @@ export interface OrientationLayoutProps extends LabelLayoutProps {
  * </Vertical>
  * ```
  */
+export interface VerticalLayoutProps extends OrientationLayoutProps {
+  subDescription?: React.ReactNode;
+}
 function VerticalInputLayout({
   children,
+  subDescription,
 
   name,
   ...fieldLabelProps
-}: OrientationLayoutProps) {
+}: VerticalLayoutProps) {
   return (
     <div className="flex flex-col w-full h-full gap-1">
       <LabelLayout name={name} {...fieldLabelProps} />
       {children}
       {name && <ErrorLayout name={name} />}
+      {subDescription && (
+        <Text secondaryBody text03>
+          {subDescription}
+        </Text>
+      )}
     </div>
   );
 }
 
-export interface HorizontalLayoutProps extends OrientationLayoutProps {
-  /** Align input to the start (top) of the label/description */
-  start?: boolean;
-  /** Align input to the center (middle) of the label/description */
-  center?: boolean;
-}
-
 /**
  * HorizontalInputLayout - A layout component for form fields with horizontal label arrangement
  *
@@ -96,6 +98,12 @@ export interface HorizontalLayoutProps extends OrientationLayoutProps {
  * </Horizontal>
  * ```
  */
+export interface HorizontalLayoutProps extends OrientationLayoutProps {
+  /** Align input to the start (top) of the label/description */
+  start?: boolean;
+  /** Align input to the center (middle) of the label/description */
+  center?: boolean;
+}
 function HorizontalInputLayout({
   children,
 
@@ -136,15 +144,6 @@ function HorizontalInputLayout({
   );
 }
 
-export interface LabelLayoutProps {
-  name?: string;
-  label?: string;
-  optional?: boolean;
-  description?: string;
-  start?: boolean;
-  center?: boolean;
-}
-
 /**
  * LabelLayout - A reusable label component for form fields
  *
@@ -171,6 +170,14 @@ export interface LabelLayoutProps {
  * />
  * ```
  */
+export interface LabelLayoutProps {
+  name?: string;
+  label?: string;
+  optional?: boolean;
+  description?: string;
+  start?: boolean;
+  center?: boolean;
+}
 function LabelLayout({
   name,
   label,
@@ -214,10 +221,6 @@ function LabelLayout({
   );
 }
 
-interface FieldErrorLayoutProps {
-  name: string;
-}
-
 /**
  * ErrorLayout - Displays Formik field validation errors
  *
@@ -240,6 +243,9 @@ interface FieldErrorLayoutProps {
  * This component uses Formik's `useField` hook internally and requires
  * the component to be rendered within a Formik context.
  */
+interface FieldErrorLayoutProps {
+  name: string;
+}
 function ErrorLayout({ name }: FieldErrorLayoutProps) {
   const [, meta] = useField(name);
   const { status } = useFormikContext();
diff --git a/web/src/refresh-components/EmptyMessage.tsx b/web/src/refresh-components/EmptyMessage.tsx
index 66101d2a4c9..fadd2e90435 100644
--- a/web/src/refresh-components/EmptyMessage.tsx
+++ b/web/src/refresh-components/EmptyMessage.tsx
@@ -30,24 +30,42 @@
 
 import { SvgEmpty } from "@opal/icons";
 import Card from "@/refresh-components/cards/Card";
-import * as GeneralLayouts from "@/layouts/general-layouts";
+import { Section } from "@/layouts/general-layouts";
 import Text from "@/refresh-components/texts/Text";
+import { IconProps } from "@opal/types";
+import { cn } from "@/lib/utils";
 
 export interface EmptyMessageProps {
-  children: string;
+  icon?: React.FunctionComponent<IconProps>;
+  title: string;
+  description?: string;
 }
 
-export default function EmptyMessage({ children }: EmptyMessageProps) {
+export default function EmptyMessage({
+  icon: Icon = SvgEmpty,
+  title,
+  description,
+}: EmptyMessageProps) {
   return (
     <Card translucent>
-      <GeneralLayouts.Section
+      <Section
         flexDirection="row"
         justifyContent="start"
+        alignItems={!!description ? "start" : "center"}
         gap={0.5}
       >
-        <SvgEmpty size={16} className="stroke-text-03" />
-        <Text text03>{children}</Text>
-      </GeneralLayouts.Section>
+        <div className={cn(description && "mt-0.5")}>
+          <Icon size={16} className="stroke-text-03" />
+        </div>
+        <Section alignItems="start" gap={0}>
+          <Text text03>{title}</Text>
+          {description && (
+            <Text text03 secondaryBody>
+              {description}
+            </Text>
+          )}
+        </Section>
+      </Section>
     </Card>
   );
 }
diff --git a/web/src/refresh-components/Modal.tsx b/web/src/refresh-components/Modal.tsx
index 1b0921a7773..99aa73e2235 100644
--- a/web/src/refresh-components/Modal.tsx
+++ b/web/src/refresh-components/Modal.tsx
@@ -8,6 +8,8 @@ import Text from "@/refresh-components/texts/Text";
 import IconButton from "@/refresh-components/buttons/IconButton";
 import { SvgX } from "@opal/icons";
 import Truncated from "@/refresh-components/texts/Truncated";
+import { WithoutStyles } from "@/types";
+import { Section, SectionProps } from "@/layouts/general-layouts";
 
 /**
  * Modal Root Component
@@ -37,15 +39,14 @@ const ModalRoot = DialogPrimitive.Root;
  */
 const ModalOverlay = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+  WithoutStyles<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>>
+>(({ ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
       "fixed inset-0 z-modal-overlay bg-mask-03 backdrop-blur-03 pointer-events-none",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
-      "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
-      className
+      "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
     )}
     {...props}
   />
@@ -53,12 +54,13 @@ const ModalOverlay = React.forwardRef<
 ModalOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 /**
- * Modal Context for managing close button ref and warning state
+ * Modal Context for managing close button ref, warning state, and size variant
  */
 interface ModalContextValue {
   closeButtonRef: React.RefObject<HTMLDivElement | null>;
   hasAttemptedClose: boolean;
   setHasAttemptedClose: (value: boolean) => void;
+  sizeVariant: "large" | "medium" | "small" | "tall" | "mini";
 }
 
 const ModalContext = React.createContext<ModalContextValue | null>(null);
@@ -118,7 +120,9 @@ const sizeClassNames = {
  * ```
  */
 interface ModalContentProps
-  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  extends WithoutStyles<
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+  > {
   large?: boolean;
   medium?: boolean;
   small?: boolean;
@@ -133,7 +137,6 @@ const ModalContent = React.forwardRef<
 >(
   (
     {
-      className,
       children,
       large,
       medium,
@@ -268,7 +271,12 @@ const ModalContent = React.forwardRef<
 
     return (
       <ModalContext.Provider
-        value={{ closeButtonRef, hasAttemptedClose, setHasAttemptedClose }}
+        value={{
+          closeButtonRef,
+          hasAttemptedClose,
+          setHasAttemptedClose,
+          sizeVariant: variant,
+        }}
       >
         <DialogPrimitive.Portal>
           {!skipOverlay && <ModalOverlay />}
@@ -284,10 +292,10 @@ const ModalContent = React.forwardRef<
               contentRef(node);
             }}
             className={cn(
-              "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+              "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden",
               "z-modal",
               "bg-background-tint-00 border rounded-16 shadow-2xl",
-              "flex flex-col overflow-auto",
+              "flex flex-col",
               // Never exceed viewport on small screens
               "max-w-[calc(100dvw-2rem)] max-h-[calc(100dvh-2rem)]",
               "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
@@ -295,8 +303,7 @@ const ModalContent = React.forwardRef<
               "data-[state=open]:slide-in-from-top-1/2 data-[state=closed]:slide-out-to-top-1/2",
               "duration-200",
               // Size variants
-              sizeClassNames[variant],
-              className
+              sizeClassNames[variant]
             )}
             onOpenAutoFocus={(e) => {
               // Reset typing detection when modal opens
@@ -330,33 +337,30 @@ ModalContent.displayName = DialogPrimitive.Content.displayName;
  *
  * @example
  * ```tsx
- * <Modal.Header icon={SvgWarning} title="Confirm Action" description="Are you sure?" withBottomShadow />
+ * <Modal.Header icon={SvgWarning} title="Confirm Action" description="Are you sure?" />
  *
  * // With custom content
  * // Children render below the provided title/description stack.
- * <Modal.Header icon={SvgFile} title="Select Files" withBottomShadow>
+ * <Modal.Header icon={SvgFile} title="Select Files">
  *   <InputTypeIn placeholder="Search..." />
  * </Modal.Header>
  * ```
  */
-interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ModalHeaderProps extends WithoutStyles<SectionProps> {
   icon: React.FunctionComponent<IconProps>;
   title: string;
   titleClassName?: string;
   description?: string;
   onClose?: () => void;
-  withBottomShadow?: boolean;
 }
 const ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(
   (
     {
-      withBottomShadow = false,
       icon: Icon,
       title,
       titleClassName,
       description,
       onClose,
-      className,
       children,
       ...props
     },
@@ -365,17 +369,14 @@ const ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(
     const { closeButtonRef } = useModalContext();
 
     return (
-      <div
-        ref={ref}
-        className={cn(
-          "relative z-10 flex flex-col gap-4 p-4",
-          withBottomShadow && "shadow-01",
-          className
-        )}
-        {...props}
-      >
-        <div className="flex flex-col gap-1">
-          <div className="flex flex-row items-center justify-between">
+      <Section ref={ref} padding={1} alignItems="start" {...props}>
+        <Section gap={0.25} alignItems="start">
+          <Section
+            gap={0}
+            padding={0}
+            flexDirection="row"
+            justifyContent="between"
+          >
             <Icon className={"w-[1.5rem] h-[1.5rem] stroke-text-04"} />
             {onClose && (
               <div
@@ -387,22 +388,22 @@ const ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(
                 </DialogPrimitive.Close>
               </div>
             )}
-          </div>
+          </Section>
           <DialogPrimitive.Title asChild>
             <Truncated headingH3 as="span" className={titleClassName}>
               {title}
             </Truncated>
           </DialogPrimitive.Title>
           {description && (
-            <DialogPrimitive.Description>
+            <DialogPrimitive.Description asChild>
               <Text secondaryBody text03 as="span">
                 {description}
               </Text>
             </DialogPrimitive.Description>
           )}
-        </div>
+        </Section>
         {children}
-      </div>
+      </Section>
     );
   }
 );
@@ -425,16 +426,30 @@ ModalHeader.displayName = "ModalHeader";
  * </Modal.Body>
  * ```
  */
-interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface ModalBodyProps extends WithoutStyles<SectionProps> {
+  twoTone?: boolean;
+}
 const ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(
-  ({ className, children, ...props }, ref) => {
+  ({ twoTone = true, children, ...props }, ref) => {
+    const { sizeVariant } = useModalContext();
+
+    // Apply overflow-auto for fixed height variants (large, small, tall)
+    const hasFixedHeight =
+      sizeVariant === "large" ||
+      sizeVariant === "small" ||
+      sizeVariant === "tall";
+
     return (
       <div
         ref={ref}
-        className={cn("pb-4 px-4 flex flex-col gap-4", className)}
-        {...props}
+        className={cn(
+          twoTone && "bg-background-tint-01",
+          hasFixedHeight && "overflow-auto min-h-0"
+        )}
       >
-        {children}
+        <Section padding={1} gap={1} alignItems="start" {...props}>
+          {children}
+        </Section>
       </div>
     );
   }
@@ -449,35 +464,27 @@ ModalBody.displayName = "ModalBody";
  * @example
  * ```tsx
  * // Right-aligned buttons
- * <Modal.Footer className="flex justify-end gap-2 p-4">
+ * <Modal.Footer>
  *   <Button secondary>Cancel</Button>
  *   <Button primary>Confirm</Button>
  * </Modal.Footer>
- *
- * // Space-between layout
- * <Modal.Footer className="flex justify-between p-4">
- *   <Text as="p">3 files selected</Text>
- *   <Button>Done</Button>
- * </Modal.Footer>
  * ```
  */
-interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
-const ModalFooter = React.forwardRef<HTMLDivElement, ModalFooterProps>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex flex-row items-center justify-end gap-1 p-4 w-full",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-);
+const ModalFooter = React.forwardRef<
+  HTMLDivElement,
+  WithoutStyles<SectionProps>
+>(({ ...props }, ref) => {
+  return (
+    <Section
+      ref={ref}
+      flexDirection="row"
+      justifyContent="end"
+      gap={0.5}
+      padding={1}
+      {...props}
+    />
+  );
+});
 ModalFooter.displayName = "ModalFooter";
 
 export default Object.assign(ModalRoot, {
diff --git a/web/src/refresh-components/ScrollIndicatorDiv.tsx b/web/src/refresh-components/ScrollIndicatorDiv.tsx
index 2d59656e418..9eaa018fa28 100644
--- a/web/src/refresh-components/ScrollIndicatorDiv.tsx
+++ b/web/src/refresh-components/ScrollIndicatorDiv.tsx
@@ -97,7 +97,7 @@ export default function ScrollIndicatorDiv({
   };
 
   return (
-    <div className="relative flex-1 min-h-0 overflow-y-hidden flex flex-col">
+    <div className="relative flex-1 min-h-0 overflow-y-hidden flex flex-col w-full">
       {/* Top indicator */}
       {!disableIndicators && showTopIndicator && (
         <div
diff --git a/web/src/refresh-components/Separator.tsx b/web/src/refresh-components/Separator.tsx
index 2501a0cb813..2b572f02c0e 100644
--- a/web/src/refresh-components/Separator.tsx
+++ b/web/src/refresh-components/Separator.tsx
@@ -47,6 +47,7 @@ const Separator = React.forwardRef(
     return (
       <div
         className={cn(
+          isHorizontal ? "w-full" : "h-full",
           !noPadding && (isHorizontal ? "py-4" : "px-4"),
           className
         )}
diff --git a/web/src/refresh-components/inputs/InputTextArea.tsx b/web/src/refresh-components/inputs/InputTextArea.tsx
index 89ddc355bbb..711fac47994 100644
--- a/web/src/refresh-components/inputs/InputTextArea.tsx
+++ b/web/src/refresh-components/inputs/InputTextArea.tsx
@@ -49,13 +49,9 @@ export interface InputTextAreaProps
   internal?: boolean;
   error?: boolean;
   disabled?: boolean;
-  action?: React.ReactNode;
 }
 const InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextAreaProps>(
-  (
-    { main, internal, error, disabled, action, className, rows = 4, ...props },
-    ref
-  ) => {
+  ({ main, internal, error, disabled, className, rows = 4, ...props }, ref) => {
     const variant = main
       ? "main"
       : internal
@@ -66,8 +62,6 @@ const InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextAreaProps>(
             ? "disabled"
             : "main";
 
-    const paddingClasses = action ? "pl-0.5 pr-16 py-0.5" : "p-0.5";
-
     return (
       <div
         className={cn(
@@ -76,18 +70,12 @@ const InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextAreaProps>(
           className
         )}
       >
-        {action && (
-          <div className="absolute top-2 right-5 z-[1] flex items-center gap-2">
-            {action}
-          </div>
-        )}
         <textarea
           ref={ref}
           disabled={disabled}
           className={cn(
             innerClasses[variant],
-            "w-full min-h-[3rem] bg-transparent focus:outline-none resize-y",
-            paddingClasses
+            "w-full min-h-[3rem] bg-transparent focus:outline-none resize-y p-0.5"
           )}
           rows={rows}
           {...props}
diff --git a/web/src/refresh-components/layouts/ConfirmationModalLayout.tsx b/web/src/refresh-components/layouts/ConfirmationModalLayout.tsx
index aee115a7880..a17d015297f 100644
--- a/web/src/refresh-components/layouts/ConfirmationModalLayout.tsx
+++ b/web/src/refresh-components/layouts/ConfirmationModalLayout.tsx
@@ -4,10 +4,12 @@ import Text from "@/refresh-components/texts/Text";
 import Button from "@/refresh-components/buttons/Button";
 import Modal from "@/refresh-components/Modal";
 import { useModalClose } from "../contexts/ModalContext";
+import { Section } from "@/layouts/general-layouts";
 
 export interface ConfirmationModalProps {
   icon: React.FunctionComponent<IconProps>;
   title: string;
+  description?: string;
   children?: React.ReactNode;
 
   submit: React.ReactNode;
@@ -18,6 +20,7 @@ export interface ConfirmationModalProps {
 export default function ConfirmationModalLayout({
   icon,
   title,
+  description,
   children,
 
   submit,
@@ -28,9 +31,14 @@ export default function ConfirmationModalLayout({
 
   return (
     <Modal open onOpenChange={(isOpen) => !isOpen && onClose?.()}>
-      <Modal.Content mini className="z-confirmation">
-        <Modal.Header icon={icon} title={title} onClose={onClose} />
-        <Modal.Body className="p-4 bg-background-tint-01">
+      <Modal.Content mini>
+        <Modal.Header
+          icon={icon}
+          title={title}
+          description={description}
+          onClose={onClose}
+        />
+        <Modal.Body>
           {typeof children === "string" ? (
             <Text as="p" text03>
               {children}
@@ -39,7 +47,7 @@ export default function ConfirmationModalLayout({
             children
           )}
         </Modal.Body>
-        <Modal.Footer className="w-full p-4 gap-2">
+        <Modal.Footer>
           {!hideCancel && (
             <Button secondary onClick={onClose} type="button">
               Cancel
diff --git a/web/src/sections/actions/ToolsList.tsx b/web/src/sections/actions/ToolsList.tsx
index 1cb3c430aab..75702a58799 100644
--- a/web/src/sections/actions/ToolsList.tsx
+++ b/web/src/sections/actions/ToolsList.tsx
@@ -10,7 +10,7 @@ import EnabledCount from "@/refresh-components/EnabledCount";
 import { SvgEye, SvgXCircle } from "@opal/icons";
 import Button from "@/refresh-components/buttons/Button";
 
-interface ToolsListProps {
+export interface ToolsListProps {
   // Loading state
   isFetching?: boolean;
 
@@ -101,7 +101,7 @@ const ToolsList: React.FC<ToolsListProps> = ({
                   icon={SvgEye}
                   internal
                   onClick={onToggleShowOnlyEnabled}
-                  className={showOnlyEnabled ? "bg-background-tint-02" : ""}
+                  transient={showOnlyEnabled}
                   tooltip={
                     showOnlyEnabled ? "Show all tools" : "Show only enabled"
                   }
@@ -133,6 +133,6 @@ const ToolsList: React.FC<ToolsListProps> = ({
     </>
   );
 };
-
 ToolsList.displayName = "ToolsList";
+
 export default ToolsList;
diff --git a/web/src/sections/actions/modals/AddMCPServerModal.tsx b/web/src/sections/actions/modals/AddMCPServerModal.tsx
index fa0abb77cae..560216ea9fb 100644
--- a/web/src/sections/actions/modals/AddMCPServerModal.tsx
+++ b/web/src/sections/actions/modals/AddMCPServerModal.tsx
@@ -4,10 +4,10 @@ import { useState } from "react";
 import { Formik, Form } from "formik";
 import * as Yup from "yup";
 import Modal from "@/refresh-components/Modal";
-import { FormField } from "@/refresh-components/form/FormField";
+import * as InputLayouts from "@/layouts/input-layouts";
+import InputTypeInField from "@/refresh-components/form/InputTypeInField";
+import InputTextAreaField from "@/refresh-components/form/InputTextAreaField";
 import Button from "@/refresh-components/buttons/Button";
-import InputTypeIn from "@/refresh-components/inputs/InputTypeIn";
-import InputTextArea from "@/refresh-components/inputs/InputTextArea";
 import { createMCPServer, updateMCPServer } from "@/lib/tools/mcpService";
 import {
   MCPServerCreateRequest,
@@ -20,6 +20,8 @@ import IconButton from "@/refresh-components/buttons/IconButton";
 import { PopupSpec } from "@/components/admin/connectors/Popup";
 import { ModalCreationInterface } from "@/refresh-components/contexts/ModalContext";
 import { SvgCheckCircle, SvgServer, SvgUnplug } from "@opal/icons";
+import { Section } from "@/layouts/general-layouts";
+import Text from "@/refresh-components/texts/Text";
 
 interface AddMCPServerModalProps {
   skipOverlay?: boolean;
@@ -44,7 +46,6 @@ const validationSchema = Yup.object().shape({
 export default function AddMCPServerModal({
   skipOverlay = false,
   activeServer,
-  setActiveServer,
   disconnectModal,
   manageServerModal,
   onServerCreated,
@@ -141,168 +142,111 @@ export default function AddMCPServerModal({
           validationSchema={validationSchema}
           onSubmit={handleSubmit}
         >
-          {({ values, errors, touched, handleChange, handleBlur, dirty }) => (
-            <Form className="gap-0">
+          {({ isValid, dirty }) => (
+            <Form>
               <Modal.Header
                 icon={SvgServer}
-                title={isEditMode ? "Manage MCP server" : "Add MCP server"}
+                title={isEditMode ? "Manage MCP Server" : "Add MCP Server"}
                 description={
                   isEditMode
                     ? "Update your MCP server configuration and manage authentication."
                     : "Connect MCP (Model Context Protocol) server to add custom actions."
                 }
-                className="p-4 w-full"
                 onClose={() => handleModalClose(false)}
               />
 
-              <Modal.Body className="flex flex-col bg-background-tint-01 p-4 gap-4">
-                <FormField
-                  id="name"
-                  name="name"
-                  state={
-                    errors.name && touched.name
-                      ? "error"
-                      : touched.name
-                        ? "success"
-                        : "idle"
-                  }
-                >
-                  <FormField.Label>Server Name</FormField.Label>
-                  <FormField.Control asChild>
-                    <InputTypeIn
-                      id="name"
-                      name="name"
-                      placeholder="Name your MCP server"
-                      value={values.name}
-                      onChange={handleChange}
-                      onBlur={handleBlur}
-                      autoFocus
-                    />
-                  </FormField.Control>
-                  <FormField.Message
-                    messages={{
-                      error: errors.name,
-                    }}
+              <Modal.Body>
+                <InputLayouts.Vertical name="name" label="Server Name">
+                  <InputTypeInField
+                    name="name"
+                    placeholder="Name your MCP server"
+                    autoFocus
                   />
-                </FormField>
+                </InputLayouts.Vertical>
 
-                <FormField
-                  id="description"
+                <InputLayouts.Vertical
                   name="description"
-                  state={
-                    errors.description && touched.description
-                      ? "error"
-                      : touched.description
-                        ? "success"
-                        : "idle"
-                  }
+                  label="Description"
+                  optional
                 >
-                  <FormField.Label optional>Description</FormField.Label>
-                  <FormField.Control asChild>
-                    <InputTextArea
-                      id="description"
-                      name="description"
-                      placeholder="More details about the MCP server"
-                      value={values.description}
-                      onChange={handleChange}
-                      onBlur={handleBlur}
-                      rows={3}
-                      className="resize-none"
-                    />
-                  </FormField.Control>
-                  <FormField.Message
-                    messages={{
-                      error: errors.description,
-                    }}
+                  <InputTextAreaField
+                    name="description"
+                    placeholder="More details about the MCP server"
+                    rows={3}
                   />
-                </FormField>
+                </InputLayouts.Vertical>
 
-                <Separator className="py-0" />
+                <Separator noPadding />
 
-                <FormField
-                  id="server_url"
+                <InputLayouts.Vertical
                   name="server_url"
-                  state={
-                    errors.server_url && touched.server_url
-                      ? "error"
-                      : touched.server_url
-                        ? "success"
-                        : "idle"
-                  }
+                  label="MCP Server URL"
+                  subDescription="Only connect to servers you trust. You are responsible for actions taken with this connection and keeping your tools updated."
                 >
-                  <FormField.Label>MCP Server URL</FormField.Label>
-                  <FormField.Control asChild>
-                    <InputTypeIn
-                      id="server_url"
-                      name="server_url"
-                      placeholder="https://your-mcp-server.com/mcp"
-                      value={values.server_url}
-                      onChange={handleChange}
-                      onBlur={handleBlur}
-                    />
-                  </FormField.Control>
-                  <FormField.Description>
-                    Only connect to servers you trust. You are responsible for
-                    actions taken with this connection and keeping your tools
-                    updated.
-                  </FormField.Description>
-                  <FormField.Message
-                    messages={{
-                      error: errors.server_url,
-                    }}
+                  <InputTypeInField
+                    name="server_url"
+                    placeholder="https://your-mcp-server.com/mcp"
                   />
-                </FormField>
+                </InputLayouts.Vertical>
 
                 {/* Authentication Status Section - Only show in edit mode when authenticated */}
                 {isEditMode &&
                   server?.is_authenticated &&
                   server?.status === MCPServerStatus.CONNECTED && (
-                    <FormField state="idle">
-                      <div className="flex items-start justify-between w-full">
-                        <div className="flex-1 flex flex-col gap-0 items-start">
-                          <FormField.Label
-                            leftIcon={
-                              <SvgCheckCircle className="w-4 h-4 stroke-status-success-05" />
-                            }
-                          >
-                            Authenticated & Connected
-                          </FormField.Label>
-                          <FormField.Description className="pl-5">
-                            {server.auth_type === "OAUTH"
-                              ? `OAuth connected to ${server.owner}`
-                              : server.auth_type === "API_TOKEN"
-                                ? "API token configured"
-                                : "Connected"}
-                          </FormField.Description>
-                        </div>
-                        <FormField.Control asChild>
-                          <div className="flex gap-2 items-center justify-end">
-                            <IconButton
-                              icon={SvgUnplug}
-                              tertiary
-                              type="button"
-                              tooltip="Disconnect Server"
-                              onClick={handleDisconnectClick}
-                            />
-                            <Button
-                              secondary
-                              type="button"
-                              onClick={() => {
-                                // Close this modal and open the auth modal for this server
-                                toggle(false);
-                                handleAuthenticate(server.id);
-                              }}
-                            >
-                              Edit Configs
-                            </Button>
-                          </div>
-                        </FormField.Control>
-                      </div>
-                    </FormField>
+                    <Section
+                      flexDirection="row"
+                      justifyContent="between"
+                      alignItems="start"
+                      gap={1}
+                    >
+                      <Section gap={0.25} alignItems="start">
+                        <Section
+                          flexDirection="row"
+                          gap={0.5}
+                          alignItems="center"
+                          fit
+                        >
+                          <SvgCheckCircle className="w-4 h-4 stroke-status-success-05" />
+                          <Text>Authenticated &amp; Connected</Text>
+                        </Section>
+                        <Text secondaryBody text03>
+                          {server.auth_type === "OAUTH"
+                            ? `OAuth connected to ${server.owner}`
+                            : server.auth_type === "API_TOKEN"
+                              ? "API token configured"
+                              : "Connected"}
+                        </Text>
+                      </Section>
+                      <Section
+                        flexDirection="row"
+                        gap={0.5}
+                        alignItems="center"
+                        fit
+                      >
+                        <IconButton
+                          icon={SvgUnplug}
+                          tertiary
+                          type="button"
+                          tooltip="Disconnect Server"
+                          onClick={handleDisconnectClick}
+                        />
+                        <Button
+                          secondary
+                          type="button"
+                          onClick={() => {
+                            // Close this modal and open the auth modal for this server
+                            toggle(false);
+                            handleAuthenticate(server.id);
+                          }}
+                        >
+                          Edit Configs
+                        </Button>
+                      </Section>
+                    </Section>
                   )}
               </Modal.Body>
 
-              <Modal.Footer className="gap-2">
+              <Modal.Footer>
                 <Button
                   secondary
                   type="button"
@@ -311,7 +255,11 @@ export default function AddMCPServerModal({
                 >
                   Cancel
                 </Button>
-                <Button primary type="submit" disabled={isSubmitting || !dirty}>
+                <Button
+                  primary
+                  type="submit"
+                  disabled={isSubmitting || !isValid || !dirty}
+                >
                   {isSubmitting
                     ? isEditMode
                       ? "Saving..."
diff --git a/web/src/sections/actions/modals/AddOpenAPIActionModal.tsx b/web/src/sections/actions/modals/AddOpenAPIActionModal.tsx
index 11871ffe0a2..a6c53ec46ca 100644
--- a/web/src/sections/actions/modals/AddOpenAPIActionModal.tsx
+++ b/web/src/sections/actions/modals/AddOpenAPIActionModal.tsx
@@ -3,9 +3,9 @@
 import Link from "next/link";
 import Modal from "@/refresh-components/Modal";
 import Button from "@/refresh-components/buttons/Button";
-import InputTextArea from "@/refresh-components/inputs/InputTextArea";
 import Text from "@/refresh-components/texts/Text";
-import { FormField } from "@/refresh-components/form/FormField";
+import * as InputLayouts from "@/layouts/input-layouts";
+import InputTextAreaField from "@/refresh-components/form/InputTextAreaField";
 import SimpleTooltip from "@/refresh-components/SimpleTooltip";
 import Separator from "@/refresh-components/Separator";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -21,7 +21,7 @@ import ToolItem from "@/sections/actions/ToolItem";
 import debounce from "lodash/debounce";
 import { DOCS_ADMINS_PATH } from "@/lib/constants";
 import { useModal } from "@/refresh-components/contexts/ModalContext";
-import { Formik, Form } from "formik";
+import { Formik, Form, useFormikContext } from "formik";
 import * as Yup from "yup";
 import { PopupSpec } from "@/components/admin/connectors/Popup";
 import {
@@ -33,6 +33,8 @@ import {
 } from "@opal/icons";
 import InfoBlock from "@/refresh-components/messages/InfoBlock";
 import { getActionIcon } from "@/lib/tools/mcpUtils";
+import { Section } from "@/layouts/general-layouts";
+import EmptyMessage from "@/refresh-components/EmptyMessage";
 
 interface AddOpenAPIActionModalProps {
   skipOverlay?: boolean;
@@ -69,131 +71,102 @@ function prettifyDefinition(definition: any) {
   return JSON.stringify(definition, null, 2);
 }
 
-interface SchemaActionsProps {
-  definition: string;
-  onFormat: () => void;
+interface FormContentProps {
+  handleClose: () => void;
+  existingTool: ToolSnapshot | null;
+  onEditAuthentication?: (tool: ToolSnapshot) => void;
+  onDisconnectTool?: (tool: ToolSnapshot) => Promise<void> | void;
 }
 
-function SchemaActions({ definition, onFormat }: SchemaActionsProps) {
-  return (
-    <div className="flex flex-col">
-      <CopyIconButton
-        tertiary
-        getCopyText={() => definition}
-        tooltip="Copy definition"
-      />
-      <IconButton
-        tertiary
-        icon={SvgBracketCurly}
-        tooltip="Format definition"
-        onClick={onFormat}
-      />
-    </div>
-  );
-}
-export default function AddOpenAPIActionModal({
-  skipOverlay = false,
-  onSuccess,
-  onUpdate,
-  setPopup,
-  existingTool = null,
-  onClose,
+function FormContent({
+  handleClose,
+  existingTool,
   onEditAuthentication,
   onDisconnectTool,
-}: AddOpenAPIActionModalProps) {
-  const { isOpen, toggle } = useModal();
-  const [isSubmitting, setIsSubmitting] = useState(false);
+}: FormContentProps) {
+  const { values, setFieldValue, setFieldError, dirty, isSubmitting } =
+    useFormikContext<OpenAPIActionFormValues>();
+
   const [methodSpecs, setMethodSpecs] = useState<MethodSpec[] | null>(null);
   const [name, setName] = useState<string | null>(null);
   const [description, setDescription] = useState<string | undefined>(undefined);
   const [url, setUrl] = useState<string | undefined>(undefined);
-  const [definitionError, setDefinitionError] = useState<string | null>(null);
-  const isEditMode = Boolean(existingTool);
 
-  const handleModalClose = useCallback(
-    (open: boolean) => {
-      toggle(open);
-      if (!open) {
-        onClose?.();
-      }
-    },
-    [toggle, onClose]
-  );
+  const isEditMode = Boolean(existingTool);
 
-  const handleClose = useCallback(() => {
-    handleModalClose(false);
-  }, [handleModalClose]);
+  const handleFormat = useCallback(() => {
+    if (!values.definition.trim()) {
+      return;
+    }
 
-  const initialValues: OpenAPIActionFormValues = useMemo(
-    () => ({
-      definition: existingTool?.definition
-        ? prettifyDefinition(existingTool.definition)
-        : "",
-    }),
-    [existingTool]
-  );
+    try {
+      const formatted = prettifyDefinition(
+        parseJsonWithTrailingCommas(values.definition)
+      );
+      setFieldValue("definition", formatted);
+      setFieldError("definition", "");
+    } catch {
+      setFieldError("definition", "Invalid JSON format");
+    }
+  }, [values.definition, setFieldValue, setFieldError]);
 
-  const handleFormat = useCallback(
-    (
-      definition: string,
-      setFieldValue: (field: string, value: any) => void
+  const validateDefinition = useCallback(
+    async (
+      rawDefinition: string,
+      setFieldError: (field: string, message: string) => void
     ) => {
-      if (!definition.trim()) {
+      if (!rawDefinition.trim()) {
+        setMethodSpecs(null);
+        setFieldError("definition", "");
         return;
       }
 
       try {
-        const formatted = prettifyDefinition(
-          parseJsonWithTrailingCommas(definition)
-        );
-        setFieldValue("definition", formatted);
-        setDefinitionError(null);
-      } catch {
-        setDefinitionError("Invalid JSON format");
-      }
-    },
-    []
-  );
+        const parsedDefinition = parseJsonWithTrailingCommas(rawDefinition);
+        const derivedName = parsedDefinition?.info?.title;
+        const derivedDescription = parsedDefinition?.info?.description;
+        const derivedUrl = parsedDefinition?.servers?.[0]?.url;
 
-  const validateDefinition = useCallback(async (rawDefinition: string) => {
-    if (!rawDefinition.trim()) {
-      setMethodSpecs(null);
-      setDefinitionError(null);
-      return;
-    }
-
-    try {
-      const parsedDefinition = parseJsonWithTrailingCommas(rawDefinition);
-      const derivedName = parsedDefinition?.info?.title;
-      const derivedDescription = parsedDefinition?.info?.description;
-      const derivedUrl = parsedDefinition?.servers?.[0]?.url;
+        setName(derivedName);
+        setDescription(derivedDescription);
+        setUrl(derivedUrl);
 
-      setName(derivedName);
-      setDescription(derivedDescription);
-      setUrl(derivedUrl);
-
-      const response = await validateToolDefinition({
-        definition: parsedDefinition,
-      });
+        const response = await validateToolDefinition({
+          definition: parsedDefinition,
+        });
 
-      if (response.error) {
+        if (response.error) {
+          setMethodSpecs(null);
+          setFieldError("definition", response.error);
+        } else {
+          setMethodSpecs(response.data ?? []);
+          setFieldError("definition", "");
+        }
+      } catch {
         setMethodSpecs(null);
-        setDefinitionError(response.error);
-      } else {
-        setMethodSpecs(response.data ?? []);
-        setDefinitionError(null);
+        setFieldError("definition", "Invalid JSON format");
       }
-    } catch {
-      setMethodSpecs(null);
-      setDefinitionError("Invalid JSON format");
-    }
-  }, []);
+    },
+    []
+  );
 
   const debouncedValidateDefinition = useMemo(
     () => debounce(validateDefinition, 300),
     [validateDefinition]
   );
 
+  const modalTitle = isEditMode ? "Edit OpenAPI action" : "Add OpenAPI action";
+  const modalDescription = isEditMode
+    ? "Update the OpenAPI schema for this action."
+    : "Add OpenAPI schema to add custom actions.";
+  const primaryButtonLabel = isSubmitting
+    ? isEditMode
+      ? "Saving..."
+      : "Adding..."
+    : isEditMode
+      ? "Save Changes"
+      : "Add Action";
+
   const hasOAuthConfig = Boolean(existingTool?.oauth_config_id);
   const hasCustomHeaders =
     Array.isArray(existingTool?.custom_headers) &&
@@ -231,15 +204,250 @@ export default function AddOpenAPIActionModal({
     onEditAuthentication(existingTool);
   }, [existingTool, onEditAuthentication, handleClose]);
 
-  const handleSubmit = async (values: OpenAPIActionFormValues) => {
-    setIsSubmitting(true);
+  useEffect(() => {
+    if (!values.definition.trim()) {
+      setMethodSpecs(null);
+      setFieldError("definition", "");
+      debouncedValidateDefinition.cancel();
+      return () => {
+        debouncedValidateDefinition.cancel();
+      };
+    }
+
+    debouncedValidateDefinition(values.definition, setFieldError);
+
+    return () => {
+      debouncedValidateDefinition.cancel();
+    };
+  }, [
+    values.definition,
+    debouncedValidateDefinition,
+    setFieldError,
+    setMethodSpecs,
+  ]);
 
+  return (
+    <Form>
+      <Modal.Header
+        icon={SvgActions}
+        title={modalTitle}
+        description={modalDescription}
+        onClose={handleClose}
+      />
+
+      <Modal.Body>
+        <InputLayouts.Vertical
+          name="definition"
+          label="OpenAPI Schema Definition"
+          subDescription={
+            <>
+              Specify an OpenAPI schema that defines the APIs you want to make
+              available as part of this action. Learn more about{" "}
+              <span className="inline-flex">
+                <SimpleTooltip
+                  tooltip={`Open ${DOCS_ADMINS_PATH}/actions/openapi`}
+                  side="top"
+                >
+                  <Link
+                    href={`${DOCS_ADMINS_PATH}/actions/openapi`}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="underline"
+                  >
+                    OpenAPI actions
+                  </Link>
+                </SimpleTooltip>
+              </span>
+              .
+            </>
+          }
+        >
+          <div className="group/DefinitionTextAreaField relative">
+            {values.definition.trim() && (
+              <div className="invisible group-hover/DefinitionTextAreaField:visible absolute z-[100000] top-2 right-2 bg-background-tint-00">
+                <CopyIconButton
+                  internal
+                  getCopyText={() => values.definition}
+                  tooltip="Copy definition"
+                />
+                <IconButton
+                  internal
+                  icon={SvgBracketCurly}
+                  tooltip="Format definition"
+                  onClick={handleFormat}
+                />
+              </div>
+            )}
+            <InputTextAreaField
+              name="definition"
+              rows={14}
+              placeholder="Enter your OpenAPI schema here"
+              className="font-main-ui-mono"
+            />
+          </div>
+        </InputLayouts.Vertical>
+
+        <Separator noPadding />
+
+        {methodSpecs && methodSpecs.length > 0 ? (
+          <>
+            {name && (
+              <InfoBlock
+                icon={getActionIcon(url || "", name || "")}
+                title={name}
+                description={description}
+              />
+            )}
+            {url && (
+              <InfoBlock
+                icon={SvgAlertCircle}
+                title={url || ""}
+                description="URL found in the schema. Only connect to servers you trust."
+              />
+            )}
+            <Separator noPadding />
+            <Section gap={0.5}>
+              {methodSpecs.map((method) => (
+                <ToolItem
+                  key={`${method.method}-${method.path}-${method.name}`}
+                  name={method.name}
+                  description={method.summary || "No summary provided"}
+                  variant="openapi"
+                  openApiMetadata={{
+                    method: method.method,
+                    path: method.path,
+                  }}
+                />
+              ))}
+            </Section>
+          </>
+        ) : (
+          <EmptyMessage
+            title="No Actions Found"
+            icon={SvgActions}
+            description="Provide OpenAPI schema to preview actions here."
+          />
+        )}
+
+        {showAuthenticationStatus && (
+          <Section
+            flexDirection="row"
+            justifyContent="between"
+            alignItems="start"
+            gap={1}
+          >
+            <Section gap={0.25} alignItems="start">
+              <Section flexDirection="row" gap={0.5} alignItems="center" fit>
+                <SvgCheckCircle className="w-4 h-4 stroke-status-success-05" />
+                <Text>
+                  {existingTool?.enabled
+                    ? "Authenticated & Enabled"
+                    : "Authentication configured"}
+                </Text>
+              </Section>
+              {authenticationDescription && (
+                <Text secondaryBody text03 className="pl-5">
+                  {authenticationDescription}
+                </Text>
+              )}
+            </Section>
+            <Section flexDirection="row" gap={0.5} alignItems="center" fit>
+              <IconButton
+                icon={SvgUnplug}
+                tertiary
+                type="button"
+                tooltip="Disable action"
+                onClick={() => {
+                  if (!existingTool || !onDisconnectTool) {
+                    return;
+                  }
+                  onDisconnectTool(existingTool);
+                }}
+              />
+              <Button
+                secondary
+                type="button"
+                onClick={handleEditAuthenticationClick}
+                disabled={!onEditAuthentication}
+              >
+                Edit Configs
+              </Button>
+            </Section>
+          </Section>
+        )}
+      </Modal.Body>
+
+      <Modal.Footer>
+        <Button
+          main
+          secondary
+          type="button"
+          onClick={handleClose}
+          disabled={isSubmitting}
+        >
+          Cancel
+        </Button>
+        <Button main primary type="submit" disabled={isSubmitting || !dirty}>
+          {primaryButtonLabel}
+        </Button>
+      </Modal.Footer>
+    </Form>
+  );
+}
+
+export default function AddOpenAPIActionModal({
+  skipOverlay = false,
+  onSuccess,
+  onUpdate,
+  setPopup,
+  existingTool = null,
+  onClose,
+  onEditAuthentication,
+  onDisconnectTool,
+}: AddOpenAPIActionModalProps) {
+  const { isOpen, toggle } = useModal();
+
+  const handleModalClose = useCallback(
+    (open: boolean) => {
+      toggle(open);
+      if (!open) {
+        onClose?.();
+      }
+    },
+    [toggle, onClose]
+  );
+
+  const handleClose = useCallback(() => {
+    handleModalClose(false);
+  }, [handleModalClose]);
+
+  const initialValues: OpenAPIActionFormValues = useMemo(
+    () => ({
+      definition: existingTool?.definition
+        ? prettifyDefinition(existingTool.definition)
+        : "",
+    }),
+    [existingTool]
+  );
+
+  const handleSubmit = async (values: OpenAPIActionFormValues) => {
+    let parsedDefinition;
     try {
-      const parsedDefinition = parseJsonWithTrailingCommas(values.definition);
-      const derivedName = parsedDefinition?.info?.title;
-      const derivedDescription = parsedDefinition?.info?.description;
+      parsedDefinition = parseJsonWithTrailingCommas(values.definition);
+    } catch (error) {
+      console.error("Error parsing OpenAPI definition:", error);
+      setPopup({
+        message: "Invalid JSON format in OpenAPI schema definition",
+        type: "error",
+      });
+      return;
+    }
 
-      if (isEditMode && existingTool) {
+    const derivedName = parsedDefinition?.info?.title;
+    const derivedDescription = parsedDefinition?.info?.description;
+
+    if (existingTool) {
+      try {
         const updatePayload: {
           name?: string;
           description?: string;
@@ -273,9 +481,17 @@ export default function AddOpenAPIActionModal({
             onUpdate(response.data);
           }
         }
-        return;
+      } catch (error) {
+        console.error("Error updating OpenAPI action:", error);
+        setPopup({
+          message: "Failed to update OpenAPI action",
+          type: "error",
+        });
       }
+      return;
+    }
 
+    try {
       const response = await createCustomTool({
         name: derivedName,
         description: derivedDescription || undefined,
@@ -302,266 +518,29 @@ export default function AddOpenAPIActionModal({
     } catch (error) {
       console.error("Error creating OpenAPI action:", error);
       setPopup({
-        message: isEditMode
-          ? "Failed to update OpenAPI action"
-          : "Failed to create OpenAPI action",
+        message: "Failed to create OpenAPI action",
         type: "error",
       });
-    } finally {
-      setIsSubmitting(false);
     }
   };
 
-  const modalTitle = isEditMode ? "Edit OpenAPI action" : "Add OpenAPI action";
-  const modalDescription = isEditMode
-    ? "Update the OpenAPI schema for this action."
-    : "Add OpenAPI schema to add custom actions.";
-  const primaryButtonLabel = isSubmitting
-    ? isEditMode
-      ? "Saving..."
-      : "Adding..."
-    : isEditMode
-      ? "Save Changes"
-      : "Add Action";
-
   return (
-    <>
-      <Modal open={isOpen} onOpenChange={handleModalClose}>
-        <Modal.Content tall skipOverlay={skipOverlay}>
-          <Formik
-            initialValues={initialValues}
-            validationSchema={validationSchema}
-            onSubmit={handleSubmit}
-            enableReinitialize
-          >
-            {({
-              values,
-              errors,
-              touched,
-              handleChange,
-              handleBlur,
-              setFieldValue,
-              dirty,
-            }) => {
-              // Effect for validating definition
-              useEffect(() => {
-                if (!values.definition.trim()) {
-                  setMethodSpecs(null);
-                  setDefinitionError(null);
-                  debouncedValidateDefinition.cancel();
-                  return () => {
-                    debouncedValidateDefinition.cancel();
-                  };
-                }
-
-                debouncedValidateDefinition(values.definition);
-
-                return () => {
-                  debouncedValidateDefinition.cancel();
-                };
-              }, [values.definition]);
-
-              return (
-                <Form className="gap-0">
-                  <Modal.Header
-                    icon={SvgActions}
-                    title={modalTitle}
-                    description={modalDescription}
-                    onClose={handleClose}
-                    className="p-4 w-full"
-                  />
-
-                  <Modal.Body className="bg-background-tint-01 p-4 flex flex-col gap-4 overflow-y-auto">
-                    <FormField
-                      id="openapi-schema"
-                      name="definition"
-                      className="gap-2"
-                      state={
-                        (errors.definition && touched.definition) ||
-                        definitionError
-                          ? "error"
-                          : touched.definition
-                            ? "success"
-                            : "idle"
-                      }
-                    >
-                      <FormField.Label className="tracking-tight">
-                        OpenAPI Schema Definition
-                      </FormField.Label>
-                      <FormField.Control asChild>
-                        <InputTextArea
-                          id="definition"
-                          name="definition"
-                          value={values.definition}
-                          onChange={handleChange}
-                          onBlur={handleBlur}
-                          rows={14}
-                          placeholder="Enter your OpenAPI schema here"
-                          className="text-text-04 font-main-ui-mono"
-                          action={
-                            values.definition.trim() ? (
-                              <SchemaActions
-                                definition={values.definition}
-                                onFormat={() =>
-                                  handleFormat(values.definition, setFieldValue)
-                                }
-                              />
-                            ) : null
-                          }
-                        />
-                      </FormField.Control>
-                      <FormField.Description>
-                        Specify an OpenAPI schema that defines the APIs you want
-                        to make available as part of this action. Learn more
-                        about{" "}
-                        <span className="inline-flex">
-                          <SimpleTooltip
-                            tooltip={`Open ${DOCS_ADMINS_PATH}/actions/openapi`}
-                            side="top"
-                          >
-                            <Link
-                              href={`${DOCS_ADMINS_PATH}/actions/openapi`}
-                              target="_blank"
-                              rel="noreferrer"
-                              className="underline"
-                            >
-                              OpenAPI actions
-                            </Link>
-                          </SimpleTooltip>
-                        </span>
-                        .
-                      </FormField.Description>
-                      <FormField.Message
-                        messages={{
-                          error: definitionError || errors.definition,
-                        }}
-                      />
-                    </FormField>
-
-                    <Separator className="my-0 py-0" />
-
-                    {methodSpecs && methodSpecs.length > 0 ? (
-                      <>
-                        {name && (
-                          <InfoBlock
-                            icon={getActionIcon(url || "", name || "")}
-                            title={name}
-                            description={description}
-                          />
-                        )}
-                        {url && (
-                          <InfoBlock
-                            icon={SvgAlertCircle}
-                            title={url || ""}
-                            description="URL found in the schema. Only connect to servers you trust."
-                          />
-                        )}
-                        <Separator className="my-0 py-0" />
-                        <div className="flex flex-col gap-2">
-                          {methodSpecs.map((method) => (
-                            <ToolItem
-                              key={`${method.method}-${method.path}-${method.name}`}
-                              name={method.name}
-                              description={
-                                method.summary || "No summary provided"
-                              }
-                              variant="openapi"
-                              openApiMetadata={{
-                                method: method.method,
-                                path: method.path,
-                              }}
-                            />
-                          ))}
-                        </div>
-                      </>
-                    ) : (
-                      <div className="flex flex-row gap-3 items-start p-1.5 rounded-08 border border-border-01 border-dashed">
-                        <div className="rounded-08 bg-background-tint-01 p-1 flex items-center justify-center">
-                          <SvgActions className="size-4 stroke-text-03" />
-                        </div>
-                        <div className="flex flex-col gap-1">
-                          <Text as="p" mainUiAction text03>
-                            No actions found
-                          </Text>
-                          <Text as="p" secondaryBody text03>
-                            Provide OpenAPI schema to preview actions here.
-                          </Text>
-                        </div>
-                      </div>
-                    )}
-                    {showAuthenticationStatus && (
-                      <FormField state="idle">
-                        <div className="flex items-start justify-between w-full">
-                          <div className="flex flex-col gap-0 items-start flex-1">
-                            <FormField.Label
-                              leftIcon={
-                                <SvgCheckCircle className="w-4 h-4 stroke-status-success-05" />
-                              }
-                            >
-                              {existingTool?.enabled
-                                ? "Authenticated & Enabled"
-                                : "Authentication configured"}
-                            </FormField.Label>
-                            {authenticationDescription && (
-                              <FormField.Description className="pl-5">
-                                {authenticationDescription}
-                              </FormField.Description>
-                            )}
-                          </div>
-                          <FormField.Control asChild>
-                            <div className="flex gap-2 items-center justify-end">
-                              <IconButton
-                                icon={SvgUnplug}
-                                tertiary
-                                type="button"
-                                tooltip="Disable action"
-                                onClick={() => {
-                                  if (!existingTool || !onDisconnectTool) {
-                                    return;
-                                  }
-                                  onDisconnectTool(existingTool);
-                                }}
-                              />
-                              <Button
-                                secondary
-                                type="button"
-                                onClick={handleEditAuthenticationClick}
-                                disabled={!onEditAuthentication}
-                              >
-                                Edit Configs
-                              </Button>
-                            </div>
-                          </FormField.Control>
-                        </div>
-                      </FormField>
-                    )}
-                  </Modal.Body>
-
-                  <Modal.Footer className="gap-2">
-                    <Button
-                      main
-                      secondary
-                      type="button"
-                      onClick={handleClose}
-                      disabled={isSubmitting}
-                    >
-                      Cancel
-                    </Button>
-                    <Button
-                      main
-                      primary
-                      type="submit"
-                      disabled={isSubmitting || !dirty}
-                    >
-                      {primaryButtonLabel}
-                    </Button>
-                  </Modal.Footer>
-                </Form>
-              );
-            }}
-          </Formik>
-        </Modal.Content>
-      </Modal>
-    </>
+    <Modal open={isOpen} onOpenChange={handleModalClose}>
+      <Modal.Content tall skipOverlay={skipOverlay}>
+        <Formik
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          onSubmit={handleSubmit}
+          enableReinitialize
+        >
+          <FormContent
+            handleClose={handleClose}
+            existingTool={existingTool}
+            onEditAuthentication={onEditAuthentication}
+            onDisconnectTool={onDisconnectTool}
+          />
+        </Formik>
+      </Modal.Content>
+    </Modal>
   );
 }
diff --git a/web/src/sections/actions/modals/DisconnectEntityModal.tsx b/web/src/sections/actions/modals/DisconnectEntityModal.tsx
index fa01d208668..99570ab6eda 100644
--- a/web/src/sections/actions/modals/DisconnectEntityModal.tsx
+++ b/web/src/sections/actions/modals/DisconnectEntityModal.tsx
@@ -52,11 +52,10 @@ export default function DisconnectEntityModal({
             <SvgUnplug className={cn(className, "stroke-action-danger-05")} />
           )}
           title={`Disconnect ${name}`}
-          className="p-4"
           onClose={onClose}
         />
 
-        <Modal.Body className="p-4 flex flex-col gap-2 bg-background-tint-01">
+        <Modal.Body>
           <Text as="p" text03 mainUiBody>
             All tools connected to {name} will stop working. You can reconnect
             to this server later if needed.
@@ -66,7 +65,7 @@ export default function DisconnectEntityModal({
           </Text>
         </Modal.Body>
 
-        <Modal.Footer className="gap-2">
+        <Modal.Footer>
           <Button main secondary onClick={onClose} disabled={isDisconnecting}>
             Cancel
           </Button>
diff --git a/web/src/sections/actions/modals/MCPAuthenticationModal.tsx b/web/src/sections/actions/modals/MCPAuthenticationModal.tsx
index 62bc2082485..e4673ba5eab 100644
--- a/web/src/sections/actions/modals/MCPAuthenticationModal.tsx
+++ b/web/src/sections/actions/modals/MCPAuthenticationModal.tsx
@@ -327,7 +327,6 @@ export default function MCPAuthenticationModal({
           icon={SvgArrowExchange}
           title={`Authenticate ${mcpServer?.name || "MCP Server"}`}
           description="Authenticate your connection to start using the MCP server."
-          className="p-4"
         />
 
         <Formik<MCPAuthFormValues>
@@ -355,7 +354,7 @@ export default function MCPAuthenticationModal({
 
             return (
               <Form className="flex flex-col h-full">
-                <Modal.Body className="flex-1 overflow-y-auto max-h-[580px] p-2 bg-background-tint-01 w-full">
+                <Modal.Body>
                   <div className="flex flex-col gap-4 p-2">
                     {/* Authentication Type */}
                     <FormField
@@ -641,7 +640,7 @@ export default function MCPAuthenticationModal({
                   )}
                 </Modal.Body>
 
-                <Modal.Footer className="gap-2">
+                <Modal.Footer>
                   <Button
                     main
                     tertiary
diff --git a/web/src/sections/actions/modals/OpenAPIAuthenticationModal.tsx b/web/src/sections/actions/modals/OpenAPIAuthenticationModal.tsx
index b3113e399d6..886398fc5d6 100644
--- a/web/src/sections/actions/modals/OpenAPIAuthenticationModal.tsx
+++ b/web/src/sections/actions/modals/OpenAPIAuthenticationModal.tsx
@@ -320,7 +320,6 @@ export default function OpenAPIAuthenticationModal({
           title={title}
           description={description}
           onClose={onClose}
-          className="p-4"
         />
 
         <Formik
@@ -342,7 +341,7 @@ export default function OpenAPIAuthenticationModal({
             dirty,
           }) => (
             <Form className="flex flex-col h-full">
-              <Modal.Body className="flex-1 overflow-y-auto max-h-[580px] p-2 bg-background-tint-01 w-full">
+              <Modal.Body>
                 {oauthConfigError && (
                   <div className="mb-3">
                     <Text
@@ -662,7 +661,7 @@ export default function OpenAPIAuthenticationModal({
                 )}
               </Modal.Body>
 
-              <Modal.Footer className="gap-2">
+              <Modal.Footer>
                 <Button main tertiary type="button" onClick={handleSkip}>
                   Cancel
                 </Button>
diff --git a/web/src/sections/sidebar/Settings/UserSettings.tsx b/web/src/sections/sidebar/Settings/UserSettings.tsx
index be671ce3377..3e61c94769e 100644
--- a/web/src/sections/sidebar/Settings/UserSettings.tsx
+++ b/web/src/sections/sidebar/Settings/UserSettings.tsx
@@ -366,7 +366,7 @@ export default function UserSettings() {
             title="Settings"
             onClose={() => modal.toggle(false)}
           />
-          <Modal.Body className="flex flex-col gap-4 px-4 pb-4">
+          <Modal.Body twoTone={false}>
             {sections.length > 1 && (
               <nav>
                 <ul className="flex flex-row gap-1">