diff --git a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/settings/ai-copilot.tsx b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/settings/ai-copilot.tsx
index 08da6994cdb..404a137f1a1 100644
--- a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/settings/ai-copilot.tsx
+++ b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/settings/ai-copilot.tsx
@@ -1,9 +1,20 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, useParams } from '@tanstack/react-router'
+import { useOrganization } from '@qovery/domains/organizations/feature'
+import { AICopilotSettings } from '@qovery/shared/devops-copilot/feature'
+import { useDocumentTitle } from '@qovery/shared/util-hooks'
 
 export const Route = createFileRoute('/_authenticated/organization/$organizationId/settings/ai-copilot')({
   component: RouteComponent,
 })
 
 function RouteComponent() {
-  return <div>Hello "/_authenticated/organization/$organizationId/settings/ai-copilot"!</div>
+  const { organizationId = '' } = useParams({ strict: false })
+  useDocumentTitle('AI Copilot - Organization settings')
+  const { data: organization } = useOrganization({ organizationId })
+
+  if (!organization) {
+    return null
+  }
+
+  return <AICopilotSettings organization={organization} />
 }
diff --git a/libs/pages/settings/src/lib/feature/page-organization-ai-copilot-feature/page-organization-ai-copilot-feature.tsx b/libs/pages/settings/src/lib/feature/page-organization-ai-copilot-feature/page-organization-ai-copilot-feature.tsx
deleted file mode 100644
index 255a5e2d72b..00000000000
--- a/libs/pages/settings/src/lib/feature/page-organization-ai-copilot-feature/page-organization-ai-copilot-feature.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useParams } from 'react-router-dom'
-import { useOrganization } from '@qovery/domains/organizations/feature'
-import { AICopilotSettings } from '@qovery/shared/devops-copilot/feature'
-import { useDocumentTitle } from '@qovery/shared/util-hooks'
-
-export function PageOrganizationAICopilotFeature() {
-  const { organizationId = '' } = useParams()
-  useDocumentTitle('AI Copilot - Organization settings')
-
-  const { data: organization } = useOrganization({ organizationId })
-
-  if (!organization) {
-    return null
-  }
-
-  return <AICopilotSettings organization={organization} />
-}
-
-export default PageOrganizationAICopilotFeature
diff --git a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/ai-copilot-settings.tsx b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/ai-copilot-settings.tsx
index 418511bb964..c4cb5bb505a 100644
--- a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/ai-copilot-settings.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/ai-copilot-settings.tsx
@@ -1,7 +1,9 @@
 import { useFeatureFlagVariantKey } from 'posthog-js/react'
 import { type Organization } from 'qovery-typescript-axios'
 import { useAuth } from '@qovery/shared/auth'
+import { SettingsHeading } from '@qovery/shared/console-shared'
 import { useUserAccount } from '@qovery/shared/iam/feature'
+import { Callout, Icon, Section } from '@qovery/shared/ui'
 import { useAICopilotConfig } from '../hooks/use-ai-copilot-config/use-ai-copilot-config'
 import { useAICopilotRecurringTasks } from '../hooks/use-ai-copilot-recurring-tasks/use-ai-copilot-recurring-tasks'
 import { useDeleteAICopilotRecurringTask } from '../hooks/use-delete-ai-copilot-recurring-task/use-delete-ai-copilot-recurring-task'
@@ -54,31 +56,46 @@ export function AICopilotSettings(props: AICopilotSettingsProps) {
   return (
     <div className="w-full justify-between">
       <div className="max-w-content-with-navigation-left p-8">
-        {!isEnabled && !isLoadingConfig ? (
-          <SectionAICopilotOptIn
-            organization={organization}
-            isLoading={isLoadingConfig}
-            onEnable={() => handleToggleCopilot(true)}
-          />
-        ) : (
-          <>
-            <SectionAICopilotConfiguration
+        <Section>
+          <SettingsHeading title="AI Copilot Configuration" description="Configure your Copilot" showNeedHelp={false} />
+          <Callout.Root color="purple" className="mb-4">
+            <Callout.Icon>
+              <Icon iconName="flask" />
+            </Callout.Icon>
+            <Callout.Text>
+              <Callout.TextHeading>Beta Feature</Callout.TextHeading>
+              <Callout.TextDescription>
+                The AI Copilot is currently in beta. This is an experimental feature and functionality may change.
+                Billing terms are not final and will be communicated before any charges apply.
+              </Callout.TextDescription>
+            </Callout.Text>
+          </Callout.Root>
+          {!isEnabled && !isLoadingConfig ? (
+            <SectionAICopilotOptIn
               organization={organization}
-              isLoading={isLoadingConfig || !orgConfig}
-              isUpdating={updateConfigMutation.isLoading}
-              currentMode={currentMode}
-              onModeChange={(mode) => updateConfigMutation.mutate({ enabled: true, readOnly: mode === 'read-only' })}
-              onDisable={() => handleToggleCopilot(false)}
+              isLoading={isLoadingConfig}
+              onEnable={() => handleToggleCopilot(true)}
             />
+          ) : (
+            <div className="flex flex-col gap-8">
+              <SectionAICopilotConfiguration
+                organization={organization}
+                isLoading={isLoadingConfig || !orgConfig}
+                isUpdating={updateConfigMutation.isLoading}
+                currentMode={currentMode}
+                onModeChange={(mode) => updateConfigMutation.mutate({ enabled: true, readOnly: mode === 'read-only' })}
+                onDisable={() => handleToggleCopilot(false)}
+              />
 
-            <SectionScheduledTasks
-              tasks={tasks}
-              isLoading={isLoadingTasks}
-              onToggleTask={(taskId) => toggleTaskMutation.mutate({ taskId })}
-              onDeleteTask={(taskId) => deleteTaskMutation.mutate({ taskId })}
-            />
-          </>
-        )}
+              <SectionScheduledTasks
+                tasks={tasks}
+                isLoading={isLoadingTasks}
+                onToggleTask={(taskId) => toggleTaskMutation.mutate({ taskId })}
+                onDeleteTask={(taskId) => deleteTaskMutation.mutate({ taskId })}
+              />
+            </div>
+          )}
+        </Section>
       </div>
     </div>
   )
diff --git a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-configuration/section-ai-copilot-configuration.spec.tsx b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-configuration/section-ai-copilot-configuration.spec.tsx
index c4e26da17f2..61ec9dbd974 100644
--- a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-configuration/section-ai-copilot-configuration.spec.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-configuration/section-ai-copilot-configuration.spec.tsx
@@ -36,13 +36,6 @@ describe('SectionAICopilotConfiguration', () => {
     mockUseFeatureFlagVariantKey.mockReturnValue('control')
   })
 
-  it('should render section heading', () => {
-    render(<SectionAICopilotConfiguration {...defaultProps} />)
-
-    expect(screen.getByText('AI Copilot Configuration')).toBeInTheDocument()
-    expect(screen.getByText('Configure your Copilot')).toBeInTheDocument()
-  })
-
   it('should show loader when loading', () => {
     const { container } = render(<SectionAICopilotConfiguration {...defaultProps} isLoading={true} />)
 
diff --git a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-configuration/section-ai-copilot-configuration.tsx b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-configuration/section-ai-copilot-configuration.tsx
index 71e113ef97d..3b565eb5132 100644
--- a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-configuration/section-ai-copilot-configuration.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-configuration/section-ai-copilot-configuration.tsx
@@ -26,8 +26,8 @@ export interface SectionAICopilotConfigurationProps {
 function getDisableConfirmationModal(closeModal: () => void, onDisable: () => void) {
   return (
     <div className="p-6">
-      <h2 className="h4 mb-2 text-neutral-400">Disable AI Copilot</h2>
-      <p className="mb-6 text-sm text-neutral-350">
+      <h2 className="h4 mb-2 text-neutral">Disable AI Copilot</h2>
+      <p className="mb-6 text-sm text-neutral-subtle">
         Are you sure you want to disable AI Copilot? This will stop all AI-powered assistance for your organization.
       </p>
       <div className="flex justify-end gap-3">
@@ -85,37 +85,21 @@ export function SectionAICopilotConfiguration({
 
   return (
     <Section>
-      <div className="mb-8">
-        <Heading className="mb-2">AI Copilot Configuration</Heading>
-        <p className="text-xs text-neutral-400">Configure your Copilot</p>
-      </div>
-      <Callout.Root color="purple" className="mb-6">
-        <Callout.Icon>
-          <Icon iconName="flask" />
-        </Callout.Icon>
-        <Callout.Text>
-          <Callout.TextHeading>Beta Feature</Callout.TextHeading>
-          <Callout.TextDescription>
-            The AI Copilot is currently in beta. This is an experimental feature and functionality may change. Billing
-            terms are not final and will be communicated before any charges apply.
-          </Callout.TextDescription>
-        </Callout.Text>
-      </Callout.Root>
-      <BlockContent title="Configuration" classNameContent="p-0">
+      <BlockContent title="Configuration" classNameContent="p-0" className="m-0">
         {isLoading ? (
           <div className="flex justify-center p-5">
             <LoaderSpinner className="w-5" />
           </div>
         ) : (
           <div className="space-y-6 p-6">
-            <div className={`-mx-6 px-6 ${hasReadWriteAccess ? 'border-b border-neutral-250 pb-6' : ''}`}>
+            <div className={`-mx-6 px-6 ${hasReadWriteAccess ? 'border-b border-neutral pb-6' : ''}`}>
               <div className="flex items-center gap-4">
                 <div className="flex-1">
                   <div className="mb-2 flex items-center">
-                    <Icon iconName="robot" className="mr-2 text-brand-500" />
-                    <p className="text-sm font-medium text-neutral-400">AI Copilot for {organization?.name}</p>
+                    <Icon iconName="robot" className="mr-2 text-brand" />
+                    <p className="text-sm font-medium text-neutral">AI Copilot for {organization?.name}</p>
                   </div>
-                  <p className="text-xs text-neutral-350">AI-powered assistance is currently active</p>
+                  <p className="text-xs text-neutral-subtle">AI-powered assistance is currently active</p>
                 </div>
                 <Button
                   size="md"
@@ -136,8 +120,8 @@ export function SectionAICopilotConfiguration({
               {hasReadWriteAccess && (
                 <>
                   <div className="space-y-2">
-                    <label className="text-sm font-medium text-neutral-400">Access Mode</label>
-                    <p className="text-xs text-neutral-350">
+                    <label className="text-sm font-medium text-neutral">Access Mode</label>
+                    <p className="text-xs text-neutral-subtle">
                       Choose the level of access the AI Copilot will have on your organization
                     </p>
                   </div>
@@ -166,7 +150,7 @@ export function SectionAICopilotConfiguration({
 
               <Callout.Root color="sky" className="mt-4">
                 <Callout.Icon>
-                  <Icon name={IconAwesomeEnum.CIRCLE_INFO} />
+                  <Icon iconName="circle-info" iconStyle="regular" />
                 </Callout.Icon>
                 <Callout.Text>
                   <Callout.TextHeading>
diff --git a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-opt-in/section-ai-copilot-opt-in.tsx b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-opt-in/section-ai-copilot-opt-in.tsx
index 39f81e41365..00365ee7948 100644
--- a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-opt-in/section-ai-copilot-opt-in.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-opt-in/section-ai-copilot-opt-in.tsx
@@ -33,22 +33,6 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
   return (
     <FormProvider {...methods}>
       <Section>
-        <div className="mb-8">
-          <Heading className="mb-2">AI Copilot Configuration</Heading>
-          <p className="text-xs text-neutral-400">Configure your Copilot</p>
-        </div>
-        <Callout.Root color="purple" className="mb-6">
-          <Callout.Icon>
-            <Icon iconName="flask" />
-          </Callout.Icon>
-          <Callout.Text>
-            <Callout.TextHeading>Beta Feature</Callout.TextHeading>
-            <Callout.TextDescription>
-              The AI Copilot is currently in beta. This is an experimental feature and functionality may change. Billing
-              terms are not final and will be communicated before any charges apply.
-            </Callout.TextDescription>
-          </Callout.Text>
-        </Callout.Root>
         <BlockContent title="Opt-in to AI Copilot" classNameContent="p-0">
           {isLoading ? (
             <div className="flex justify-center p-5">
@@ -60,21 +44,21 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                 <div className="flex-1 space-y-4">
                   <div>
                     <div className="mb-2 flex items-center">
-                      <Icon iconName="robot" className="mr-2 text-brand-500" />
-                      <p className="text-sm font-medium text-neutral-400">Opt-in to AI Copilot</p>
+                      <Icon iconName="robot" className="mr-2 text-brand" />
+                      <p className="text-sm font-medium text-neutral">Opt-in to AI Copilot</p>
                     </div>
-                    <p className="text-xs text-neutral-350">
+                    <p className="text-xs text-neutral-subtle">
                       Please review and accept the following terms to enable AI Copilot for your organization.
                     </p>
                   </div>
 
-                  <div className="max-h-80 overflow-y-auto rounded border border-neutral-250 bg-white p-4">
-                    <h3 className="mb-3 text-sm font-semibold text-neutral-400">
+                  <div className="max-h-80 overflow-y-auto rounded border border-neutral bg-surface-neutral p-4">
+                    <h3 className="mb-3 text-sm font-semibold text-neutral">
                       Qovery AI DevOps Copilot - AI service terms and conditions
                     </h3>
-                    <div className="space-y-4 text-xs text-neutral-350">
+                    <div className="space-y-4 text-xs text-neutral-subtle">
                       <div>
-                        <p className="mb-2 font-semibold text-neutral-400">1. Company information</p>
+                        <p className="mb-2 font-semibold text-neutral">1. Company information</p>
                         <p>
                           BIRDSIGHT is a French simplified joint stock company, registered under number 852 571 108 with
                           the Registry of Trade and Companies of Paris, whose head office is located at 128 rue de la
@@ -86,7 +70,7 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                       </div>
 
                       <div>
-                        <p className="mb-2 font-semibold text-neutral-400">2. Company's AI Service</p>
+                        <p className="mb-2 font-semibold text-neutral">2. Company's AI Service</p>
                         <p className="mb-2">
                           The Company offers to its customers (the "Customer(s)") services enabling them to deploy their
                           applications on their cloud provider (hereinafter referred to as the "Applications") (the
@@ -101,7 +85,7 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                       </div>
 
                       <div>
-                        <p className="mb-2 font-semibold text-neutral-400">
+                        <p className="mb-2 font-semibold text-neutral">
                           3. Contractual documents and information regarding the AI Service Terms and Conditions
                         </p>
                         <p className="mb-2">
@@ -124,7 +108,7 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                           The Customer undertakes to have read the Anthropic's Terms of Service available here:{' '}
                           <a
                             href="https://www.anthropic.com/legal/commercial-terms"
-                            className="text-brand-500 hover:underline"
+                            className="text-brand hover:underline"
                           >
                             https://www.anthropic.com/legal/commercial-terms
                           </a>
@@ -143,7 +127,7 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                       </div>
 
                       <div>
-                        <p className="mb-2 font-semibold text-neutral-400">4. Access to the AI Service</p>
+                        <p className="mb-2 font-semibold text-neutral">4. Access to the AI Service</p>
                         <p className="mb-2">
                           The Customer can access the AI Service by going directly to the Platform, in the settings of
                           their account, and activate the AI Service. The AI Service can only be activated by
@@ -161,7 +145,7 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                       </div>
 
                       <div>
-                        <p className="mb-2 font-semibold text-neutral-400">5. Duration of the AI Service</p>
+                        <p className="mb-2 font-semibold text-neutral">5. Duration of the AI Service</p>
                         <p>
                           The AI service may only be provided to the Customer during the active subscription period in
                           effect according to the General Terms and Conditions.
@@ -169,7 +153,7 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                       </div>
 
                       <div>
-                        <p className="mb-2 font-semibold text-neutral-400">6. Financial terms</p>
+                        <p className="mb-2 font-semibold text-neutral">6. Financial terms</p>
                         <p className="mb-2">
                           The price of the AI Service is indicated on the Platform or in the specific quotation accepted
                           by the Customer, if any.
@@ -200,7 +184,7 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                       </div>
 
                       <div>
-                        <p className="mb-2 font-semibold text-neutral-400">7. Intellectual property rights</p>
+                        <p className="mb-2 font-semibold text-neutral">7. Intellectual property rights</p>
                         <p className="mb-2">
                           <span className="font-medium">7.1 Intellectual property rights of the Company:</span> The
                           systems, software, structures, infrastructures, databases and content (text, images, graphics,
@@ -233,7 +217,7 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                       </div>
 
                       <div>
-                        <p className="mb-2 font-semibold text-neutral-400">8. Company's obligations</p>
+                        <p className="mb-2 font-semibold text-neutral">8. Company's obligations</p>
                         <p className="mb-1">
                           The Company undertakes to ensure that the results of its use of the AI Service comply with the
                           Company's obligations under the General Terms and Conditions, and in particular:
@@ -258,7 +242,7 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                       </div>
 
                       <div>
-                        <p className="mb-2 font-semibold text-neutral-400">9. Customer's obligations</p>
+                        <p className="mb-2 font-semibold text-neutral">9. Customer's obligations</p>
                         <p className="mb-2">
                           <span className="font-medium">8.1 Concerning the provision of information:</span> The Customer
                           undertakes to provide the Company with all the information required to activate and use the AI
@@ -317,7 +301,7 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                           Terms of Service (
                           <a
                             href="https://www.anthropic.com/legal/commercial-terms"
-                            className="text-brand-500 hover:underline"
+                            className="text-brand hover:underline"
                           >
                             https://www.anthropic.com/legal/commercial-terms
                           </a>
@@ -393,7 +377,7 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                       </div>
 
                       <div>
-                        <p className="mb-2 font-semibold text-neutral-400">9 End of AI Service</p>
+                        <p className="mb-2 font-semibold text-neutral">9 End of AI Service</p>
                         <p className="mb-2">
                           The Customer may terminate the AI Service by going directly to the Platform, in the settings
                           of their account, and deactivate the AI Service. The AI Service can only be deactivated by
@@ -407,7 +391,7 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                       </div>
 
                       <div>
-                        <p className="mb-2 font-semibold text-neutral-400">10 Sanctions in the event of breach</p>
+                        <p className="mb-2 font-semibold text-neutral">10 Sanctions in the event of breach</p>
                         <p className="mb-1">
                           In the event of a breach of any of the Customer's obligations under the AI Service Terms and
                           Conditions, the Company may:
@@ -434,7 +418,7 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                       </div>
 
                       <div>
-                        <p className="mb-2 font-semibold text-neutral-400">
+                        <p className="mb-2 font-semibold text-neutral">
                           11 Modification of AI Service Terms and Conditions
                         </p>
                         <p className="mb-2">
@@ -456,7 +440,7 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                       </div>
 
                       <div>
-                        <p className="mb-2 font-semibold text-neutral-400">12 Consumer Mediation</p>
+                        <p className="mb-2 font-semibold text-neutral">12 Consumer Mediation</p>
                         <p className="mb-2">
                           In the event of any dispute with the Company, in relation to these AI Service Terms and
                           Conditions, individual Customers have the right to seek recourse, free of charge, to a
@@ -473,14 +457,14 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                           <br />
                           Phone : 06 09 20 48 86
                           <br />
-                          <a href="https://www.cm2c.net" className="text-brand-500 hover:underline">
+                          <a href="https://www.cm2c.net" className="text-brand hover:underline">
                             https://www.cm2c.net
                           </a>
                         </p>
                       </div>
 
                       <div>
-                        <p className="mb-2 font-semibold text-neutral-400">13 Applicable law</p>
+                        <p className="mb-2 font-semibold text-neutral">13 Applicable law</p>
                         <p>The AI Service Terms and Conditions are governed by French law.</p>
                       </div>
                     </div>
@@ -497,7 +481,7 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                           onCheckedChange={(checked) => field.onChange(checked === true)}
                           className="mt-0.5 flex-shrink-0"
                         />
-                        <span className="text-sm text-neutral-400">
+                        <span className="text-sm text-neutral">
                           I have read and accept the AI Copilot Terms of Service
                         </span>
                       </label>
diff --git a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-scheduled-tasks/section-scheduled-tasks.tsx b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-scheduled-tasks/section-scheduled-tasks.tsx
index 3447f55fd14..5799948ee4b 100644
--- a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-scheduled-tasks/section-scheduled-tasks.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-scheduled-tasks/section-scheduled-tasks.tsx
@@ -18,8 +18,8 @@ export function SectionScheduledTasks({ tasks, isLoading, onToggleTask, onDelete
     (taskId: string) => {
       return (
         <div className="p-6">
-          <h2 className="h4 mb-2 text-neutral-400">Delete Task</h2>
-          <p className="mb-6 text-sm text-neutral-350">
+          <h2 className="h4 mb-2 text-neutral">Delete Task</h2>
+          <p className="mb-6 text-sm text-neutral-subtle">
             Are you sure you want to delete this task? This action cannot be undone.
           </p>
           <div className="flex justify-end gap-3">
@@ -45,10 +45,10 @@ export function SectionScheduledTasks({ tasks, isLoading, onToggleTask, onDelete
   )
 
   return (
-    <Section>
-      <div className="mb-8">
-        <Heading className="mb-2">Scheduled Tasks</Heading>
-        <p className="text-xs text-neutral-400">Recurring tasks configured for your organization</p>
+    <Section className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1">
+        <Heading>Scheduled Tasks</Heading>
+        <p className="text-xs text-neutral-subtle">Recurring tasks configured for your organization</p>
       </div>
       <BlockContent title="Tasks List" classNameContent="p-0">
         {isLoading ? (
@@ -58,19 +58,19 @@ export function SectionScheduledTasks({ tasks, isLoading, onToggleTask, onDelete
         ) : tasks.length > 0 ? (
           <ul>
             {tasks.map((task) => (
-              <li key={task.id} className="flex items-center border-b border-neutral-250 px-5 py-4 last:border-0">
+              <li key={task.id} className="flex items-center border-b border-neutral px-5 py-4 last:border-0">
                 <div className="flex-1">
-                  <p className="mb-1 text-xs font-medium text-neutral-400">{task.user_intent}</p>
-                  <p className="text-xs text-neutral-350">
+                  <p className="mb-1 text-xs font-medium text-neutral">{task.user_intent}</p>
+                  <p className="text-xs text-neutral-disabled">
                     <span className="inline-block">Schedule: {task.cron_expression}</span>
                     {task.last_run_at && (
                       <span className="ml-3 inline-block">Last run: {new Date(task.last_run_at).toLocaleString()}</span>
                     )}
                     {task.error_count > 0 && (
-                      <span className="ml-3 inline-block text-red-500">Errors: {task.error_count}</span>
+                      <span className="ml-3 inline-block text-negative">Errors: {task.error_count}</span>
                     )}
                   </p>
-                  {task.last_error && <p className="mt-1 text-xs text-red-500">{task.last_error}</p>}
+                  {task.last_error && <p className="mt-1 text-xs text-negative">{task.last_error}</p>}
                 </div>
                 <div className="flex flex-1 items-center justify-center">
                   <Badge variant="surface" color={task.enabled ? 'green' : 'neutral'} size="sm">
@@ -79,8 +79,9 @@ export function SectionScheduledTasks({ tasks, isLoading, onToggleTask, onDelete
                 </div>
                 <div className="flex flex-1 items-center justify-end gap-2">
                   <Button
-                    variant="surface"
+                    variant="outline"
                     color="neutral"
+                    iconOnly
                     size="md"
                     onClick={() => onToggleTask(task.id)}
                     title={task.enabled ? 'Pause task' : 'Resume task'}
@@ -88,8 +89,9 @@ export function SectionScheduledTasks({ tasks, isLoading, onToggleTask, onDelete
                     <Icon iconName={task.enabled ? 'pause' : 'play'} iconStyle="regular" />
                   </Button>
                   <Button
-                    variant="surface"
+                    variant="outline"
                     color="neutral"
+                    iconOnly
                     size="md"
                     title="Delete task"
                     onClick={() => {
@@ -106,7 +108,7 @@ export function SectionScheduledTasks({ tasks, isLoading, onToggleTask, onDelete
           </ul>
         ) : (
           <div className="flex justify-center p-5">
-            <p className="text-sm text-neutral-350">No scheduled tasks configured yet.</p>
+            <p className="text-sm text-neutral-subtle">No scheduled tasks configured yet.</p>
           </div>
         )}
       </BlockContent>