diff --git a/frontend/src/components/layouts/app/app-header.tsx b/frontend/src/components/layouts/app/app-header.tsx
index 4ef81092..8d879061 100644
--- a/frontend/src/components/layouts/app/app-header.tsx
+++ b/frontend/src/components/layouts/app/app-header.tsx
@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react';
 
+import { Loader2 } from 'lucide-react';
+
 import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage } from '@/components/ui/breadcrumb';
 import { Button, type ButtonProps } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
@@ -10,6 +12,7 @@ interface AppHeaderActionProps extends Omit<ButtonProps, 'children'> {
     endIcon?: ReactNode;
     icon: ReactNode;
     label: ReactNode;
+    loading?: boolean;
 }
 
 export function AppHeader({ children, className }: { children: ReactNode; className?: string }) {
@@ -28,9 +31,11 @@ export function AppHeader({ children, className }: { children: ReactNode; classN
 export function AppHeaderAction({
     'aria-label': ariaLabel,
     className,
+    disabled,
     endIcon,
     icon,
     label,
+    loading = false,
     size = 'sm',
     ...props
 }: AppHeaderActionProps) {
@@ -40,10 +45,11 @@ export function AppHeaderAction({
         <Button
             aria-label={accessibleLabel}
             className={cn('w-8 px-0 md:w-auto md:px-3', className)}
+            disabled={disabled || loading}
             size={size}
             {...props}
         >
-            {icon}
+            {loading ? <Loader2 className="size-4 animate-spin" /> : icon}
             <span className="hidden md:inline">{label}</span>
             {endIcon ? <span className="hidden md:inline-flex">{endIcon}</span> : null}
         </Button>
diff --git a/frontend/src/features/knowledges/knowledge-form.tsx b/frontend/src/features/knowledges/knowledge-form.tsx
index b297365e..0c73259e 100644
--- a/frontend/src/features/knowledges/knowledge-form.tsx
+++ b/frontend/src/features/knowledges/knowledge-form.tsx
@@ -16,7 +16,6 @@ import { AppHeaderAction } from '@/components/layouts/app/app-header';
 import { type EditorViewMode } from '@/components/shared/markdown-editor';
 import { UnsavedChangesDialog, useUnsavedChangesGuard } from '@/components/shared/unsaved-changes';
 import { Form } from '@/components/ui/form';
-import { Spinner } from '@/components/ui/spinner';
 import { AnonymizeTextDocument, KnowledgeAnswerType, KnowledgeDocType, KnowledgeGuideType } from '@/graphql/types';
 import { useAppForm } from '@/hooks/use-app-form';
 import { useBreakpoint } from '@/hooks/use-breakpoint';
@@ -319,8 +318,9 @@ export function KnowledgeForm({ initialValues, isNew, knowledge, onSubmit }: Kno
     const saveButton = (
         <AppHeaderAction
             disabled={!canSubmit}
-            icon={isSaving ? <Spinner variant="circle" /> : <Save aria-hidden="true" />}
+            icon={<Save aria-hidden="true" />}
             label={isNew ? 'Create' : 'Save'}
+            loading={isSaving}
             type="submit"
         />
     );
diff --git a/frontend/src/pages/settings/settings-prompt.tsx b/frontend/src/pages/settings/settings-prompt.tsx
index 53290408..7404a11a 100644
--- a/frontend/src/pages/settings/settings-prompt.tsx
+++ b/frontend/src/pages/settings/settings-prompt.tsx
@@ -71,7 +71,6 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty';
 import { Form, FormControl, FormItem, FormMessage } from '@/components/ui/form';
-import { FormSubmitButton } from '@/components/ui/form-submit-button';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import {
@@ -675,15 +674,13 @@ function SettingsPrompt() {
                         type="button"
                         variant="outline"
                     />
-                    <FormSubmitButton
+                    <AppHeaderAction
                         form={activeFormId}
                         icon={<Save className="size-4" />}
+                        label="Save"
                         loading={isLoading}
-                        size="sm"
-                        variant="secondary"
-                    >
-                        Save
-                    </FormSubmitButton>
+                        type="submit"
+                    />
                     <DropdownMenu>
                         <DropdownMenuTrigger asChild>
                             <Button
diff --git a/frontend/src/pages/settings/settings-provider.tsx b/frontend/src/pages/settings/settings-provider.tsx
index b1bc7196..a17a4c57 100644
--- a/frontend/src/pages/settings/settings-provider.tsx
+++ b/frontend/src/pages/settings/settings-provider.tsx
@@ -53,7 +53,6 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty';
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
-import { FormSubmitButton } from '@/components/ui/form-submit-button';
 import { Input } from '@/components/ui/input';
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/components/ui/input-group';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
@@ -1881,15 +1880,13 @@ function SettingsProvider() {
                         type="button"
                         variant="outline"
                     />
-                    <FormSubmitButton
+                    <AppHeaderAction
                         form="provider-form"
                         icon={<Save className="size-4" />}
+                        label={isNew ? 'Create' : 'Save'}
                         loading={isLoading}
-                        size="sm"
-                        variant="secondary"
-                    >
-                        {isNew ? 'Create' : 'Save'}
-                    </FormSubmitButton>
+                        type="submit"
+                    />
                     {!isNew && (
                         <DropdownMenu>
                             <DropdownMenuTrigger asChild>
diff --git a/frontend/src/pages/templates/template.tsx b/frontend/src/pages/templates/template.tsx
index 67c896d7..3c746166 100644
--- a/frontend/src/pages/templates/template.tsx
+++ b/frontend/src/pages/templates/template.tsx
@@ -17,7 +17,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
-import { AppHeader, AppHeaderActions, AppHeaderContent } from '@/components/layouts/app/app-header';
+import { AppHeader, AppHeaderAction, AppHeaderActions, AppHeaderContent } from '@/components/layouts/app/app-header';
 import ConfirmationDialog from '@/components/shared/confirmation-dialog';
 import {
     DetailNavigationButtons,
@@ -41,7 +41,6 @@ import {
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
-import { FormSubmitButton } from '@/components/ui/form-submit-button';
 import { Input } from '@/components/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Spinner } from '@/components/ui/spinner';
@@ -476,16 +475,14 @@ function Template() {
                         />
                     )}
                     {(isNew || !!templateData?.flowTemplate) && (
-                        <FormSubmitButton
-                            disabled={isSaving || (!isNew && !hasUnsavedChanges)}
+                        <AppHeaderAction
+                            disabled={!isNew && !hasUnsavedChanges}
                             form="template-form"
                             icon={<Save className="size-4" />}
+                            label={isNew ? 'Create' : 'Save'}
                             loading={isSaving}
-                            size="sm"
-                            variant="secondary"
-                        >
-                            {isNew ? 'Create' : 'Save'}
-                        </FormSubmitButton>
+                            type="submit"
+                        />
                     )}
                     <DropdownMenu>
                         <DropdownMenuTrigger asChild>