diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
index 182274a2c..7817ab6b8 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
@@ -392,7 +392,7 @@ export function DocumentTagsModal({
 
   return (
     <Modal open={open} onOpenChange={handleClose}>
-      <ModalContent>
+      <ModalContent size='sm'>
         <ModalHeader>
           <div className='flex items-center justify-between'>
             <span>Document Tags</span>
@@ -486,7 +486,7 @@ export function DocumentTagsModal({
                           />
                         )}
                         {tagNameConflict && (
-                          <span className='text-[11px] text-[var(--text-error)]'>
+                          <span className='text-[12px] text-[var(--text-error)]'>
                             A tag with this name already exists
                           </span>
                         )}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
index 17659dfe9..183036155 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
@@ -221,14 +221,14 @@ export function AddDocumentsModal({
 
   return (
     <Modal open={open} onOpenChange={handleClose}>
-      <ModalContent>
+      <ModalContent size='md'>
         <ModalHeader>Add Documents</ModalHeader>
 
         <ModalBody>
           <div className='min-h-0 flex-1 overflow-y-auto'>
             <div className='space-y-[12px]'>
               {fileError && (
-                <p className='text-[11px] text-[var(--text-error)] leading-tight'>{fileError}</p>
+                <p className='text-[12px] text-[var(--text-error)] leading-tight'>{fileError}</p>
               )}
 
               <div className='flex flex-col gap-[8px]'>
@@ -336,7 +336,7 @@ export function AddDocumentsModal({
         <ModalFooter>
           <div className='flex w-full items-center justify-between gap-[12px]'>
             {uploadError ? (
-              <p className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-error)] leading-tight'>
+              <p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
                 {uploadError.message}
               </p>
             ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
index 1a54a983f..5e6cb1698 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
@@ -306,7 +306,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
   return (
     <>
       <Modal open={open} onOpenChange={handleClose}>
-        <ModalContent>
+        <ModalContent size='sm'>
           <ModalHeader>
             <div className='flex items-center justify-between'>
               <span>Tags</span>
@@ -400,7 +400,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                         }}
                       />
                       {tagNameConflict && (
-                        <span className='text-[11px] text-[var(--text-error)]'>
+                        <span className='text-[12px] text-[var(--text-error)]'>
                           A tag with this name already exists
                         </span>
                       )}
@@ -417,7 +417,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                         placeholder='Select type'
                       />
                       {!hasAvailableSlots(createTagForm.fieldType) && (
-                        <span className='text-[11px] text-[var(--text-error)]'>
+                        <span className='text-[12px] text-[var(--text-error)]'>
                           No available slots for this type. Choose a different type.
                         </span>
                       )}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx
index 8196bfb43..c76efaff2 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx
@@ -77,7 +77,7 @@ export function RenameDocumentModal({
 
   return (
     <Modal open={open} onOpenChange={onOpenChange}>
-      <ModalContent>
+      <ModalContent size='sm'>
         <ModalHeader>Rename Document</ModalHeader>
         <form onSubmit={handleSubmit} className='flex min-h-0 flex-1 flex-col'>
           <ModalBody className='!pb-[16px]'>
@@ -108,7 +108,7 @@ export function RenameDocumentModal({
           <ModalFooter>
             <div className='flex w-full items-center justify-between gap-[12px]'>
               {error ? (
-                <p className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-error)] leading-tight'>
+                <p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
                   {error}
                 </p>
               ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
index e6fc3fdf3..750dc0f78 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
@@ -332,7 +332,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
 
   return (
     <Modal open={open} onOpenChange={handleClose}>
-      <ModalContent>
+      <ModalContent size='lg'>
         <ModalHeader>Create Knowledge Base</ModalHeader>
 
         <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
@@ -528,7 +528,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                 )}
 
                 {fileError && (
-                  <p className='text-[11px] text-[var(--text-error)] leading-tight'>{fileError}</p>
+                  <p className='text-[12px] text-[var(--text-error)] leading-tight'>{fileError}</p>
                 )}
               </div>
             </div>
@@ -537,7 +537,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
           <ModalFooter>
             <div className='flex w-full items-center justify-between gap-[12px]'>
               {submitStatus?.type === 'error' || uploadError ? (
-                <p className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-error)] leading-tight'>
+                <p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
                   {uploadError?.message || submitStatus?.message}
                 </p>
               ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/delete-knowledge-base-modal/delete-knowledge-base-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/delete-knowledge-base-modal/delete-knowledge-base-modal.tsx
index 167f50385..1cb0449bb 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/delete-knowledge-base-modal/delete-knowledge-base-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/delete-knowledge-base-modal/delete-knowledge-base-modal.tsx
@@ -38,7 +38,7 @@ export function DeleteKnowledgeBaseModal({
 }: DeleteKnowledgeBaseModalProps) {
   return (
     <Modal open={isOpen} onOpenChange={onClose}>
-      <ModalContent className='w-[400px]'>
+      <ModalContent size='sm'>
         <ModalHeader>Delete Knowledge Base</ModalHeader>
         <ModalBody>
           <p className='text-[12px] text-[var(--text-secondary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/edit-knowledge-base-modal/edit-knowledge-base-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/edit-knowledge-base-modal/edit-knowledge-base-modal.tsx
index 5afeb140a..9732b662d 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/edit-knowledge-base-modal/edit-knowledge-base-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/edit-knowledge-base-modal/edit-knowledge-base-modal.tsx
@@ -98,7 +98,7 @@ export function EditKnowledgeBaseModal({
 
   return (
     <Modal open={open} onOpenChange={onOpenChange}>
-      <ModalContent>
+      <ModalContent size='sm'>
         <ModalHeader>Edit Knowledge Base</ModalHeader>
 
         <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
@@ -118,7 +118,7 @@ export function EditKnowledgeBaseModal({
                   data-form-type='other'
                 />
                 {errors.name && (
-                  <p className='text-[11px] text-[var(--text-error)]'>{errors.name.message}</p>
+                  <p className='text-[12px] text-[var(--text-error)]'>{errors.name.message}</p>
                 )}
               </div>
 
@@ -132,7 +132,7 @@ export function EditKnowledgeBaseModal({
                   className={cn(errors.description && 'border-[var(--text-error)]')}
                 />
                 {errors.description && (
-                  <p className='text-[11px] text-[var(--text-error)]'>
+                  <p className='text-[12px] text-[var(--text-error)]'>
                     {errors.description.message}
                   </p>
                 )}
@@ -143,7 +143,7 @@ export function EditKnowledgeBaseModal({
           <ModalFooter>
             <div className='flex w-full items-center justify-between gap-[12px]'>
               {error ? (
-                <p className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-error)] leading-tight'>
+                <p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
                   {error}
                 </p>
               ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
index 93938ca5c..cfa54cc70 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
@@ -1261,7 +1261,7 @@ export function NotificationSettings({
       </Modal>
 
       <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Delete Notification</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx
index 37bb13bbe..dd0ad1dad 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { Check } from 'lucide-react'
 import {
@@ -308,6 +308,7 @@ export function OAuthRequiredModal({
   serviceId,
   newScopes = [],
 }: OAuthRequiredModalProps) {
+  const [error, setError] = useState<string | null>(null)
   const { baseProvider } = parseProvider(provider)
   const baseProviderConfig = OAUTH_PROVIDERS[baseProvider]
 
@@ -348,23 +349,24 @@ export function OAuthRequiredModal({
   }, [requiredScopes, newScopesSet])
 
   const handleConnectDirectly = async () => {
+    setError(null)
+
     try {
       const providerId = getProviderIdFromServiceId(serviceId)
 
-      onClose()
-
       logger.info('Linking OAuth2:', {
         providerId,
         requiredScopes,
       })
 
       if (providerId === 'trello') {
+        onClose()
         window.location.href = '/api/auth/trello/authorize'
         return
       }
 
       if (providerId === 'shopify') {
-        // Pass the current URL so we can redirect back after OAuth
+        onClose()
         const returnUrl = encodeURIComponent(window.location.href)
         window.location.href = `/api/auth/shopify/authorize?returnUrl=${returnUrl}`
         return
@@ -374,8 +376,10 @@ export function OAuthRequiredModal({
         providerId,
         callbackURL: window.location.href,
       })
-    } catch (error) {
-      logger.error('Error initiating OAuth flow:', { error })
+      onClose()
+    } catch (err) {
+      logger.error('Error initiating OAuth flow:', { error: err })
+      setError('Failed to connect. Please try again.')
     }
   }
 
@@ -425,10 +429,12 @@ export function OAuthRequiredModal({
                 </ul>
               </div>
             )}
+
+            {error && <p className='text-[12px] text-[var(--text-error)]'>{error}</p>}
           </div>
         </ModalBody>
         <ModalFooter>
-          <Button variant='active' onClick={onClose}>
+          <Button variant='default' onClick={onClose}>
             Cancel
           </Button>
           <Button variant='tertiary' type='button' onClick={handleConnectDirectly}>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
index cf40b1172..59518e330 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { AlertCircle, Wand2 } from 'lucide-react'
+import { AlertCircle, ArrowUp } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Badge,
   Button,
+  Input,
   Modal,
   ModalBody,
   ModalContent,
@@ -878,35 +879,53 @@ try {
                       JSON Schema
                     </Label>
                     {schemaError && (
-                      <div className='ml-2 flex min-w-0 items-center gap-1 text-[var(--text-error)] text-xs'>
+                      <div className='ml-2 flex min-w-0 items-center gap-1 text-[12px] text-[var(--text-error)]'>
                         <AlertCircle className='h-3 w-3 flex-shrink-0' />
                         <span className='truncate'>{schemaError}</span>
                       </div>
                     )}
                   </div>
-                  <div className='flex min-w-0 flex-1 items-center justify-end gap-1 pr-[4px]'>
+                  <div className='flex min-w-0 items-center justify-end gap-[4px]'>
                     {!isSchemaPromptActive ? (
-                      <button
-                        type='button'
+                      <Button
+                        variant='active'
+                        className='-my-1 h-5 px-2 py-0 text-[11px]'
                         onClick={handleSchemaWandClick}
                         disabled={schemaGeneration.isLoading || schemaGeneration.isStreaming}
-                        className='inline-flex h-[16px] w-[16px] items-center justify-center rounded-full hover:bg-transparent disabled:opacity-50'
-                        aria-label='Generate schema with AI'
                       >
-                        <Wand2 className='!h-[12px] !w-[12px] text-[var(--text-secondary)]' />
-                      </button>
+                        Generate
+                      </Button>
                     ) : (
-                      <input
-                        ref={schemaPromptInputRef}
-                        type='text'
-                        value={schemaGeneration.isStreaming ? 'Generating...' : schemaPromptInput}
-                        onChange={(e) => handleSchemaPromptChange(e.target.value)}
-                        onBlur={handleSchemaPromptBlur}
-                        onKeyDown={handleSchemaPromptKeyDown}
-                        disabled={schemaGeneration.isStreaming}
-                        className='h-[16px] w-full border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[var(--text-muted)] focus:outline-none'
-                        placeholder='Describe schema...'
-                      />
+                      <div className='-my-1 flex items-center gap-[4px]'>
+                        <Input
+                          ref={schemaPromptInputRef}
+                          value={schemaGeneration.isStreaming ? 'Generating...' : schemaPromptInput}
+                          onChange={(e) => handleSchemaPromptChange(e.target.value)}
+                          onBlur={handleSchemaPromptBlur}
+                          onKeyDown={handleSchemaPromptKeyDown}
+                          disabled={schemaGeneration.isStreaming}
+                          className={cn(
+                            'h-5 max-w-[200px] flex-1 text-[11px]',
+                            schemaGeneration.isStreaming && 'text-muted-foreground'
+                          )}
+                          placeholder='Generate...'
+                        />
+                        <Button
+                          variant='tertiary'
+                          disabled={!schemaPromptInput.trim() || schemaGeneration.isStreaming}
+                          onMouseDown={(e) => {
+                            e.preventDefault()
+                            e.stopPropagation()
+                          }}
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            handleSchemaPromptSubmit()
+                          }}
+                          className='h-[20px] w-[20px] flex-shrink-0 p-0'
+                        >
+                          <ArrowUp className='h-[12px] w-[12px]' />
+                        </Button>
+                      </div>
                     )}
                   </div>
                 </div>
@@ -952,35 +971,53 @@ try {
                       Code
                     </Label>
                     {codeError && !codeGeneration.isStreaming && (
-                      <div className='ml-2 flex min-w-0 items-center gap-1 text-[var(--text-error)] text-xs'>
+                      <div className='ml-2 flex min-w-0 items-center gap-1 text-[12px] text-[var(--text-error)]'>
                         <AlertCircle className='h-3 w-3 flex-shrink-0' />
                         <span className='truncate'>{codeError}</span>
                       </div>
                     )}
                   </div>
-                  <div className='flex min-w-0 flex-1 items-center justify-end gap-1 pr-[4px]'>
+                  <div className='flex min-w-0 items-center justify-end gap-[4px]'>
                     {!isCodePromptActive ? (
-                      <button
-                        type='button'
+                      <Button
+                        variant='active'
+                        className='-my-1 h-5 px-2 py-0 text-[11px]'
                         onClick={handleCodeWandClick}
                         disabled={codeGeneration.isLoading || codeGeneration.isStreaming}
-                        className='inline-flex h-[16px] w-[16px] items-center justify-center rounded-full hover:bg-transparent disabled:opacity-50'
-                        aria-label='Generate code with AI'
                       >
-                        <Wand2 className='!h-[12px] !w-[12px] text-[var(--text-secondary)]' />
-                      </button>
+                        Generate
+                      </Button>
                     ) : (
-                      <input
-                        ref={codePromptInputRef}
-                        type='text'
-                        value={codeGeneration.isStreaming ? 'Generating...' : codePromptInput}
-                        onChange={(e) => handleCodePromptChange(e.target.value)}
-                        onBlur={handleCodePromptBlur}
-                        onKeyDown={handleCodePromptKeyDown}
-                        disabled={codeGeneration.isStreaming}
-                        className='h-[16px] w-full border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[var(--text-muted)] focus:outline-none'
-                        placeholder='Describe code...'
-                      />
+                      <div className='-my-1 flex items-center gap-[4px]'>
+                        <Input
+                          ref={codePromptInputRef}
+                          value={codeGeneration.isStreaming ? 'Generating...' : codePromptInput}
+                          onChange={(e) => handleCodePromptChange(e.target.value)}
+                          onBlur={handleCodePromptBlur}
+                          onKeyDown={handleCodePromptKeyDown}
+                          disabled={codeGeneration.isStreaming}
+                          className={cn(
+                            'h-5 max-w-[200px] flex-1 text-[11px]',
+                            codeGeneration.isStreaming && 'text-muted-foreground'
+                          )}
+                          placeholder='Generate...'
+                        />
+                        <Button
+                          variant='tertiary'
+                          disabled={!codePromptInput.trim() || codeGeneration.isStreaming}
+                          onMouseDown={(e) => {
+                            e.preventDefault()
+                            e.stopPropagation()
+                          }}
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            handleCodePromptSubmit()
+                          }}
+                          className='h-[20px] w-[20px] flex-shrink-0 p-0'
+                        >
+                          <ArrowUp className='h-[12px] w-[12px]' />
+                        </Button>
+                      </div>
                     )}
                   </div>
                 </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
index 35d1168c8..aefb340b4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
@@ -420,7 +420,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
 
   return (
     <Modal open={open} onOpenChange={onOpenChange}>
-      <ModalContent>
+      <ModalContent size='md'>
         <ModalHeader>Help &amp; Support</ModalHeader>
 
         <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/access-control/access-control.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/access-control/access-control.tsx
index 49be2f716..38c288613 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/access-control/access-control.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/access-control/access-control.tsx
@@ -1069,7 +1069,7 @@ export function AccessControl() {
         </Modal>
 
         <Modal open={showUnsavedChanges} onOpenChange={setShowUnsavedChanges}>
-          <ModalContent className='w-[400px]'>
+          <ModalContent size='sm'>
             <ModalHeader>Unsaved Changes</ModalHeader>
             <ModalBody>
               <p className='text-[12px] text-[var(--text-tertiary)]'>
@@ -1185,7 +1185,7 @@ export function AccessControl() {
       </div>
 
       <Modal open={showCreateModal} onOpenChange={handleCloseCreateModal}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Create Permission Group</ModalHeader>
           <ModalBody>
             <div className='flex flex-col gap-[12px]'>
@@ -1237,7 +1237,7 @@ export function AccessControl() {
       </Modal>
 
       <Modal open={!!deletingGroup} onOpenChange={() => setDeletingGroup(null)}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Delete Permission Group</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/api-keys.tsx
index f10cff2a0..9f5cb7f1b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/api-keys.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/api-keys.tsx
@@ -392,7 +392,7 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
 
       {/* Delete Confirmation Dialog */}
       <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Delete API key</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
index 7a2d42102..14fec1b65 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
@@ -112,7 +112,7 @@ export function CreateApiKeyModal({
     <>
       {/* Create API Key Dialog */}
       <Modal open={open} onOpenChange={onOpenChange}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Create new API key</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-tertiary)]'>
@@ -176,7 +176,7 @@ export function CreateApiKeyModal({
                   data-form-type='other'
                 />
                 {createError && (
-                  <p className='text-[11px] text-[var(--text-error)] leading-tight'>
+                  <p className='text-[12px] text-[var(--text-error)] leading-tight'>
                     {createError}
                   </p>
                 )}
@@ -215,7 +215,7 @@ export function CreateApiKeyModal({
           }
         }}
       >
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Your API key has been created</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-tertiary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/byok/byok.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/byok/byok.tsx
index 867c128f6..3ef983fb7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/byok/byok.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/byok/byok.tsx
@@ -306,7 +306,7 @@ export function BYOK() {
       </Modal>
 
       <Modal open={!!deleteConfirmProvider} onOpenChange={() => setDeleteConfirmProvider(null)}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Delete API Key</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-tertiary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx
index b3aef1a08..e705aed24 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx
@@ -211,7 +211,7 @@ export function Copilot() {
 
       {/* Create API Key Dialog */}
       <Modal open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Create new API key</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-tertiary)]'>
@@ -273,7 +273,7 @@ export function Copilot() {
           }
         }}
       >
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Your API key has been created</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-tertiary)]'>
@@ -310,7 +310,7 @@ export function Copilot() {
 
       {/* Delete Confirmation Dialog */}
       <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Delete API key</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credential-sets/credential-sets.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credential-sets/credential-sets.tsx
index 080e0fa3e..a1fae5b1a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credential-sets/credential-sets.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credential-sets/credential-sets.tsx
@@ -824,7 +824,7 @@ export function CredentialSets() {
 
       {/* Create Polling Group Modal */}
       <Modal open={showCreateModal} onOpenChange={handleCloseCreateModal}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Create Polling Group</ModalHeader>
           <ModalBody>
             <div className='flex flex-col gap-[12px]'>
@@ -897,7 +897,7 @@ export function CredentialSets() {
 
       {/* Leave Confirmation Modal */}
       <Modal open={!!leavingMembership} onOpenChange={() => setLeavingMembership(null)}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Leave Polling Group</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>
@@ -925,7 +925,7 @@ export function CredentialSets() {
 
       {/* Delete Confirmation Modal */}
       <Modal open={!!deletingSet} onOpenChange={() => setDeletingSet(null)}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Delete Polling Group</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/custom-tools/custom-tools.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/custom-tools/custom-tools.tsx
index c0a85d9a6..33ee8340a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/custom-tools/custom-tools.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/custom-tools/custom-tools.tsx
@@ -206,7 +206,7 @@ export function CustomTools() {
       />
 
       <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Delete Custom Tool</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/environment/environment.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/environment/environment.tsx
index 964dcdd91..63d707297 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/environment/environment.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/environment/environment.tsx
@@ -821,7 +821,7 @@ export function EnvironmentVariables({ registerBeforeLeaveHandler }: Environment
       </div>
 
       <Modal open={showUnsavedChanges} onOpenChange={setShowUnsavedChanges}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Unsaved Changes</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-tertiary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/integrations/integrations.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/integrations/integrations.tsx
index bc4965c66..e02b4c1a5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/integrations/integrations.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/integrations/integrations.tsx
@@ -390,7 +390,7 @@ export function Integrations({ onOpenChange, registerCloseHandler }: Integration
       </div>
 
       <Modal open={showDisconnectDialog} onOpenChange={setShowDisconnectDialog}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Disconnect Service</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/mcp/mcp.tsx
index 90fba9595..134417d49 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/mcp/mcp.tsx
@@ -1170,7 +1170,7 @@ export function MCP({ initialServerId }: MCPProps) {
       </div>
 
       <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Delete MCP Server</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
index 58bdc3867..f64e13497 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
@@ -33,7 +33,7 @@ export function RemoveMemberDialog({
 }: RemoveMemberDialogProps) {
   return (
     <Modal open={open} onOpenChange={onOpenChange}>
-      <ModalContent className='w-[400px]'>
+      <ModalContent size='sm'>
         <ModalHeader>{isSelfRemoval ? 'Leave Organization' : 'Remove Team Member'}</ModalHeader>
         <ModalBody>
           <p className='text-[12px] text-[var(--text-secondary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/workflow-mcp-servers/workflow-mcp-servers.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/workflow-mcp-servers/workflow-mcp-servers.tsx
index b8a6237fa..64f5216c5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/workflow-mcp-servers/workflow-mcp-servers.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/workflow-mcp-servers/workflow-mcp-servers.tsx
@@ -532,7 +532,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
       </div>
 
       <Modal open={!!toolToDelete} onOpenChange={(open) => !open && setToolToDelete(null)}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Remove Workflow</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>
@@ -1109,7 +1109,7 @@ export function WorkflowMcpServers() {
       </div>
 
       <Modal open={!!serverToDelete} onOpenChange={(open) => !open && setServerToDelete(null)}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Delete MCP Server</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx
index c897331b1..59d17232a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx
@@ -102,7 +102,7 @@ export function DeleteModal({
 
   return (
     <Modal open={isOpen} onOpenChange={onClose}>
-      <ModalContent className='w-[400px]'>
+      <ModalContent size='sm'>
         <ModalHeader>{title}</ModalHeader>
         <ModalBody>
           <p className='text-[12px] text-[var(--text-secondary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
index 8e0d16421..8cb9efcab 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
@@ -607,7 +607,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
         onOpenChange(newOpen)
       }}
     >
-      <ModalContent className='w-[500px]'>
+      <ModalContent size='md'>
         <ModalHeader>Invite members to {workspaceName || 'Workspace'}</ModalHeader>
 
         <form
@@ -740,7 +740,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
 
       {/* Remove Member Confirmation Dialog */}
       <Modal open={!!memberToRemove} onOpenChange={handleRemoveMemberCancel}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Remove Member</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>
@@ -773,7 +773,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
 
       {/* Remove Invitation Confirmation Dialog */}
       <Modal open={!!invitationToRemove} onOpenChange={handleRemoveInvitationCancel}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Cancel Invitation</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
index 07881ad2e..5c7dbbdad 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
@@ -605,7 +605,7 @@ export function WorkspaceHeader({
       />
       {/* Leave Confirmation Modal */}
       <Modal open={isLeaveModalOpen} onOpenChange={() => setIsLeaveModalOpen(false)}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Leave Workspace</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>