From 0c8323b77b84da688b7db1f3d9b15b5635434c10 Mon Sep 17 00:00:00 2001
From: Steve Larson <9larsons@gmail.com>
Date: Wed, 22 Jul 2026 17:50:39 -0500
Subject: [PATCH 1/6] Updated Settings notifications to use shade (#29546)

no ref
- replace legacy Settings and Admin-X framework toast calls with Sonner
- remove the react-hot-toast renderers, provider, dependencies, and
workspace catalog entry
- preserve bottom-left positioning, five-second duration, close
controls, stale-toast dismissal, and route-safe staff deletion feedback
- restore the destructive red Leave action in the shared dirty-confirm
dialog
- update acceptance locators and regression coverage for the new
notification host
---
 apps/admin-x-design-system/package.json       |   3 +-
 .../src/global/toast.stories.tsx              | 136 ------------------
 .../src/global/toast.tsx                      | 120 ----------------
 apps/admin-x-design-system/src/index.ts       |   2 -
 .../src/providers/design-system-provider.tsx  |   2 -
 apps/admin-x-framework/package.json           |   4 +-
 .../src/hooks/use-handle-error.ts             |  16 +--
 apps/admin-x-framework/src/utils/toast.tsx    |  49 -------
 .../test/unit/api/labels.test.tsx             |   9 +-
 .../test/unit/hooks/use-handle-error.test.tsx |  70 +++------
 apps/admin-x-settings/package.json            |   1 -
 .../settings/advanced/danger-zone.tsx         |  19 +--
 .../settings/advanced/integrations.tsx        |  11 +-
 .../advanced/integrations/pintura-modal.tsx   |   8 +-
 .../advanced/integrations/slack-modal.tsx     |  13 +-
 .../advanced/integrations/webhooks-table.tsx  |   8 +-
 .../settings/advanced/labs/beta-features.tsx  |  13 +-
 .../advanced/labs/migration-options.tsx       |   8 +-
 .../advanced/labs/yaml-file-editor-modal.tsx  |   8 +-
 .../newsletters/newsletter-detail-modal.tsx   |  19 +--
 .../settings/general/invite-user-modal.tsx    |  15 +-
 .../settings/general/user-detail-modal.tsx    |  35 ++---
 .../src/components/settings/general/users.tsx |  15 +-
 .../general/users/change-password-form.tsx    |   8 +-
 .../growth/explore/testimonials-modal.tsx     |   8 +-
 .../growth/offers/add-offer-modal.tsx         |  20 +--
 .../growth/offers/edit-offer-modal.tsx        |  22 +--
 .../offers/edit-retention-offer-modal.tsx     |  12 +-
 .../settings/growth/offers/offers-index.tsx   |   8 +-
 .../add-recommendation-modal-confirm.tsx      |  15 +-
 .../add-recommendation-modal.tsx              |  10 +-
 .../edit-recommendation-modal.tsx             |  17 +--
 .../components/settings/membership/access.tsx |   8 +-
 .../custom-fields/custom-field-modal.tsx      |  15 +-
 .../settings/membership/member-emails.tsx     |   9 +-
 .../stripe/stripe-connect-modal.tsx           |  12 +-
 .../membership/tiers/tier-detail-modal.tsx    |   8 +-
 .../settings/site/announcement-bar-modal.tsx  |   8 +-
 .../components/settings/site/theme-modal.tsx  |   9 +-
 .../site/theme/advanced-theme-settings.tsx    |   9 +-
 .../site/theme/theme-code-editor-modal.tsx    |  68 ++-------
 .../site/theme/theme-installed-modal.tsx      |   9 +-
 apps/admin-x-settings/src/main-content.tsx    |  12 +-
 .../general/staff-actions.acceptance.test.tsx |   1 +
 apps/admin/src/settings/offers.screen.ts      |   2 +-
 apps/admin/src/settings/settings.screen.ts    |   9 +-
 .../patterns/dirty-confirm-dialog.tsx         |   2 +-
 apps/shade/src/providers/shade-provider.tsx   |   2 +
 .../patterns/dirty-confirm-dialog.test.tsx    |   7 +-
 pnpm-lock.yaml                                |  38 +----
 pnpm-workspace.yaml                           |   1 -
 51 files changed, 202 insertions(+), 731 deletions(-)
 delete mode 100644 apps/admin-x-design-system/src/global/toast.stories.tsx
 delete mode 100644 apps/admin-x-design-system/src/global/toast.tsx
 delete mode 100644 apps/admin-x-framework/src/utils/toast.tsx

diff --git a/apps/admin-x-design-system/package.json b/apps/admin-x-design-system/package.json
index 7c069b3ec33..924e8e65de8 100644
--- a/apps/admin-x-design-system/package.json
+++ b/apps/admin-x-design-system/package.json
@@ -64,8 +64,7 @@
         "@radix-ui/react-tooltip": "catalog:",
         "@sentry/react": "catalog:",
         "@tryghost/shade": "workspace:*",
-        "clsx": "catalog:",
-        "react-hot-toast": "catalog:"
+        "clsx": "catalog:"
     },
     "peerDependencies": {
         "react": "^18.2.0",
diff --git a/apps/admin-x-design-system/src/global/toast.stories.tsx b/apps/admin-x-design-system/src/global/toast.stories.tsx
deleted file mode 100644
index 89a04d7c860..00000000000
--- a/apps/admin-x-design-system/src/global/toast.stories.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react-vite';
-import {ReactNode} from 'react';
-
-import Button from './button';
-import {ShowToastProps, showToast} from './toast';
-
-/**
- * This component uses `react-hot-toast` which requires the `<Toaster />` component to be included in the app.
- * The design system already does this so you don't have to — just call `showToast()` in any event and it'll work.
- */
-const ToastContainer: React.FC<ShowToastProps> = ({...props}) => {
-    return (
-        <>
-            <Button color='black' label='Toast me!' onClick={() => {
-                showToast({...props});
-            }} />
-        </>
-    );
-};
-
-const meta = {
-    title: 'Global / Toast',
-    component: ToastContainer,
-    tags: ['autodocs'],
-    decorators: [(_story: () => ReactNode) => (
-        <>
-            {_story()}
-        </>
-    )]
-} satisfies Meta<typeof ToastContainer>;
-
-export default meta;
-type Story = StoryObj<typeof ToastContainer>;
-
-export const Default: Story = {
-    args: {
-        title: 'Toast title',
-        message: 'Hello notification in a toast'
-    }
-};
-
-export const TitleOnly: Story = {
-    args: {
-        title: 'Hello notification in a toast'
-    }
-};
-
-export const MinWidth: Story = {
-    args: {
-        title: 'Min toast'
-    }
-};
-
-export const TitleWithIcon: Story = {
-    args: {
-        title: 'Hello notification in a toast',
-        type: 'info',
-        options: {
-            duration: Infinity
-        }
-    }
-};
-
-export const MessageOnly: Story = {
-    args: {
-        message: 'Hey, this is a message in a toast. Almost like a message in a bottle.'
-    }
-};
-
-export const Info: Story = {
-    args: {
-        title: 'Toast title',
-        message: 'Hello success message in a toast',
-        type: 'info'
-    }
-};
-
-export const Success: Story = {
-    args: {
-        title: 'Toast title',
-        message: 'Hello success message in a toast',
-        type: 'success'
-    }
-};
-
-export const Error: Story = {
-    args: {
-        title: 'Toast title',
-        message: 'Hello error message in a toast',
-        type: 'error'
-    }
-};
-
-export const Infinite: Story = {
-    args: {
-        title: 'Toast title',
-        message: 'Hello error message in a toast',
-        type: 'error',
-        options: {
-            duration: Infinity
-        }
-    }
-};
-
-export const PageError: Story = {
-    args: {
-        title: 'Toast title',
-        message: 'This is a page error which should not be automatically dismissed.',
-        type: 'pageError'
-    }
-};
-
-export const Icon: Story = {
-    args: {
-        message: 'Custom icon in a toast',
-        icon: 'user-add'
-    }
-};
-
-export const Custom: Story = {
-    args: {
-        message: (
-            <div>
-                And here is one with a longer notification and a <a className='underline' href="https://ghost.org" rel="noreferrer" target="_blank">link</a>, custom <strong>formatting</strong>, icon and duration.
-            </div>
-        ),
-        icon: (
-            <>
-                👋
-            </>
-        ),
-        options: {
-            duration: 10000
-        }
-    }
-};
diff --git a/apps/admin-x-design-system/src/global/toast.tsx b/apps/admin-x-design-system/src/global/toast.tsx
deleted file mode 100644
index eaf2659c458..00000000000
--- a/apps/admin-x-design-system/src/global/toast.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import {Toast as HotToast, ToastOptions, toast} from 'react-hot-toast';
-import Icon from './icon';
-
-export type ToastType = 'neutral' | 'info' | 'success' | 'error' | 'pageError';
-
-export interface ShowToastProps {
-    title?: React.ReactNode;
-    message?: React.ReactNode;
-    type?: ToastType;
-    icon?: React.ReactNode | string;
-    options?: ToastOptions
-}
-
-export interface ToastProps {
-    t: HotToast;
-
-    /**
-     * Can be a name of an icon from the icon library or a react component
-     */
-    children?: React.ReactNode;
-    props?: ShowToastProps;
-}
-
-/**
- * This component uses `react-hot-toast` which requires the `<Toaster />` component to be included in the app.
- * The design system already does this so you don't have to — just call `showToast()` in any event and it'll work.
- */
-const Toast: React.FC<ToastProps> = ({
-    t,
-    children,
-    props
-}) => {
-    let iconColorClass = 'text-grey-500';
-
-    switch (props?.type) {
-    case 'info':
-        props.icon = props.icon || 'info-fill';
-        iconColorClass = 'text-grey-500';
-        break;
-    case 'success':
-        props.icon = props.icon || 'success-fill';
-        iconColorClass = 'text-green';
-        break;
-    case 'error':
-        props.icon = props.icon || 'error-fill';
-        iconColorClass = 'text-red';
-        break;
-    }
-
-    const classNames = clsx(
-        'relative z-[90] mb-[14px] ml-[6px] flex min-w-[272px] items-start justify-between gap-3 rounded-lg bg-white p-4 text-black shadow-md-heavy dark:bg-grey-900 dark:text-white',
-        props?.options?.position === 'top-center' ? 'max-w-[520px]' : 'max-w-[320px]',
-        t.visible ? (props?.options?.position === 'top-center' ? 'animate-toaster-top-in' : 'animate-toaster-in') : 'animate-toaster-out'
-    );
-
-    return (
-        <div className={classNames} data-testid={`toast-${props?.type}`}>
-            <div className='mr-7 flex items-start gap-[10px]'>
-                {props?.icon && (typeof props.icon === 'string' ?
-                    <div className='mt-px'><Icon className='grow' colorClass={iconColorClass} name={props.icon} size='sm' /></div> : props.icon)}
-                {children}
-            </div>
-            <button className='absolute top-5 right-5 -mt-1.5 -mr-1.5 cursor-pointer rounded-full p-2 text-grey-700 hover:text-black dark:hover:text-white' type='button' onClick={() => {
-                toast.dismiss(t.id);
-            }}>
-                <div>
-                    <Icon colorClass='stroke-2' name='close' size='2xs' />
-                </div>
-            </button>
-        </div>
-    );
-};
-
-export default Toast;
-
-export const showToast = ({
-    title,
-    message,
-    type = 'neutral',
-    icon = '',
-    options = {
-        position: 'bottom-left',
-        duration: 5000
-    }
-}: ShowToastProps): void => {
-    if (!options.position) {
-        options.position = 'bottom-left';
-    }
-
-    if (type === 'pageError') {
-        type = 'error';
-        options.position = 'top-center';
-        options.duration = Infinity;
-    }
-
-    toast.custom(t => (
-        <Toast props={{
-            type: type,
-            icon: icon,
-            options: options
-        }} t={t}>
-            <div>
-                {title && <span className='mt-px block text-md leading-tighter font-semibold tracking-[0.1px]'>{title}</span>}
-                {message &&
-                    <div className={`text-grey-900 dark:text-grey-300 ${title ? 'mt-1' : ''}`}>{message}</div>
-                }
-            </div>
-        </Toast>
-    ),
-    {
-        ...options
-    }
-    );
-};
-
-export const dismissAllToasts = (): void => {
-    toast.dismiss();
-};
diff --git a/apps/admin-x-design-system/src/index.ts b/apps/admin-x-design-system/src/index.ts
index 84b10522f2d..9248a370fdb 100644
--- a/apps/admin-x-design-system/src/index.ts
+++ b/apps/admin-x-design-system/src/index.ts
@@ -40,8 +40,6 @@ export {LoadingIndicator} from './global/loading-indicator';
 export type {LoadingIndicatorProps} from './global/loading-indicator';
 export {default as Separator} from './global/separator';
 export type {SeparatorProps} from './global/separator';
-export {default as Toast, dismissAllToasts, showToast} from './global/toast';
-export type {ToastProps} from './global/toast';
 export {default as Tooltip} from './global/tooltip';
 export type {TooltipProps} from './global/tooltip';
 export {default as PageHeader} from './global/layout/page-header';
diff --git a/apps/admin-x-design-system/src/providers/design-system-provider.tsx b/apps/admin-x-design-system/src/providers/design-system-provider.tsx
index cfd8bc38c8d..7ca3284e736 100644
--- a/apps/admin-x-design-system/src/providers/design-system-provider.tsx
+++ b/apps/admin-x-design-system/src/providers/design-system-provider.tsx
@@ -1,7 +1,6 @@
 // FocusContext.tsx
 import NiceModal from '@ebay/nice-modal-react';
 import React, {createContext, useContext} from 'react';
-import {Toaster} from 'react-hot-toast';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type FetchKoenigLexical = () => Promise<any>;
@@ -27,7 +26,6 @@ interface DesignSystemProviderProps {
 const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({fetchKoenigLexical, darkMode, children}) => {
     return (
         <DesignSystemContext.Provider value={{fetchKoenigLexical, darkMode}}>
-            <Toaster />
             <NiceModal.Provider>
                 {children}
             </NiceModal.Provider>
diff --git a/apps/admin-x-framework/package.json b/apps/admin-x-framework/package.json
index 36a1db16b27..232dfeff738 100644
--- a/apps/admin-x-framework/package.json
+++ b/apps/admin-x-framework/package.json
@@ -114,8 +114,8 @@
         "bson-objectid": "catalog:",
         "react": "catalog:",
         "react-dom": "catalog:",
-        "react-hot-toast": "catalog:",
-        "react-router": "catalog:"
+        "react-router": "catalog:",
+        "sonner": "catalog:"
     },
     "peerDependencies": {
         "react": "^18.2.0",
diff --git a/apps/admin-x-framework/src/hooks/use-handle-error.ts b/apps/admin-x-framework/src/hooks/use-handle-error.ts
index 96dff7428e8..1ac8b55314d 100644
--- a/apps/admin-x-framework/src/hooks/use-handle-error.ts
+++ b/apps/admin-x-framework/src/hooks/use-handle-error.ts
@@ -1,16 +1,12 @@
 import * as Sentry from '@sentry/react';
 import {useCallback} from 'react';
-import toast from 'react-hot-toast';
+import {toast} from 'sonner';
 import {useFramework} from '../providers/framework-provider';
 import {APIError, SessionExpiredError, getErrorMessage} from '../utils/errors';
-import {showToast} from '../utils/toast';
 
 function showErrorToast(message: React.ReactNode) {
-    toast.remove();
-    showToast({
-        message,
-        type: 'error'
-    });
+    toast.dismiss();
+    toast.error(message);
 }
 
 /**
@@ -49,12 +45,12 @@ const useHandleError = () => {
         if (error instanceof APIError && error.response?.status === 418) {
             // We use this status in tests to indicate the API request was not mocked -
             // don't show a toast because it may block clicking things in the test,
-            // but still clear lingering toasts that would block clicks the same way
-            toast.remove();
+            // but still clear lingering toasts that would block clicks the same way.
+            toast.dismiss();
         } else if (error instanceof SessionExpiredError) {
             // Session-expiry 401s trigger a redirect to signin in the fetch
             // layer - a toast would only flash while the page unloads
-            toast.remove();
+            toast.dismiss();
         } else if (error instanceof APIError) {
             showErrorToast(getErrorMessage(error, error.message));
         } else {
diff --git a/apps/admin-x-framework/src/utils/toast.tsx b/apps/admin-x-framework/src/utils/toast.tsx
deleted file mode 100644
index 5f960a6f7b0..00000000000
--- a/apps/admin-x-framework/src/utils/toast.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import toast from 'react-hot-toast';
-
-// Markup, classes and icons are copied from admin-x-design-system's Toast so error
-// toasts render identically inside its react-hot-toast <Toaster>.
-const ErrorIcon: React.FC<{className?: string}> = ({className}) => (
-    <svg className={className} viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
-        <path d='m23.77 20.57 -10 -19A2 2 0 0 0 12 0.5a2 2 0 0 0 -1.77 1.07l-10 19a2 2 0 0 0 0.06 2A2 2 0 0 0 2 23.5h20a2 2 0 0 0 1.77 -2.93ZM11 8.5a1 1 0 0 1 2 0v6a1 1 0 0 1 -2 0ZM12.05 20a1.53 1.53 0 0 1 -1.52 -1.47A1.48 1.48 0 0 1 12 17a1.53 1.53 0 0 1 1.52 1.47A1.48 1.48 0 0 1 12.05 20Z' fill='currentColor' />
-    </svg>
-);
-
-const CloseIcon: React.FC<{className?: string}> = ({className}) => (
-    <svg className={className} viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
-        <line fill='none' stroke='currentColor' strokeLinecap='round' strokeLinejoin='round' strokeWidth='1.5' x1='0.75' x2='23.25' y1='23.249' y2='0.749' />
-        <line fill='none' stroke='currentColor' strokeLinecap='round' strokeLinejoin='round' strokeWidth='1.5' x1='23.25' x2='0.75' y1='23.249' y2='0.749' />
-    </svg>
-);
-
-export interface ShowToastProps {
-    message: React.ReactNode;
-    type: 'error';
-}
-
-export const showToast = ({message, type}: ShowToastProps): void => {
-    toast.custom(t => (
-        <div
-            className={`relative z-[90] mb-[14px] ml-[6px] flex min-w-[272px] max-w-[320px] items-start justify-between gap-3 rounded-lg bg-white p-4 text-black shadow-md-heavy dark:bg-grey-900 dark:text-white ${t.visible ? 'animate-toaster-in' : 'animate-toaster-out'}`}
-            data-testid={`toast-${type}`}
-        >
-            <div className='mr-7 flex items-start gap-[10px]'>
-                <div className='mt-px'>
-                    <ErrorIcon className='pointer-events-none size-4 grow text-red' />
-                </div>
-                <div>
-                    <div className='text-grey-900 dark:text-grey-300'>{message}</div>
-                </div>
-            </div>
-            <button
-                className='absolute top-5 right-5 -mt-1.5 -mr-1.5 cursor-pointer rounded-full p-2 text-grey-700 hover:text-black dark:hover:text-white'
-                type='button'
-                onClick={() => toast.dismiss(t.id)}
-            >
-                <div>
-                    <CloseIcon className='pointer-events-none size-2 stroke-2' />
-                </div>
-            </button>
-        </div>
-    ), {position: 'bottom-left', duration: 5000});
-};
diff --git a/apps/admin-x-framework/test/unit/api/labels.test.tsx b/apps/admin-x-framework/test/unit/api/labels.test.tsx
index ac61f2baf39..690e33a7a4f 100644
--- a/apps/admin-x-framework/test/unit/api/labels.test.tsx
+++ b/apps/admin-x-framework/test/unit/api/labels.test.tsx
@@ -5,15 +5,10 @@ import {renderHookWithProviders} from '../../../src/test/test-utils';
 import {useCreateLabel, useEditLabel, useFindLabelByName} from '../../../src/api/labels';
 import {withMockFetch} from '../../utils/mock-fetch';
 
-const {mockShowToast, mockSonnerError} = vi.hoisted(() => ({
-    mockShowToast: vi.fn(),
+const {mockSonnerError} = vi.hoisted(() => ({
     mockSonnerError: vi.fn()
 }));
 
-vi.mock('../../../src/utils/toast', () => ({
-    showToast: mockShowToast
-}));
-
 vi.mock('sonner', () => ({
     toast: {
         error: mockSonnerError,
@@ -63,7 +58,6 @@ describe('labels api', () => {
                 await expect(result.current.mutateAsync({name: 'Existing label'})).rejects.toBeInstanceOf(ValidationError);
             });
 
-            expect(mockShowToast).not.toHaveBeenCalled();
             expect(mockSonnerError).not.toHaveBeenCalled();
         });
     });
@@ -130,7 +124,6 @@ describe('labels api', () => {
                 await expect(result.current.mutateAsync({id: 'label-1', name: 'Existing label'})).rejects.toBeInstanceOf(ValidationError);
             });
 
-            expect(mockShowToast).not.toHaveBeenCalled();
             expect(mockSonnerError).not.toHaveBeenCalled();
         });
     });
diff --git a/apps/admin-x-framework/test/unit/hooks/use-handle-error.test.tsx b/apps/admin-x-framework/test/unit/hooks/use-handle-error.test.tsx
index 452f87f625c..5c58e5a38dc 100644
--- a/apps/admin-x-framework/test/unit/hooks/use-handle-error.test.tsx
+++ b/apps/admin-x-framework/test/unit/hooks/use-handle-error.test.tsx
@@ -14,22 +14,20 @@ vi.mock('@sentry/react', () => ({
     ErrorBoundary: ({children}: {children: any}) => children
 }));
 
-vi.mock('../../../src/utils/toast', () => ({
-    showToast: vi.fn()
+const {mockToastDismiss, mockToastError} = vi.hoisted(() => ({
+    mockToastDismiss: vi.fn(),
+    mockToastError: vi.fn()
 }));
 
-vi.mock('react-hot-toast', () => ({
-    default: {
-        remove: vi.fn()
+vi.mock('sonner', () => ({
+    toast: {
+        dismiss: mockToastDismiss,
+        error: mockToastError
     }
 }));
 
-const mockShowToast = vi.fn();
-const mockToastRemove = vi.fn();
-
 import * as Sentry from '@sentry/react';
-import toast from 'react-hot-toast';
-import {showToast} from '../../../src/utils/toast';
+import {toast} from 'sonner';
 
 const createWrapper = (sentryDSN?: string): React.FC<{children: ReactNode}> => {
     const TestWrapper: React.FC<{children: ReactNode}> = ({children}) => (
@@ -68,9 +66,6 @@ describe('useHandleError', () => {
             callback(scope);
         });
 
-        (showToast as any).mockImplementation(mockShowToast);
-        (toast.remove as any).mockImplementation(mockToastRemove);
-
         // Reset console.error mock
         vi.spyOn(console, 'error').mockImplementation(() => {});
     });
@@ -151,7 +146,7 @@ describe('useHandleError', () => {
 
         result.current(error);
 
-        expect(toast.remove).toHaveBeenCalled();
+        expect(toast.dismiss).toHaveBeenCalled();
     });
 
     it('does not show toast when withToast is false', () => {
@@ -161,7 +156,7 @@ describe('useHandleError', () => {
 
         result.current(error, {withToast: false});
 
-        expect(showToast).not.toHaveBeenCalled();
+        expect(toast.error).not.toHaveBeenCalled();
     });
 
     it('does not show toast for 418 status (test indicator)', () => {
@@ -173,7 +168,7 @@ describe('useHandleError', () => {
 
         result.current(error);
 
-        expect(showToast).not.toHaveBeenCalled();
+        expect(toast.error).not.toHaveBeenCalled();
     });
 
     it('still clears lingering toasts for 418 status', () => {
@@ -185,9 +180,7 @@ describe('useHandleError', () => {
 
         result.current(error);
 
-        // A stale toast can cover UI and block clicks in tests, so the
-        // unmocked-request path must clear toasts even without showing one
-        expect(toast.remove).toHaveBeenCalled();
+        expect(toast.dismiss).toHaveBeenCalled();
     });
 
     it('does not send session expiry errors to Sentry', () => {
@@ -213,8 +206,8 @@ describe('useHandleError', () => {
 
         // The fetch layer redirects to signin on session expiry, so the
         // error handler must not flash a toast over the unloading page
-        expect(showToast).not.toHaveBeenCalled();
-        expect(toast.remove).toHaveBeenCalled();
+        expect(toast.error).not.toHaveBeenCalled();
+        expect(toast.dismiss).toHaveBeenCalled();
     });
 
     it('shows toast for unauthorized errors that do not trigger a redirect', () => {
@@ -226,10 +219,7 @@ describe('useHandleError', () => {
 
         result.current(error);
 
-        expect(showToast).toHaveBeenCalledWith({
-            message: 'You are not authorised to make this request.',
-            type: 'error'
-        });
+        expect(toast.error).toHaveBeenCalledWith('You are not authorised to make this request.');
     });
 
     it('shows validation error message from context', () => {
@@ -255,10 +245,7 @@ describe('useHandleError', () => {
 
         result.current(error);
 
-        expect(showToast).toHaveBeenCalledWith({
-            message: 'This field must be filled out',
-            type: 'error'
-        });
+        expect(toast.error).toHaveBeenCalledWith('This field must be filled out');
     });
 
     it('shows validation error message when no context available', () => {
@@ -284,10 +271,7 @@ describe('useHandleError', () => {
 
         result.current(error);
 
-        expect(showToast).toHaveBeenCalledWith({
-            message: 'Field is required',
-            type: 'error'
-        });
+        expect(toast.error).toHaveBeenCalledWith('Field is required');
     });
 
     it('shows API error message', () => {
@@ -298,10 +282,7 @@ describe('useHandleError', () => {
 
         result.current(error);
 
-        expect(showToast).toHaveBeenCalledWith({
-            message: 'API Error occurred',
-            type: 'error'
-        });
+        expect(toast.error).toHaveBeenCalledWith('API Error occurred');
     });
 
     it('shows generic error message for unknown errors', () => {
@@ -312,10 +293,7 @@ describe('useHandleError', () => {
 
         result.current(error);
 
-        expect(showToast).toHaveBeenCalledWith({
-            message: 'Something went wrong, please try again.',
-            type: 'error'
-        });
+        expect(toast.error).toHaveBeenCalledWith('Something went wrong, please try again.');
     });
 
     it('handles string errors', () => {
@@ -325,10 +303,7 @@ describe('useHandleError', () => {
         result.current('String error');
 
         expect(console.error).toHaveBeenCalledWith('String error'); // eslint-disable-line no-console
-        expect(showToast).toHaveBeenCalledWith({
-            message: 'Something went wrong, please try again.',
-            type: 'error'
-        });
+        expect(toast.error).toHaveBeenCalledWith('Something went wrong, please try again.');
     });
 
     it('handles null/undefined errors', () => {
@@ -338,9 +313,6 @@ describe('useHandleError', () => {
         result.current(null);
 
         expect(console.error).toHaveBeenCalledWith(null); // eslint-disable-line no-console
-        expect(showToast).toHaveBeenCalledWith({
-            message: 'Something went wrong, please try again.',
-            type: 'error'
-        });
+        expect(toast.error).toHaveBeenCalledWith('Something went wrong, please try again.');
     });
 });
diff --git a/apps/admin-x-settings/package.json b/apps/admin-x-settings/package.json
index 6fa5671d6af..829bacd0e22 100644
--- a/apps/admin-x-settings/package.json
+++ b/apps/admin-x-settings/package.json
@@ -47,7 +47,6 @@
         "lucide-react": "catalog:",
         "react": "catalog:",
         "react-dom": "catalog:",
-        "react-hot-toast": "catalog:",
         "semver": "catalog:",
         "sonner": "catalog:",
         "validator": "catalog:"
diff --git a/apps/admin-x-settings/src/components/settings/advanced/danger-zone.tsx b/apps/admin-x-settings/src/components/settings/advanced/danger-zone.tsx
index bc218dd2e9a..125b187779a 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/danger-zone.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/danger-zone.tsx
@@ -4,8 +4,10 @@ import TopLevelGroup from '../../top-level-group';
 import trackEvent from '../../../utils/analytics';
 import useStaffUsers from '../../../hooks/use-staff-users';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent} from '@tryghost/shade/components';
-import {Button, ConfirmationModal, SettingGroupHeader, showToast} from '@tryghost/admin-x-design-system';
+import {Button, ConfirmationModal, SettingGroupHeader} from '@tryghost/admin-x-design-system';
+import {formatNumber} from '@tryghost/shade/utils';
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
+import {toast} from 'sonner';
 import {useDeleteAllContent} from '@tryghost/admin-x-framework/api/db';
 import {useGlobalData} from '../../providers/global-data-provider';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -40,10 +42,7 @@ const DangerZone: React.FC<{ keywords: string[] }> = ({keywords}) => {
             onOk: async (modal) => {
                 try {
                     await deleteAllContent(null);
-                    showToast({
-                        title: 'All content deleted from database.',
-                        type: 'success'
-                    });
+                    toast.success('All content deleted from database.');
                     modal?.remove();
                     await client.refetchQueries();
                 } catch (e) {
@@ -75,10 +74,7 @@ const DangerZone: React.FC<{ keywords: string[] }> = ({keywords}) => {
                     const result = response?.security_action?.[0];
                     const keys = result?.api_keys_rotated ?? 0;
                     const users = result?.users_locked ?? 0;
-                    showToast({
-                        title: `Rotated ${keys} API ${keys === 1 ? 'key' : 'keys'} and locked ${users} ${users === 1 ? 'user' : 'users'}. You will be signed out shortly.`,
-                        type: 'success'
-                    });
+                    toast.success(`Rotated ${formatNumber(keys)} API ${keys === 1 ? 'key' : 'keys'} and locked ${formatNumber(users)} ${users === 1 ? 'user' : 'users'}. You will be signed out shortly.`);
                     modal?.remove();
                     window.location.href = getGhostPaths().adminRoot;
                 } catch (e) {
@@ -100,10 +96,7 @@ const DangerZone: React.FC<{ keywords: string[] }> = ({keywords}) => {
                     const response = await removeAllGiftLinks(null);
                     const count = response?.meta?.count ?? 0;
                     trackEvent('All Gift Links Reset');
-                    showToast({
-                        title: `Reset ${count} gift ${count === 1 ? 'link' : 'links'}.`,
-                        type: 'success'
-                    });
+                    toast.success(`Reset ${formatNumber(count)} gift ${count === 1 ? 'link' : 'links'}.`);
                     modal?.remove();
                 } catch (e) {
                     handleError(e);
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations.tsx
index ca94efe7c23..141826127fd 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations.tsx
@@ -4,10 +4,11 @@ import React, {useState} from 'react';
 import TopLevelGroup from '../../top-level-group';
 import usePinturaEditor from '../../../hooks/use-pintura-editor';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, NoValueLabel, NoValueLabelIcon, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
-import {Button, ConfirmationModal, Icon, SettingGroupHeader, showToast} from '@tryghost/admin-x-design-system';
+import {Button, ConfirmationModal, Icon, SettingGroupHeader} from '@tryghost/admin-x-design-system';
 import {type Integration, useBrowseIntegrations, useDeleteIntegration} from '@tryghost/admin-x-framework/api/integrations';
 import {Plug} from 'lucide-react';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
+import {toast} from 'sonner';
 import {useGlobalData} from '../../providers/global-data-provider';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -226,13 +227,7 @@ const CustomIntegrations: React.FC<{integrations: Integration[]}> = ({integratio
                                     try {
                                         await deleteIntegration(integration.id);
                                         confirmModal?.remove();
-                                        showToast({
-                                            title: 'Integration deleted',
-                                            type: 'info',
-                                            options: {
-                                                position: 'bottom-left'
-                                            }
-                                        });
+                                        toast.info('Integration deleted', {position: 'bottom-left'});
                                     } catch (e) {
                                         handleError(e);
                                     }
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/pintura-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/pintura-modal.tsx
index 45bb849ced2..11890e32efa 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/pintura-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/pintura-modal.tsx
@@ -2,8 +2,9 @@ import IntegrationHeader from './integration-header';
 import NiceModal from '@ebay/nice-modal-react';
 import pinturaScreenshot from '../../../../assets/images/pintura-screenshot.png';
 import {Dropzone, Field, FieldContent, FieldDescription, FieldLabel, Switch} from '@tryghost/shade/components';
-import {Form, Icon, Modal, showToast} from '@tryghost/admin-x-design-system';
+import {Form, Icon, Modal} from '@tryghost/admin-x-design-system';
 import {type Setting, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
+import {toast} from 'sonner';
 import {useEffect, useState} from 'react';
 import {useGlobalData} from '../../../providers/global-data-provider';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -62,10 +63,7 @@ const PinturaModal = NiceModal.create(() => {
 
             await editSettings(updates);
 
-            showToast({
-                type: 'success',
-                title: `Pintura ${form} uploaded`
-            });
+            toast.success(`Pintura ${form} uploaded`);
         } catch (e) {
             handleError(e);
         } finally {
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/slack-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/slack-modal.tsx
index 76713bdfbb6..33f549722d2 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/slack-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/slack-modal.tsx
@@ -1,10 +1,10 @@
 import IntegrationHeader from './integration-header';
 import NiceModal from '@ebay/nice-modal-react';
-import toast from 'react-hot-toast';
 import useSettingGroup from '../../../../hooks/use-setting-group';
 import validator from 'validator';
-import {Button, Form, Icon, Modal, TextField, showToast} from '@tryghost/admin-x-design-system';
+import {Button, Form, Icon, Modal, TextField} from '@tryghost/admin-x-design-system';
 import {getSettingValues, useTestSlack} from '@tryghost/admin-x-framework/api/settings';
+import {toast} from 'sonner';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 
 const SlackModal = NiceModal.create(() => {
@@ -27,13 +27,10 @@ const SlackModal = NiceModal.create(() => {
     const {mutateAsync: testSlack} = useTestSlack();
 
     const handleTestClick = async () => {
-        toast.remove();
+        toast.dismiss();
         if (await handleSave()) {
             await testSlack(null);
-            showToast({
-                title: 'Check your Slack channel for the test message',
-                type: 'info'
-            });
+            toast.info('Check your Slack channel for the test message');
         }
     };
 
@@ -51,7 +48,7 @@ const SlackModal = NiceModal.create(() => {
             testId='slack-modal'
             title=''
             onOk={async () => {
-                toast.remove();
+                toast.dismiss();
                 await handleSave();
             }}
         >
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx
index 456f236c5f3..07d2d56aaf2 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx
@@ -1,10 +1,11 @@
 import NiceModal from '@ebay/nice-modal-react';
 import WebhookModal from './webhook-modal';
-import {Button, ConfirmationModal, showToast} from '@tryghost/admin-x-design-system';
+import {Button, ConfirmationModal} from '@tryghost/admin-x-design-system';
 import {type Integration} from '@tryghost/admin-x-framework/api/integrations';
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from '@tryghost/shade/components';
 import {formatNumber} from '@tryghost/shade/utils';
 import {getWebhookEventLabel} from './webhook-event-options';
+import {toast} from 'sonner';
 import {useDeleteWebhook} from '@tryghost/admin-x-framework/api/webhooks';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
 
@@ -22,10 +23,7 @@ const WebhooksTable: React.FC<{integration: Integration}> = ({integration}) => {
                 try {
                     await deleteWebhook(id);
                     confirmModal?.remove();
-                    showToast({
-                        message: 'Webhook deleted',
-                        type: 'info'
-                    });
+                    toast.info('Webhook deleted');
                 } catch (e) {
                     handleError(e);
                 }
diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/beta-features.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/beta-features.tsx
index f3959e11cc3..9874c7f9fa9 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs/beta-features.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs/beta-features.tsx
@@ -4,11 +4,12 @@ import NiceModal from '@ebay/nice-modal-react';
 import React, {useState} from 'react';
 import YamlFileEditorModal from './yaml-file-editor-modal';
 import {ActionList, Dropzone, Button as ShadeButton} from '@tryghost/shade/components';
-import {Button, showToast} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/admin-x-design-system';
 import {Inline, Stack} from '@tryghost/shade/primitives';
 import {downloadRedirects, useUploadRedirects} from '@tryghost/admin-x-framework/api/redirects';
 import {downloadRoutes, useUploadRoutes} from '@tryghost/admin-x-framework/api/routes';
 import {getSettingValue} from '@tryghost/admin-x-framework/api/settings';
+import {toast} from 'sonner';
 import {useGlobalData} from '../../../providers/global-data-provider';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
 
@@ -87,10 +88,7 @@ const BetaFeatures: React.FC = () => {
                                 try {
                                     setRedirectsUploading(true);
                                     await uploadRedirects(file);
-                                    showToast({
-                                        title: 'Redirects uploaded',
-                                        type: 'success'
-                                    });
+                                    toast.success('Redirects uploaded');
                                 } catch (e) {
                                     handleError(e);
                                 } finally {
@@ -117,10 +115,7 @@ const BetaFeatures: React.FC = () => {
                                 try {
                                     setRoutesUploading(true);
                                     await uploadRoutes(file);
-                                    showToast({
-                                        type: 'success',
-                                        title: 'Routes uploaded'
-                                    });
+                                    toast.success('Routes uploaded');
                                 } catch (e) {
                                     handleError(e);
                                 } finally {
diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/migration-options.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/migration-options.tsx
index f0a5edf79b3..5a87bc0e812 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs/migration-options.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs/migration-options.tsx
@@ -2,8 +2,9 @@ import LabItem from './lab-item';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useState} from 'react';
 import {ActionList, Dropzone} from '@tryghost/shade/components';
-import {Button, ConfirmationModal, showToast} from '@tryghost/admin-x-design-system';
+import {Button, ConfirmationModal} from '@tryghost/admin-x-design-system';
 import {downloadAllContent, useDeleteAllContent, useImportContent} from '@tryghost/admin-x-framework/api/db';
+import {toast} from 'sonner';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {useQueryClient} from '@tanstack/react-query';
 
@@ -65,10 +66,7 @@ const MigrationOptions: React.FC = () => {
             onOk: async (modal) => {
                 try {
                     await deleteAllContent(null);
-                    showToast({
-                        type: 'success',
-                        title: 'All content deleted from database.'
-                    });
+                    toast.success('All content deleted from database.');
                     modal?.remove();
                     await client.refetchQueries();
                 } catch (e) {
diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/yaml-file-editor-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/yaml-file-editor-modal.tsx
index 275a085b607..76e38c8a40c 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs/yaml-file-editor-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs/yaml-file-editor-modal.tsx
@@ -2,9 +2,10 @@ import CodeEditor from '../../../code-editor';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useEffect, useMemo, useState} from 'react';
 import {APIError, JSONError} from '@tryghost/admin-x-framework/errors';
-import {ButtonGroup, Modal, showToast} from '@tryghost/admin-x-design-system';
+import {ButtonGroup, Modal} from '@tryghost/admin-x-design-system';
 import {Text} from '@tryghost/shade/primitives';
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
+import {toast} from 'sonner';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
 
 export interface YamlFileEditorModalProps {
@@ -111,10 +112,7 @@ const YamlFileEditorModal: React.FC<YamlFileEditorModalProps> = ({
             const file = new File([content], uploadFilename, {type: 'text/yaml'});
             await onUpload(file);
 
-            showToast({
-                type: 'success',
-                title: successMessage
-            });
+            toast.success(successMessage);
 
             closeModal();
         } catch (error) {
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx
index c4f6158cda0..cc964e36e0f 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx
@@ -6,7 +6,7 @@ import React, {useCallback, useEffect, useState} from 'react';
 import useFeatureFlag from '../../../../hooks/use-feature-flag';
 import useSettingGroup from '../../../../hooks/use-setting-group';
 import validator from 'validator';
-import {Button, ButtonGroup, ConfirmationModal, Form, Icon, LimitModal, PreviewModalContent, TextField, showToast} from '@tryghost/admin-x-design-system';
+import {Button, ButtonGroup, ConfirmationModal, Form, Icon, LimitModal, PreviewModalContent, TextField} from '@tryghost/admin-x-design-system';
 import {type ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {Field, FieldContent, FieldDescription, FieldLabel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea} from '@tryghost/shade/components';
 import {HostLimitError, useLimiter} from '../../../../hooks/use-limiter';
@@ -21,6 +21,7 @@ import {getSettingValue, getSettingValues} from '@tryghost/admin-x-framework/api
 import {hasSendingDomain, isManagedEmail, sendingDomain} from '@tryghost/admin-x-framework/api/config';
 import {renderReplyToEmail, renderSenderEmail} from '../../../../utils/newsletter-emails';
 import {textColorForBackgroundColor} from '@tryghost/color-utils';
+import {toast} from 'sonner';
 import {useGlobalData} from '../../../providers/global-data-provider';
 
 const ReplyToEmailField: React.FC<{
@@ -143,10 +144,7 @@ const Sidebar: React.FC<{
                     try {
                         await editNewsletter({...newsletter, status: 'archived'});
                         modal?.remove();
-                        showToast({
-                            type: 'success',
-                            message: 'Newsletter archived'
-                        });
+                        toast.success('Newsletter archived');
                     } catch (e) {
                         handleError(e);
                     }
@@ -176,10 +174,7 @@ const Sidebar: React.FC<{
                 onOk: async (modal) => {
                     await editNewsletter({...newsletter, status: 'active'});
                     modal?.remove();
-                    showToast({
-                        type: 'success',
-                        message: 'Newsletter reactivated'
-                    });
+                    toast.success('Newsletter reactivated');
                 }
             });
         }
@@ -795,11 +790,7 @@ const NewsletterDetailModalContent: React.FC<{newsletter: Newsletter; onlyOne: b
             }
 
             if (toastMessage) {
-                showToast({
-                    icon: 'email',
-                    message: toastMessage,
-                    type: 'info'
-                });
+                toast.info(toastMessage);
             }
         },
         onSaveError: handleError,
diff --git a/apps/admin-x-settings/src/components/settings/general/invite-user-modal.tsx b/apps/admin-x-settings/src/components/settings/general/invite-user-modal.tsx
index f62099f2001..50c9a960ed8 100644
--- a/apps/admin-x-settings/src/components/settings/general/invite-user-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/invite-user-modal.tsx
@@ -3,7 +3,8 @@ import validator from 'validator';
 import {APIError, ValidationError} from '@tryghost/admin-x-framework/errors';
 import {Field, FieldContent, FieldDescription, FieldError, FieldLabel, FieldLegend, FieldSeparator, FieldSet, RadioGroup, RadioGroupItem} from '@tryghost/shade/components';
 import {HostLimitError, useLimiter} from '../../../hooks/use-limiter';
-import {Modal, TextField, showToast} from '@tryghost/admin-x-design-system';
+import {Modal, TextField} from '@tryghost/admin-x-design-system';
+import {toast} from 'sonner';
 import {useAddInvite, useBrowseInvites} from '@tryghost/admin-x-framework/api/invites';
 import {useBrowseRoles} from '@tryghost/admin-x-framework/api/roles';
 import {useBrowseUsers} from '@tryghost/admin-x-framework/api/users';
@@ -128,11 +129,7 @@ const InviteUserModal = NiceModal.create(() => {
 
             setSaveState('saved');
 
-            showToast({
-                title: `Invitation sent`,
-                message: `${email}`,
-                type: 'success'
-            });
+            toast.success(`Invitation sent`, {description: `${email}`});
 
             modal.remove();
             updateRoute('staff?tab=invited');
@@ -157,11 +154,7 @@ const InviteUserModal = NiceModal.create(() => {
                     message = (<span>Check your Mailgun configuration.</span>);
                 }
             }
-            showToast({
-                title,
-                message,
-                type: 'error'
-            });
+            toast.error(title, {description: message});
             handleError(e, {withToast: false});
             return;
         }
diff --git a/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx b/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx
index 039ca633980..077eed36b91 100644
--- a/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx
@@ -9,7 +9,7 @@ import useStaffUsers from '../../../hooks/use-staff-users';
 import validator from 'validator';
 import {APIError} from '@tryghost/admin-x-framework/errors';
 import {Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Dropzone, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
-import {ConfirmationModal, Icon, LimitModal, Modal, showToast} from '@tryghost/admin-x-design-system';
+import {ConfirmationModal, Icon, LimitModal, Modal} from '@tryghost/admin-x-design-system';
 import {type ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {HostLimitError, useLimiter} from '../../../hooks/use-limiter';
 import {ImageUpload, ImageUploadAction, ImageUploadActions, ImageUploadDropzone, ImageUploadImage, ImageUploadPreview} from '@tryghost/shade/patterns';
@@ -19,6 +19,7 @@ import {SOCIAL_PLATFORM_CONFIGS, SOCIAL_PLATFORM_KEYS, getSocialValidationError}
 import {Text} from '@tryghost/shade/primitives';
 import {type User, canAccessSettings, hasAdminAccess, isAdminUser, isAuthorOrContributor, isEditorUser, isOwnerUser, useDeleteUser, useEditUser, useGetUserBySlug, useMakeOwner} from '@tryghost/admin-x-framework/api/users';
 import {getImageUrl, useUploadImage} from '@tryghost/admin-x-framework/api/images';
+import {toast} from 'sonner';
 import {useGlobalData} from '../../providers/global-data-provider';
 
 const validators: Record<string, (u: Partial<User>) => string> = {
@@ -70,7 +71,7 @@ export interface UserDetailProps {
     clearError: (key: keyof User) => void;
 }
 
-const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
+const UserDetailModalContent: React.FC<{user: User; onDeletingUserChange: (isDeleting: boolean) => void}> = ({user, onDeletingUserChange}) => {
     const {updateRoute, route} = useRouting();
 
     const getTabFromPath = (path: string): string => {
@@ -202,10 +203,7 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
                     await updateUser(updatedUserData);
                     setFormState(() => updatedUserData);
                     modal?.remove();
-                    showToast({
-                        title: _user.status === 'inactive' ? 'User un-suspended' : 'User suspended',
-                        type: 'success'
-                    });
+                    toast.success(_user.status === 'inactive' ? 'User un-suspended' : 'User suspended');
                 } catch (e) {
                     handleError(e);
                 }
@@ -225,16 +223,16 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
             okLabel: 'Delete user',
             okColor: 'red',
             onOk: async (modal) => {
+                onDeletingUserChange(true);
                 try {
                     await deleteUser(_user?.id);
                     modal?.remove();
                     mainModal?.remove();
                     navigateOnClose();
-                    showToast({
-                        title: 'User deleted',
-                        type: 'success'
-                    });
+                    // Let the destination route mount its toaster before publishing the success state.
+                    setTimeout(() => toast.success('User deleted'), 100);
                 } catch (e) {
+                    onDeletingUserChange(false);
                     handleError(e);
                 }
             }
@@ -251,10 +249,7 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
                 try {
                     await makeOwner(user.id);
                     modal?.remove();
-                    showToast({
-                        title: 'Ownership transferred',
-                        type: 'success'
-                    });
+                    toast.success('Ownership transferred');
                 } catch (e) {
                     handleError(e);
                 }
@@ -463,6 +458,7 @@ const UserDetailModal: React.FC<RoutingModalProps> = ({params}) => {
     const {currentUser} = useGlobalData();
     const {updateRoute} = useRouting();
     const handleError = useHandleError();
+    const [isDeletingUser, setIsDeletingUser] = useState(false);
 
     // Skip API call if it's the current user (we already have their data)
     const isCurrentUser = currentUser.slug === params?.slug;
@@ -502,15 +498,12 @@ const UserDetailModal: React.FC<RoutingModalProps> = ({params}) => {
     const notFoundHandledRef = useRef<string | null>(null);
 
     useEffect(() => {
-        if (!notFoundSlug || notFoundHandledRef.current === notFoundSlug) {
+        if (!notFoundSlug || isDeletingUser || notFoundHandledRef.current === notFoundSlug) {
             return;
         }
         notFoundHandledRef.current = notFoundSlug;
 
-        showToast({
-            type: 'error',
-            message: 'User not found'
-        });
+        toast.error('User not found');
 
         if (canAccessSettings(currentUser)) {
             // Replace the history entry so the back button doesn't return
@@ -519,9 +512,9 @@ const UserDetailModal: React.FC<RoutingModalProps> = ({params}) => {
         } else {
             updateRoute({isExternal: true, route: ''});
         }
-    }, [notFoundSlug, currentUser, updateRoute]);
+    }, [notFoundSlug, isDeletingUser, currentUser, updateRoute]);
 
-    return displayUser ? <UserDetailModalContent user={displayUser} /> : null;
+    return displayUser ? <UserDetailModalContent user={displayUser} onDeletingUserChange={setIsDeletingUser} /> : null;
 };
 
 export default NiceModal.create(UserDetailModal);
diff --git a/apps/admin-x-settings/src/components/settings/general/users.tsx b/apps/admin-x-settings/src/components/settings/general/users.tsx
index 39a08978ef6..f7d09c59515 100644
--- a/apps/admin-x-settings/src/components/settings/general/users.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/users.tsx
@@ -4,12 +4,13 @@ import clsx from 'clsx';
 import useQueryParams from '../../../hooks/use-query-params';
 import useStaffUsers from '../../../hooks/use-staff-users';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Avatar, NoValueLabel, NoValueLabelIcon, Separator, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TabsTriggerCount} from '@tryghost/shade/components';
-import {Button, showToast} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/admin-x-design-system';
 import {type User, hasAdminAccess, isContributorUser, isEditorUser} from '@tryghost/admin-x-framework/api/users';
 import {type UserInvite, useAddInvite, useDeleteInvite} from '@tryghost/admin-x-framework/api/invites';
 import {UserRoundX} from 'lucide-react';
 import {formatNumber} from '@tryghost/shade/utils';
 import {getSettingValue, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
+import {toast} from 'sonner';
 import {useGlobalData} from '../../providers/global-data-provider';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -140,11 +141,7 @@ const UserInviteActions: React.FC<{invite: UserInvite}> = ({invite}) => {
                     try {
                         setRevokeState('progress');
                         await deleteInvite(invite.id);
-                        showToast({
-                            title: `Invitation revoked`,
-                            message: invite.email,
-                            type: 'success'
-                        });
+                        toast.success(`Invitation revoked`, {description: invite.email});
                     } catch (e) {
                         handleError(e);
                     } finally {
@@ -165,11 +162,7 @@ const UserInviteActions: React.FC<{invite: UserInvite}> = ({invite}) => {
                             email: invite.email,
                             roleId: invite.role_id
                         });
-                        showToast({
-                            title: `Invitation resent`,
-                            message: invite.email,
-                            type: 'success'
-                        });
+                        toast.success(`Invitation resent`, {description: invite.email});
                     } catch (e) {
                         handleError(e);
                     } finally {
diff --git a/apps/admin-x-settings/src/components/settings/general/users/change-password-form.tsx b/apps/admin-x-settings/src/components/settings/general/users/change-password-form.tsx
index c2bc437e6e1..0acf3b743a9 100644
--- a/apps/admin-x-settings/src/components/settings/general/users/change-password-form.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/users/change-password-form.tsx
@@ -1,6 +1,7 @@
-import {Button, TextField, showToast} from '@tryghost/admin-x-design-system';
+import {Button, TextField} from '@tryghost/admin-x-design-system';
 import {type User, useUpdatePassword} from '@tryghost/admin-x-framework/api/users';
 import {ValidationError} from '@tryghost/admin-x-framework/errors';
+import {toast} from 'sonner';
 import {useEffect, useRef, useState} from 'react';
 import {useGlobalData} from '../../../providers/global-data-provider';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -236,10 +237,7 @@ const ChangePasswordForm: React.FC<{user: User}> = ({user}) => {
                             setSaveState('saved');
                         } catch (e) {
                             setSaveState('');
-                            showToast({
-                                type: 'error',
-                                title: e instanceof ValidationError ? e.message : `Couldn't update password. Please try again.`
-                            });
+                            toast.error(e instanceof ValidationError ? e.message : `Couldn't update password. Please try again.`);
                             handleError(e, {withToast: false});
                         }
                     }}
diff --git a/apps/admin-x-settings/src/components/settings/growth/explore/testimonials-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/explore/testimonials-modal.tsx
index 2f2ed9a56aa..ed1762b86ce 100644
--- a/apps/admin-x-settings/src/components/settings/growth/explore/testimonials-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/explore/testimonials-modal.tsx
@@ -4,8 +4,9 @@ import JoelWarner from '../../../../assets/images/joel-warner.png';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React from 'react';
 import {Avatar, Field, FieldError, FieldLabel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea} from '@tryghost/shade/components';
-import {Button, Form, Modal, showToast} from '@tryghost/admin-x-design-system';
+import {Button, Form, Modal} from '@tryghost/admin-x-design-system';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
+import {toast} from 'sonner';
 import {useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {useGlobalData} from '../../../providers/global-data-provider';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -62,10 +63,7 @@ const TestimonialsModal = NiceModal.create(() => {
                 throw new Error('Something went wrong, please try again later.');
             }
 
-            showToast({
-                message: 'Thank you for your testimonial!',
-                type: 'success'
-            });
+            toast.success('Thank you for your testimonial!');
 
             updateRoute('explore');
             modal.remove();
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/add-offer-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/add-offer-modal.tsx
index f9c99cf20e5..3d765b488ef 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/add-offer-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/add-offer-modal.tsx
@@ -1,15 +1,15 @@
 import PortalFrame from '../../membership/portal/portal-frame';
-import toast from 'react-hot-toast';
 import {Button} from '@tryghost/admin-x-design-system';
 import {type ErrorMessages, useForm} from '@tryghost/admin-x-framework/hooks';
 import {Field, FieldContent, FieldDescription, FieldError, FieldLabel, InputGroup, InputGroupAddon, InputGroupInput, RadioGroup, RadioGroupItem, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea} from '@tryghost/shade/components';
-import {Form, PreviewModalContent, TextField, showToast} from '@tryghost/admin-x-design-system';
+import {Form, PreviewModalContent, TextField} from '@tryghost/admin-x-design-system';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
 import {formatNumber} from '@tryghost/shade/utils';
 import {getHomepageUrl} from '@tryghost/admin-x-framework/api/site';
 import {getOfferPortalPreviewUrl, type offerPortalPreviewUrlTypes} from '../../../../utils/get-offers-portal-preview-url';
 import {getPaidActiveTiers, useBrowseTiers} from '@tryghost/admin-x-framework/api/tiers';
 import {getTiersCadences} from '../../../../utils/get-tiers-cadences';
+import {toast} from 'sonner';
 import {useAddOffer} from '@tryghost/admin-x-framework/api/offers';
 import {useBrowseOffers} from '@tryghost/admin-x-framework/api/offers';
 import {useEffect, useMemo, useState} from 'react';
@@ -685,12 +685,8 @@ const AddOfferModal = () => {
             validate();
             const isErrorsEmpty = Object.values(errors).every(error => !error);
             if (!isErrorsEmpty) {
-                toast.remove();
-                showToast({
-                    title: 'Can\'t save offer',
-                    type: 'info',
-                    message: 'Make sure you filled all required fields'
-                });
+                toast.dismiss();
+                toast.info('Can\'t save offer', {description: 'Make sure you filled all required fields'});
                 return;
             }
 
@@ -705,13 +701,9 @@ const AddOfferModal = () => {
                     message = e.data.errors[0].context || e.data.errors[0].message;
                 }
 
-                toast.remove();
+                toast.dismiss();
                 if (message) {
-                    showToast({
-                        title: 'Can\'t save offer',
-                        type: 'error',
-                        message: message || 'Please try again later'
-                    });
+                    toast.error('Can\'t save offer', {description: message || 'Please try again later'});
                 }
             }
         }}
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/edit-offer-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/edit-offer-modal.tsx
index ad748b48b4f..2dd9aeb2aee 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/edit-offer-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/edit-offer-modal.tsx
@@ -1,8 +1,7 @@
 import NiceModal from '@ebay/nice-modal-react';
 import PortalFrame from '../../membership/portal/portal-frame';
 import SettingsBreadcrumbs from '../../settings-breadcrumbs';
-import toast from 'react-hot-toast';
-import {Button, ConfirmationModal, Form, PreviewModalContent, TextField, showToast} from '@tryghost/admin-x-design-system';
+import {Button, ConfirmationModal, Form, PreviewModalContent, TextField} from '@tryghost/admin-x-design-system';
 import {type ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {Field, FieldLabel, Textarea} from '@tryghost/shade/components';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
@@ -11,6 +10,7 @@ import {createOfferRedemptionFilterUrl} from './offer-helpers';
 import {formatNumber} from '@tryghost/shade/utils';
 import {getHomepageUrl} from '@tryghost/admin-x-framework/api/site';
 import {getOfferPortalPreviewUrl, type offerPortalPreviewUrlTypes} from '../../../../utils/get-offers-portal-preview-url';
+import {toast} from 'sonner';
 import {useEffect, useState} from 'react';
 import {useGlobalData} from '../../../providers/global-data-provider';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -68,10 +68,7 @@ const Sidebar: React.FC<{
                             try {
                                 await editOffer({...offer, status: 'archived'});
                                 modal?.remove();
-                                showToast({
-                                    type: 'success',
-                                    title: 'Offer archived'
-                                });
+                                toast.success('Offer archived');
                                 updateRoute('offers/edit');
                             } catch (e) {
                                 handleError(e);
@@ -89,10 +86,7 @@ const Sidebar: React.FC<{
                             try {
                                 await editOffer({...offer, status: 'active'});
                                 modal?.remove();
-                                showToast({
-                                    type: 'success',
-                                    title: 'Offer reactivated'
-                                });
+                                toast.success('Offer reactivated');
                                 updateRoute('offers/edit');
                             } catch (e) {
                                 handleError(e);
@@ -297,13 +291,9 @@ const EditOfferModal: React.FC<{id: string}> = ({id}) => {
                     message = e.data.errors[0].context || e.data.errors[0].message;
                 }
 
-                toast.remove();
+                toast.dismiss();
                 if (message) {
-                    showToast({
-                        title: 'Can\'t save offer',
-                        type: 'error',
-                        message: 'Please try again later'
-                    });
+                    toast.error('Can\'t save offer', {description: 'Please try again later'});
                 }
             }
         }} /> : null;
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/edit-retention-offer-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/edit-retention-offer-modal.tsx
index d612739d5d8..0106f7ca3c3 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/edit-retention-offer-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/edit-retention-offer-modal.tsx
@@ -1,15 +1,15 @@
 import PortalFrame from '../../membership/portal/portal-frame';
 import SettingsBreadcrumbs from '../../settings-breadcrumbs';
-import toast from 'react-hot-toast';
 import {type ErrorMessages, useForm} from '@tryghost/admin-x-framework/hooks';
 import {Field, FieldContent, FieldDescription, FieldLabel, RadioGroup, RadioGroupItem, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Textarea} from '@tryghost/shade/components';
-import {Form, PreviewModalContent, TextField, showToast} from '@tryghost/admin-x-design-system';
+import {Form, PreviewModalContent, TextField} from '@tryghost/admin-x-design-system';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
 import {type Offer, useAddOffer, useBrowseOffers, useEditOffer, useInvalidateOffers} from '@tryghost/admin-x-framework/api/offers';
 import {createOfferRedemptionsFilterUrl, formatOfferTimestamp, generateRetentionOfferName} from './offer-helpers';
 import {formatNumber} from '@tryghost/shade/utils';
 import {getOfferPortalPreviewUrl, type offerPortalPreviewUrlTypes} from '../../../../utils/get-offers-portal-preview-url';
 import {getPaidActiveTiers, useBrowseTiers} from '@tryghost/admin-x-framework/api/tiers';
+import {toast} from 'sonner';
 import {useEffect, useMemo, useState} from 'react';
 import {useGlobalData} from '../../../providers/global-data-provider';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -431,12 +431,8 @@ const EditRetentionOfferModal: React.FC<{id: string}> = ({id}) => {
             message = error.data.errors[0].context || error.data.errors[0].message || message;
         }
 
-        toast.remove();
-        showToast({
-            title: 'Failed to save offer',
-            type: 'error',
-            message
-        });
+        toast.dismiss();
+        toast.error('Failed to save offer', {description: message});
     };
 
     const {formState, setFormState, updateForm, handleSave, saveState, okProps, errors, clearError} = useForm({
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/offers-index.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/offers-index.tsx
index 2563e9af7f8..fa9a9f18098 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/offers-index.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/offers-index.tsx
@@ -1,5 +1,5 @@
 import {Badge, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from '@tryghost/shade/components';
-import {Button, type ButtonProps, showToast} from '@tryghost/admin-x-design-system';
+import {Button, type ButtonProps} from '@tryghost/admin-x-design-system';
 import {ButtonGroup} from '@tryghost/admin-x-design-system';
 import {Icon} from '@tryghost/admin-x-design-system';
 import {Inline, Stack} from '@tryghost/shade/primitives';
@@ -10,6 +10,7 @@ import {type RetentionOffer, getRetentionOffers} from './offers-retention';
 import {type Tier, getPaidActiveTiers, useBrowseTiers} from '@tryghost/admin-x-framework/api/tiers';
 import {createOfferRedemptionFilterUrl, createOfferRedemptionsFilterUrl} from './offer-helpers';
 import {currencyToDecimal, getSymbol} from '../../../../utils/currency';
+import {toast} from 'sonner';
 import {useModal} from '@ebay/nice-modal-react';
 import {useOffersShowArchived, useSortingState} from '../../../providers/settings-app-provider';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -343,10 +344,7 @@ export const OffersIndexModal: React.FC = () => {
             color: 'green' as const,
             onClick: () => {
                 if (paidActiveTiers.length === 0) {
-                    showToast({
-                        type: 'info',
-                        title: 'You must have an active tier to create an offer.'
-                    });
+                    toast.info('You must have an active tier to create an offer.');
                 } else {
                     updateRoute('offers/new');
                 }
diff --git a/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal-confirm.tsx b/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal-confirm.tsx
index 48e7e8fe0c9..0ae5325aef4 100644
--- a/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal-confirm.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal-confirm.tsx
@@ -4,7 +4,8 @@ import React from 'react';
 import RecommendationDescriptionForm, {validateDescriptionForm} from './recommendation-description-form';
 import trackEvent from '../../../../utils/analytics';
 import {type EditOrAddRecommendation, useAddRecommendation} from '@tryghost/admin-x-framework/api/recommendations';
-import {Modal, dismissAllToasts, showToast} from '@tryghost/admin-x-design-system';
+import {Modal} from '@tryghost/admin-x-design-system';
+import {toast} from 'sonner';
 import {useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 
@@ -26,10 +27,7 @@ const AddRecommendationModalConfirm: React.FC<AddRecommendationModalProps> = ({r
         onSave: async (state) => {
             await addRecommendation(state);
             modal.remove();
-            showToast({
-                title: 'Recommendation added',
-                type: 'success'
-            });
+            toast.success('Recommendation added');
             trackEvent('Recommendation Added', {
                 oneClickSubscribe: state.one_click_subscribe
             });
@@ -106,14 +104,11 @@ const AddRecommendationModalConfirm: React.FC<AddRecommendationModalProps> = ({r
                 return;
             }
 
-            dismissAllToasts();
+            toast.dismiss();
             try {
                 await handleSave({force: true});
             } catch {
-                showToast({
-                    type: 'error',
-                    title: 'Something went wrong when adding this recommendation, please try again.'
-                });
+                toast.error('Something went wrong when adding this recommendation, please try again.');
             }
         }}
     >
diff --git a/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal.tsx
index 315ad5f0818..ee30dd23555 100644
--- a/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal.tsx
@@ -4,10 +4,11 @@ import React, {useEffect, useState} from 'react';
 import {AlreadyExistsError} from '@tryghost/admin-x-framework/errors';
 import {type EditOrAddRecommendation, useCheckRecommendation} from '@tryghost/admin-x-framework/api/recommendations';
 import {type ErrorMessages, useForm} from '@tryghost/admin-x-framework/hooks';
-import {Form, Modal, TextField, dismissAllToasts, showToast} from '@tryghost/admin-x-design-system';
+import {Form, Modal, TextField} from '@tryghost/admin-x-design-system';
 import {LoadingIndicator} from '@tryghost/shade/components';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
 import {formatUrl} from '../../../../utils/format-url';
+import {toast} from 'sonner';
 
 interface AddRecommendationModalProps {
     recommendation?: EditOrAddRecommendation,
@@ -124,17 +125,14 @@ const AddRecommendationModal: React.FC<RoutingModalProps & AddRecommendationModa
             return;
         }
 
-        dismissAllToasts();
+        toast.dismiss();
         try {
             if (await handleSave({force: true})) {
                 return;
             }
         } catch (e) {
             const message = e instanceof AlreadyExistsError ? e.message : 'Something went wrong while checking this URL, please try again.';
-            showToast({
-                type: 'error',
-                title: message
-            });
+            toast.error(message);
         }
 
         // If we have errors: close direct submit view
diff --git a/apps/admin-x-settings/src/components/settings/growth/recommendations/edit-recommendation-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/recommendations/edit-recommendation-modal.tsx
index 00647b929f3..d83bf4ead7f 100644
--- a/apps/admin-x-settings/src/components/settings/growth/recommendations/edit-recommendation-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/recommendations/edit-recommendation-modal.tsx
@@ -1,9 +1,10 @@
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React from 'react';
 import RecommendationDescriptionForm, {validateDescriptionForm} from './recommendation-description-form';
-import {ConfirmationModal, Modal, dismissAllToasts, showToast} from '@tryghost/admin-x-design-system';
+import {ConfirmationModal, Modal} from '@tryghost/admin-x-design-system';
 import {type Recommendation, useDeleteRecommendation, useEditRecommendation} from '@tryghost/admin-x-framework/api/recommendations';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
+import {toast} from 'sonner';
 import {useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 
 interface EditRecommendationModalProps {
@@ -52,11 +53,7 @@ const EditRecommendationModal: React.FC<RoutingModalProps & EditRecommendationMo
                         await deleteRecommendation(recommendation);
                         deleteModal?.remove();
                     } catch (e) {
-                        showToast({
-                            title: 'Failed to delete the recommendation',
-                            message: 'Please try again later.',
-                            type: 'error'
-                        });
+                        toast.error('Failed to delete the recommendation', {description: 'Please try again later.'});
                         handleError(e, {withToast: false});
                     }
                 }
@@ -81,15 +78,11 @@ const EditRecommendationModal: React.FC<RoutingModalProps & EditRecommendationMo
         title={'Edit recommendation'}
         stickyFooter
         onOk={async () => {
-            dismissAllToasts();
+            toast.dismiss();
             try {
                 await handleSave({force: true});
             } catch {
-                showToast({
-                    title: 'Something went wrong',
-                    type: 'error',
-                    message: 'Please try again later.'
-                });
+                toast.error('Something went wrong', {description: 'Please try again later.'});
             }
         }}
     >
diff --git a/apps/admin-x-settings/src/components/settings/membership/access.tsx b/apps/admin-x-settings/src/components/settings/membership/access.tsx
index 3b5c933f19c..418eab743f4 100644
--- a/apps/admin-x-settings/src/components/settings/membership/access.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/access.tsx
@@ -3,8 +3,9 @@ import TopLevelGroup from '../../top-level-group';
 import useSettingGroup from '../../../hooks/use-setting-group';
 import {Banner, Combobox, ComboboxContent, ComboboxTrigger, ComboboxValue, Field, FieldDescription, FieldError, FieldLabel, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, MultiSelectCombobox, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Button as ShadeButton} from '@tryghost/shade/components';
 import {RefreshCw} from 'lucide-react';
-import {SettingGroupContent, showToast} from '@tryghost/admin-x-design-system';
+import {SettingGroupContent} from '@tryghost/admin-x-design-system';
 import {getSettingValues, isSettingReadOnly, useRegenerateAccessCode} from '@tryghost/admin-x-framework/api/settings';
+import {toast} from 'sonner';
 import {useBrowseTiers} from '@tryghost/admin-x-framework/api/tiers';
 import {useGlobalData} from '../../providers/global-data-provider';
 import {useLimiter} from '../../../hooks/use-limiter';
@@ -167,10 +168,7 @@ const Access: React.FC<{ keywords: string[] }> = ({keywords}) => {
                 clearError('password');
             }
         } catch {
-            showToast({
-                type: 'error',
-                title: 'Could not regenerate access code'
-            });
+            toast.error('Could not regenerate access code');
         } finally {
             setIsRegenerating(false);
         }
diff --git a/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-modal.tsx b/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-modal.tsx
index 08249941548..d994040fbad 100644
--- a/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-modal.tsx
@@ -1,9 +1,10 @@
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React from 'react';
-import {Button, ConfirmationModal, Form, Icon, Modal, TextField, showToast} from '@tryghost/admin-x-design-system';
+import {Button, ConfirmationModal, Form, Icon, Modal, TextField} from '@tryghost/admin-x-design-system';
 import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Field, FieldDescription, FieldLabel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@tryghost/shade/components';
 import {ValidationError, getErrorMessage} from '@tryghost/admin-x-framework/errors';
 import {memberCustomFieldUserTypes, useCreateMemberCustomField, useDeleteMemberCustomField, useEditMemberCustomField, userTypeForField} from '@tryghost/admin-x-framework/api/member-custom-fields';
+import {toast} from 'sonner';
 import {useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import type {MemberCustomField} from '@tryghost/admin-x-framework/api/member-custom-fields';
 
@@ -100,9 +101,9 @@ const CustomFieldModal = NiceModal.create<{field?: MemberCustomField}>(({field})
                         // and only valid on an already-archived field.
                         await editField({key: field!.key, status: 'archived'});
                         archiveModal?.remove();
-                        showToast({type: 'success', title: 'Custom field archived'});
+                        toast.success('Custom field archived');
                     } catch (e) {
-                        showToast({type: 'error', title: 'Failed to archive the custom field'});
+                        toast.error('Failed to archive the custom field');
                         handleError(e, {withToast: false});
                     }
                 }
@@ -128,9 +129,9 @@ const CustomFieldModal = NiceModal.create<{field?: MemberCustomField}>(({field})
                     try {
                         await editField({key: field!.key, status: 'active'});
                         reactivateModal?.remove();
-                        showToast({type: 'success', title: 'Custom field reactivated'});
+                        toast.success('Custom field reactivated');
                     } catch (e) {
-                        showToast({type: 'error', title: 'Failed to reactivate the custom field'});
+                        toast.error('Failed to reactivate the custom field');
                         handleError(e, {withToast: false});
                     }
                 }
@@ -158,9 +159,9 @@ const CustomFieldModal = NiceModal.create<{field?: MemberCustomField}>(({field})
                 try {
                     await deleteField(field!.key);
                     deleteModal?.remove();
-                    showToast({type: 'success', title: 'Custom field deleted'});
+                    toast.success('Custom field deleted');
                 } catch (e) {
-                    showToast({type: 'error', title: 'Failed to delete the custom field'});
+                    toast.error('Failed to delete the custom field');
                     handleError(e, {withToast: false});
                 }
             }
diff --git a/apps/admin-x-settings/src/components/settings/membership/member-emails.tsx b/apps/admin-x-settings/src/components/settings/membership/member-emails.tsx
index ca7b8defbde..90f0bbb3d70 100644
--- a/apps/admin-x-settings/src/components/settings/membership/member-emails.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/member-emails.tsx
@@ -6,9 +6,10 @@ import WelcomeEmailModal from './member-emails/welcome-email-modal';
 import useQueryParams from '../../../hooks/use-query-params';
 import {APIError} from '@tryghost/admin-x-framework/errors';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Switch} from '@tryghost/shade/components';
-import {Button, ConfirmationModal, Icon, showToast} from '@tryghost/admin-x-design-system';
+import {Button, ConfirmationModal, Icon} from '@tryghost/admin-x-design-system';
 import {WELCOME_EMAIL_SLUGS, type WelcomeEmailType, getDefaultWelcomeEmailRecord, getDefaultWelcomeEmailValues} from './member-emails/default-welcome-email-values';
 import {checkStripeEnabled, getSettingValues} from '@tryghost/admin-x-framework/api/settings';
+import {toast} from 'sonner';
 import {useAddAutomatedEmail, useBrowseAutomatedEmails, useEditAutomatedEmail, useVerifyAutomatedEmailSender} from '@tryghost/admin-x-framework/api/automated-emails';
 import {useGlobalData} from '../../providers/global-data-provider';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -236,13 +237,13 @@ const MemberEmails: React.FC<{ keywords: string[] }> = ({keywords}) => {
         try {
             if (!existing) {
                 await createAutomatedEmail(emailType, 'active');
-                showToast({type: 'success', title: `${label} welcome email enabled`});
+                toast.success(`${label} welcome email enabled`);
             } else if (existing.status === 'active') {
                 await editAutomatedEmail({...existing, status: 'inactive'});
-                showToast({type: 'success', title: `${label} welcome email disabled`});
+                toast.success(`${label} welcome email disabled`);
             } else {
                 await editAutomatedEmail({...existing, status: 'active'});
-                showToast({type: 'success', title: `${label} welcome email enabled`});
+                toast.success(`${label} welcome email enabled`);
             }
         } catch (e) {
             handleError(e);
diff --git a/apps/admin-x-settings/src/components/settings/membership/stripe/stripe-connect-modal.tsx b/apps/admin-x-settings/src/components/settings/membership/stripe/stripe-connect-modal.tsx
index bd8ae6c840a..e81dba1c04b 100644
--- a/apps/admin-x-settings/src/components/settings/membership/stripe/stripe-connect-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/stripe/stripe-connect-modal.tsx
@@ -7,14 +7,14 @@ import StripeButton from '../../../stripe-button';
 import StripeLogo from '../../../../assets/images/stripe-emblem.svg';
 import StripeVerifiedBadge from '../../../../assets/images/stripe-verified.svg';
 import useSettingGroup from '../../../../hooks/use-setting-group';
-import {Button, ConfirmationModal, Form, LimitModal, Modal, TextField, showToast} from '@tryghost/admin-x-design-system';
+import {Button, ConfirmationModal, Form, LimitModal, Modal, TextField} from '@tryghost/admin-x-design-system';
 import {Field, FieldError, FieldLabel, Switch, Textarea} from '@tryghost/shade/components';
 import {HostLimitError, useLimiter} from '../../../../hooks/use-limiter';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
 import {Text} from '@tryghost/shade/primitives';
 import {checkStripeEnabled, getSettingValue, getSettingValues, useDeleteStripeSettings, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
-import {toast} from 'react-hot-toast';
+import {toast} from 'sonner';
 import {useBrowseMembers} from '@tryghost/admin-x-framework/api/members';
 import {useBrowseTiers, useEditTier} from '@tryghost/admin-x-framework/api/tiers';
 import {useGlobalData} from '../../../providers/global-data-provider';
@@ -221,16 +221,12 @@ const Direct: React.FC<{onClose: () => void}> = ({onClose}) => {
 
     const onSubmit = async () => {
         try {
-            toast.remove();
+            toast.dismiss();
             await handleSave();
             onClose();
         } catch (e) {
             if (e instanceof JSONError) {
-                showToast({
-                    title: 'Failed to save settings',
-                    type: 'error',
-                    message: 'Check you copied both keys correctly'
-                });
+                toast.error('Failed to save settings', {description: 'Check you copied both keys correctly'});
                 return;
             }
 
diff --git a/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-modal.tsx b/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-modal.tsx
index f5eceb8e699..0d996984389 100644
--- a/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-modal.tsx
@@ -5,7 +5,7 @@ import useCurrencyInput from '../../../../hooks/use-currency-input';
 import useSettingGroup from '../../../../hooks/use-setting-group';
 import useSortableIndexedList from '../../../../hooks/use-sortable-indexed-list';
 import useUrlInput from '../../../../hooks/use-url-input';
-import {Button, type ButtonProps, ConfirmationModal, Form, Icon, Modal, TextField, showToast} from '@tryghost/admin-x-design-system';
+import {Button, type ButtonProps, ConfirmationModal, Form, Icon, Modal, TextField} from '@tryghost/admin-x-design-system';
 import {Combobox, ComboboxContent, ComboboxTrigger, ComboboxValue, Field, FieldDescription, FieldError, FieldLabel, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, MultiSelectCombobox, SortableList, Switch} from '@tryghost/shade/components';
 import {type ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
@@ -13,6 +13,7 @@ import {Text} from '@tryghost/shade/primitives';
 import {type Tier, useAddTier, useBrowseTiers, useEditTier} from '@tryghost/admin-x-framework/api/tiers';
 import {currencies, currencySelectGroups, validateCurrencyAmount} from '../../../../utils/currency';
 import {getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
+import {toast} from 'sonner';
 
 export type TierFormState = Partial<Omit<Tier, 'trial_days'>> & {
     trial_days: string;
@@ -161,10 +162,7 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
                 onOk: (confirmModal) => {
                     updateTier({...tier, active: !tier.active});
                     confirmModal?.remove();
-                    showToast({
-                        type: 'success',
-                        title: `Tier ${tier.active ? 'archived' : 'reactivated'}`
-                    });
+                    toast.success(`Tier ${tier.active ? 'archived' : 'reactivated'}`);
                 }
             });
         }
diff --git a/apps/admin-x-settings/src/components/settings/site/announcement-bar-modal.tsx b/apps/admin-x-settings/src/components/settings/site/announcement-bar-modal.tsx
index ad2188e90cf..de14be5fe71 100644
--- a/apps/admin-x-settings/src/components/settings/site/announcement-bar-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/announcement-bar-modal.tsx
@@ -5,11 +5,12 @@ import NiceModal from '@ebay/nice-modal-react';
 import React, {useRef, useState} from 'react';
 import useSettingGroup from '../../../hooks/use-setting-group';
 import {Checkbox, Field, FieldGroup, FieldLabel, FieldLegend, FieldSet, Tabs, TabsList, TabsTrigger, ToggleGroup, ToggleGroupItem} from '@tryghost/shade/components';
-import {DesktopChrome, Form, MobileChrome, PreviewModalContent, showToast} from '@tryghost/admin-x-design-system';
+import {DesktopChrome, Form, MobileChrome, PreviewModalContent} from '@tryghost/admin-x-design-system';
 import {Laptop, Smartphone} from 'lucide-react';
 import {debounce} from '../../../utils/debounce';
 import {getHomepageUrl} from '@tryghost/admin-x-framework/api/site';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
+import {toast} from 'sonner';
 import {useBrowsePosts} from '@tryghost/admin-x-framework/api/posts';
 import {useGlobalData} from '../../providers/global-data-provider';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -237,10 +238,7 @@ const AnnouncementBarModal: React.FC = () => {
         titleHeadingLevel={5}
         onOk={async () => {
             if (!(await handleSave({fakeWhenUnchanged: true}))) {
-                showToast({
-                    type: 'error',
-                    message: 'An error occurred while saving your changes. Please try again.'
-                });
+                toast.error('An error occurred while saving your changes. Please try again.');
             }
         }}
     />;
diff --git a/apps/admin-x-settings/src/components/settings/site/theme-modal.tsx b/apps/admin-x-settings/src/components/settings/site/theme-modal.tsx
index 44b4008af43..0ca043aab16 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme-modal.tsx
@@ -5,11 +5,12 @@ import OfficialThemes from './theme/official-themes';
 import React, {useEffect, useState} from 'react';
 import ThemeInstalledModal from './theme/theme-installed-modal';
 import ThemePreview from './theme/theme-preview';
-import {Button, ConfirmationModal, LimitModal, Modal, PageHeader, showToast} from '@tryghost/admin-x-design-system';
+import {Button, ConfirmationModal, LimitModal, Modal, PageHeader} from '@tryghost/admin-x-design-system';
 import {Dropzone, Tabs, TabsList, TabsTrigger} from '@tryghost/shade/components';
 import {type InstalledTheme, type Theme, type ThemesInstallResponseType, isDefaultOrLegacyTheme, useActivateTheme, useBrowseThemes, useInstallTheme, useUploadTheme} from '@tryghost/admin-x-framework/api/themes';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
 import {type OfficialTheme} from '../../providers/settings-app-provider';
+import {toast} from 'sonner';
 import {useCheckThemeLimitError} from '../../../hooks/use-check-theme-limit-error';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -369,11 +370,7 @@ const ChangeThemeModal: React.FC<ChangeThemeModalProps> = ({source, themeRef}) =
                             data = await installTheme(themeRef);
                             if (data?.themes[0]) {
                                 await activateTheme(data.themes[0].name);
-                                showToast({
-                                    title: 'Theme activated',
-                                    type: 'success',
-                                    message: <div><span className='capitalize'>{data.themes[0].name}</span> is now your active theme</div>
-                                });
+                                toast.success('Theme activated', {description: <div><span className='capitalize'>{data.themes[0].name}</span> is now your active theme</div>});
                             }
                             confirmModal?.remove();
                             updateRoute('');
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsx b/apps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsx
index 6a944b2899e..7d19f34878f 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsx
@@ -3,11 +3,12 @@ import NiceModal from '@ebay/nice-modal-react';
 import React from 'react';
 import useCustomFonts from '../../../../hooks/use-custom-fonts';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent} from '@tryghost/shade/components';
-import {Button, ConfirmationModal, LimitModal, ModalPage, showToast} from '@tryghost/admin-x-design-system';
+import {Button, ConfirmationModal, LimitModal, ModalPage} from '@tryghost/admin-x-design-system';
 import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from '@tryghost/shade/components';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
 import {type Theme, isActiveTheme, isDefaultTheme, isDeletableTheme, isLegacyTheme, useActivateTheme, useDeleteTheme} from '@tryghost/admin-x-framework/api/themes';
 import {downloadFile, getGhostPaths} from '@tryghost/admin-x-framework/helpers';
+import {toast} from 'sonner';
 import {useCheckThemeLimitError} from '../../../../hooks/use-check-theme-limit-error';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -62,11 +63,7 @@ const ThemeActions: React.FC<ThemeActionProps> = ({
         try {
             await activateTheme(theme.name);
             refreshActiveThemeData();
-            showToast({
-                title: 'Theme activated',
-                type: 'success',
-                message: <div><span className='capitalize'>{theme.name}</span> is now your active theme</div>
-            });
+            toast.success('Theme activated', {description: <div><span className='capitalize'>{theme.name}</span> is now your active theme</div>});
         } catch (e) {
             let fatalErrors: FatalErrors | null = null;
             if (e instanceof JSONError && e.response?.status === 422 && e.data?.errors) {
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/theme-code-editor-modal.tsx b/apps/admin-x-settings/src/components/settings/site/theme/theme-code-editor-modal.tsx
index fa0034900aa..2a179ba8dbf 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/theme-code-editor-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/theme-code-editor-modal.tsx
@@ -22,7 +22,8 @@ import {
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
 import {oneDark} from '@codemirror/theme-one-dark';
 import {search} from '@codemirror/search';
-import {showToast} from '@tryghost/admin-x-design-system';
+
+import {toast} from 'sonner';
 import {useBrowseThemes} from '@tryghost/admin-x-framework/api/themes';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {useQueryClient} from '@tanstack/react-query';
@@ -500,19 +501,12 @@ const ThemeCodeEditorModal: React.FC<{themeName: string}> = ({themeName}) => {
         }
 
         if (!isEditablePath(nextPath)) {
-            showToast({
-                type: 'error',
-                title: 'Only text files can be created here',
-                message: 'Use a text-based theme file extension such as .hbs, .css, .js, or .json.'
-            });
+            toast.error('Only text files can be created here', {description: 'Use a text-based theme file extension such as .hbs, .css, .js, or .json.'});
             return;
         }
 
         if (currentFiles[nextPath]) {
-            showToast({
-                type: 'error',
-                title: 'File already exists'
-            });
+            toast.error('File already exists');
             return;
         }
 
@@ -558,27 +552,17 @@ const ThemeCodeEditorModal: React.FC<{themeName: string}> = ({themeName}) => {
             const fileToRename = currentFiles[selectedNode.path];
 
             if (!isEditablePath(nextPath) && fileToRename.editable) {
-                showToast({
-                    type: 'error',
-                    title: 'Text files must keep a text file extension'
-                });
+                toast.error('Text files must keep a text file extension');
                 return;
             }
 
             if (wouldRenameBinaryFileToEditable(fileToRename, nextPath)) {
-                showToast({
-                    type: 'error',
-                    title: 'Binary files cannot be renamed to a text file',
-                    message: 'Rename this file with a non-text extension to keep its contents intact.'
-                });
+                toast.error('Binary files cannot be renamed to a text file', {description: 'Rename this file with a non-text extension to keep its contents intact.'});
                 return;
             }
 
             if (currentFiles[nextPath]) {
-                showToast({
-                    type: 'error',
-                    title: 'A file with that name already exists'
-                });
+                toast.error('A file with that name already exists');
                 return;
             }
 
@@ -598,20 +582,14 @@ const ThemeCodeEditorModal: React.FC<{themeName: string}> = ({themeName}) => {
         const nextDirectoryPath = `${nextPath}/`;
 
         if (nextDirectoryPath.startsWith(selectedNode.path)) {
-            showToast({
-                type: 'error',
-                title: 'A folder cannot be renamed inside itself'
-            });
+            toast.error('A folder cannot be renamed inside itself');
             return;
         }
 
         const conflictingPath = Object.keys(currentFiles).find(path => path.startsWith(nextDirectoryPath));
 
         if (conflictingPath) {
-            showToast({
-                type: 'error',
-                title: 'A folder with that path already exists'
-            });
+            toast.error('A folder with that path already exists');
             return;
         }
 
@@ -719,19 +697,12 @@ const ThemeCodeEditorModal: React.FC<{themeName: string}> = ({themeName}) => {
         }
 
         if (!THEME_NAME_PATTERN.test(nextName)) {
-            showToast({
-                type: 'error',
-                title: 'Invalid theme name',
-                message: 'Use 1-64 characters, starting with a letter or number. Allowed: letters, numbers, dashes, and underscores.'
-            });
+            toast.error('Invalid theme name', {description: 'Use 1-64 characters, starting with a letter or number. Allowed: letters, numbers, dashes, and underscores.'});
             return null;
         }
 
         if (isDefaultThemeName(nextName)) {
-            showToast({
-                type: 'error',
-                title: 'Built-in themes cannot be overwritten'
-            });
+            toast.error('Built-in themes cannot be overwritten');
             return null;
         }
 
@@ -744,10 +715,7 @@ const ThemeCodeEditorModal: React.FC<{themeName: string}> = ({themeName}) => {
         }
 
         if (changes.length === 0) {
-            showToast({
-                type: 'info',
-                title: 'No changes to save'
-            });
+            toast.info('No changes to save');
             return;
         }
 
@@ -821,11 +789,7 @@ const ThemeCodeEditorModal: React.FC<{themeName: string}> = ({themeName}) => {
                 const serverError = (data as {errors?: Array<UploadSizeLimitError>} | null)?.errors?.[0];
 
                 if (serverError?.code && UPLOAD_SIZE_LIMIT_TITLES[serverError.code]) {
-                    showToast({
-                        type: 'error',
-                        title: UPLOAD_SIZE_LIMIT_TITLES[serverError.code],
-                        message: buildUploadSizeLimitMessage(serverError)
-                    });
+                    toast.error(UPLOAD_SIZE_LIMIT_TITLES[serverError.code], {description: buildUploadSizeLimitMessage(serverError)});
                     return;
                 }
 
@@ -852,11 +816,7 @@ const ThemeCodeEditorModal: React.FC<{themeName: string}> = ({themeName}) => {
                     installedTheme: uploadedTheme
                 });
             } else {
-                showToast({
-                    type: 'success',
-                    title: 'Theme saved',
-                    message: <div><span className='capitalize'>{uploadedTheme.name}</span> has been updated.</div>
-                });
+                toast.success('Theme saved', {description: <div><span className='capitalize'>{uploadedTheme.name}</span> has been updated.</div>});
             }
         } catch (error) {
             handleError(error);
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/theme-installed-modal.tsx b/apps/admin-x-settings/src/components/settings/site/theme/theme-installed-modal.tsx
index 36ec458e786..49970d66d49 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/theme-installed-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/theme-installed-modal.tsx
@@ -1,10 +1,11 @@
 import NiceModal from '@ebay/nice-modal-react';
 import React, {type ReactNode} from 'react';
 import useCustomFonts from '../../../../hooks/use-custom-fonts';
-import {ConfirmationModalContent, showToast} from '@tryghost/admin-x-design-system';
+import {ConfirmationModalContent} from '@tryghost/admin-x-design-system';
 import {type InstalledTheme, useActivateTheme} from '@tryghost/admin-x-framework/api/themes';
 import {OutcomeBanner, ThemeValidationDetailsDisclosure, getIssuesFromInstalledTheme} from './theme-validation-details';
 import {getHomepageUrl, useBrowseSite} from '@tryghost/admin-x-framework/api/site';
+import {toast} from 'sonner';
 import {useBrowseConfig} from '@tryghost/admin-x-framework/api/config';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
 
@@ -79,11 +80,7 @@ const ThemeInstalledModal: React.FC<{
                     const updatedTheme = resData.themes[0];
                     refreshActiveThemeData();
 
-                    showToast({
-                        title: 'Theme activated',
-                        type: 'success',
-                        message: <div><span className='capitalize'>{updatedTheme.name}</span> is now your active theme.</div>
-                    });
+                    toast.success('Theme activated', {description: <div><span className='capitalize'>{updatedTheme.name}</span> is now your active theme.</div>});
                 } catch (e) {
                     handleError(e);
                 }
diff --git a/apps/admin-x-settings/src/main-content.tsx b/apps/admin-x-settings/src/main-content.tsx
index b56e02d19c4..503e63e23e9 100644
--- a/apps/admin-x-settings/src/main-content.tsx
+++ b/apps/admin-x-settings/src/main-content.tsx
@@ -6,7 +6,7 @@ import {DirtyConfirmDialog, useDirtyConfirmation} from '@tryghost/shade/patterns
 import {type ReactNode, useEffect} from 'react';
 import {Text} from '@tryghost/shade/primitives';
 import {canAccessSettings, isEditorUser} from '@tryghost/admin-x-framework/api/users';
-import {toast} from 'react-hot-toast';
+import {toast} from 'sonner';
 import {topLevelBackdropClasses} from '@tryghost/admin-x-design-system';
 import {useGlobalData} from './components/providers/global-data-provider';
 import {useGlobalDirtyState} from '@tryghost/shade/utils';
@@ -45,6 +45,11 @@ const MainContent: React.FC = () => {
         return Boolean(document.querySelector(OPEN_SHADE_MODAL_SELECTOR));
     };
 
+    useEffect(() => {
+        // Reset any toasts that may have been left open before entering Settings.
+        toast.dismiss();
+    }, []);
+
     useEffect(() => {
         const handleKeyDown = (event: KeyboardEvent) => {
             if (event.key === 'Escape') {
@@ -66,11 +71,6 @@ const MainContent: React.FC = () => {
         };
     }, [confirm, isDirty]);
 
-    useEffect(() => {
-        // resets any toasts that may have been left open on initial load
-        toast.remove();
-    }, []);
-
     // Contributors/Authors only see their profile modal (rendered via routing)
     // Don't render the main settings content for them
     if (!canAccessSettings(currentUser)) {
diff --git a/apps/admin/src/settings/general/staff-actions.acceptance.test.tsx b/apps/admin/src/settings/general/staff-actions.acceptance.test.tsx
index 0a10e4ffefb..1c344726c8e 100644
--- a/apps/admin/src/settings/general/staff-actions.acceptance.test.tsx
+++ b/apps/admin/src/settings/general/staff-actions.acceptance.test.tsx
@@ -50,6 +50,7 @@ describe("Staff actions", () => {
         await settingsScreen.confirmationModal().getByRole("button", {name: "Delete user"}).click();
 
         await expect.element(settingsScreen.successToast()).toHaveTextContent("User deleted");
+        await expect(settingsScreen.notification("User not found")).toHaveCount(0);
         await expect(settingsScreen.userDetailModal()).toHaveCount(0);
         await expect(settingsScreen.users().getByText(author.email, {exact: true})).toHaveCount(0);
         expect(deleteApi.requests).toHaveLength(1);
diff --git a/apps/admin/src/settings/offers.screen.ts b/apps/admin/src/settings/offers.screen.ts
index 3d5b46400c4..dd91ae2f75b 100644
--- a/apps/admin/src/settings/offers.screen.ts
+++ b/apps/admin/src/settings/offers.screen.ts
@@ -27,7 +27,7 @@ export const offersScreen = {
     selectOptions: () => page.getByRole("option"),
     selectOption: (label: string) => page.getByRole("option").filter({ hasText: label }),
     portalPreview: () => page.getByTestId(testIds.portalPreview),
-    errorToast: () => page.getByTestId(testIds.toastError),
+    errorToast: () => page.getByRole("region", { name: /Notifications/ }).getByRole("listitem"),
 
     /** Open the offers list modal from the Growth section's button. */
     async openListModal(): Promise<void> {
diff --git a/apps/admin/src/settings/settings.screen.ts b/apps/admin/src/settings/settings.screen.ts
index 9692e3c7caf..0ef66f770cb 100644
--- a/apps/admin/src/settings/settings.screen.ts
+++ b/apps/admin/src/settings/settings.screen.ts
@@ -1,6 +1,8 @@
 import { page } from "vitest/browser";
 import * as sel from "@tryghost/test-data/selectors/settings";
 
+const toast = () => page.getByRole("region", { name: /Notifications/ }).getByRole("listitem");
+
 /** Settings locators and gestures shared by the acceptance batches; no assertions. */
 export const settingsScreen = {
     section: (testId: string) => page.getByTestId(testId),
@@ -20,8 +22,8 @@ export const settingsScreen = {
     seoTabView: () => page.getByTestId(sel.seoTabView),
     selectOption: (name: string) => page.getByRole("option").filter({ hasText: name }),
     selectOptionExact: (name: string) => page.getByRole("option", { name: new RegExp(`^${name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?:\\s|$)`) }),
-    errorToast: () => page.getByTestId(sel.toastError),
-    successToast: () => page.getByTestId(sel.toastSuccess),
+    errorToast: toast,
+    successToast: toast,
     inviteUserModal: () => page.getByTestId(sel.inviteUserModal),
     limitModal: () => page.getByTestId(sel.limitModal),
     enableNewsletters: () => page.getByTestId(sel.enableNewsletters),
@@ -33,7 +35,8 @@ export const settingsScreen = {
     mailgun: () => page.getByTestId(sel.mailgun),
     addNewsletterModal: () => page.getByTestId(sel.addNewsletterModal),
     newsletterModal: () => page.getByTestId(sel.newsletterModal),
-    infoToast: () => page.getByTestId(sel.toastInfo),
+    infoToast: toast,
+    notification: (text: string) => page.getByRole("region", { name: /Notifications/ }).getByText(text, { exact: true }),
     access: () => page.getByTestId(sel.access),
     customFields: () => page.getByTestId(sel.customFields),
     customFieldModal: () => page.getByTestId(sel.customFieldModal),
diff --git a/apps/shade/src/components/patterns/dirty-confirm-dialog.tsx b/apps/shade/src/components/patterns/dirty-confirm-dialog.tsx
index f7db4db99b8..4b48ea5159f 100644
--- a/apps/shade/src/components/patterns/dirty-confirm-dialog.tsx
+++ b/apps/shade/src/components/patterns/dirty-confirm-dialog.tsx
@@ -101,7 +101,7 @@ export function DirtyConfirmDialog({
                     <AlertDialogCancel asChild>
                         <Button variant='outline'>Stay</Button>
                     </AlertDialogCancel>
-                    <AlertDialogAction asChild>
+                    <AlertDialogAction className='bg-destructive text-destructive-foreground hover:bg-destructive/90' asChild>
                         <Button variant='destructive' onClick={onConfirm}>Leave</Button>
                     </AlertDialogAction>
                 </AlertDialogFooter>
diff --git a/apps/shade/src/providers/shade-provider.tsx b/apps/shade/src/providers/shade-provider.tsx
index 786f1753b12..ed10d88cfd8 100644
--- a/apps/shade/src/providers/shade-provider.tsx
+++ b/apps/shade/src/providers/shade-provider.tsx
@@ -42,6 +42,7 @@ const ToasterPortal = () => {
         ? createPortal(
             <div className={SHADE_APP_NAMESPACES} style={{width: 'unset', height: 'unset'}}>
                 <Toaster
+                    duration={5000}
                     icons={{
                         error: <Icon.ErrorFill className='text-red' />,
                         success: <Icon.SuccessFill className='text-green' />,
@@ -59,6 +60,7 @@ const ToasterPortal = () => {
                             maxWidth: '290px'
                         }
                     }}
+                    closeButton
                 />
             </div>,
             document.body
diff --git a/apps/shade/test/unit/components/patterns/dirty-confirm-dialog.test.tsx b/apps/shade/test/unit/components/patterns/dirty-confirm-dialog.test.tsx
index bfc722dba6b..0abba392790 100644
--- a/apps/shade/test/unit/components/patterns/dirty-confirm-dialog.test.tsx
+++ b/apps/shade/test/unit/components/patterns/dirty-confirm-dialog.test.tsx
@@ -43,7 +43,12 @@ describe('DirtyConfirmDialog', () => {
         render(<TestHarness dirty={true} onLeave={onLeave} />);
 
         fireEvent.click(screen.getByRole('button', {name: 'Navigate away'}));
-        fireEvent.click(screen.getByRole('button', {name: 'Leave'}));
+        const leaveButton = screen.getByRole('button', {name: 'Leave'});
+
+        assert.match(leaveButton.className, /bg-destructive/);
+        assert.doesNotMatch(leaveButton.className, /bg-primary/);
+
+        fireEvent.click(leaveButton);
 
         assert.equal(onLeave.mock.calls.length, 1);
         assert.equal(screen.queryByRole('alertdialog'), null);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3cdd7c86ef1..1c64fe6c643 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -339,9 +339,6 @@ catalogs:
     react-dom:
       specifier: 18.3.1
       version: 18.3.1
-    react-hot-toast:
-      specifier: 2.6.0
-      version: 2.6.0
     react-router:
       specifier: 7.18.1
       version: 7.18.1
@@ -865,9 +862,6 @@ importers:
       clsx:
         specifier: 'catalog:'
         version: 2.1.1
-      react-hot-toast:
-        specifier: 'catalog:'
-        version: 2.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     devDependencies:
       '@internal/cfg-eslint-react':
         specifier: workspace:*
@@ -989,12 +983,12 @@ importers:
       react-dom:
         specifier: 'catalog:'
         version: 18.3.1(react@18.3.1)
-      react-hot-toast:
-        specifier: 'catalog:'
-        version: 2.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-router:
         specifier: 'catalog:'
         version: 7.18.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      sonner:
+        specifier: 'catalog:'
+        version: 2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     devDependencies:
       '@internal/cfg-eslint-react':
         specifier: workspace:*
@@ -1134,9 +1128,6 @@ importers:
       react-dom:
         specifier: 'catalog:'
         version: 18.3.1(react@18.3.1)
-      react-hot-toast:
-        specifier: 'catalog:'
-        version: 2.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       semver:
         specifier: 'catalog:'
         version: 7.8.5
@@ -15187,11 +15178,6 @@ packages:
   globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
 
-  goober@2.1.19:
-    resolution: {integrity: sha512-U7veizMqxyKlM58+Z5j2ngJBH/r9siDmxpvNxSw0PylF6WQvrASJEZrxh1hidRBJc2jqoBVSyOban5u8m+6Rxg==}
-    peerDependencies:
-      csstype: ^3.0.10
-
   google-caja-bower@https://codeload.github.com/acburdine/google-caja-bower/tar.gz/275cb75249f038492094a499756a73719ae071fd:
     resolution: {gitHosted: true, integrity: sha512-mmCXdxGKGKDznjgkNzVqzTslaldslk5KMb/A7l8rxWnqyxzwsdPhuBJ6oT1Kh/Y3k4jN54ISee/2AgjFyCBxYw==, tarball: https://codeload.github.com/acburdine/google-caja-bower/tar.gz/275cb75249f038492094a499756a73719ae071fd}
     version: 6011.0.0
@@ -19909,13 +19895,6 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
 
-  react-hot-toast@2.6.0:
-    resolution: {integrity: sha512-bH+2EBMZ4sdyou/DPrfgIouFpcRLCJ+HoCA32UoAYHn6T3Ur5yfcDCeSr5mwldl6pFOsiocmrXMuoCJ1vV8bWg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      react: '>=16'
-      react-dom: '>=16'
-
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -37542,10 +37521,6 @@ snapshots:
 
   globrex@0.1.2: {}
 
-  goober@2.1.19(csstype@3.2.3):
-    dependencies:
-      csstype: 3.2.3
-
   google-caja-bower@https://codeload.github.com/acburdine/google-caja-bower/tar.gz/275cb75249f038492094a499756a73719ae071fd: {}
 
   gopd@1.2.0: {}
@@ -43467,13 +43442,6 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  react-hot-toast@2.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      csstype: 3.2.3
-      goober: 2.1.19(csstype@3.2.3)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
   react-is@16.13.1: {}
 
   react-is@17.0.2: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 80d8c324126..381b90715f6 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -148,7 +148,6 @@ catalog:
   preact: ^10.29.2
   react: 18.3.1
   react-dom: 18.3.1
-  react-hot-toast: 2.6.0
   react-router: 7.18.1
   semver: 7.8.5
   sinon: 22.0.0

From 46d469f38750073a11920d0156287c04be80acd7 Mon Sep 17 00:00:00 2001
From: "tryghost-renovate[bot]"
 <269725441+tryghost-renovate[bot]@users.noreply.github.com>
Date: Thu, 23 Jul 2026 00:57:22 +0000
Subject: [PATCH 2/6] Update tryghost/actions digest to eee499f (#29469)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [tryghost/actions](https://redirect.github.com/tryghost/actions)
([changelog](https://redirect.github.com/tryghost/actions/compare/3ab34d3d69687764be21eba3768f51f4ecc40ddd..eee499fcb6bc0efc75ba43f651282b95a96102b0))
| action | digest | `3ab34d3` → `eee499f` |

---

### Configuration

📅 **Schedule**: (in timezone Etc/UTC)

- Branch creation
  - Only on Sunday and Saturday (`* * * * 0,6`)
- Between 11:00 PM and 11:59 PM, Monday through Friday (`* 23 * * 1-5`)
- Between 12:00 AM and 04:59 AM, Monday through Saturday (`* 0-4 * *
1-6`)
- Automerge
  - Only on Sunday and Saturday (`* * * * 0,6`)
- Between 11:00 PM and 11:59 PM, Monday through Friday (`* 23 * * 1-5`)
- Between 12:00 AM and 04:59 AM, Monday through Saturday (`* 0-4 * *
1-6`)

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR is behind base branch, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://redirect.github.com/renovatebot/renovate).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0My4yNzIuNSIsInVwZGF0ZWRJblZlciI6IjQzLjI3Mi42IiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119-->

Co-authored-by: tryghost-renovate[bot] <269725441+tryghost-renovate[bot]@users.noreply.github.com>
---
 .github/workflows/ci.yml            | 20 ++++++++++----------
 .github/workflows/label-actions.yml |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index a247227c79d..19ed61b0519 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -372,7 +372,7 @@ jobs:
       - name: Lint boundaries
         run: pnpm nx run ghost-monorepo:lint:boundaries
 
-      - uses: tryghost/actions/actions/slack-build@3ab34d3d69687764be21eba3768f51f4ecc40ddd # main
+      - uses: tryghost/actions/actions/slack-build@eee499fcb6bc0efc75ba43f651282b95a96102b0 # main
         if: failure() && github.event_name == 'push' && github.ref == 'refs/heads/main'
         with:
           status: ${{ job.status }}
@@ -438,7 +438,7 @@ jobs:
           name: admin-coverage
           path: apps/*/coverage/cobertura-coverage.xml
 
-      - uses: tryghost/actions/actions/slack-build@3ab34d3d69687764be21eba3768f51f4ecc40ddd # main
+      - uses: tryghost/actions/actions/slack-build@eee499fcb6bc0efc75ba43f651282b95a96102b0 # main
         if: failure() && github.event_name == 'push' && github.ref == 'refs/heads/main'
         with:
           status: ${{ job.status }}
@@ -515,7 +515,7 @@ jobs:
             exit 1
           fi
 
-      - uses: tryghost/actions/actions/slack-build@3ab34d3d69687764be21eba3768f51f4ecc40ddd # main
+      - uses: tryghost/actions/actions/slack-build@eee499fcb6bc0efc75ba43f651282b95a96102b0 # main
         if: failure() && github.event_name == 'push' && github.ref == 'refs/heads/main'
         with:
           status: ${{ job.status }}
@@ -664,7 +664,7 @@ jobs:
             ghost/*/coverage-e2e/cobertura-coverage.xml
             ghost/*/coverage-integration/cobertura-coverage.xml
 
-      - uses: tryghost/actions/actions/slack-build@3ab34d3d69687764be21eba3768f51f4ecc40ddd # main
+      - uses: tryghost/actions/actions/slack-build@eee499fcb6bc0efc75ba43f651282b95a96102b0 # main
         if: failure() && github.event_name == 'push' && github.ref == 'refs/heads/main'
         with:
           status: ${{ job.status }}
@@ -754,7 +754,7 @@ jobs:
             exit 1
           fi
 
-      - uses: tryghost/actions/actions/slack-build@3ab34d3d69687764be21eba3768f51f4ecc40ddd # main
+      - uses: tryghost/actions/actions/slack-build@eee499fcb6bc0efc75ba43f651282b95a96102b0 # main
         if: failure() && github.event_name == 'push' && github.ref == 'refs/heads/main'
         with:
           status: ${{ job.status }}
@@ -840,7 +840,7 @@ jobs:
           path: ${{ steps.app_name.outputs.root }}/playwright-report
           retention-days: 30
 
-      - uses: tryghost/actions/actions/slack-build@3ab34d3d69687764be21eba3768f51f4ecc40ddd # main
+      - uses: tryghost/actions/actions/slack-build@eee499fcb6bc0efc75ba43f651282b95a96102b0 # main
         if: failure() && github.event_name == 'push' && github.ref == 'refs/heads/main'
         with:
           status: ${{ job.status }}
@@ -902,7 +902,7 @@ jobs:
         run: |
           [ -f ~/.ghost/logs/*.log ] && cat ~/.ghost/logs/*.log
 
-      - uses: tryghost/actions/actions/slack-build@3ab34d3d69687764be21eba3768f51f4ecc40ddd # main
+      - uses: tryghost/actions/actions/slack-build@eee499fcb6bc0efc75ba43f651282b95a96102b0 # main
         if: failure() && github.event_name == 'push' && github.ref == 'refs/heads/main'
         with:
           status: ${{ job.status }}
@@ -984,7 +984,7 @@ jobs:
           retention-days: 7
           if-no-files-found: error
 
-      - uses: tryghost/actions/actions/slack-build@3ab34d3d69687764be21eba3768f51f4ecc40ddd # main
+      - uses: tryghost/actions/actions/slack-build@eee499fcb6bc0efc75ba43f651282b95a96102b0 # main
         if: failure() && github.event_name == 'push' && github.ref == 'refs/heads/main'
         with:
           status: ${{ job.status }}
@@ -1067,7 +1067,7 @@ jobs:
           retention-days: 7
           if-no-files-found: error
 
-      - uses: tryghost/actions/actions/slack-build@3ab34d3d69687764be21eba3768f51f4ecc40ddd # main
+      - uses: tryghost/actions/actions/slack-build@eee499fcb6bc0efc75ba43f651282b95a96102b0 # main
         if: failure() && github.event_name == 'push' && github.ref == 'refs/heads/main'
         with:
           status: ${{ job.status }}
@@ -1673,7 +1673,7 @@ jobs:
           path: e2e/test-results
           retention-days: 7
 
-      - uses: tryghost/actions/actions/slack-build@3ab34d3d69687764be21eba3768f51f4ecc40ddd # main
+      - uses: tryghost/actions/actions/slack-build@eee499fcb6bc0efc75ba43f651282b95a96102b0 # main
         if: failure() && github.event_name == 'push' && github.ref == 'refs/heads/main'
         with:
           status: ${{ job.status }}
diff --git a/.github/workflows/label-actions.yml b/.github/workflows/label-actions.yml
index 047644ecec7..f3ef90bd530 100644
--- a/.github/workflows/label-actions.yml
+++ b/.github/workflows/label-actions.yml
@@ -18,4 +18,4 @@ jobs:
     runs-on: ubuntu-slim
     if: github.repository_owner == 'TryGhost'
     steps:
-      - uses: tryghost/actions/actions/label-actions@3ab34d3d69687764be21eba3768f51f4ecc40ddd # main
+      - uses: tryghost/actions/actions/label-actions@eee499fcb6bc0efc75ba43f651282b95a96102b0 # main

From 5ef529f68025fc9aca46a37e7dadd98ffcce2c95 Mon Sep 17 00:00:00 2001
From: Steve Larson <9larsons@gmail.com>
Date: Wed, 22 Jul 2026 20:07:23 -0500
Subject: [PATCH 3/6] Removed legacy Settings button components (#29548)

no ref
- migrated Settings button usage and design-system internals to Shade
Button primitives
- removed the legacy Button, ButtonGroup, and ButtonProps implementation
and exports
- changed modal/form action contracts to use semantic Shade variants
directly
- preserved destructive states and accessible action names, and
refreshed the Shade adoption snapshot
---
 .../src/global/button-group.stories.tsx       |  61 --
 .../src/global/button-group.tsx               |  70 ---
 .../src/global/button.stories.tsx             |  92 ---
 .../src/global/button.tsx                     | 166 ------
 .../chrome/desktop-chrome-header.stories.tsx  |  11 +-
 .../src/global/form/text-field.stories.tsx    |   3 +-
 .../src/global/layout/app-menu.tsx            |   7 +-
 .../src/global/layout/global-actions.tsx      |   5 +-
 .../src/global/layout/page.stories.tsx        |  25 +-
 .../src/global/layout/page.tsx                |   6 +-
 .../global/layout/view-container.stories.tsx  |  64 +-
 .../src/global/layout/view-container.tsx      |  22 +-
 .../modal/confirmation-modal.stories.tsx      |   7 +-
 .../src/global/modal/confirmation-modal.tsx   |   8 +-
 .../src/global/modal/limit-modal.stories.tsx  |   5 +-
 .../src/global/modal/limit-modal.tsx          |   2 +-
 .../src/global/modal/modal.stories.tsx        |  12 +-
 .../src/global/modal/modal.tsx                |  67 +--
 .../global/modal/preview-modal.stories.tsx    |   7 +-
 .../src/global/modal/preview-modal.tsx        |  43 +-
 .../src/global/tooltip.stories.tsx            |  13 +-
 apps/admin-x-design-system/src/index.ts       |   4 -
 .../settings/setting-group-header.stories.tsx |  21 +-
 .../src/settings/setting-group-header.tsx     |   2 +-
 .../src/settings/setting-group.stories.tsx    |   3 +-
 .../src/settings/setting-group.tsx            |  73 +--
 apps/admin-x-framework/src/hooks/use-form.ts  |  15 +-
 .../test/unit/hooks/use-form.test.ts          |   8 +-
 .../src/components/exit-settings-button.tsx   |   7 +-
 .../settings/advanced/code-injection.tsx      |   7 +-
 .../settings/advanced/code/code-modal.tsx     |  29 +-
 .../settings/advanced/danger-zone.tsx         |  16 +-
 .../settings/advanced/history-modal.tsx       |   6 +-
 .../components/settings/advanced/history.tsx  |   4 +-
 .../settings/advanced/integrations.tsx        |  26 +-
 .../integrations/add-integration-modal.tsx    |   2 +-
 .../integrations/content-api-modal.tsx        |   9 +-
 .../integrations/custom-integration-modal.tsx |   2 +-
 .../integrations/first-promoter-modal.tsx     |   2 +-
 .../advanced/integrations/pintura-modal.tsx   |   2 +-
 .../advanced/integrations/slack-modal.tsx     |   7 +-
 .../integrations/transistor-modal.tsx         |   2 +-
 .../advanced/integrations/unsplash-modal.tsx  |   2 +-
 .../advanced/integrations/webhook-modal.tsx   |   2 +-
 .../advanced/integrations/webhooks-table.tsx  |  22 +-
 .../advanced/integrations/zapier-modal.tsx    |  12 +-
 .../src/components/settings/advanced/labs.tsx |  10 +-
 .../settings/advanced/labs/beta-features.tsx  |  11 +-
 .../advanced/labs/migration-options.tsx       |  12 +-
 .../advanced/labs/yaml-file-editor-modal.tsx  |  22 +-
 .../migration-tools-export.tsx                |   7 +-
 .../migration-tools-import.tsx                |  91 +--
 .../universal-import-modal.tsx                |   6 +-
 .../email-design/email-design-modal.tsx       |   8 +-
 .../src/components/settings/email/emails.tsx  |   8 +-
 .../components/settings/email/newsletters.tsx |  20 +-
 .../newsletters/add-newsletter-modal.tsx      |   2 +-
 .../newsletters/newsletter-detail-modal.tsx   | 228 +++----
 .../email/newsletters/newsletters-list.tsx    |  10 +-
 .../newsletters/newsletters-tab-content.tsx   |  16 +-
 .../settings/general/invite-user-modal.tsx    |   2 +-
 .../settings/general/user-detail-modal.tsx    |  12 +-
 .../src/components/settings/general/users.tsx |  44 +-
 .../general/users/change-password-form.tsx    |  16 +-
 .../settings/general/users/staff-token.tsx    |   2 +-
 .../growth/embed-signup/embed-signup-form.tsx |   4 +-
 .../embed-signup/embed-signup-sidebar.tsx     |  32 +-
 .../components/settings/growth/explore.tsx    |  10 +-
 .../growth/explore/testimonials-modal.tsx     |  12 +-
 .../src/components/settings/growth/offers.tsx |   6 +-
 .../growth/offers/add-offer-modal.tsx         |   7 +-
 .../growth/offers/edit-offer-modal.tsx        |  12 +-
 .../offers/edit-retention-offer-modal.tsx     |   2 +-
 .../settings/growth/offers/offer-success.tsx  |  14 +-
 .../settings/growth/offers/offers-index.tsx   |  37 +-
 .../settings/growth/recommendations.tsx       |  10 +-
 .../add-recommendation-modal-confirm.tsx      |  23 +-
 .../add-recommendation-modal.tsx              |   2 +-
 .../edit-recommendation-modal.tsx             |  18 +-
 .../incoming-recommendation-list.tsx          |   7 +-
 .../recommendations/recommendation-list.tsx   |  24 +-
 .../settings/membership/custom-fields.tsx     |   8 +-
 .../custom-fields/custom-field-modal.tsx      |  44 +-
 .../settings/membership/member-emails.tsx     |  15 +-
 .../member-emails/test-email-dropdown.tsx     |  10 +-
 .../welcome-email-customize-modal.tsx         |   2 +-
 .../member-emails/welcome-email-modal.tsx     |  12 +-
 .../components/settings/membership/portal.tsx |   4 +-
 .../membership/portal/portal-links.tsx        |  25 +-
 .../membership/portal/portal-modal.tsx        |   2 +-
 .../stripe/stripe-connect-modal.tsx           |  19 +-
 .../components/settings/membership/tiers.tsx  |  25 +-
 .../membership/tiers/tier-detail-modal.tsx    |  43 +-
 .../membership/tiers/tier-detail-preview.tsx  |   7 +-
 .../settings/site/announcement-bar-modal.tsx  |   2 +-
 .../settings/site/announcement-bar.tsx        |   4 +-
 .../components/settings/site/change-theme.tsx |   8 +-
 .../components/settings/site/design-modal.tsx |   2 +-
 .../settings/site/design-setting.tsx          |   4 +-
 .../components/settings/site/navigation.tsx   |   4 +-
 .../site/navigation/navigation-edit-form.tsx  |   8 +-
 .../components/settings/site/theme-modal.tsx  |  16 +-
 .../site/theme/advanced-theme-settings.tsx    |  17 +-
 .../site/theme/invalid-theme-modal.tsx        |   2 +-
 .../site/theme/theme-code-editor-modal.tsx    |  12 +-
 .../site/theme/theme-editor-confirm-modal.tsx |   7 +-
 .../site/theme/theme-installed-modal.tsx      |   2 +-
 .../settings/site/theme/theme-preview.tsx     |  42 +-
 .../src/components/stripe-button.tsx          |  21 +-
 apps/shade/src/components/ui/button.tsx       |   2 +-
 apps/shade/src/docs/adoption-data.json        | 560 +++++++-----------
 .../test/unit/components/ui/button.test.tsx   |   3 +-
 112 files changed, 886 insertions(+), 1774 deletions(-)
 delete mode 100644 apps/admin-x-design-system/src/global/button-group.stories.tsx
 delete mode 100644 apps/admin-x-design-system/src/global/button-group.tsx
 delete mode 100644 apps/admin-x-design-system/src/global/button.stories.tsx
 delete mode 100644 apps/admin-x-design-system/src/global/button.tsx

diff --git a/apps/admin-x-design-system/src/global/button-group.stories.tsx b/apps/admin-x-design-system/src/global/button-group.stories.tsx
deleted file mode 100644
index 1e65fd52463..00000000000
--- a/apps/admin-x-design-system/src/global/button-group.stories.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react-vite';
-
-import ButtonGroup from './button-group';
-import {ButtonProps} from './button';
-
-const ButtonGroupMeta = {
-    title: 'Global / Button Group',
-    component: ButtonGroup,
-    tags: ['autodocs'],
-    decorators: [(_story: () => React.ReactNode) => (<div className='inline-block'>{_story()}</div>)]
-} satisfies Meta<typeof ButtonGroup>;
-
-export default ButtonGroupMeta;
-
-type Story = StoryObj<typeof ButtonGroupMeta>;
-
-const defaultButtons: ButtonProps[] = [
-    {
-        label: 'Cancel',
-        key: 'cancel'
-    },
-    {
-        label: 'Save',
-        key: 'save',
-        color: 'black'
-    }
-];
-
-export const Default: Story = {
-    args: {
-        buttons: defaultButtons,
-        link: false
-    }
-};
-
-export const Small: Story = {
-    args: {
-        buttons: defaultButtons,
-        link: false,
-        size: 'sm'
-    }
-};
-
-const linkButtons: ButtonProps[] = [
-    {
-        label: 'Cancel',
-        key: 'cancel'
-    },
-    {
-        label: 'Save',
-        key: 'save',
-        color: 'green'
-    }
-];
-
-export const LinkButtons: Story = {
-    args: {
-        buttons: linkButtons,
-        link: true
-    }
-};
diff --git a/apps/admin-x-design-system/src/global/button-group.tsx b/apps/admin-x-design-system/src/global/button-group.tsx
deleted file mode 100644
index f72e4b306f3..00000000000
--- a/apps/admin-x-design-system/src/global/button-group.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import Button, {ButtonSize} from './button';
-import Tooltip from './tooltip';
-
-import {ButtonProps} from './button';
-import clsx from 'clsx';
-
-export interface ButtonGroupButtonProps extends ButtonProps {
-    tooltip?: string | React.ReactNode;
-}
-
-export interface ButtonGroupProps {
-    size?: ButtonSize;
-    buttons: Array<ButtonGroupButtonProps>;
-    link?: boolean;
-    linkWithPadding?: boolean;
-    clearBg?: boolean;
-    outlineOnMobile?: boolean;
-    className?: string;
-    activeKey?: string;
-}
-
-const ButtonGroup: React.FC<ButtonGroupProps> = ({size = 'md', buttons, link, linkWithPadding, clearBg = true, outlineOnMobile, className, activeKey}) => {
-    let groupColorClasses = clsx(
-        'flex items-center justify-start rounded',
-        link ? 'gap-4' : 'gap-2',
-        !link && !clearBg && 'gap-0! rounded-lg bg-grey-100 dark:bg-grey-900',
-        className
-    );
-
-    if (link && !clearBg) {
-        groupColorClasses = clsx(
-            'transition-all hover:bg-grey-200 dark:hover:bg-grey-900',
-            size === 'sm' ? 'h-7 px-3' : 'h-[34px] px-4',
-            outlineOnMobile && 'border border-grey-300 hover:border-transparent md:border-transparent',
-            groupColorClasses
-        );
-    }
-
-    return (
-        <div className={groupColorClasses}>
-            {buttons.map(({key, ...props}, index) => {
-                const buttonKey = key ?? `button-${index}`;
-                const buttonProps = {...props};
-
-                if (!link && !clearBg) {
-                    buttonProps.className = clsx(props.className, 'w-8 rounded-lg border px-0!');
-
-                    if (buttonKey === activeKey) {
-                        buttonProps.color = 'white';
-                        buttonProps.className = clsx(buttonProps.className, 'border-grey-300 shadow-xs dark:border-grey-800');
-                    } else {
-                        buttonProps.className = clsx(buttonProps.className, 'border-transparent');
-                    }
-                }
-
-                return (
-                    (props.tooltip ?
-                        <Tooltip key={buttonKey} content={props.tooltip}>
-                            <Button link={link} linkWithPadding={linkWithPadding} size={size} {...buttonProps} />
-                        </Tooltip> :
-                        <Button key={buttonKey} link={link} linkWithPadding={linkWithPadding} size={size} {...buttonProps} />
-                    )
-                );
-            })}
-        </div>
-    );
-};
-
-export default ButtonGroup;
diff --git a/apps/admin-x-design-system/src/global/button.stories.tsx b/apps/admin-x-design-system/src/global/button.stories.tsx
deleted file mode 100644
index 7ae9891e3e4..00000000000
--- a/apps/admin-x-design-system/src/global/button.stories.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react-vite';
-
-import Button from './button';
-
-const meta = {
-    title: 'Global / Button',
-    component: Button,
-    tags: ['autodocs'],
-    argTypes: {
-        color: {
-            control: 'select'
-        }
-    }
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {
-        label: 'Button'
-    }
-};
-
-export const Small: Story = {
-    args: {
-        size: 'sm',
-        label: 'Button',
-        color: 'black'
-    }
-};
-
-export const Black: Story = {
-    args: {
-        label: 'Button',
-        color: 'black'
-    }
-};
-
-export const Grey: Story = {
-    args: {
-        label: 'Button',
-        color: 'grey'
-    }
-};
-
-export const Green: Story = {
-    args: {
-        label: 'Button',
-        color: 'green'
-    }
-};
-
-export const Red: Story = {
-    args: {
-        label: 'Button',
-        color: 'red'
-    }
-};
-
-export const LinkButton: Story = {
-    args: {
-        label: 'Button',
-        color: 'green',
-        link: true
-    }
-};
-
-export const Icon: Story = {
-    args: {
-        icon: 'ellipsis',
-        color: 'green',
-        iconColorClass: 'text-white'
-    }
-};
-
-export const IconSmall: Story = {
-    args: {
-        size: 'sm',
-        icon: 'ellipsis',
-        color: 'green',
-        iconColorClass: 'text-white'
-    }
-};
-
-export const Loading: Story = {
-    args: {
-        loading: true,
-        color: 'green',
-        label: 'Button'
-    }
-};
diff --git a/apps/admin-x-design-system/src/global/button.tsx b/apps/admin-x-design-system/src/global/button.tsx
deleted file mode 100644
index 89c329ce323..00000000000
--- a/apps/admin-x-design-system/src/global/button.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import Icon, {IconSize} from './icon';
-import React, {HTMLProps} from 'react';
-import clsx from 'clsx';
-import {LoadingIndicator, LoadingIndicatorColor, LoadingIndicatorSize} from './loading-indicator';
-
-export type ButtonColor = 'clear' | 'light-grey' | 'grey' | 'black' | 'green' | 'red' | 'white' | 'outline';
-export type ButtonSize = 'sm' | 'md';
-
-export interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement>, 'label' | 'size' | 'children'> {
-    size?: ButtonSize;
-    label?: React.ReactNode;
-    hideLabel?: boolean;
-    icon?: string;
-    iconSize?: IconSize;
-    iconColorClass?: string;
-    key?: string;
-    color?: ButtonColor;
-    fullWidth?: boolean;
-    link?: boolean;
-    linkWithPadding?: boolean;
-    disabled?: boolean;
-    unstyled?: boolean;
-    className?: string;
-    tag?: string;
-    loading?: boolean;
-    loadingIndicatorSize?: LoadingIndicatorSize;
-    loadingIndicatorColor?: LoadingIndicatorColor;
-    outlineOnMobile?: boolean;
-    onClick?: (e?:React.MouseEvent<HTMLElement>) => void;
-    testId?: string;
-}
-
-const Button: React.FC<ButtonProps> = React.forwardRef(({
-    testId,
-    size = 'md',
-    label = '',
-    hideLabel = false,
-    icon = '',
-    iconSize,
-    iconColorClass,
-    color = 'clear',
-    fullWidth,
-    link,
-    linkWithPadding = false,
-    disabled,
-    unstyled = false,
-    className = '',
-    tag = 'button',
-    loading = false,
-    loadingIndicatorColor,
-    outlineOnMobile = false,
-    onClick,
-    ...props
-}, ref) => {
-    if (!color) {
-        color = 'clear';
-    }
-
-    if (!unstyled) {
-        className = clsx(
-            'text inline-flex items-center justify-center rounded-md whitespace-nowrap transition',
-            ((link && color !== 'clear' && color !== 'black') || (!link && color !== 'clear')) ? 'font-bold' : 'font-semibold',
-            !link ? `${size === 'sm' ? 'h-7' : 'h-[34px]'}` : '',
-            !link ? `${size === 'sm' || label && icon ? 'px-3' : 'px-4'}` : '',
-            (link && linkWithPadding) && '-m-1 p-1',
-            className
-        );
-
-        switch (color) {
-        case 'black':
-            className = clsx(
-                link ? 'text-black hover:text-grey-800 dark:text-white' : `bg-black text-white dark:bg-white dark:text-black ${!disabled && 'hover:bg-grey-900'}`,
-                className
-            );
-            loadingIndicatorColor = 'light';
-            iconColorClass = iconColorClass || 'text-white';
-            break;
-        case 'light-grey':
-            className = clsx(
-                link ? 'text-grey-800 hover:text-green-400 dark:text-white' : `bg-grey-200 text-black dark:bg-grey-900 dark:text-white ${!disabled && 'hover:bg-grey-300! dark:hover:bg-grey-800!'}`,
-                className
-            );
-            loadingIndicatorColor = 'dark';
-            break;
-        case 'grey':
-            className = clsx(
-                link ? 'text-black hover:text-grey-800 dark:text-white' : `bg-grey-100 text-black dark:bg-grey-900 dark:text-white ${!disabled && 'hover:bg-grey-300! dark:hover:bg-grey-800!'}`,
-                className
-            );
-            loadingIndicatorColor = 'dark';
-            break;
-        case 'green':
-            className = clsx(
-                link ? ' text-green hover:text-green-400' : ` bg-green text-white ${!disabled && 'hover:bg-green-400'}`,
-                className
-            );
-            loadingIndicatorColor = 'light';
-            iconColorClass = iconColorClass || 'text-white';
-            break;
-        case 'red':
-            className = clsx(
-                link ? 'text-red hover:text-red-400' : `bg-red text-white ${!disabled && 'hover:bg-red-400'}`,
-                className
-            );
-            loadingIndicatorColor = 'light';
-            iconColorClass = iconColorClass || 'text-white';
-            break;
-        case 'white':
-            className = clsx(
-                link ? 'text-white hover:text-white dark:text-black dark:hover:text-grey-800' : `bg-white text-black dark:bg-black dark:text-white`,
-                className
-            );
-            loadingIndicatorColor = 'dark';
-            break;
-        case 'outline':
-            className = clsx(
-                link ? 'text-black hover:text-grey-800 dark:text-white' : `border border-grey-300 bg-transparent text-black dark:border-grey-800 dark:text-white ${!disabled && 'hover:border-black! dark:hover:border-white!'}`,
-                className
-            );
-            loadingIndicatorColor = 'dark';
-            break;
-        default:
-            className = clsx(
-                link ? ' text-black hover:text-grey-800 dark:text-white' : `text-grey-900 dark:text-white dark:hover:bg-grey-900 ${!disabled && 'hover:bg-grey-200 hover:text-black'}`,
-                (outlineOnMobile && !link) && 'border border-grey-300 hover:border-transparent md:border-transparent',
-                className
-            );
-            loadingIndicatorColor = 'dark';
-            break;
-        }
-
-        className = clsx(
-            (fullWidth && !link) && ' w-full',
-            disabled ? 'opacity-40' : 'cursor-pointer',
-            className
-        );
-    }
-
-    const iconClasses = label && icon && !hideLabel ? 'mr-1.5' : '';
-
-    let labelClasses = '';
-    labelClasses += (label && hideLabel) ? 'sr-only' : '';
-    labelClasses += loading ? 'invisible' : '';
-
-    iconSize = iconSize || ((size === 'sm') || (label && icon) ? 'sm' : 'md');
-
-    const buttonChildren = <>
-        {icon && <Icon className={iconClasses} colorClass={iconColorClass} name={icon} size={iconSize} />}
-        <span className={labelClasses}>{label}</span>
-        {loading && <div className='absolute flex'><LoadingIndicator color={loadingIndicatorColor} size={size}/><span className='sr-only'>Loading...</span></div>}
-    </>;
-
-    const buttonElement = React.createElement(tag, {className: className,
-        'data-testid': testId,
-        disabled: disabled,
-        type: 'button',
-        onClick: onClick,
-        ref: ref,
-        ...props}, buttonChildren);
-
-    return buttonElement;
-});
-
-Button.displayName = 'Button';
-
-export default Button;
diff --git a/apps/admin-x-design-system/src/global/chrome/desktop-chrome-header.stories.tsx b/apps/admin-x-design-system/src/global/chrome/desktop-chrome-header.stories.tsx
index c60cb2e8c5b..1e434a8ba72 100644
--- a/apps/admin-x-design-system/src/global/chrome/desktop-chrome-header.stories.tsx
+++ b/apps/admin-x-design-system/src/global/chrome/desktop-chrome-header.stories.tsx
@@ -1,7 +1,5 @@
 import type {Meta, StoryObj} from '@storybook/react-vite';
 
-import Button from '../button';
-import ButtonGroup from '../button-group';
 import DesktopChromeHeader from './desktop-chrome-header';
 
 const meta = {
@@ -43,13 +41,8 @@ export const WithTitle: Story = {
 
 export const CustomToolbar: Story = {
     args: {
-        toolbarLeft: <Button icon='arrow-left' link={true} size='sm' />,
+        toolbarLeft: <span>Back slot</span>,
         toolbarCenter: <span>Homepage</span>,
-        toolbarRight: <ButtonGroup
-            buttons={[
-                {icon: 'laptop', link: true, size: 'sm'},
-                {icon: 'mobile', link: true, size: 'sm', iconColorClass: 'text-grey-500'}
-            ]}
-        />
+        toolbarRight: <span>Toolbar actions slot</span>
     }
 };
diff --git a/apps/admin-x-design-system/src/global/form/text-field.stories.tsx b/apps/admin-x-design-system/src/global/form/text-field.stories.tsx
index da69bdc21f7..661e31b0a6d 100644
--- a/apps/admin-x-design-system/src/global/form/text-field.stories.tsx
+++ b/apps/admin-x-design-system/src/global/form/text-field.stories.tsx
@@ -2,7 +2,6 @@ import {ReactNode} from 'react';
 import {useArgs} from 'storybook/preview-api';
 import type {Meta, StoryObj} from '@storybook/react-vite';
 
-import Button from '../button';
 import TextField from './text-field';
 
 const meta = {
@@ -91,7 +90,7 @@ export const WithButton: Story = {
         value: 'https://ghost.org',
         containerClassName: 'group',
         rightPlaceholder: (
-            <Button className='invisible mt-1 rounded-md group-hover:visible' color='white' label='Copy' size='sm' />
+            <span>Copy action slot</span>
         )
     }
 };
diff --git a/apps/admin-x-design-system/src/global/layout/app-menu.tsx b/apps/admin-x-design-system/src/global/layout/app-menu.tsx
index 41470a7dace..76bd85494a3 100644
--- a/apps/admin-x-design-system/src/global/layout/app-menu.tsx
+++ b/apps/admin-x-design-system/src/global/layout/app-menu.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import Button from '../button';
+import Icon from '../icon';
+import {Button} from '@tryghost/shade/components';
 
 const PageMenu: React.FC = () => {
     return (
-        <Button icon='hamburger' iconColorClass='text-black dark:text-white' size='sm' link onClick={() => {
+        <Button aria-label='Open app menu' size='icon' type='button' variant='ghost' onClick={() => {
             alert('Clicked on hamburger');
-        }} />
+        }}><Icon name='hamburger' size='sm' /></Button>
     );
 };
 
diff --git a/apps/admin-x-design-system/src/global/layout/global-actions.tsx b/apps/admin-x-design-system/src/global/layout/global-actions.tsx
index 32e03085cde..7df6a9caf22 100644
--- a/apps/admin-x-design-system/src/global/layout/global-actions.tsx
+++ b/apps/admin-x-design-system/src/global/layout/global-actions.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import Button from '../button';
+import Icon from '../icon';
+import {Button} from '@tryghost/shade/components';
 
 const GlobalActions: React.FC = () => {
     return (
-        <Button icon='magnifying-glass' iconColorClass='dark:text-white text-black' size='sm' link onClick={() => {}} />
+        <Button aria-label='Search' size='icon' type='button' variant='ghost' onClick={() => {}}><Icon name='magnifying-glass' size='sm' /></Button>
     );
 };
 
diff --git a/apps/admin-x-design-system/src/global/layout/page.stories.tsx b/apps/admin-x-design-system/src/global/layout/page.stories.tsx
index ca079c5aa86..bc455ac4448 100644
--- a/apps/admin-x-design-system/src/global/layout/page.stories.tsx
+++ b/apps/admin-x-design-system/src/global/layout/page.stories.tsx
@@ -4,7 +4,6 @@ import Page, {CustomGlobalAction} from './page';
 import ViewContainer from './view-container';
 
 import {exampleActions as exampleActionButtons} from './view-container.stories';
-import Button from '../button';
 import {Text} from '@tryghost/shade/primitives';
 
 const meta = {
@@ -24,6 +23,7 @@ const dummyContent = <div className='w-full bg-grey-100 p-5 text-center'>Placeho
 const customGlobalActions: CustomGlobalAction[] = [
     {
         iconName: 'heart',
+        ariaLabel: 'Favorite',
         onClick: () => {
             alert('Clicked on custom action');
         }
@@ -100,10 +100,7 @@ const exampleCardViewContent = (
     <ViewContainer
         actions={exampleActionButtons}
         firstOnPage={false}
-        primaryAction={{
-            title: 'New idea',
-            icon: 'add'
-        }}
+        primaryAction={<span>New idea action slot</span>}
         title='Ideas'
         type='page'
     >
@@ -155,7 +152,7 @@ const mockPosts = () => {
                     opened
                 </div>
                 <div className='flex justify-end pr-7'>
-                    <Button className='group-hover:bg-grey-200' icon='ellipsis' />
+                    <span>Post action slot</span>
                 </div>
             </div>
         );
@@ -167,10 +164,7 @@ const examplePostsContent = (
     <ViewContainer
         actions={exampleActionButtons}
         firstOnPage={false}
-        primaryAction={{
-            title: 'New post',
-            icon: 'add'
-        }}
+        primaryAction={<span>New post action slot</span>}
         title='Posts'
         type='page'
     >
@@ -205,12 +199,7 @@ export const ExampleDetailScreen: Story = {
                         <div className=''>Colombus, OH</div>
                     </div>
                 }
-                primaryAction={
-                    {
-                        icon: 'ellipsis',
-                        color: 'outline'
-                    }
-                }
+                primaryAction={<span>Member action slot</span>}
                 type='page'
             >
                 <div className='grid grid-cols-3 border-b border-grey-200 pb-5 tablet:grid-cols-4'>
@@ -235,7 +224,7 @@ export const ExampleDetailScreen: Story = {
                     <div className='-ml-5 flex h-full flex-col gap-6 border-r border-grey-200 px-5'>
                         <div className='flex justify-between'>
                             <Text as='h5' className='md:text-lg' leading='supertight' weight='bold'>Member data</Text>
-                            <Button color='green' label='Edit' link />
+                            <span>Edit action slot</span>
                         </div>
                         <div>
                             <Text as='h6' className='text-base' tone='secondary' weight='semibold'>Name</Text>
@@ -293,7 +282,7 @@ export const ExampleDetailScreen: Story = {
                     <div className='-mr-5 flex h-full flex-col gap-6 px-5 pt-10 tablet:pt-0'>
                         <div className='flex justify-between'>
                             <Text as='h5' className='md:text-lg' leading='supertight' weight='bold'>Activity</Text>
-                            <Button color='green' label='View all' link />
+                            <span>View all action slot</span>
                         </div>
                         <div className='flex flex-col text-sm'>
                             <span className='font-semibold'>Logged in</span>
diff --git a/apps/admin-x-design-system/src/global/layout/page.tsx b/apps/admin-x-design-system/src/global/layout/page.tsx
index 7fc62141d53..925e99a15fa 100644
--- a/apps/admin-x-design-system/src/global/layout/page.tsx
+++ b/apps/admin-x-design-system/src/global/layout/page.tsx
@@ -2,11 +2,13 @@ import React from 'react';
 import clsx from 'clsx';
 import AppMenu from './app-menu';
 import GlobalActions from './global-actions';
-import Button from '../button';
+import Icon from '../icon';
 import PageHeader from './page-header';
+import {Button} from '@tryghost/shade/components';
 
 export interface CustomGlobalAction {
     iconName: string;
+    ariaLabel: string;
     onClick?: () => void;
 }
 
@@ -88,7 +90,7 @@ const Page: React.FC<PageProps> = ({
         <div className='sticky flex items-center gap-7'>
             {(customGlobalActions?.map((action, idx) => {
                 return (
-                    <Button key={action.iconName ?? idx} icon={action.iconName} iconColorClass='text-black dark:text-white' size='sm' link onClick={action.onClick} />
+                    <Button key={action.iconName ?? idx} aria-label={action.ariaLabel} size='icon' type='button' variant='ghost' onClick={action.onClick}><Icon name={action.iconName} size='sm' /></Button>
                 );
             }))}
             {showGlobalActions && <GlobalActions />}
diff --git a/apps/admin-x-design-system/src/global/layout/view-container.stories.tsx b/apps/admin-x-design-system/src/global/layout/view-container.stories.tsx
index 9656301343b..d04a44091f4 100644
--- a/apps/admin-x-design-system/src/global/layout/view-container.stories.tsx
+++ b/apps/admin-x-design-system/src/global/layout/view-container.stories.tsx
@@ -1,8 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react-vite';
 
 import ViewContainer, {PrimaryActionProps} from './view-container';
-import Button from '../button';
-import ButtonGroup from '../button-group';
 
 const meta = {
     title: 'Global / Layout / View Container',
@@ -25,42 +23,13 @@ export default meta;
 type Story = StoryObj<typeof ViewContainer>;
 
 export const exampleActions = [
-    <Button key='filter' label='Filter' outlineOnMobile onClick={() => {
-        alert('Clicked filter');
-    }} />,
-    <Button key='sort' label='Sort' outlineOnMobile onClick={() => {
-        alert('Clicked sort');
-    }} />,
-    <Button key='search' icon='magnifying-glass' iconSize='sm' outlineOnMobile onClick={() => {
-        alert('Clicked search');
-    }} />,
-    <ButtonGroup key='view-toggle' buttons={[
-        {
-            icon: 'listview',
-            size: 'sm',
-            iconColorClass: 'text-black',
-            onClick: () => {
-                alert('Clicked list view');
-            }
-        },
-        {
-            icon: 'cardview',
-            size: 'sm',
-            iconColorClass: 'text-grey-500',
-            onClick: () => {
-                alert('Clicked card view');
-            }
-        }
-    ]} clearBg={false} link outlineOnMobile />
+    <span key='filter'>Filter action slot</span>,
+    <span key='sort'>Sort action slot</span>,
+    <span key='search'>Search action slot</span>,
+    <span key='view-toggle'>View toggle slot</span>
 ];
 
-const primaryAction: PrimaryActionProps = {
-    title: 'Add item',
-    color: 'black',
-    onClick: () => {
-        alert('Clicked primary action');
-    }
-};
+const primaryAction: PrimaryActionProps = <span>Primary action slot</span>;
 
 const tabs = <div className='text-sm text-grey-500'>View tabs slot</div>;
 
@@ -134,27 +103,8 @@ export const TabsWithPrimaryAction: Story = {
 };
 
 const sectionActions = [
-    <Button key='filter' label='Filter' size='sm' onClick={() => {
-        alert('Clicked filter');
-    }} />,
-    <ButtonGroup key='view-toggle' buttons={[
-        {
-            icon: 'listview',
-            size: 'sm',
-            iconColorClass: 'text-black',
-            onClick: () => {
-                alert('Clicked list view');
-            }
-        },
-        {
-            icon: 'cardview',
-            size: 'sm',
-            iconColorClass: 'text-grey-500',
-            onClick: () => {
-                alert('Clicked card view');
-            }
-        }
-    ]} clearBg={false} size='sm' link />
+    <span key='filter'>Filter action slot</span>,
+    <span key='view-toggle'>View toggle slot</span>
 ];
 
 export const TabsWithActions: Story = {
diff --git a/apps/admin-x-design-system/src/global/layout/view-container.tsx b/apps/admin-x-design-system/src/global/layout/view-container.tsx
index 5d5b15a2d97..c379cbcc3bb 100644
--- a/apps/admin-x-design-system/src/global/layout/view-container.tsx
+++ b/apps/admin-x-design-system/src/global/layout/view-container.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 import clsx from 'clsx';
-import Button, {ButtonColor, ButtonProps} from '../button';
-import {ButtonGroupProps} from '../button-group';
 import {Text} from '@tryghost/shade/primitives';
 
 export interface View {
@@ -11,13 +9,7 @@ export interface View {
     contents: React.ReactNode;
 }
 
-export interface PrimaryActionProps {
-    title?: string;
-    icon?: string;
-    color?: ButtonColor;
-    className?: string;
-    onClick?: () => void;
-}
+export type PrimaryActionProps = React.ReactNode;
 
 interface ViewContainerProps {
     /**
@@ -76,7 +68,7 @@ interface ViewContainerProps {
     /**
      * Adds more actions by the primary action, primarily buttons and button groups.
      */
-    actions?: (React.ReactElement<ButtonProps> | React.ReactElement<ButtonGroupProps> | React.ReactNode)[];
+    actions?: React.ReactNode[];
     actionsClassName?: string;
     actionsHidden?: boolean;
     contentWrapperClassName?: string;
@@ -146,12 +138,6 @@ const ViewContainer: React.FC<ViewContainerProps> = ({
         actionsClassName
     );
 
-    const primaryActionContents = <>
-        {(primaryAction?.title || primaryAction?.icon) && (
-            <Button className={primaryAction.className} color={primaryAction.color || 'black'} icon={primaryAction.icon} label={primaryAction.title} size={type === 'page' ? 'md' : 'sm'} onClick={primaryAction.onClick} />
-        )}
-    </>;
-
     const headingClassName = clsx(
         tabs && 'pb-3',
         type === 'page' && '-mt-2'
@@ -170,7 +156,7 @@ const ViewContainer: React.FC<ViewContainerProps> = ({
                 </div>
                 <div className={actionsClassName}>
                     {actions}
-                    {primaryActionContents}
+                    {primaryAction}
                 </div>
             </div>
         </div>
@@ -190,7 +176,7 @@ const ViewContainer: React.FC<ViewContainerProps> = ({
 
     return (
         <section className={mainContainerClassName}>
-            {(title || actions || headerContent || tabs) && toolbar}
+            {(title || actions || primaryAction || headerContent || tabs) && toolbar}
             <div className={contentWrapperClassName}>
                 {mainContent}
             </div>
diff --git a/apps/admin-x-design-system/src/global/modal/confirmation-modal.stories.tsx b/apps/admin-x-design-system/src/global/modal/confirmation-modal.stories.tsx
index 4f40cfc220b..b4b53f93eba 100644
--- a/apps/admin-x-design-system/src/global/modal/confirmation-modal.stories.tsx
+++ b/apps/admin-x-design-system/src/global/modal/confirmation-modal.stories.tsx
@@ -2,14 +2,13 @@ import type {Meta, StoryContext, StoryObj} from '@storybook/react-vite';
 import {ReactNode} from 'react';
 
 import NiceModal from '@ebay/nice-modal-react';
-import Button from '../button';
 import ConfirmationModal, {ConfirmationModalProps} from './confirmation-modal';
 
 const ConfirmationModalContainer: React.FC<ConfirmationModalProps> = ({...props}) => {
     return (
-        <Button color='black' label='Open confirmation modal' onClick={() => {
+        <button type='button' onClick={() => {
             NiceModal.show(ConfirmationModal, {...props});
-        }} />
+        }}>Open confirmation modal</button>
     );
 };
 
@@ -40,6 +39,6 @@ export const CustomButtons: Story = {
         title: 'You want to delete?',
         cancelLabel: 'Meh',
         okLabel: 'Alrite',
-        okColor: 'red'
+        okVariant: 'destructive'
     }
 };
diff --git a/apps/admin-x-design-system/src/global/modal/confirmation-modal.tsx b/apps/admin-x-design-system/src/global/modal/confirmation-modal.tsx
index 24b2226f9eb..7ec2ba47737 100644
--- a/apps/admin-x-design-system/src/global/modal/confirmation-modal.tsx
+++ b/apps/admin-x-design-system/src/global/modal/confirmation-modal.tsx
@@ -1,7 +1,7 @@
 import Modal from './modal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useState} from 'react';
-import {ButtonColor} from '../button';
+import type {ButtonProps} from '@tryghost/shade/components';
 
 export interface ConfirmationModalProps {
     title?: React.ReactNode;
@@ -9,7 +9,7 @@ export interface ConfirmationModalProps {
     cancelLabel?: string;
     okLabel?: string;
     okRunningLabel?: string;
-    okColor?: ButtonColor;
+    okVariant?: ButtonProps['variant'];
     onCancel?: () => void;
     onOk?: (modal?: {
         remove: () => void;
@@ -25,7 +25,7 @@ export const ConfirmationModalContent: React.FC<ConfirmationModalProps> = ({
     cancelLabel = 'Cancel',
     okLabel = 'OK',
     okRunningLabel = '...',
-    okColor = 'black',
+    okVariant = 'default',
     onCancel,
     onOk,
     customFooter,
@@ -41,8 +41,8 @@ export const ConfirmationModalContent: React.FC<ConfirmationModalProps> = ({
             cancelLabel={cancelLabel}
             footer={customFooter}
             formSheet={formSheet}
-            okColor={okColor}
             okLabel={taskState === 'running' ? okRunningLabel : okLabel}
+            okVariant={okVariant}
             stickyFooter={stickyFooter}
             testId='confirmation-modal'
             title={title}
diff --git a/apps/admin-x-design-system/src/global/modal/limit-modal.stories.tsx b/apps/admin-x-design-system/src/global/modal/limit-modal.stories.tsx
index 969641906d8..8fcf9d493ef 100644
--- a/apps/admin-x-design-system/src/global/modal/limit-modal.stories.tsx
+++ b/apps/admin-x-design-system/src/global/modal/limit-modal.stories.tsx
@@ -2,14 +2,13 @@ import type {Meta, StoryContext, StoryObj} from '@storybook/react-vite';
 import {ReactNode} from 'react';
 
 import NiceModal from '@ebay/nice-modal-react';
-import Button from '../button';
 import LimitModal, {LimitModalProps} from './limit-modal';
 
 const LimitModalContainer: React.FC<LimitModalProps> = ({...props}) => {
     return (
-        <Button color='black' label='Open limit modal' onClick={() => {
+        <button type='button' onClick={() => {
             NiceModal.show(LimitModal, {...props});
-        }} />
+        }}>Open limit modal</button>
     );
 };
 
diff --git a/apps/admin-x-design-system/src/global/modal/limit-modal.tsx b/apps/admin-x-design-system/src/global/modal/limit-modal.tsx
index 3ac42fa0197..ef3085775d7 100644
--- a/apps/admin-x-design-system/src/global/modal/limit-modal.tsx
+++ b/apps/admin-x-design-system/src/global/modal/limit-modal.tsx
@@ -23,8 +23,8 @@ export const LimitModalContent: React.FC<LimitModalProps> = ({
         <Modal
             backDropClick={false}
             formSheet={formSheet}
-            okColor='green'
             okLabel={okLabel}
+            okVariant='default'
             testId='limit-modal'
             title={title}
             width={540}
diff --git a/apps/admin-x-design-system/src/global/modal/modal.stories.tsx b/apps/admin-x-design-system/src/global/modal/modal.stories.tsx
index 24ea16cedc0..635668ea92e 100644
--- a/apps/admin-x-design-system/src/global/modal/modal.stories.tsx
+++ b/apps/admin-x-design-system/src/global/modal/modal.stories.tsx
@@ -2,7 +2,6 @@ import type {Meta, StoryContext, StoryObj} from '@storybook/react-vite';
 import {ReactNode} from 'react';
 
 import NiceModal from '@ebay/nice-modal-react';
-import Button from '../button';
 import Modal, {ModalProps} from './modal';
 import ModalPage from './modal-page';
 
@@ -18,9 +17,9 @@ const ModalContainer: React.FC<ModalProps> = ({children, ...props}) => {
     });
     return (
         <div>
-            <Button color='black' label='Open modal' onClick={() => {
+            <button type='button' onClick={() => {
                 NiceModal.show(modal);
-            }} />
+            }}>Open modal</button>
         </div>
     );
 };
@@ -186,12 +185,7 @@ export const CompletePage: Story = {
 
 export const CustomButtons: Story = {
     args: {
-        leftButtonProps: {
-            label: 'Left button',
-            onClick: () => {
-                alert('Left button click');
-            }
-        },
+        leftButton: <span>Left action slot</span>,
         cancelLabel: 'Nope',
         okLabel: 'Yep',
         onOk: () => {
diff --git a/apps/admin-x-design-system/src/global/modal/modal.tsx b/apps/admin-x-design-system/src/global/modal/modal.tsx
index c0a87c4d6b6..537b9bfac49 100644
--- a/apps/admin-x-design-system/src/global/modal/modal.tsx
+++ b/apps/admin-x-design-system/src/global/modal/modal.tsx
@@ -1,12 +1,11 @@
 import {useModal} from '@ebay/nice-modal-react';
 import clsx from 'clsx';
 import React, {useEffect, useState, forwardRef} from 'react';
-import Button, {ButtonColor, ButtonProps} from '../button';
-import ButtonGroup from '../button-group';
-import {StickyFooter} from '@tryghost/shade/components';
+import {Button, type ButtonProps, LoadingIndicator, StickyFooter} from '@tryghost/shade/components';
 import {DirtyConfirmDialog, useDirtyConfirmation} from '@tryghost/shade/patterns';
-import {Text} from '@tryghost/shade/primitives';
+import {Inline, Text} from '@tryghost/shade/primitives';
 import {useGlobalDirtyState} from '@tryghost/shade/utils';
+import Icon from '../icon';
 
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'bleed';
 
@@ -23,10 +22,10 @@ export interface ModalProps {
     testId?: string;
     title?: React.ReactNode;
     okLabel?: string;
-    okColor?: ButtonColor;
+    okVariant?: ButtonProps['variant'];
     okLoading?: boolean;
     cancelLabel?: string;
-    leftButtonProps?: ButtonProps;
+    leftButton?: React.ReactNode;
     buttonsDisabled?: boolean;
     okDisabled?: boolean;
     footer?: boolean | React.ReactNode;
@@ -64,12 +63,12 @@ const Modal = forwardRef<HTMLElement, ModalProps>(({
     cancelLabel = 'Cancel',
     footer,
     header,
-    leftButtonProps,
+    leftButton,
     buttonsDisabled,
     okDisabled,
     padding = true,
     onOk,
-    okColor = 'black',
+    okVariant = 'default',
     onCancel,
     topRightContent,
     hideXOnMobile = false,
@@ -161,8 +160,6 @@ const Modal = forwardRef<HTMLElement, ModalProps>(({
         }
     });
 
-    const buttons: ButtonProps[] = [];
-
     let contentClasses;
 
     const removeModal = () => {
@@ -172,34 +169,6 @@ const Modal = forwardRef<HTMLElement, ModalProps>(({
         });
     };
 
-    if (!footer) {
-        if (cancelLabel) {
-            buttons.push({
-                key: 'cancel-modal',
-                label: cancelLabel,
-                color: 'outline',
-                testId: 'cancel-modal',
-                onClick: (onCancel ? onCancel : () => {
-                    removeModal();
-                }),
-                disabled: buttonsDisabled
-            });
-        }
-
-        if (okLabel) {
-            buttons.push({
-                key: 'ok-modal',
-                label: okLabel,
-                color: okColor,
-                className: 'min-w-[80px]',
-                testId: 'ok-modal',
-                onClick: onOk,
-                disabled: buttonsDisabled || okDisabled,
-                loading: okLoading
-            });
-        }
-    }
-
     let modalClasses = clsx(
         'relative z-50 flex max-h-[100%] w-full flex-col justify-between overflow-x-hidden bg-white dark:bg-black',
         align === 'center' && 'mx-auto',
@@ -413,11 +382,21 @@ const Modal = forwardRef<HTMLElement, ModalProps>(({
         footerContent = (
             <div className={footerClasses}>
                 <div>
-                    {leftButtonProps && <Button {...leftButtonProps} />}
-                </div>
-                <div className='flex gap-3'>
-                    <ButtonGroup buttons={buttons}/>
+                    {leftButton}
                 </div>
+                <Inline gap='md'>
+                    {cancelLabel && (
+                        <Button className='font-semibold' data-testid='cancel-modal' disabled={buttonsDisabled} type='button' variant='ghost' onClick={onCancel || removeModal}>
+                            {cancelLabel}
+                        </Button>
+                    )}
+                    {okLabel && (
+                        <Button className='min-w-20' data-testid='ok-modal' disabled={buttonsDisabled || okDisabled || okLoading} type='button' variant={okVariant} onClick={onOk}>
+                            {okLoading && <LoadingIndicator size='sm' />}
+                            {okLabel}
+                        </Button>
+                    )}
+                </Inline>
             </div>
         );
     }
@@ -448,7 +427,9 @@ const Modal = forwardRef<HTMLElement, ModalProps>(({
                         (<header className={headerClasses}>
                             {title && <Text as='h3' className='md:text-2xl' leading='heading' size='xl' weight='bold'>{title}</Text>}
                             <div className={`${topRightContent !== 'close' && 'md:!invisible md:!hidden'} ${hideXOnMobile && 'hidden'} absolute top-6 right-6`}>
-                                <Button aria-label='Close modal' className='-m-2 cursor-pointer p-2 opacity-50 hover:opacity-100' icon='close' iconColorClass='text-black dark:text-white' size='sm' testId='close-modal' unstyled onClick={removeModal} />
+                                <Button aria-label='Close modal' className='-m-2 opacity-50 hover:opacity-100' data-testid='close-modal' size='icon' type='button' variant='ghost' onClick={removeModal}>
+                                    <Icon name='close' size='sm' />
+                                </Button>
                             </div>
                         </header>)
                         :
diff --git a/apps/admin-x-design-system/src/global/modal/preview-modal.stories.tsx b/apps/admin-x-design-system/src/global/modal/preview-modal.stories.tsx
index 5aabeb750ce..2680ea0a9db 100644
--- a/apps/admin-x-design-system/src/global/modal/preview-modal.stories.tsx
+++ b/apps/admin-x-design-system/src/global/modal/preview-modal.stories.tsx
@@ -2,15 +2,14 @@ import type {Meta, StoryContext, StoryObj} from '@storybook/react-vite';
 import {ReactNode} from 'react';
 
 import NiceModal from '@ebay/nice-modal-react';
-import Button from '../button';
 import PreviewModal, {PreviewModalProps} from './preview-modal';
 import {Text} from '@tryghost/shade/primitives';
 
 const PreviewModalContainer: React.FC<PreviewModalProps> = ({...props}) => {
     return (
-        <Button color='black' label='Open preview modal' onClick={() => {
+        <button type='button' onClick={() => {
             NiceModal.show(PreviewModal, {...props});
-        }} />
+        }}>Open preview modal</button>
     );
 };
 
@@ -64,7 +63,7 @@ export const CustomButtons: Story = {
         ...Default.args,
         cancelLabel: 'Meh',
         okLabel: 'Alrite',
-        okColor: 'green'
+        okVariant: 'default'
     }
 };
 
diff --git a/apps/admin-x-design-system/src/global/modal/preview-modal.tsx b/apps/admin-x-design-system/src/global/modal/preview-modal.tsx
index 727adf3cd05..b3aaf046126 100644
--- a/apps/admin-x-design-system/src/global/modal/preview-modal.tsx
+++ b/apps/admin-x-design-system/src/global/modal/preview-modal.tsx
@@ -1,12 +1,11 @@
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import clsx from 'clsx';
 import React, {useEffect} from 'react';
-import {ButtonColor, ButtonProps} from '../button';
-import ButtonGroup from '../button-group';
 import Icon from '../icon';
 import Modal, {ModalSize} from './modal';
+import {Button, type ButtonProps} from '@tryghost/shade/components';
 import {DirtyConfirmDialog, useDirtyConfirmation} from '@tryghost/shade/patterns';
-import {Text, type TextElement, type TextLeading, type TextSize} from '@tryghost/shade/primitives';
+import {Inline, Text, type TextElement, type TextLeading, type TextSize} from '@tryghost/shade/primitives';
 import {useGlobalDirtyState} from '@tryghost/shade/utils';
 
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
@@ -50,7 +49,7 @@ export interface PreviewModalProps {
     dirty?: boolean
     cancelLabel?: string;
     okLabel?: string;
-    okColor?: ButtonColor;
+    okVariant?: ButtonProps['variant'];
     buttonsDisabled?: boolean
     previewToolbar?: boolean;
     leftToolbar?: boolean;
@@ -85,7 +84,7 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
     dirty = false,
     cancelLabel = 'Cancel',
     okLabel = 'OK',
-    okColor = 'black',
+    okVariant = 'default',
     previewToolbar = true,
     leftToolbar = true,
     rightToolbar = true,
@@ -181,29 +180,12 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
         );
     }
 
-    const buttons: ButtonProps[] = [];
-
-    if (!sidebarButtons) {
-        buttons.push({
-            key: 'cancel-modal',
-            label: cancelLabel,
-            onClick: (onCancel ? onCancel : () => {
-                confirm(dirty, () => {
-                    modal.remove();
-                    afterClose?.();
-                });
-            }),
-            disabled: buttonsDisabled
+    const handleCancel = onCancel || (() => {
+        confirm(dirty, () => {
+            modal.remove();
+            afterClose?.();
         });
-
-        buttons.push({
-            key: 'ok-modal',
-            label: okLabel,
-            color: okColor,
-            onClick: onOk,
-            disabled: buttonsDisabled
-        });
-    }
+    });
 
     return (
         <Modal
@@ -238,7 +220,12 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
                                 >
                                     {title}
                                 </Text>
-                                {sidebarButtons ? sidebarButtons : <ButtonGroup buttons={buttons} /> }
+                                {sidebarButtons || (
+                                    <Inline gap='md'>
+                                        <Button className='font-semibold' disabled={buttonsDisabled} type='button' variant='ghost' onClick={handleCancel}>{cancelLabel}</Button>
+                                        <Button disabled={buttonsDisabled} type='button' variant={okVariant} onClick={onOk}>{okLabel}</Button>
+                                    </Inline>
+                                )}
                             </div>
                         )}
                         <div className={`${!sidebarHeader ? 'absolute inset-x-0 top-[80px] bottom-0 grow' : ''} ${sidebarPadding && 'p-7 pt-0'} flex flex-col justify-between overflow-y-auto ${sidebarContentClasses && sidebarContentClasses}`}>
diff --git a/apps/admin-x-design-system/src/global/tooltip.stories.tsx b/apps/admin-x-design-system/src/global/tooltip.stories.tsx
index 0feffd0bde8..536ad5f338a 100644
--- a/apps/admin-x-design-system/src/global/tooltip.stories.tsx
+++ b/apps/admin-x-design-system/src/global/tooltip.stories.tsx
@@ -1,6 +1,5 @@
 import type {Meta, StoryObj} from '@storybook/react-vite';
 
-import Button from './button';
 import Tooltip from './tooltip';
 
 const meta = {
@@ -20,14 +19,14 @@ type Story = StoryObj<typeof Tooltip>;
 export const Default: Story = {
     args: {
         content: 'Hello tooltip',
-        children: <Button color='outline' label="Hover me" />
+        children: <button type='button'>Hover me</button>
     }
 };
 
 export const MediumSize: Story = {
     args: {
         content: 'Hello tooltip',
-        children: <Button color='outline' label="Hover me" />,
+        children: <button type='button'>Hover me</button>,
         size: 'md'
     }
 };
@@ -35,7 +34,7 @@ export const MediumSize: Story = {
 export const Left: Story = {
     args: {
         content: 'Hello tooltip on the left',
-        children: <Button color='outline' label="Hover me" />,
+        children: <button type='button'>Hover me</button>,
         origin: 'start'
     }
 };
@@ -43,7 +42,7 @@ export const Left: Story = {
 export const Center: Story = {
     args: {
         content: 'Hello center tooltip',
-        children: <Button color='outline' label="Hover me" />,
+        children: <button type='button'>Hover me</button>,
         origin: 'center'
     }
 };
@@ -51,7 +50,7 @@ export const Center: Story = {
 export const Right: Story = {
     args: {
         content: 'Hello right tooltip',
-        children: <Button color='outline' label="Hover me" />,
+        children: <button type='button'>Hover me</button>,
         origin: 'end'
     }
 };
@@ -59,7 +58,7 @@ export const Right: Story = {
 export const Long: Story = {
     args: {
         content: `You're the best evil son an evil dad could ever ask for.`,
-        children: <Button color='outline' label="Hover me" />,
+        children: <button type='button'>Hover me</button>,
         size: 'md',
         origin: 'start'
     }
diff --git a/apps/admin-x-design-system/src/index.ts b/apps/admin-x-design-system/src/index.ts
index 9248a370fdb..44d88430e9f 100644
--- a/apps/admin-x-design-system/src/index.ts
+++ b/apps/admin-x-design-system/src/index.ts
@@ -28,10 +28,6 @@ export type {PreviewModalProps} from './global/modal/preview-modal';
 
 export {default as Banner} from './global/banner';
 export type {BannerProps} from './global/banner';
-export {default as Button} from './global/button';
-export type {ButtonColor, ButtonProps} from './global/button';
-export {default as ButtonGroup} from './global/button-group';
-export type {ButtonGroupProps} from './global/button-group';
 export {default as ErrorBoundary} from './global/error-boundary';
 export type {ErrorBoundaryProps} from './global/error-boundary';
 export {default as Icon} from './global/icon';
diff --git a/apps/admin-x-design-system/src/settings/setting-group-header.stories.tsx b/apps/admin-x-design-system/src/settings/setting-group-header.stories.tsx
index f7f91fe541e..38beadb2850 100644
--- a/apps/admin-x-design-system/src/settings/setting-group-header.stories.tsx
+++ b/apps/admin-x-design-system/src/settings/setting-group-header.stories.tsx
@@ -1,6 +1,5 @@
 import type {Meta, StoryObj} from '@storybook/react-vite';
 
-import ButtonGroup from '../global/button-group';
 import SettingGroupHeader from './setting-group-header';
 import {Text} from '@tryghost/shade/primitives';
 
@@ -17,10 +16,7 @@ export const Default: Story = {
     args: {
         title: 'Section group title',
         description: 'Section group description',
-        children: <ButtonGroup
-            buttons={[{label: 'Edit', color: 'green'}]}
-            link={true}
-        />
+        children: <span>Edit action slot</span>
     }
 };
 
@@ -28,15 +24,7 @@ export const Editing: Story = {
     args: {
         title: 'Section group title',
         description: 'Section group description',
-        children: <ButtonGroup
-            buttons={
-                [
-                    {label: 'Cancel'},
-                    {label: 'Save', color: 'green'}
-                ]
-            }
-            link={true}
-        />
+        children: <span>Cancel and save action slots</span>
     }
 };
 
@@ -49,10 +37,7 @@ export const CustomHeader: Story = {
                     <span className='mt-4 text-sm'>Cristofer Vaccaro — <strong>Owner</strong></span>
                     <span className='text-sm text-grey-500'>cristofer@example.com</span>
                 </div>
-                <ButtonGroup
-                    buttons={[{label: 'Invite users', color: 'green'}]}
-                    link={true}
-                />
+                <span>Invite users action slot</span>
             </>
     }
 };
diff --git a/apps/admin-x-design-system/src/settings/setting-group-header.tsx b/apps/admin-x-design-system/src/settings/setting-group-header.tsx
index 67c9df56ce3..27938d65e63 100644
--- a/apps/admin-x-design-system/src/settings/setting-group-header.tsx
+++ b/apps/admin-x-design-system/src/settings/setting-group-header.tsx
@@ -17,7 +17,7 @@ const SettingGroupHeader: React.FC<SettingGroupHeaderProps> = ({title, descripti
                     {description && <p className="mt-1 mr-5 hidden text-pretty group-[.is-not-editing]/setting-group:visible! group-[.is-not-editing]/setting-group:block! md:visible! md:block!">{description}</p>}
                 </div>
             }
-            <div>
+            <div className='[&_button]:text-control!'>
                 {children}
             </div>
         </div>
diff --git a/apps/admin-x-design-system/src/settings/setting-group.stories.tsx b/apps/admin-x-design-system/src/settings/setting-group.stories.tsx
index 5de25744567..dfc731464f6 100644
--- a/apps/admin-x-design-system/src/settings/setting-group.stories.tsx
+++ b/apps/admin-x-design-system/src/settings/setting-group.stories.tsx
@@ -4,7 +4,6 @@ import type {Meta, StoryObj} from '@storybook/react-vite';
 import * as SettingGroupContentStories from './setting-group-content.stories';
 import * as SettingGroupHeaderStories from './setting-group-header.stories';
 
-import ButtonGroup from '../global/button-group';
 import SettingGroup from './setting-group';
 import SettingGroupContent from './setting-group-content';
 import SettingGroupHeader from './setting-group-header';
@@ -24,7 +23,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const customButtons = <ButtonGroup buttons={[{label: 'My action', color: 'green'}]} link={true} />;
+const customButtons = <span>Custom action slot</span>;
 const customHeader = <SettingGroupHeader {...SettingGroupHeaderStories.CustomHeader.args} />;
 const singleColContent = <SettingGroupContent {...SettingGroupContentStories.SingleColumn.args} />;
 const twoColView = <SettingGroupContent {...SettingGroupContentStories.TwoColumns.args} />;
diff --git a/apps/admin-x-design-system/src/settings/setting-group.tsx b/apps/admin-x-design-system/src/settings/setting-group.tsx
index f5b780d4757..c67382704db 100644
--- a/apps/admin-x-design-system/src/settings/setting-group.tsx
+++ b/apps/admin-x-design-system/src/settings/setting-group.tsx
@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import React, {forwardRef, useEffect} from 'react';
-import {ButtonProps} from '../global/button';
-import ButtonGroup from '../global/button-group';
 import SettingGroupHeader from './setting-group-header';
+import {Button} from '@tryghost/shade/components';
+import {Inline} from '@tryghost/shade/primitives';
 
 export interface SettingGroupProps {
     navid?:string;
@@ -78,57 +78,20 @@ const SettingGroup = forwardRef<HTMLDivElement, SettingGroupProps>(function Sett
 
     styles += ' border-grey-200 dark:border-grey-900 dark:hover:border-grey-800';
 
-    // The links visible before editing
-    const viewButtons: ButtonProps[] = [];
-
-    if (!hideEditButton) {
-        let label = 'Edit';
-        if (saveState === 'saved') {
-            label = 'Saved';
-        }
-        viewButtons.push(
-            {
-                label,
-                key: 'edit',
-                color: 'clear',
-                onClick: handleEdit
-            }
-        );
-    } else if (saveState === 'saved') {
-        viewButtons.push(
-            {
-                label: 'Saved',
-                key: 'edit',
-                color: 'green',
-                onClick: handleEdit
-            }
-        );
-    }
-
-    // The buttons that show when you are editing
-    const editButtons: ButtonProps[] = [
-        {
-            label: 'Cancel',
-            key: 'cancel',
-            onClick: handleCancel
-        }
-    ];
-
-    if (saveState === 'unsaved' || alwaysShowSaveButton) {
-        let label = 'Save';
-        if (saveState === 'saving') {
-            label = 'Saving...';
-        }
-        editButtons.push(
-            {
-                label: label,
-                key: 'save',
-                color: saveState === 'unsaved' ? 'green' : 'light-grey',
-                disabled: saveState !== 'unsaved',
-                onClick: handleSave
-            }
-        );
-    }
+    const buttons = isEditing ? (
+        <Inline className='mt-[-5px]' gap='sm'>
+            <Button size='sm' type='button' variant='ghost' onClick={handleCancel}>Cancel</Button>
+            {(saveState === 'unsaved' || alwaysShowSaveButton) && (
+                <Button disabled={saveState !== 'unsaved'} size='sm' type='button' onClick={handleSave}>
+                    {saveState === 'saving' ? 'Saving...' : 'Save'}
+                </Button>
+            )}
+        </Inline>
+    ) : (!hideEditButton || saveState === 'saved') ? (
+        <Button className='mt-[-5px] -mr-1' size='sm' type='button' variant='ghost' onClick={handleEdit}>
+            {saveState === 'saved' ? 'Saved' : 'Edit'}
+        </Button>
+    ) : null;
 
     useEffect(() => {
         const handleCMDS = (e: KeyboardEvent) => {
@@ -161,7 +124,7 @@ const SettingGroup = forwardRef<HTMLDivElement, SettingGroupProps>(function Sett
                 {customHeader ? customHeader :
                     <SettingGroupHeader beta={beta} description={description} title={title!}>
                         {customButtons ? customButtons :
-                            (onEditingChange && <ButtonGroup buttons={isEditing ? editButtons : viewButtons} className={isEditing ? 'mt-[-5px]  ' : 'mt-[-5px] -mr-1'} size='sm' />)
+                            (onEditingChange && buttons)
                         }
                     </SettingGroupHeader>
                 }
@@ -175,7 +138,7 @@ const SettingGroup = forwardRef<HTMLDivElement, SettingGroupProps>(function Sett
                 {customHeader ? customHeader :
                     <SettingGroupHeader beta={beta} description={description} title={title!}>
                         {customButtons ? customButtons :
-                            (onEditingChange && <ButtonGroup buttons={isEditing ? editButtons : viewButtons} className={isEditing ? 'mt-[-5px]  ' : 'mt-[-5px] -mr-1'} size='sm' />)
+                            (onEditingChange && buttons)
                         }
                     </SettingGroupHeader>
                 }
diff --git a/apps/admin-x-framework/src/hooks/use-form.ts b/apps/admin-x-framework/src/hooks/use-form.ts
index 76a9d002ee6..c5e3ce88eda 100644
--- a/apps/admin-x-framework/src/hooks/use-form.ts
+++ b/apps/admin-x-framework/src/hooks/use-form.ts
@@ -1,8 +1,7 @@
 import {useCallback, useEffect, useState} from 'react';
+import type {ButtonProps} from '@tryghost/shade/components';
 
-// Structurally matches admin-x-design-system's ButtonColor so okProps.color stays
-// assignable to its Button color prop.
-export type ButtonColor = 'clear' | 'light-grey' | 'grey' | 'black' | 'green' | 'red' | 'white' | 'outline';
+export type ButtonVariant = NonNullable<ButtonProps['variant']>;
 
 export type Dirtyable<Data> = Data & {
     dirty?: boolean;
@@ -14,7 +13,7 @@ export type ErrorMessages = Record<string, string | undefined>
 
 export interface OkProps {
     disabled: boolean;
-    color: ButtonColor;
+    variant: ButtonVariant;
     label?: string;
 }
 
@@ -126,11 +125,11 @@ const useForm = <State>({initialState, savingDelay, savedDelay = 2000, onSave, o
         setSaveState('unsaved');
     }, []);
 
-    let okColor: ButtonColor = 'black';
+    let okVariant: ButtonVariant = 'default';
     if (saveState === 'saved') {
-        okColor = 'green';
+        okVariant = 'default';
     } else if (saveState === 'error') {
-        okColor = 'red';
+        okVariant = 'destructive';
     }
 
     let okLabel = '';
@@ -144,7 +143,7 @@ const useForm = <State>({initialState, savingDelay, savedDelay = 2000, onSave, o
 
     const okProps: OkProps = {
         disabled: saveState === 'saving',
-        color: okColor,
+        variant: okVariant,
         label: okLabel || undefined
     };
 
diff --git a/apps/admin-x-framework/test/unit/hooks/use-form.test.ts b/apps/admin-x-framework/test/unit/hooks/use-form.test.ts
index 3391693d283..b8284c9d792 100644
--- a/apps/admin-x-framework/test/unit/hooks/use-form.test.ts
+++ b/apps/admin-x-framework/test/unit/hooks/use-form.test.ts
@@ -427,7 +427,7 @@ describe('useForm', () => {
 
             expect(result.current!.okProps).toEqual({
                 disabled: false,
-                color: 'black',
+                variant: 'default',
                 label: undefined
             });
         });
@@ -455,7 +455,7 @@ describe('useForm', () => {
             // Check that we're in saving state
             expect(result.current!.okProps).toEqual({
                 disabled: true,
-                color: 'black',
+                variant: 'default',
                 label: 'Saving...'
             });
         });
@@ -475,7 +475,7 @@ describe('useForm', () => {
 
             expect(result.current!.okProps).toEqual({
                 disabled: false,
-                color: 'green',
+                variant: 'default',
                 label: 'Saved'
             });
         });
@@ -498,7 +498,7 @@ describe('useForm', () => {
 
             expect(result.current!.okProps).toEqual({
                 disabled: false,
-                color: 'red',
+                variant: 'destructive',
                 label: 'Retry'
             });
         });
diff --git a/apps/admin-x-settings/src/components/exit-settings-button.tsx b/apps/admin-x-settings/src/components/exit-settings-button.tsx
index ad64ce7e563..1ef2bfa68a5 100644
--- a/apps/admin-x-settings/src/components/exit-settings-button.tsx
+++ b/apps/admin-x-settings/src/components/exit-settings-button.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import {Button} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
 import {DirtyConfirmDialog, useDirtyConfirmation} from '@tryghost/shade/patterns';
+import {Icon} from '@tryghost/admin-x-design-system';
 import {useGlobalDirtyState} from '@tryghost/shade/utils';
 
 const ExitSettingsButton: React.FC = () => {
@@ -13,7 +14,9 @@ const ExitSettingsButton: React.FC = () => {
 
     return (
         <>
-            <Button className='text-grey-700 hover:text-grey-900!' data-testid="exit-settings" icon='close' id="done-button" label='' link={true} title='Close (ESC)' onClick={() => confirm(isDirty, navigateAway)} />
+            <Button aria-label='Close settings' className='text-muted-foreground hover:text-foreground' data-testid='exit-settings' id='done-button' size='icon' title='Close (ESC)' type='button' variant='ghost' onClick={() => confirm(isDirty, navigateAway)}>
+                <Icon name='close' size='sm' />
+            </Button>
             <DirtyConfirmDialog {...dialogProps} />
         </>
     );
diff --git a/apps/admin-x-settings/src/components/settings/advanced/code-injection.tsx b/apps/admin-x-settings/src/components/settings/advanced/code-injection.tsx
index ef75fe501c4..27dca675ce0 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/code-injection.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/code-injection.tsx
@@ -2,7 +2,8 @@ import CodeModal from './code/code-modal';
 import NiceModal from '@ebay/nice-modal-react';
 import React from 'react';
 import TopLevelGroup from '../../top-level-group';
-import {Button, SettingGroupHeader} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
+import {SettingGroupHeader} from '@tryghost/admin-x-design-system';
 import {withErrorBoundary} from '../../error-boundary';
 
 const CodeInjection: React.FC<{ keywords: string[] }> = ({keywords}) => {
@@ -11,9 +12,9 @@ const CodeInjection: React.FC<{ keywords: string[] }> = ({keywords}) => {
             customHeader={
                 <div className='z-10 flex items-start justify-between'>
                     <SettingGroupHeader description='Add custom code to your publication.' title='Code injection' />
-                    <Button className='mt-[-5px]' color='clear' label='Open' size='sm' onClick={() => {
+                    <Button className='mt-[-5px]' size='sm' type='button' variant='ghost' onClick={() => {
                         NiceModal.show(CodeModal);
-                    }} />
+                    }}>Open</Button>
                 </div>
             }
             description="Add custom code to your publication"
diff --git a/apps/admin-x-settings/src/components/settings/advanced/code/code-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/code/code-modal.tsx
index 25b2e768301..b614b469057 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/code/code-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/code/code-modal.tsx
@@ -2,10 +2,10 @@ import CodeEditor from '../../../code-editor';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useEffect, useMemo, useRef, useState} from 'react';
 import useSettingGroup from '../../../../hooks/use-setting-group';
-import {ButtonGroup, Modal} from '@tryghost/admin-x-design-system';
+import {Button, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
+import {Inline, Text} from '@tryghost/shade/primitives';
+import {Modal} from '@tryghost/admin-x-design-system';
 import {type ReactCodeMirrorRef} from '@uiw/react-codemirror';
-import {Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
-import {Text} from '@tryghost/shade/primitives';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
 import {useSaveButton} from '../../../../hooks/use-save-button';
 
@@ -74,22 +74,13 @@ const CodeModal: React.FC<CodeModalProps> = ({afterClose}) => {
         <div className='flex h-full flex-col'>
             <div className='mb-4 flex items-center justify-between'>
                 <Text as='h2' className='md:text-3xl' leading='heading' size='2xl' weight='bold'>Code injection</Text>
-                <ButtonGroup buttons={[
-                    {
-                        label: 'Close',
-                        color: 'outline',
-                        onClick: () => {
-                            modal.remove();
-                            afterClose?.();
-                        }
-                    },
-                    {
-                        disabled: isSaving,
-                        label: savingTitle,
-                        color: savingTitle === 'Saved' ? 'green' : 'black',
-                        onClick: onSaveClick
-                    }
-                ]} />
+                <Inline gap='md'>
+                    <Button className='font-semibold' type='button' variant='ghost' onClick={() => {
+                        modal.remove();
+                        afterClose?.();
+                    }}>Close</Button>
+                    <Button disabled={isSaving} type='button' onClick={onSaveClick}>{savingTitle}</Button>
+                </Inline>
             </div>
             <Tabs className='mb-16 flex flex-auto flex-col' value={selectedTab} variant='underline' onValueChange={value => setSelectedTab(value as typeof selectedTab)}>
                 <TabsList>
diff --git a/apps/admin-x-settings/src/components/settings/advanced/danger-zone.tsx b/apps/admin-x-settings/src/components/settings/advanced/danger-zone.tsx
index 125b187779a..e484d58466f 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/danger-zone.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/danger-zone.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import TopLevelGroup from '../../top-level-group';
 import trackEvent from '../../../utils/analytics';
 import useStaffUsers from '../../../hooks/use-staff-users';
-import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent} from '@tryghost/shade/components';
-import {Button, ConfirmationModal, SettingGroupHeader} from '@tryghost/admin-x-design-system';
+import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button} from '@tryghost/shade/components';
+import {ConfirmationModal, SettingGroupHeader} from '@tryghost/admin-x-design-system';
 import {formatNumber} from '@tryghost/shade/utils';
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
 import {toast} from 'sonner';
@@ -37,7 +37,7 @@ const DangerZone: React.FC<{ keywords: string[] }> = ({keywords}) => {
         NiceModal.show(ConfirmationModal, {
             title: 'Would you really like to delete all content from your blog?',
             prompt: 'This is permanent! No backups, no restores, no magic undo button. We warned you, k?',
-            okColor: 'red',
+            okVariant: 'destructive',
             okLabel: 'Delete',
             onOk: async (modal) => {
                 try {
@@ -67,7 +67,7 @@ const DangerZone: React.FC<{ keywords: string[] }> = ({keywords}) => {
             ),
             okLabel: 'Reset all authentication',
             okRunningLabel: 'Resetting...',
-            okColor: 'red',
+            okVariant: 'destructive',
             onOk: async (modal) => {
                 try {
                     const response = await resetAuth(null);
@@ -90,7 +90,7 @@ const DangerZone: React.FC<{ keywords: string[] }> = ({keywords}) => {
             prompt: 'This immediately invalidates every active gift link across your site. Anyone holding one will lose access. New gift links can still be created afterwards.',
             okLabel: 'Reset all gift links',
             okRunningLabel: 'Resetting...',
-            okColor: 'red',
+            okVariant: 'destructive',
             onOk: async (modal) => {
                 try {
                     const response = await removeAllGiftLinks(null);
@@ -120,7 +120,7 @@ const DangerZone: React.FC<{ keywords: string[] }> = ({keywords}) => {
                         <div>Delete all content</div>
                         <div className='text-sm text-muted-foreground'>Permanently delete all posts and tags from the database.</div>
                     </ActionListItemContent>
-                    <ActionListItemActions><Button aria-label='Delete all content' color='red' label='Delete' onClick={handleDeleteAllContent} /></ActionListItemActions>
+                    <ActionListItemActions><Button aria-label='Delete all content' size='sm' type='button' variant='destructive' onClick={handleDeleteAllContent}>Delete</Button></ActionListItemActions>
                 </ActionListItem>
                 {resetAuthEnabled && (
                     <ActionListItem data-testid='reset-all-authentication' hover={false}>
@@ -128,7 +128,7 @@ const DangerZone: React.FC<{ keywords: string[] }> = ({keywords}) => {
                             <div>Reset all authentication</div>
                             <div className='text-sm text-muted-foreground'>Rotate every API key, sign out every staff user, and require a password reset. Use after a suspected credential compromise.</div>
                         </ActionListItemContent>
-                        <ActionListItemActions><Button aria-label='Reset all authentication' color='red' label='Reset' onClick={handleResetAuth} /></ActionListItemActions>
+                        <ActionListItemActions><Button aria-label='Reset all authentication' size='sm' type='button' variant='destructive' onClick={handleResetAuth}>Reset</Button></ActionListItemActions>
                     </ActionListItem>
                 )}
                 <ActionListItem data-testid='reset-all-gift-links' hover={false}>
@@ -136,7 +136,7 @@ const DangerZone: React.FC<{ keywords: string[] }> = ({keywords}) => {
                         <div>Reset all gift links</div>
                         <div className='text-sm text-muted-foreground'>Invalidate every active gift link across your site. Anyone holding one will lose access.</div>
                     </ActionListItemContent>
-                    <ActionListItemActions><Button aria-label='Reset all gift links' color='red' label='Reset' onClick={handleRemoveAllGiftLinks} /></ActionListItemActions>
+                    <ActionListItemActions><Button aria-label='Reset all gift links' size='sm' type='button' variant='destructive' onClick={handleRemoveAllGiftLinks}>Reset</Button></ActionListItemActions>
                 </ActionListItem>
             </ActionList>
         </TopLevelGroup>
diff --git a/apps/admin-x-settings/src/components/settings/advanced/history-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/history-modal.tsx
index 41d0f2eb395..f3c5a0c8c26 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/history-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/history-modal.tsx
@@ -1,9 +1,9 @@
 import InfiniteScrollListener from '../../infinite-scroll-listener';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import {type Action, getActionTitle, getContextResource, getLinkTarget, isBulkAction, useBrowseActions} from '@tryghost/admin-x-framework/api/actions';
-import {ActionList, ActionListItem, ActionListItemContent, Avatar, Field, FieldLabel, LoadingIndicator, MultiSelectCombobox, NoValueLabel, NoValueLabelIcon, Popover, PopoverContent, PopoverTrigger, Switch, inputSurface} from '@tryghost/shade/components';
-import {Button, Icon, Modal} from '@tryghost/admin-x-design-system';
+import {ActionList, ActionListItem, ActionListItemContent, Avatar, Button, Field, FieldLabel, LoadingIndicator, MultiSelectCombobox, NoValueLabel, NoValueLabelIcon, Popover, PopoverContent, PopoverTrigger, Switch, inputSurface} from '@tryghost/shade/components';
 import {ChevronDown, History, X} from 'lucide-react';
+import {Icon, Modal} from '@tryghost/admin-x-design-system';
 import {Inline, Stack} from '@tryghost/shade/primitives';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
 import {type User} from '@tryghost/admin-x-framework/api/users';
@@ -153,7 +153,7 @@ const HistoryFilter: React.FC<{
         <Inline align='center' gap='md'>
             <Popover>
                 <PopoverTrigger asChild>
-                    <Button color='outline' label='Filter' />
+                    <Button type='button' variant='outline'>Filter</Button>
                 </PopoverTrigger>
                 <PopoverContent align='end' className='z-[9999] w-[220px]' data-testid='history-filters'>
                     <Stack gap='2xl'>
diff --git a/apps/admin-x-settings/src/components/settings/advanced/history.tsx b/apps/admin-x-settings/src/components/settings/advanced/history.tsx
index 85b4b07b96f..43eb3c4bf56 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/history.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/history.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import TopLevelGroup from '../../top-level-group';
-import {Button} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 import {withErrorBoundary} from '../../error-boundary';
 
@@ -12,7 +12,7 @@ const History: React.FC<{ keywords: string[] }> = ({keywords}) => {
 
     return (
         <TopLevelGroup
-            customButtons={<Button className='mt-[-5px]' color='clear' label='View history' size='sm' onClick={openHistoryModal}/>}
+            customButtons={<Button className='mt-[-5px]' size='sm' type='button' variant='ghost' onClick={openHistoryModal}>View history</Button>}
             description="View system event log"
             keywords={keywords}
             navid='history'
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations.tsx
index 141826127fd..b85ec3bc2e2 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations.tsx
@@ -3,8 +3,8 @@ import NiceModal from '@ebay/nice-modal-react';
 import React, {useState} from 'react';
 import TopLevelGroup from '../../top-level-group';
 import usePinturaEditor from '../../../hooks/use-pintura-editor';
-import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, NoValueLabel, NoValueLabelIcon, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
-import {Button, ConfirmationModal, Icon, SettingGroupHeader} from '@tryghost/admin-x-design-system';
+import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button, NoValueLabel, NoValueLabelIcon, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
+import {ConfirmationModal, Icon, SettingGroupHeader} from '@tryghost/admin-x-design-system';
 import {type Integration, useBrowseIntegrations, useDeleteIntegration} from '@tryghost/admin-x-framework/api/integrations';
 import {Plug} from 'lucide-react';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
@@ -66,11 +66,11 @@ const IntegrationItem: React.FC<IntegrationItemProps> = ({
     };
 
     const buttons = custom ?
-        <Button color='red' label='Delete' link onClick={handleDelete} />
+        <Button className='text-destructive hover:text-destructive' size='sm' type='button' variant='ghost' onClick={handleDelete}>Delete</Button>
         :
         (disabled ?
-            <Button icon='lock-locked' label='Upgrade' link onClick={handleClick} /> :
-            <Button color='green' label='Configure' link onClick={handleClick} />
+            <Button size='sm' type='button' variant='ghost' onClick={handleClick}><Icon name='lock-locked' size='xs' />Upgrade</Button> :
+            <Button className='h-auto p-0 font-bold text-green hover:text-green/90 hover:no-underline' size='sm' type='button' variant='link' onClick={handleClick}>Configure</Button>
         );
 
     return <ActionListItem className={disabled ? 'opacity-50 saturate-0' : ''} data-testid={testId}>
@@ -221,7 +221,7 @@ const CustomIntegrations: React.FC<{integrations: Integration[]}> = ({integratio
                             NiceModal.show(ConfirmationModal, {
                                 title: 'Are you sure?',
                                 prompt: 'Deleting this integration will remove all webhooks and api keys associated with it.',
-                                okColor: 'red',
+                                okVariant: 'destructive',
                                 okLabel: 'Delete Integration',
                                 onOk: async (confirmModal) => {
                                     try {
@@ -253,15 +253,15 @@ const Integrations: React.FC<{ keywords: string[] }> = ({keywords}) => {
 
     const buttons = (
         <Button
-            className='mt-[-5px] inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 font-semibold whitespace-nowrap text-grey-900 transition hover:bg-grey-200 dark:text-white dark:hover:bg-grey-900 [&:hover]:text-black'
-            color='clear'
-            label='Add custom integration'
-            link
+            className='mt-[-5px]'
+            size='sm'
+            type='button'
+            variant='ghost'
             onClick={() => {
                 updateRoute('integrations/new');
                 setSelectedTab('custom');
             }}
-        />
+        >Add custom integration</Button>
     );
 
     return (
@@ -275,10 +275,10 @@ const Integrations: React.FC<{ keywords: string[] }> = ({keywords}) => {
                     <div className=' z-10 mt-6 flex items-start justify-between'>
                         <SettingGroupHeader description='Make Ghost work with apps and tools.' title='Integrations' />
                         {
-                            <Button className='mt-[-5px] inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 font-semibold whitespace-nowrap text-grey-900 transition hover:bg-grey-200 dark:text-white dark:hover:bg-grey-900 [&:hover]:text-black' color='clear' label='Add custom integration' link onClick={() => {
+                            <Button className='mt-[-5px]' size='sm' type='button' variant='ghost' onClick={() => {
                                 updateRoute('integrations/new');
                                 setSelectedTab('custom');
-                            }} />
+                            }}>Add custom integration</Button>
                         }
                     </div>
                 </div>
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/add-integration-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/add-integration-modal.tsx
index 4719f7f47d7..346327f6944 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/add-integration-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/add-integration-modal.tsx
@@ -34,8 +34,8 @@ const AddIntegrationModal: React.FC<RoutingModalProps> = () => {
         afterClose={() => {
             updateRoute('integrations');
         }}
-        okColor='black'
         okLabel='Add'
+        okVariant='default'
         size='sm'
         testId='add-integration-modal'
         title='Add integration'
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/content-api-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/content-api-modal.tsx
index 212770d45ed..b2fd970a2df 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/content-api-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/content-api-modal.tsx
@@ -1,7 +1,8 @@
 import APIKeys from './api-keys';
 import IntegrationHeader from './integration-header';
 import NiceModal from '@ebay/nice-modal-react';
-import {Button, Icon, Modal} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
+import {Icon, Modal} from '@tryghost/admin-x-design-system';
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
 import {useBrowseIntegrations} from '@tryghost/admin-x-framework/api/integrations';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -22,11 +23,11 @@ const ContentApiModal = NiceModal.create(() => {
             cancelLabel=''
             footer={
                 <div className='mx-8 flex w-full items-center justify-between'>
-                    <Button color='outline' href='https://ghost.org/docs/content-api/' label={<span className='flex items-center gap-1'>Open docs <Icon name='arrow-top-right' size='xs' /></span>} rel='noopener noreferrer' tag='a' target='_blank' />
-                    <Button color='black' label='Close' onClick={() => {
+                    <Button variant='outline' asChild><a href='https://ghost.org/docs/content-api/' rel='noopener noreferrer' target='_blank'>Open docs <Icon name='arrow-top-right' size='xs' /></a></Button>
+                    <Button type='button' onClick={() => {
                         updateRoute('integrations');
                         modal.remove();
-                    }} />
+                    }}>Close</Button>
                 </div>
             }
             testId='content-api-modal'
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/custom-integration-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/custom-integration-modal.tsx
index 6d48f888a9b..36c15e4884f 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/custom-integration-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/custom-integration-modal.tsx
@@ -85,8 +85,8 @@ const CustomIntegrationModalContent: React.FC<{integration: Integration}> = ({in
         buttonsDisabled={okProps.disabled}
         cancelLabel='Close'
         dirty={saveState === 'unsaved'}
-        okColor={okProps.color}
         okLabel={okProps.label || 'Save'}
+        okVariant={okProps.variant}
         size='md'
         testId='custom-integration-modal'
         title={formState.name || 'Custom integration'}
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/first-promoter-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/first-promoter-modal.tsx
index cc15f53c621..3d8c30290d0 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/first-promoter-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/first-promoter-modal.tsx
@@ -62,8 +62,8 @@ const FirstPromoterModal = NiceModal.create(() => {
             }}
             cancelLabel='Close'
             dirty={enabled !== firstPromoterEnabled || accountId !== firstPromoterId}
-            okColor={okLabel === 'Saved' ? 'green' : 'black'}
             okLabel={okLabel}
+            okVariant='default'
             testId='firstpromoter-modal'
             title=''
             onOk={async () => {
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/pintura-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/pintura-modal.tsx
index 11890e32efa..91cc79138a9 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/pintura-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/pintura-modal.tsx
@@ -80,8 +80,8 @@ const PinturaModal = NiceModal.create(() => {
             }}
             cancelLabel='Close'
             dirty={isDirty}
-            okColor={okLabel === 'Saved' ? 'green' : 'black'}
             okLabel={okLabel}
+            okVariant='default'
             testId='pintura-modal'
             title=''
             onOk={handleToggleChange}
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/slack-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/slack-modal.tsx
index 33f549722d2..4a65f750fd0 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/slack-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/slack-modal.tsx
@@ -2,7 +2,8 @@ import IntegrationHeader from './integration-header';
 import NiceModal from '@ebay/nice-modal-react';
 import useSettingGroup from '../../../../hooks/use-setting-group';
 import validator from 'validator';
-import {Button, Form, Icon, Modal, TextField} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
+import {Form, Icon, Modal, TextField} from '@tryghost/admin-x-design-system';
 import {getSettingValues, useTestSlack} from '@tryghost/admin-x-framework/api/settings';
 import {toast} from 'sonner';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -43,8 +44,8 @@ const SlackModal = NiceModal.create(() => {
             }}
             cancelLabel='Close'
             dirty={isDirty}
-            okColor={okProps.color}
             okLabel={okProps.label || 'Save'}
+            okVariant={okProps.variant}
             testId='slack-modal'
             title=''
             onOk={async () => {
@@ -79,7 +80,7 @@ const SlackModal = NiceModal.create(() => {
                             value={slackUsername}
                             onChange={e => updateSetting('slack_username', e.target.value)}
                         />
-                        <Button color='outline' label='Send test notification' onClick={handleTestClick} />
+                        <Button type='button' variant='outline' onClick={handleTestClick}>Send test notification</Button>
                     </div>
                 </Form>
             </div>
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/transistor-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/transistor-modal.tsx
index 905a50d9009..7b5313a0c64 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/transistor-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/transistor-modal.tsx
@@ -94,8 +94,8 @@ const TransistorModal = NiceModal.create(() => {
             }}
             cancelLabel='Close'
             dirty={enabled !== transistorEnabled}
-            okColor={okLabel === 'Saved' ? 'green' : 'black'}
             okLabel={okLabel}
+            okVariant='default'
             testId='transistor-modal'
             title=''
             onOk={handleSave}
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/unsplash-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/unsplash-modal.tsx
index e73d75487b6..580151b28e7 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/unsplash-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/unsplash-modal.tsx
@@ -50,8 +50,8 @@ const UnsplashModal = NiceModal.create(() => {
             }}
             cancelLabel='Close'
             dirty={isDirty}
-            okColor={okLabel === 'Saved' ? 'green' : 'black'}
             okLabel={okLabel}
+            okVariant='default'
             testId='unsplash-modal'
             title=''
             onOk={handleToggleChange}
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/webhook-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/webhook-modal.tsx
index 6d01daf1a64..130bdd073c6 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/webhook-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/webhook-modal.tsx
@@ -53,8 +53,8 @@ const WebhookModal: React.FC<WebhookModalProps> = ({webhook, integrationId}) =>
     });
 
     return <Modal
-        okColor='black'
         okLabel={webhook ? 'Update' : 'Add'}
+        okVariant='default'
         size='sm'
         testId='webhook-modal'
         title='Add webhook'
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx
index 07d2d56aaf2..7a180ce0c65 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx
@@ -1,8 +1,8 @@
 import NiceModal from '@ebay/nice-modal-react';
 import WebhookModal from './webhook-modal';
-import {Button, ConfirmationModal} from '@tryghost/admin-x-design-system';
+import {Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from '@tryghost/shade/components';
+import {ConfirmationModal, Icon} from '@tryghost/admin-x-design-system';
 import {type Integration} from '@tryghost/admin-x-framework/api/integrations';
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from '@tryghost/shade/components';
 import {formatNumber} from '@tryghost/shade/utils';
 import {getWebhookEventLabel} from './webhook-event-options';
 import {toast} from 'sonner';
@@ -17,7 +17,7 @@ const WebhooksTable: React.FC<{integration: Integration}> = ({integration}) => {
         NiceModal.show(ConfirmationModal, {
             title: 'Are you sure?',
             prompt: 'Deleting this webhook may prevent the integration from functioning.',
-            okColor: 'red',
+            okVariant: 'destructive',
             okLabel: 'Delete Webhook',
             onOk: async (confirmModal) => {
                 try {
@@ -71,10 +71,10 @@ const WebhooksTable: React.FC<{integration: Integration}> = ({integration}) => {
                             })}
                         </TableCell>
                         <TableCell className='w-0 text-right'>
-                            <Button color='red' label='Delete' link onClick={(e) => {
-                                e?.stopPropagation();
+                            <Button className='text-destructive hover:text-destructive' size='sm' type='button' variant='ghost' onClick={(e) => {
+                                e.stopPropagation();
                                 handleDelete(webhook.id);
-                            }} />
+                            }}>Delete</Button>
                         </TableCell>
                     </TableRow>
                 ))}
@@ -82,17 +82,15 @@ const WebhooksTable: React.FC<{integration: Integration}> = ({integration}) => {
         </Table>
         <div className='mt-5'>
             <Button
-                color='green'
-                icon='add'
-                iconColorClass='text-green'
-                label='Add webhook'
+                className='h-auto p-0 text-green hover:text-green'
                 size='sm'
-                link
+                type='button'
+                variant='link'
                 onClick={() => {
                     NiceModal.show(WebhookModal, {
                         integrationId: integration.id
                     });
-                }} />
+                }}><Icon name='add' size='xs' />Add webhook</Button>
         </div>
     </div>);
 };
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/zapier-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/zapier-modal.tsx
index fe592d129d8..68004f6a791 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/zapier-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/zapier-modal.tsx
@@ -2,8 +2,8 @@ import APIKeys from './api-keys';
 import IntegrationHeader from './integration-header';
 import NiceModal from '@ebay/nice-modal-react';
 import ZapierLogo from '../../../../assets/images/zapier-logo.svg';
-import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent} from '@tryghost/shade/components';
-import {Button, ConfirmationModal, Icon, Modal} from '@tryghost/admin-x-design-system';
+import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button} from '@tryghost/shade/components';
+import {ConfirmationModal, Icon, Modal} from '@tryghost/admin-x-design-system';
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
 import {useBrowseIntegrations} from '@tryghost/admin-x-framework/api/integrations';
 import {useEffect, useState} from 'react';
@@ -79,13 +79,13 @@ const ZapierModal = NiceModal.create(() => {
                         target='_blank'>
                         View more Ghost integrations powered by <span><img alt='Zapier' className='relative top-[-2px] inline-block' src={ZapierLogo} /></span>
                     </a>
-                    <Button color='black' label='Close' onClick={() => {
+                    <Button type='button' onClick={() => {
                         modal.remove();
-                    }} />
+                    }}>Close</Button>
                 </div>
             }
-            okColor='black'
             okLabel='Close'
+            okVariant='default'
             testId='zapier-modal'
             title=''
             stickyFooter
@@ -123,7 +123,7 @@ const ZapierModal = NiceModal.create(() => {
                                 <span>{template.title}</span>
                             </div>
                         </ActionListItemContent>
-                        <ActionListItemActions visibility='hover'><Button className='font-semibold whitespace-nowrap text-[#FF4A00]' href={template.url} label='Use this Zap' tag='a' target='_blank' link unstyled /></ActionListItemActions>
+                        <ActionListItemActions visibility='hover'><Button className='h-auto p-0 font-semibold whitespace-nowrap text-[#FF4A00] hover:text-[#FF4A00]' variant='link' asChild><a href={template.url} rel='noopener noreferrer' target='_blank'>Use this Zap</a></Button></ActionListItemActions>
                     </ActionListItem>
                 ))}
             </ActionList>
diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs.tsx
index 783aeaecc1a..cb8b3dab774 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs.tsx
@@ -3,8 +3,8 @@ import LabsBubbles from '../../../assets/images/labs-bg.svg';
 import PrivateFeatures from './labs/private-features';
 import React, {useState} from 'react';
 import TopLevelGroup from '../../top-level-group';
-import {Button, SettingGroupHeader} from '@tryghost/admin-x-design-system';
-import {Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
+import {Button, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
+import {SettingGroupHeader} from '@tryghost/admin-x-design-system';
 import {useAutoExpandable} from '../../../hooks/use-auto-expandable';
 import {useGlobalData} from '../../providers/global-data-provider';
 import {withErrorBoundary} from '../../error-boundary';
@@ -26,11 +26,11 @@ const Labs: React.FC<{ keywords: string[] }> = ({keywords}) => {
                     />
                     <Button
                         className='mt-[-5px]'
-                        color={isOpen ? 'grey' : 'clear'}
-                        label={isOpen ? 'Close' : 'Open'}
                         size='sm'
+                        type='button'
+                        variant={isOpen ? 'secondary' : 'ghost'}
                         onClick={isOpen ? closeManually : openManually}
-                    />
+                    >{isOpen ? 'Close' : 'Open'}</Button>
                 </div>
             }
             isEditing={isOpen}
diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/beta-features.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/beta-features.tsx
index 9874c7f9fa9..cf9d866528f 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs/beta-features.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs/beta-features.tsx
@@ -3,8 +3,7 @@ import LabItem from './lab-item';
 import NiceModal from '@ebay/nice-modal-react';
 import React, {useState} from 'react';
 import YamlFileEditorModal from './yaml-file-editor-modal';
-import {ActionList, Dropzone, Button as ShadeButton} from '@tryghost/shade/components';
-import {Button} from '@tryghost/admin-x-design-system';
+import {ActionList, Button, Dropzone} from '@tryghost/shade/components';
 import {Inline, Stack} from '@tryghost/shade/primitives';
 import {downloadRedirects, useUploadRedirects} from '@tryghost/admin-x-framework/api/redirects';
 import {downloadRoutes, useUploadRoutes} from '@tryghost/admin-x-framework/api/routes';
@@ -98,9 +97,9 @@ const BetaFeatures: React.FC = () => {
                         >
                             {redirectsUploading ? 'Uploading ...' : 'Upload redirects file'}
                         </Dropzone>
-                        <ShadeButton size='sm' variant='secondary' onClick={openRedirectsEditor}>Edit</ShadeButton>
+                        <Button size='sm' type='button' variant='secondary' onClick={openRedirectsEditor}>Edit</Button>
                     </Inline>
-                    <Button color='green' label='Download current redirects' link onClick={() => downloadRedirects()} />
+                    <Button className='h-auto p-0 text-green hover:text-green' size='sm' type='button' variant='link' onClick={() => downloadRedirects()}>Download current redirects</Button>
                 </Stack>}
                 detail={<>Configure redirects for old or moved content, <br /> more info in the <a className='text-green' href="https://ghost.org/tutorials/implementing-redirects/" rel="noopener noreferrer" target="_blank">docs</a></>}
                 testId='redirects'
@@ -125,9 +124,9 @@ const BetaFeatures: React.FC = () => {
                         >
                             {routesUploading ? 'Uploading ...' : 'Upload routes file'}
                         </Dropzone>
-                        <ShadeButton size='sm' variant='secondary' onClick={openRoutesEditor}>Edit</ShadeButton>
+                        <Button size='sm' type='button' variant='secondary' onClick={openRoutesEditor}>Edit</Button>
                     </Inline>
-                    <Button color='green' label='Download current routes' link onClick={() => downloadRoutes()} />
+                    <Button className='h-auto p-0 text-green hover:text-green' size='sm' type='button' variant='link' onClick={() => downloadRoutes()}>Download current routes</Button>
                 </Stack>}
                 detail='Configure dynamic routing by modifying the routes.yaml file'
                 testId='routes'
diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/migration-options.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/migration-options.tsx
index 5a87bc0e812..a1cf288e6e9 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs/migration-options.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs/migration-options.tsx
@@ -1,8 +1,8 @@
 import LabItem from './lab-item';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useState} from 'react';
-import {ActionList, Dropzone} from '@tryghost/shade/components';
-import {Button, ConfirmationModal} from '@tryghost/admin-x-design-system';
+import {ActionList, Button, Dropzone} from '@tryghost/shade/components';
+import {ConfirmationModal} from '@tryghost/admin-x-design-system';
 import {downloadAllContent, useDeleteAllContent, useImportContent} from '@tryghost/admin-x-framework/api/db';
 import {toast} from 'sonner';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -61,7 +61,7 @@ const MigrationOptions: React.FC = () => {
         NiceModal.show(ConfirmationModal, {
             title: 'Would you really like to delete all content from your blog?',
             prompt: 'This is permanent! No backups, no restores, no magic undo button. We warned you, k?',
-            okColor: 'red',
+            okVariant: 'destructive',
             okLabel: 'Delete',
             onOk: async (modal) => {
                 try {
@@ -79,15 +79,15 @@ const MigrationOptions: React.FC = () => {
     return (
         <ActionList>
             <LabItem
-                action={<Button color='grey' label='Open importer' size='sm' onClick={handleImportContent} />}
+                action={<Button size='sm' type='button' variant='secondary' onClick={handleImportContent}>Open importer</Button>}
                 detail='Import posts from a JSON or zip file'
                 title='Import content' />
             <LabItem
-                action={<Button color='grey' label='Export' size='sm' onClick={() => downloadAllContent()} />}
+                action={<Button size='sm' type='button' variant='secondary' onClick={() => downloadAllContent()}>Export</Button>}
                 detail='Download all of your posts and settings in a single, glorious JSON file'
                 title='Export your content' />
             <LabItem
-                action={<Button color='red' label='Delete' size='sm' onClick={handleDeleteAllContent} />}
+                action={<Button size='sm' type='button' variant='destructive' onClick={handleDeleteAllContent}>Delete</Button>}
                 detail='Permanently delete all posts and tags from the database, a hard reset'
                 title='Delete all content' />
         </ActionList>
diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/yaml-file-editor-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/yaml-file-editor-modal.tsx
index 76e38c8a40c..8d508d6ec12 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs/yaml-file-editor-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs/yaml-file-editor-modal.tsx
@@ -2,8 +2,9 @@ import CodeEditor from '../../../code-editor';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useEffect, useMemo, useState} from 'react';
 import {APIError, JSONError} from '@tryghost/admin-x-framework/errors';
-import {ButtonGroup, Modal} from '@tryghost/admin-x-design-system';
-import {Text} from '@tryghost/shade/primitives';
+import {Button} from '@tryghost/shade/components';
+import {Inline, Text} from '@tryghost/shade/primitives';
+import {Modal} from '@tryghost/admin-x-design-system';
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
 import {toast} from 'sonner';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -153,19 +154,10 @@ const YamlFileEditorModal: React.FC<YamlFileEditorModalProps> = ({
             <div className='flex h-full min-h-0 flex-col'>
                 <div className='mb-4 flex items-center justify-between'>
                     <Text as='h2' className='md:text-3xl' leading='heading' size='2xl' weight='bold'>{title}</Text>
-                    <ButtonGroup buttons={[
-                        {
-                            label: 'Close',
-                            color: 'outline',
-                            onClick: closeModal
-                        },
-                        {
-                            disabled: !canSave,
-                            label: isSaving ? 'Saving...' : 'Save',
-                            color: 'black',
-                            onClick: () => void handleSave()
-                        }
-                    ]} />
+                    <Inline gap='md'>
+                        <Button className='font-semibold' type='button' variant='ghost' onClick={closeModal}>Close</Button>
+                        <Button disabled={!canSave} type='button' onClick={() => void handleSave()}>{isSaving ? 'Saving...' : 'Save'}</Button>
+                    </Inline>
                 </div>
 
                 {(loadError || saveError) && (
diff --git a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-export.tsx b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-export.tsx
index afd38c049cf..d101fe2f0ff 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-export.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-export.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import {Button} from '@tryghost/admin-x-design-system';
+import {Button, LoadingIndicator} from '@tryghost/shade/components';
+import {Icon} from '@tryghost/admin-x-design-system';
 import {blobDownloadFromEndpoint} from '@tryghost/admin-x-framework/helpers';
 import {downloadAllContent} from '@tryghost/admin-x-framework/api/db';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -26,8 +27,8 @@ const MigrationToolsExport: React.FC = () => {
 
     return (
         <div className='grid grid-cols-1 gap-4 pt-4 md:grid-cols-2 lg:grid-cols-3'>
-            <Button className='h-9! font-semibold!' color='grey' icon='export' iconColorClass='h-4! w-auto!' label='Content & settings' onClick={() => downloadAllContent()} />
-            <Button className='h-9! font-semibold!' color='grey' disabled={isExportingPosts} icon='baseline-chart' iconColorClass='h-4! w-auto!' label='Post analytics' loading={isExportingPosts} testId='post-analytics-export-button' onClick={exportPosts} />
+            <Button className='h-9 font-semibold' type='button' variant='secondary' onClick={() => downloadAllContent()}><Icon name='export' size='sm' />Content &amp; settings</Button>
+            <Button className='h-9 font-semibold' data-testid='post-analytics-export-button' disabled={isExportingPosts} type='button' variant='secondary' onClick={exportPosts}>{isExportingPosts ? <><LoadingIndicator size='sm' /><span className='sr-only'>Loading...</span></> : <><Icon name='baseline-chart' size='sm' />Post analytics</>}</Button>
         </div>
     );
 };
diff --git a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-import.tsx b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-import.tsx
index 774bfc3783b..d28c48befd3 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-import.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-import.tsx
@@ -1,34 +1,10 @@
 import NiceModal from '@ebay/nice-modal-react';
 import React from 'react';
 import UniversalImportModal from './universal-import-modal';
-import clsx from 'clsx';
+import {Button} from '@tryghost/shade/components';
 import {Icon} from '@tryghost/admin-x-design-system';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 
-const ImportButton: React.FC<{
-    icon?: React.ReactNode,
-    title?: string,
-    onClick?: () => void
-}> = ({
-    icon,
-    title,
-    onClick
-}) => {
-    const classNames = clsx(
-        'flex h-9 cursor-pointer items-center justify-center gap-2 rounded-md bg-grey-100 px-2 font-semibold transition-all hover:bg-grey-200 dark:bg-grey-900'
-    );
-    if (onClick) {
-        return (
-            <button className={classNames} type='button' onClick={onClick}>
-                {icon}
-                {title}
-            </button>
-        );
-    } else {
-        return <></>;
-    }
-};
-
 const MigrationToolsImport: React.FC = () => {
     const {updateRoute} = useRouting();
 
@@ -36,57 +12,24 @@ const MigrationToolsImport: React.FC = () => {
         NiceModal.show(UniversalImportModal);
     };
 
+    const importers = [
+        {icon: <Icon className='w-auto' name='substack' size={18} />, title: 'Substack', onClick: () => updateRoute({isExternal: true, route: '/migrate/substack'})},
+        {icon: <Icon className='w-auto' name='beehiiv' size={18} />, title: 'beehiiv', onClick: () => updateRoute({isExternal: true, route: '/migrate/beehiiv'})},
+        {icon: <Icon className='w-auto' name='wordpress' size={18} />, title: 'WordPress', onClick: () => updateRoute({isExternal: true, route: '/migrate/wordpress'})},
+        {icon: <Icon className='w-auto' name='squarespace' size={18} />, title: 'Squarespace', onClick: () => updateRoute({isExternal: true, route: '/migrate/squarespace'})},
+        {icon: <Icon className='w-auto dark:invert' name='medium' size={18} />, title: 'Medium', onClick: () => updateRoute({isExternal: true, route: '/migrate/medium'})},
+        {icon: <Icon className='w-auto' name='mailchimp' size={20} />, title: 'Mailchimp', onClick: () => updateRoute({isExternal: true, route: '/migrate/mailchimp'})},
+        {icon: <Icon className='w-auto' name='import' size={16} />, title: 'Universal import', onClick: handleImportContent}
+    ];
+
     return (
         <div className='grid grid-cols-1 gap-4 pt-4 md:grid-cols-2 lg:grid-cols-3'>
-            <ImportButton
-                icon={
-                    <Icon className='w-auto' name='substack' size={18} />
-                }
-                title='Substack'
-                onClick={() => updateRoute({isExternal: true, route: '/migrate/substack'})}
-            />
-            <ImportButton
-                icon={
-                    <Icon className='w-auto' name='beehiiv' size={18} />
-                }
-                title='beehiiv'
-                onClick={() => updateRoute({isExternal: true, route: '/migrate/beehiiv'})}
-            />
-            <ImportButton
-                icon={
-                    <Icon className='w-auto' name='wordpress' size={18} />
-                }
-                title='WordPress'
-                onClick={() => updateRoute({isExternal: true, route: '/migrate/wordpress'})}
-            />
-            <ImportButton
-                icon={
-                    <Icon className='w-auto' name='squarespace' size={18} />
-                }
-                title='Squarespace'
-                onClick={() => updateRoute({isExternal: true, route: '/migrate/squarespace'})}
-            />
-            <ImportButton
-                icon={
-                    <Icon className='w-auto dark:invert' name='medium' size={18} />
-                }
-                title='Medium'
-                onClick={() => updateRoute({isExternal: true, route: '/migrate/medium'})}
-            />
-            <ImportButton
-                icon={
-                    <Icon className='w-auto' name='mailchimp' size={20} />
-                }
-                title='Mailchimp'
-                onClick={() => updateRoute({isExternal: true, route: '/migrate/mailchimp'})}
-            />
-            <ImportButton
-                icon={
-                    <Icon className='w-auto' name='import' size={16} />
-                }
-                title='Universal import'
-                onClick={handleImportContent}
-            />
+            {importers.map(importer => (
+                <Button key={importer.title} className='h-9 font-semibold' type='button' variant='secondary' onClick={importer.onClick}>
+                    {importer.icon}
+                    {importer.title}
+                </Button>
+            ))}
         </div>
     );
 };
diff --git a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/universal-import-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/universal-import-modal.tsx
index f7d5cecbae8..2b8ee04a699 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/universal-import-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/universal-import-modal.tsx
@@ -1,7 +1,7 @@
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useState} from 'react';
-import {Button, ConfirmationModal, Modal} from '@tryghost/admin-x-design-system';
-import {Dropzone} from '@tryghost/shade/components';
+import {Button, Dropzone} from '@tryghost/shade/components';
+import {ConfirmationModal, Modal} from '@tryghost/admin-x-design-system';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {useImportContent} from '@tryghost/admin-x-framework/api/db';
 
@@ -17,7 +17,7 @@ const UniversalImportModal: React.FC = () => {
             footer={
                 <div className='flex w-full items-center justify-between p-8'>
                     <a className='text-green hover:text-green-400' href="https://docs.ghost.org/migration/ghost" rel='noopener noreferrer' target="_blank">Learn about importing</a>
-                    <Button color='outline' disabled={uploading} label='Cancel' onClick={() => modal.remove()} />
+                    <Button className='font-semibold' disabled={uploading} type='button' variant='ghost' onClick={() => modal.remove()}>Cancel</Button>
                 </div>
             }
             okLabel=''
diff --git a/apps/admin-x-settings/src/components/settings/email-design/email-design-modal.tsx b/apps/admin-x-settings/src/components/settings/email-design/email-design-modal.tsx
index ca712f6f005..ac029dad3cb 100644
--- a/apps/admin-x-settings/src/components/settings/email-design/email-design-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/email-design/email-design-modal.tsx
@@ -11,7 +11,7 @@ interface EmailDesignModalProps {
     sidebar: React.ReactNode;
     dirty?: boolean;
     isLoading?: boolean;
-    okProps?: Pick<OkProps, 'color' | 'disabled' | 'label'>;
+    okProps?: Pick<OkProps, 'disabled' | 'label' | 'variant'>;
     onSave: () => void;
     onClose: () => void;
     afterClose?: () => void;
@@ -94,11 +94,11 @@ const EmailDesignModal: React.FC<EmailDesignModalProps> = ({
                         <div className="flex items-center justify-between px-6 py-5">
                             <DialogTitle>{title}</DialogTitle>
                             <div className="flex items-center gap-2">
-                                <Button variant="outline" onClick={() => handleClose()}>Close</Button>
+                                <Button className='font-semibold' type='button' variant='ghost' onClick={() => handleClose()}>Close</Button>
                                 <Button
-                                    className={okProps?.color === 'green' ? 'bg-green text-white hover:bg-green/90' : undefined}
                                     disabled={isLoading || okProps?.disabled}
-                                    variant={okProps?.color === 'red' ? 'destructive' : 'default'}
+                                    type='button'
+                                    variant={okProps?.variant}
                                     onClick={onSave}
                                 >
                                     {okProps?.label || 'Save'}
diff --git a/apps/admin-x-settings/src/components/settings/email/emails.tsx b/apps/admin-x-settings/src/components/settings/email/emails.tsx
index 82e4c039e75..d151a58fc91 100644
--- a/apps/admin-x-settings/src/components/settings/email/emails.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/emails.tsx
@@ -9,8 +9,8 @@ import TopLevelGroup from '../../top-level-group';
 import WelcomeEmailCustomizeModal from '../membership/member-emails/welcome-email-customize-modal';
 import useQueryParams from '../../../hooks/use-query-params';
 import {APIError} from '@tryghost/admin-x-framework/errors';
-import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
-import {Button, ConfirmationModal, Icon} from '@tryghost/admin-x-design-system';
+import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
+import {ConfirmationModal, Icon} from '@tryghost/admin-x-design-system';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
 import {useGlobalData} from '../../providers/global-data-provider';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -49,7 +49,7 @@ const TransactionalTabContent: React.FC = () => {
                     </span>
                 </button>
                 </ActionListItemContent>
-                <ActionListItemActions><button className='font-semibold text-green hover:opacity-80' type='button' onClick={openCustomizeModal}>Edit</button></ActionListItemActions>
+                <ActionListItemActions><Button className='h-auto p-0 font-bold text-green hover:text-green/90 hover:no-underline' type='button' variant='link' onClick={openCustomizeModal}>Edit</Button></ActionListItemActions>
             </ActionListItem>
         </ActionList>
     );
@@ -135,7 +135,7 @@ const EmailsGroup: React.FC<{ keywords: string[]; newslettersEnabled: boolean }>
     };
 
     const customButtons = newslettersEnabled && selectedTab === 'newsletters' ? (
-        <Button className='mt-[-5px]' color='clear' label='Add newsletter' size='sm' onClick={openNewNewsletter} />
+        <Button className='mt-[-5px]' size='sm' type='button' variant='ghost' onClick={openNewNewsletter}>Add newsletter</Button>
     ) : undefined;
 
     return (
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters.tsx
index ac39f986490..ec1ae707a24 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters.tsx
@@ -4,10 +4,10 @@ import React, {type ReactNode, useEffect, useState} from 'react';
 import TopLevelGroup from '../../top-level-group';
 import useQueryParams from '../../../hooks/use-query-params';
 import {APIError} from '@tryghost/admin-x-framework/errors';
-import {Button, ConfirmationModal} from '@tryghost/admin-x-design-system';
+import {Button, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
+import {ConfirmationModal} from '@tryghost/admin-x-design-system';
 import {type InfiniteData, useQueryClient} from '@tryghost/admin-x-framework';
 import {type Newsletter, type NewslettersResponseType, newslettersDataType, useBrowseNewsletters, useEditNewsletter, useVerifyNewsletterEmail} from '@tryghost/admin-x-framework/api/newsletters';
-import {Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
 import {arrayMove} from '@dnd-kit/sortable';
 import {formatNumber} from '@tryghost/shade/utils';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -18,10 +18,10 @@ const NavigateToNewsletter = ({id, children}: {id: string; children: ReactNode})
     const modal = useModal();
     const {updateRoute} = useRouting();
 
-    return <button className="text-green" type="button" onClick={() => {
+    return <Button className='h-auto p-0 text-green hover:text-green' type='button' variant='link' onClick={() => {
         updateRoute(`newsletters/${id}`);
         modal.remove();
-    }}>{children}</button>;
+    }}>{children}</Button>;
 };
 
 const Newsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
@@ -93,9 +93,9 @@ const Newsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
     }, [verifyEmailToken, handleError, verifyEmail]);
 
     const buttons = (
-        <Button className='mt-[-5px]' color='clear' label='Add newsletter' size='sm' onClick={() => {
+        <Button className='mt-[-5px]' size='sm' type='button' variant='ghost' onClick={() => {
             openNewsletterModal();
-        }} />
+        }}>Add newsletter</Button>
     );
 
     const sortedActiveNewsletters = newsletters.filter(n => n.status === 'active').sort((a, b) => a.sort_order - b.sort_order) || [];
@@ -154,11 +154,9 @@ const Newsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
                 <TabsContent value='active-newsletters'><NewslettersList isLoading={isLoading} newsletters={sortedActiveNewsletters} isSortable onSort={onSort} /></TabsContent>
                 <TabsContent value='archived-newsletters'><NewslettersList isLoading={isLoading} newsletters={archivedNewsletters} /></TabsContent>
             </Tabs>
-            {isEnd === false && <Button
-                label={`Load more (showing ${formatNumber(newsletters?.length || 0)}/${formatNumber(meta?.pagination.total || 0)} newsletters)`}
-                link
-                onClick={() => fetchNextPage()}
-            />}
+            {isEnd === false && <Button type='button' variant='link' onClick={() => fetchNextPage()}>
+                Load more (showing {formatNumber(newsletters?.length || 0)}/{formatNumber(meta?.pagination.total || 0)} newsletters)
+            </Button>}
         </TopLevelGroup>
     );
 };
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/add-newsletter-modal.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/add-newsletter-modal.tsx
index 070b0fe4f22..19e7d0a43f4 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/add-newsletter-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/add-newsletter-modal.tsx
@@ -93,10 +93,10 @@ const AddNewsletterModal: React.FC<RoutingModalProps> = () => {
             updateRoute(returnRoute);
         }}
         backDropClick={false}
-        okColor='black'
         okDisabled={saveState === 'saving'}
         okLabel='Create'
         okLoading={saveState === 'saving'}
+        okVariant='default'
         size='sm'
         testId='add-newsletter-modal'
         title='Create newsletter'
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx
index cc964e36e0f..ad059f45252 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx
@@ -6,9 +6,9 @@ import React, {useCallback, useEffect, useState} from 'react';
 import useFeatureFlag from '../../../../hooks/use-feature-flag';
 import useSettingGroup from '../../../../hooks/use-setting-group';
 import validator from 'validator';
-import {Button, ButtonGroup, ConfirmationModal, Form, Icon, LimitModal, PreviewModalContent, TextField} from '@tryghost/admin-x-design-system';
+import {Button, Field, FieldContent, FieldDescription, FieldLabel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipTrigger} from '@tryghost/shade/components';
+import {ConfirmationModal, Form, Icon, LimitModal, PreviewModalContent, TextField} from '@tryghost/admin-x-design-system';
 import {type ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
-import {Field, FieldContent, FieldDescription, FieldLabel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea} from '@tryghost/shade/components';
 import {HostLimitError, useLimiter} from '../../../../hooks/use-limiter';
 import {ImageUpload, ImageUploadAction, ImageUploadActions, ImageUploadDropzone, ImageUploadImage, ImageUploadPreview} from '@tryghost/shade/patterns';
 import {type Newsletter, useBrowseNewsletters, useEditNewsletter} from '@tryghost/admin-x-framework/api/newsletters';
@@ -24,6 +24,33 @@ import {textColorForBackgroundColor} from '@tryghost/color-utils';
 import {toast} from 'sonner';
 import {useGlobalData} from '../../../providers/global-data-provider';
 
+interface IconToggleOption {
+    value: string;
+    label: string;
+    icon: string;
+    disabled?: boolean;
+}
+
+const IconToggleGroup: React.FC<{
+    label: string;
+    value: string;
+    options: IconToggleOption[];
+    onValueChange: (value: string) => void;
+}> = ({label, value, options, onValueChange}) => (
+    <ToggleGroup aria-label={label} type='single' value={value} onValueChange={nextValue => nextValue && onValueChange(nextValue)}>
+        {options.map(option => (
+            <Tooltip key={option.value}>
+                <TooltipTrigger asChild>
+                    <ToggleGroupItem aria-label={option.label} disabled={option.disabled} value={option.value}>
+                        <Icon name={option.icon} size='sm' />
+                    </ToggleGroupItem>
+                </TooltipTrigger>
+                <TooltipContent>{option.label}</TooltipContent>
+            </Tooltip>
+        ))}
+    </ToggleGroup>
+);
+
 const ReplyToEmailField: React.FC<{
     newsletter: Newsletter;
     updateNewsletter: (fields: Partial<Newsletter>) => void;
@@ -139,7 +166,7 @@ const Sidebar: React.FC<{
                     <div>Existing posts previously sent as this newsletter will remain unchanged.</div>
                 </>,
                 okLabel: 'Archive',
-                okColor: 'red',
+                okVariant: 'destructive',
                 onOk: async (modal) => {
                     try {
                         await editNewsletter({...newsletter, status: 'archived'});
@@ -279,7 +306,7 @@ const Sidebar: React.FC<{
                     </Field>
                 </Form>
                 <div className='mt-10 mb-5'>
-                    {newsletter.status === 'active' ? (!onlyOne && <Button color='red' disabled={activeNewsletters.length === 1} label='Archive newsletter' link onClick={confirmStatusChange}/>) : <Button color='green' label='Reactivate newsletter' link onClick={confirmStatusChange} />}
+                    {newsletter.status === 'active' ? (!onlyOne && <Button className='text-destructive hover:text-destructive' disabled={activeNewsletters.length === 1} type='button' variant='ghost' onClick={confirmStatusChange}>Archive newsletter</Button>) : <Button className='text-green hover:text-green' type='button' variant='ghost' onClick={confirmStatusChange}>Reactivate newsletter</Button>}
                 </div>
             </>
         },
@@ -501,32 +528,15 @@ const Sidebar: React.FC<{
                     </div>
                     <div className='flex w-full justify-between'>
                         <div>Title alignment</div>
-                        <ButtonGroup activeKey={newsletter.title_alignment} buttons={[
-                            {
-                                key: 'left',
-                                icon: 'align-left',
-                                iconSize: 14,
-                                label: 'Align left',
-                                tooltip: 'Left',
-                                hideLabel: true,
-                                link: false,
-                                size: 'sm',
-                                onClick: () => updateNewsletter({title_alignment: 'left'}),
-                                disabled: !newsletter.show_post_title_section
-                            },
-                            {
-                                key: 'center',
-                                icon: 'align-center',
-                                iconSize: 14,
-                                label: 'Align center',
-                                tooltip: 'Center',
-                                hideLabel: true,
-                                link: false,
-                                size: 'sm',
-                                onClick: () => updateNewsletter({title_alignment: 'center'}),
-                                disabled: !newsletter.show_post_title_section
-                            }
-                        ]} clearBg={false} />
+                        <IconToggleGroup
+                            label='Title alignment'
+                            options={[
+                                {value: 'left', label: 'Left', icon: 'align-left', disabled: !newsletter.show_post_title_section},
+                                {value: 'center', label: 'Center', icon: 'align-center', disabled: !newsletter.show_post_title_section}
+                            ]}
+                            value={newsletter.title_alignment}
+                            onValueChange={titleAlignment => updateNewsletter({title_alignment: titleAlignment})}
+                        />
                     </div>
                 </Form>
 
@@ -575,68 +585,28 @@ const Sidebar: React.FC<{
                     </div>
                     <div className='flex w-full justify-between'>
                         <div>Button style</div>
-                        <ButtonGroup activeKey={newsletter.button_style || 'fill'} buttons={[
-                            {
-                                key: 'fill',
-                                icon: 'squircle-fill',
-                                iconSize: 14,
-                                label: 'Fill',
-                                tooltip: 'Fill',
-                                hideLabel: true,
-                                link: false,
-                                size: 'sm',
-                                onClick: () => updateNewsletter({button_style: 'fill'})
-                            },
-                            {
-                                key: 'outline',
-                                icon: 'squircle',
-                                iconSize: 14,
-                                label: 'Outline',
-                                tooltip: 'Outline',
-                                hideLabel: true,
-                                link: false,
-                                size: 'sm',
-                                onClick: () => updateNewsletter({button_style: 'outline'})
-                            }
-                        ]} clearBg={false} />
+                        <IconToggleGroup
+                            label='Button style'
+                            options={[
+                                {value: 'fill', label: 'Fill', icon: 'squircle-fill'},
+                                {value: 'outline', label: 'Outline', icon: 'squircle'}
+                            ]}
+                            value={newsletter.button_style || 'fill'}
+                            onValueChange={buttonStyle => updateNewsletter({button_style: buttonStyle})}
+                        />
                     </div>
                     <div className='flex w-full justify-between'>
                         <div>Button corners</div>
-                        <ButtonGroup activeKey={newsletter.button_corners || 'rounded'} buttons={[
-                            {
-                                key: 'square',
-                                icon: 'square',
-                                iconSize: 14,
-                                label: 'Square',
-                                tooltip: 'Squared',
-                                hideLabel: true,
-                                link: false,
-                                size: 'sm',
-                                onClick: () => updateNewsletter({button_corners: 'square'})
-                            },
-                            {
-                                key: 'rounded',
-                                icon: 'squircle',
-                                iconSize: 14,
-                                label: 'Rounded',
-                                tooltip: 'Rounded',
-                                hideLabel: true,
-                                link: false,
-                                size: 'sm',
-                                onClick: () => updateNewsletter({button_corners: 'rounded'})
-                            },
-                            {
-                                key: 'pill',
-                                icon: 'circle',
-                                iconSize: 14,
-                                label: 'Pill',
-                                tooltip: 'Pill',
-                                hideLabel: true,
-                                link: false,
-                                size: 'sm',
-                                onClick: () => updateNewsletter({button_corners: 'pill'})
-                            }
-                        ]} clearBg={false} />
+                        <IconToggleGroup
+                            label='Button corners'
+                            options={[
+                                {value: 'square', label: 'Squared', icon: 'square'},
+                                {value: 'rounded', label: 'Rounded', icon: 'squircle'},
+                                {value: 'pill', label: 'Pill', icon: 'circle'}
+                            ]}
+                            value={newsletter.button_corners || 'rounded'}
+                            onValueChange={buttonCorners => updateNewsletter({button_corners: buttonCorners})}
+                        />
                     </div>
                     <div className='mb-1'>
                         <ColorPickerField
@@ -661,68 +631,28 @@ const Sidebar: React.FC<{
                     </div>
                     <div className='flex w-full justify-between'>
                         <div>Link style</div>
-                        <ButtonGroup activeKey={newsletter.link_style || 'underline'} buttons={[
-                            {
-                                key: 'underline',
-                                icon: 'text-underline',
-                                iconSize: 14,
-                                label: 'Underline',
-                                tooltip: 'Underline',
-                                hideLabel: true,
-                                link: false,
-                                size: 'sm',
-                                onClick: () => updateNewsletter({link_style: 'underline'})
-                            },
-                            {
-                                key: 'regular',
-                                icon: 'text-regular',
-                                iconSize: 14,
-                                label: 'Regular',
-                                tooltip: 'Regular',
-                                hideLabel: true,
-                                link: false,
-                                size: 'sm',
-                                onClick: () => updateNewsletter({link_style: 'regular'})
-                            },
-                            {
-                                key: 'bold',
-                                icon: 'text-bold',
-                                iconSize: 14,
-                                label: 'Bold',
-                                tooltip: 'Bold',
-                                hideLabel: true,
-                                link: false,
-                                size: 'sm',
-                                onClick: () => updateNewsletter({link_style: 'bold'})
-                            }
-                        ]} clearBg={false} />
+                        <IconToggleGroup
+                            label='Link style'
+                            options={[
+                                {value: 'underline', label: 'Underline', icon: 'text-underline'},
+                                {value: 'regular', label: 'Regular', icon: 'text-regular'},
+                                {value: 'bold', label: 'Bold', icon: 'text-bold'}
+                            ]}
+                            value={newsletter.link_style || 'underline'}
+                            onValueChange={linkStyle => updateNewsletter({link_style: linkStyle})}
+                        />
                     </div>
                     <div className='flex w-full justify-between'>
                         <div>Image corners</div>
-                        <ButtonGroup activeKey={newsletter.image_corners || 'square'} buttons={[
-                            {
-                                key: 'square',
-                                icon: 'square',
-                                iconSize: 14,
-                                label: 'Square',
-                                tooltip: 'Squared',
-                                hideLabel: true,
-                                link: false,
-                                size: 'sm',
-                                onClick: () => updateNewsletter({image_corners: 'square'})
-                            },
-                            {
-                                key: 'rounded',
-                                icon: 'squircle',
-                                iconSize: 14,
-                                label: 'Rounded',
-                                tooltip: 'Rounded',
-                                hideLabel: true,
-                                link: false,
-                                size: 'sm',
-                                onClick: () => updateNewsletter({image_corners: 'rounded'})
-                            }
-                        ]} clearBg={false} />
+                        <IconToggleGroup
+                            label='Image corners'
+                            options={[
+                                {value: 'square', label: 'Squared', icon: 'square'},
+                                {value: 'rounded', label: 'Rounded', icon: 'squircle'}
+                            ]}
+                            value={newsletter.image_corners || 'square'}
+                            onValueChange={imageCorners => updateNewsletter({image_corners: imageCorners})}
+                        />
                     </div>
                     <div className='mb-1'>
                         <ColorPickerField
@@ -831,8 +761,8 @@ const NewsletterDetailModalContent: React.FC<{newsletter: Newsletter; onlyOne: b
         buttonsDisabled={okProps.disabled}
         cancelLabel='Close'
         dirty={saveState === 'unsaved'}
-        okColor={okProps.color}
         okLabel={okProps.label || 'Save'}
+        okVariant={okProps.variant}
         preview={preview}
         previewBgColor={'grey'}
         previewToolbar={false}
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx
index a7153edb22d..657d7c0b3de 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, DragIndicator, LoadingIndicator, NoValueLabel, NoValueLabelIcon, type SortableItemContainerProps, SortableList} from '@tryghost/shade/components';
-import {Button} from '@tryghost/admin-x-design-system';
+import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button, DragIndicator, LoadingIndicator, NoValueLabel, NoValueLabelIcon, type SortableItemContainerProps, SortableList} from '@tryghost/shade/components';
+import {Inline} from '@tryghost/shade/primitives';
 import {MailX} from 'lucide-react';
 import {type Newsletter} from '@tryghost/admin-x-framework/api/newsletters';
 import {formatNumber} from '@tryghost/shade/utils';
@@ -33,14 +33,14 @@ const NewsletterItemContainer: React.FC<Partial<SortableItemContainerProps>> = (
     const container = (
         <ActionListItem ref={setRef} className={isDragging ? 'opacity-75' : ''} style={style}>
             <ActionListItemContent className='flex'>
-                {(props.dragHandleAttributes || isDragging) && <div className='w-10 shrink-0'>
+                {(props.dragHandleAttributes || isDragging) && <Inline align='center' className='w-10 shrink-0'>
                     <DragIndicator className='h-10' isDragging={isDragging || false} {...props} />
-                </div>}
+                </Inline>}
                 <button className='flex min-w-0 grow text-left' type='button' onClick={showDetails}>
                     {children}
                 </button>
             </ActionListItemContent>
-            <ActionListItemActions><Button color='green' data-testid="edit-newsletter-button" label='Edit' link onClick={showDetails} /></ActionListItemActions>
+            <ActionListItemActions><Button className='h-auto p-0 font-bold text-green hover:text-green/90 hover:no-underline' data-testid='edit-newsletter-button' size='sm' type='button' variant='link' onClick={showDetails}>Edit</Button></ActionListItemActions>
         </ActionListItem>
     );
 
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-tab-content.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-tab-content.tsx
index fb2798103d0..46388f6597e 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-tab-content.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-tab-content.tsx
@@ -3,10 +3,12 @@ import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {type ReactNode, useEffect, useState} from 'react';
 import useQueryParams from '../../../../hooks/use-query-params';
 import {APIError} from '@tryghost/admin-x-framework/errors';
-import {Button, ConfirmationModal} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
+import {ConfirmationModal} from '@tryghost/admin-x-design-system';
 import {type InfiniteData, useQueryClient} from '@tryghost/admin-x-framework';
 import {type Newsletter, type NewslettersResponseType, newslettersDataType, useBrowseNewsletters, useEditNewsletter, useVerifyNewsletterEmail} from '@tryghost/admin-x-framework/api/newsletters';
 import {arrayMove} from '@dnd-kit/sortable';
+import {formatNumber} from '@tryghost/shade/utils';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 import {withErrorBoundary} from '../../../error-boundary';
@@ -15,10 +17,10 @@ const NavigateToNewsletter = ({id, children}: {id: string; children: ReactNode})
     const modal = useModal();
     const {updateRoute} = useRouting();
 
-    return <button className="text-green" type="button" onClick={() => {
+    return <Button className='h-auto p-0 text-green hover:text-green' type='button' variant='link' onClick={() => {
         updateRoute(`newsletters/${id}`);
         modal.remove();
-    }}>{children}</button>;
+    }}>{children}</Button>;
 };
 
 const isNewsletterVerificationRoute = () => {
@@ -144,11 +146,9 @@ const NewslettersTabContent: React.FC<NewslettersTabContentProps> = ({filter}) =
             ) : (
                 <NewslettersList isLoading={isLoading} newsletters={archivedNewsletters} />
             )}
-            {isEnd === false && <Button
-                label={`Load more (showing ${newsletters?.length || 0}/${meta?.pagination.total || 0} newsletters)`}
-                link
-                onClick={() => fetchNextPage()}
-            />}
+            {isEnd === false && <Button type='button' variant='link' onClick={() => fetchNextPage()}>
+                Load more (showing {formatNumber(newsletters?.length || 0)}/{formatNumber(meta?.pagination.total || 0)} newsletters)
+            </Button>}
         </>
     );
 };
diff --git a/apps/admin-x-settings/src/components/settings/general/invite-user-modal.tsx b/apps/admin-x-settings/src/components/settings/general/invite-user-modal.tsx
index 50c9a960ed8..32a8115bf7a 100644
--- a/apps/admin-x-settings/src/components/settings/general/invite-user-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/invite-user-modal.tsx
@@ -212,8 +212,8 @@ const InviteUserModal = NiceModal.create(() => {
                 updateRoute('staff');
             }}
             cancelLabel=''
-            okColor={saveState === 'error' || !!errors.email ? 'red' : 'black'}
             okLabel={okLabel}
+            okVariant={saveState === 'error' || !!errors.email ? 'destructive' : 'default'}
             testId='invite-user-modal'
             title='Invite a new staff user'
             width={540}
diff --git a/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx b/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx
index 077eed36b91..0c64079d440 100644
--- a/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx
@@ -193,7 +193,7 @@ const UserDetailModalContent: React.FC<{user: User; onDeletingUserChange: (isDel
             ),
             okLabel: _user.status === 'inactive' ? 'Un-suspend' : 'Suspend',
             okRunningLabel: _user.status === 'inactive' ? 'Un-suspending...' : 'Suspending...',
-            okColor: 'red',
+            okVariant: 'destructive',
             onOk: async (modal) => {
                 const updatedUserData = {
                     ..._user,
@@ -221,7 +221,7 @@ const UserDetailModalContent: React.FC<{user: User; onDeletingUserChange: (isDel
                 </>
             ),
             okLabel: 'Delete user',
-            okColor: 'red',
+            okVariant: 'destructive',
             onOk: async (modal) => {
                 onDeletingUserChange(true);
                 try {
@@ -244,7 +244,7 @@ const UserDetailModalContent: React.FC<{user: User; onDeletingUserChange: (isDel
             title: 'Transfer Ownership',
             prompt: 'Are you sure you want to transfer the ownership of this blog? You will not be able to undo this action.',
             okLabel: 'Yep — I\'m sure',
-            okColor: 'red',
+            okVariant: 'destructive',
             onOk: async (modal) => {
                 try {
                     await makeOwner(user.id);
@@ -328,8 +328,8 @@ const UserDetailModalContent: React.FC<{user: User; onDeletingUserChange: (isDel
             cancelLabel='Close'
             dirty={saveState === 'unsaved'}
             hideXOnMobile={true}
-            okColor={okProps.color}
             okLabel={okProps.label || 'Save'}
+            okVariant={okProps.variant}
             size={canAccessSettings(currentUser) ? 'md' : 'bleed'}
             stickyFooter={true}
             testId='user-detail-modal'
@@ -369,11 +369,11 @@ const UserDetailModalContent: React.FC<{user: User; onDeletingUserChange: (isDel
                                 <div className='flex flex-nowrap items-start gap-3'>
                                     {formState.cover_image ? <div className='flex flex-nowrap items-end justify-end gap-4'>
                                         <img alt='' className='hidden' data-testid='cover-image-preview' src={formState.cover_image} />
-                                        {editor.isEnabled && <Button className={coverButtonClasses} onClick={() => editor.openEditor({
+                                        {editor.isEnabled && <Button className={coverButtonClasses} type='button' onClick={() => editor.openEditor({
                                             image: formState.cover_image || '',
                                             handleSave: async (file: File) => handleImageUpload('cover_image', file)
                                         })}>Edit cover image</Button>}
-                                        <Button className={coverButtonClasses} onClick={() => handleImageDelete('cover_image')}>Delete cover image</Button>
+                                        <Button className={coverButtonClasses} type='button' onClick={() => handleImageDelete('cover_image')}>Delete cover image</Button>
                                     </div> : <Dropzone className='h-8' inputId='cover-image' inputTestId='cover-image-upload' variant='button' onDropAccepted={files => handleImageUpload('cover_image', files[0])}>Upload cover image</Dropzone>}
                                     {showMenu && <div className="z-10">
                                         <DropdownMenu>
diff --git a/apps/admin-x-settings/src/components/settings/general/users.tsx b/apps/admin-x-settings/src/components/settings/general/users.tsx
index f7d09c59515..cc0bb1c4cdf 100644
--- a/apps/admin-x-settings/src/components/settings/general/users.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/users.tsx
@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import useQueryParams from '../../../hooks/use-query-params';
 import useStaffUsers from '../../../hooks/use-staff-users';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Avatar, NoValueLabel, NoValueLabelIcon, Separator, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TabsTriggerCount} from '@tryghost/shade/components';
-import {Button} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
 import {type User, hasAdminAccess, isContributorUser, isEditorUser} from '@tryghost/admin-x-framework/api/users';
 import {type UserInvite, useAddInvite, useDeleteInvite} from '@tryghost/admin-x-framework/api/invites';
 import {UserRoundX} from 'lucide-react';
@@ -50,7 +50,10 @@ const Owner: React.FC<OwnerProps> = ({user}) => {
         <div className={clsx('group flex gap-3', hasAdminAccess(currentUser) && 'cursor-pointer')} data-testid='owner-user' onClick={showDetailModal}>
             <Avatar className='size-12' email={user.email} name={user.name} src={user.profile_image} />
             <div className='flex flex-col'>
-                <span>{user.name} &mdash; <strong>Owner</strong> {hasAdminAccess(currentUser) && <button className='ml-2 inline-block font-semibold text-green group-hover:visible md:invisible' type='button'>View profile</button>}</span>
+                <span>{user.name} &mdash; <strong>Owner</strong> {hasAdminAccess(currentUser) && <Button className='ml-2 h-auto p-0 text-green group-hover:visible hover:text-green md:invisible' type='button' variant='link' onClick={(event) => {
+                    event.stopPropagation();
+                    showDetailModal();
+                }}>View profile</Button>}</span>
                 <span className='text-sm text-grey-700'>{user.email}</span>
             </div>
         </div>
@@ -107,7 +110,7 @@ const UsersList: React.FC<UsersListProps> = ({users, groupname}) => {
                                 </div>
                             )}
                         </ActionListItemContent>
-                        {canEdit && <ActionListItemActions visibility='hover'><Button color='green' label='Edit' link={true} onClick={() => showDetailModal(user)}/></ActionListItemActions>}
+                        {canEdit && <ActionListItemActions visibility='hover'><Button className='h-auto p-0 font-bold text-green hover:text-green/90 hover:no-underline' size='sm' type='button' variant='link' onClick={() => showDetailModal(user)}>Edit</Button></ActionListItemActions>}
                     </ActionListItem>
                 );
             })}
@@ -134,9 +137,11 @@ const UserInviteActions: React.FC<{invite: UserInvite}> = ({invite}) => {
     return (
         <div className='flex gap-2'>
             <Button
-                color='red'
-                label={revokeActionLabel}
-                link={true}
+                className='text-destructive hover:text-destructive'
+                disabled={revokeState === 'progress'}
+                size='sm'
+                type='button'
+                variant='ghost'
                 onClick={async () => {
                     try {
                         setRevokeState('progress');
@@ -148,12 +153,13 @@ const UserInviteActions: React.FC<{invite: UserInvite}> = ({invite}) => {
                         setRevokeState('');
                     }
                 }}
-            />
+            >{revokeActionLabel}</Button>
             <Button
                 className='ml-2'
-                color='green'
-                label={resendActionLabel}
-                link={true}
+                disabled={resendState === 'progress'}
+                size='sm'
+                type='button'
+                variant='ghost'
                 onClick={async () => {
                     try {
                         setResendState('progress');
@@ -169,7 +175,7 @@ const UserInviteActions: React.FC<{invite: UserInvite}> = ({invite}) => {
                         setResendState('');
                     }
                 }}
-            />
+            >{resendActionLabel}</Button>
         </div>
     );
 };
@@ -228,9 +234,9 @@ const Users: React.FC<{ keywords: string[], highlight?: boolean }> = ({keywords,
     };
 
     const buttons = (
-        <Button className='mt-[-5px]' color='clear' label='Invite people' size='sm' linkWithPadding onClick={() => {
+        <Button className='mt-[-5px]' size='sm' type='button' variant='ghost' onClick={() => {
             showInviteModal();
-        }} />
+        }}>Invite people</Button>
     );
 
     const tabParam = useQueryParams().getParam('tab');
@@ -280,15 +286,15 @@ const Users: React.FC<{ keywords: string[], highlight?: boolean }> = ({keywords,
             )}
 
             {hasNextPage && selectedTab !== 'invited' && <Button
-                label={`Load more (showing ${formatNumber(users.length)}/${formatNumber(totalUsers)} users)`}
-                link
+                type='button'
+                variant='link'
                 onClick={() => fetchNextPage()}
-            />}
+            >{`Load more (showing ${formatNumber(users.length)}/${formatNumber(totalUsers)} users)`}</Button>}
             {invitesHasNextPage && selectedTab === 'invited' && <Button
-                label={`Load more (showing ${formatNumber(invites.length)}/${formatNumber(totalInvites)} invites)`}
-                link
+                type='button'
+                variant='link'
                 onClick={() => fetchNextInvitePage()}
-            />}
+            >{`Load more (showing ${formatNumber(invites.length)}/${formatNumber(totalInvites)} invites)`}</Button>}
 
             {config?.security?.staffDeviceVerification && hasAdminAccess(currentUser) && (
                 <div className={`flex flex-col gap-6 ${users.length > 1 || invites.length > 0 ? '-mt-6' : ''}`}>
diff --git a/apps/admin-x-settings/src/components/settings/general/users/change-password-form.tsx b/apps/admin-x-settings/src/components/settings/general/users/change-password-form.tsx
index 0acf3b743a9..7eaf64a1ac0 100644
--- a/apps/admin-x-settings/src/components/settings/general/users/change-password-form.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/users/change-password-form.tsx
@@ -1,4 +1,5 @@
-import {Button, TextField} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
+import {TextField} from '@tryghost/admin-x-design-system';
 import {type User, useUpdatePassword} from '@tryghost/admin-x-framework/api/users';
 import {ValidationError} from '@tryghost/admin-x-framework/errors';
 import {toast} from 'sonner';
@@ -205,8 +206,8 @@ const ChangePasswordForm: React.FC<{user: User}> = ({user}) => {
             />
             <div className='mt-1 flex items-center justify-end gap-3'>
                 <Button
-                    color='outline'
-                    label='Cancel'
+                    type='button'
+                    variant='outline'
                     onClick={() => {
                         setEditPassword(false);
                         setOldPassword('');
@@ -214,11 +215,10 @@ const ChangePasswordForm: React.FC<{user: User}> = ({user}) => {
                         setConfirmNewPassword('');
                         setErrors({});
                     }}
-                />
+                >Cancel</Button>
                 <Button
-                    color='green'
                     data-testid='save-password-button'
-                    label={buttonLabel}
+                    type='button'
                     onClick={async () => {
                         setSaveState('saving');
                         const validationErrors = validate({password: newPassword, confirmPassword: confirmNewPassword});
@@ -241,7 +241,7 @@ const ChangePasswordForm: React.FC<{user: User}> = ({user}) => {
                             handleError(e, {withToast: false});
                         }
                     }}
-                />
+                >{buttonLabel}</Button>
             </div>
         </>
     );
@@ -249,7 +249,7 @@ const ChangePasswordForm: React.FC<{user: User}> = ({user}) => {
     const initialView = (
         <div className='relative flex flex-col'>
             <TextField containerClassName='grow' disabled={true} title='Password' type='password' value='••••••••••••' />
-            <Button className='absolute top-0 right-0' color='green' data-testid='change-password-button' label='Change' link={true} onClick={showPasswordInputs} />
+            <Button className='absolute top-0 right-0' data-testid='change-password-button' size='sm' type='button' variant='ghost' onClick={showPasswordInputs}>Change</Button>
         </div>
     );
 
diff --git a/apps/admin-x-settings/src/components/settings/general/users/staff-token.tsx b/apps/admin-x-settings/src/components/settings/general/users/staff-token.tsx
index 4bf07658a9b..13f3c9a3bd9 100644
--- a/apps/admin-x-settings/src/components/settings/general/users/staff-token.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/users/staff-token.tsx
@@ -29,7 +29,7 @@ const StaffToken: React.FC = () => {
             title: 'Regenerate your Staff Access Token',
             prompt: 'You can regenerate your Staff Access Token any time, but any scripts or applications using it will need to be updated.',
             okLabel: 'Regenerate your Staff Access Token',
-            okColor: 'red',
+            okVariant: 'destructive',
             onOk: async (modal) => {
                 try {
                     const newAPI = await newApiKey([]);
diff --git a/apps/admin-x-settings/src/components/settings/growth/embed-signup/embed-signup-form.tsx b/apps/admin-x-settings/src/components/settings/growth/embed-signup/embed-signup-form.tsx
index d23c34e574f..912e19fea1f 100644
--- a/apps/admin-x-settings/src/components/settings/growth/embed-signup/embed-signup-form.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/embed-signup/embed-signup-form.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import TopLevelGroup from '../../../top-level-group';
-import {Button} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 
 const EmbedSignupForm: React.FC<{ keywords: string[] }> = ({keywords}) => {
@@ -11,7 +11,7 @@ const EmbedSignupForm: React.FC<{ keywords: string[] }> = ({keywords}) => {
 
     return (
         <TopLevelGroup
-            customButtons={<Button className='mt-[-5px]' color='clear' label='Embed' size='sm' onClick={openPreviewModal}/>}
+            customButtons={<Button className='mt-[-5px]' size='sm' type='button' variant='ghost' onClick={openPreviewModal}>Embed</Button>}
             description="Grow your audience from anywhere on the web"
             keywords={keywords}
             navid='embed-signup-form'
diff --git a/apps/admin-x-settings/src/components/settings/growth/embed-signup/embed-signup-sidebar.tsx b/apps/admin-x-settings/src/components/settings/growth/embed-signup/embed-signup-sidebar.tsx
index a82f6009796..b669739ed4c 100644
--- a/apps/admin-x-settings/src/components/settings/growth/embed-signup/embed-signup-sidebar.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/embed-signup/embed-signup-sidebar.tsx
@@ -1,7 +1,7 @@
 import ColorPickerField from '../../../color-picker-field';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {Button, ButtonGroup, Form} from '@tryghost/admin-x-design-system';
-import {Combobox, ComboboxContent, ComboboxTrigger, ComboboxValue, Field, FieldDescription, FieldLabel, MultiSelectCombobox, StickyFooter, Textarea} from '@tryghost/shade/components';
+import {Button, Combobox, ComboboxContent, ComboboxTrigger, ComboboxValue, Field, FieldDescription, FieldLabel, MultiSelectCombobox, StickyFooter, Textarea, ToggleGroup, ToggleGroupItem} from '@tryghost/shade/components';
+import {Form} from '@tryghost/admin-x-design-system';
 import {type Label} from '@tryghost/admin-x-framework/api/labels';
 import {Plus} from 'lucide-react';
 import {Text} from '@tryghost/shade/primitives';
@@ -102,26 +102,10 @@ const EmbedSignupSidebar: React.FC<SidebarProps> = ({selectedLayout,
                 <Form gap='sm'>
                     <div className='flex w-full items-center justify-between'>
                         <div>Layout</div>
-                        <ButtonGroup 
-                            activeKey={selectedLayout} 
-                            buttons={[
-                                {
-                                    key: 'all-in-one',
-                                    label: 'Branded',
-                                    size: 'md',
-                                    className: 'w-auto px-3!',
-                                    onClick: () => handleLayoutSelect('all-in-one')
-                                },
-                                {
-                                    key: 'minimal',
-                                    label: 'Minimal',
-                                    size: 'md',
-                                    className: 'w-auto px-3!',
-                                    onClick: () => handleLayoutSelect('minimal')
-                                }
-                            ]} 
-                            clearBg={false}
-                        />
+                        <ToggleGroup type='single' value={selectedLayout} onValueChange={value => value && handleLayoutSelect(value)}>
+                            <ToggleGroupItem value='all-in-one'>Branded</ToggleGroupItem>
+                            <ToggleGroupItem value='minimal'>Minimal</ToggleGroupItem>
+                        </ToggleGroup>
                     </div>
                     {
                         selectedLayout === 'all-in-one' &&
@@ -208,8 +192,8 @@ const EmbedSignupSidebar: React.FC<SidebarProps> = ({selectedLayout,
             </div>
             <StickyFooter height={74}>
                 <div className='flex w-full justify-end gap-3'>
-                    <Button className='lg:hidden' color='outline' label='Close' onClick={handleClose} />
-                    <Button color={isCopied ? 'green' : 'black'} label={isCopied ? 'Copied!' : 'Copy code'} onClick={handleCopyClick} />
+                    <Button className='font-semibold lg:hidden' type='button' variant='ghost' onClick={handleClose}>Close</Button>
+                    <Button type='button' onClick={handleCopyClick}>{isCopied ? 'Copied!' : 'Copy code'}</Button>
                 </div>
             </StickyFooter>
         </div>
diff --git a/apps/admin-x-settings/src/components/settings/growth/explore.tsx b/apps/admin-x-settings/src/components/settings/growth/explore.tsx
index 732896f465d..5422eb39c61 100644
--- a/apps/admin-x-settings/src/components/settings/growth/explore.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/explore.tsx
@@ -3,8 +3,9 @@ import React, {useEffect, useState} from 'react';
 import SettingImg from '../../../assets/images/ghost-explore.png';
 import TopLevelGroup from '../../top-level-group';
 import useSettingGroup from '../../../hooks/use-setting-group';
-import {Button, Icon, SettingGroupContent} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
 import {Field, FieldContent, FieldDescription, FieldLabel, Separator, Switch} from '@tryghost/shade/components';
+import {Icon, SettingGroupContent} from '@tryghost/admin-x-design-system';
 import {type Setting, getSettingValue, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
 import {abbreviateNumber} from '@tryghost/shade/utils';
 import {useBrowseMembers} from '@tryghost/admin-x-framework/api/members';
@@ -125,9 +126,12 @@ const Explore: React.FC<{ keywords: string[] }> = ({keywords}) => {
                         <span className='font-medium'>Get featured on the Ghost.org homepage</span>
                         <span className='text-pretty text-black/80 dark:text-white/80'>Send us a quote we can use to highlight your site</span>
                     </div>
-                    <Button className='border border-purple bg-white text-purple hover:bg-purple/5 hover:text-purple dark:bg-transparent' icon="send" label="Send testimonial" onClick={() => {
+                    <Button className='border border-purple bg-transparent text-purple hover:bg-purple/5 hover:text-purple' type='button' variant='outline' onClick={() => {
                         updateRoute('explore/testimonial');
-                    }} />
+                    }}>
+                        <Icon name='send' size='sm' />
+                        Send testimonial
+                    </Button>
                 </div>
             </SettingGroupContent>
             :
diff --git a/apps/admin-x-settings/src/components/settings/growth/explore/testimonials-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/explore/testimonials-modal.tsx
index ed1762b86ce..9e319fc3b82 100644
--- a/apps/admin-x-settings/src/components/settings/growth/explore/testimonials-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/explore/testimonials-modal.tsx
@@ -4,7 +4,8 @@ import JoelWarner from '../../../../assets/images/joel-warner.png';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React from 'react';
 import {Avatar, Field, FieldError, FieldLabel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea} from '@tryghost/shade/components';
-import {Button, Form, Modal} from '@tryghost/admin-x-design-system';
+import {Button, LoadingIndicator} from '@tryghost/shade/components';
+import {Form, Modal} from '@tryghost/admin-x-design-system';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
 import {toast} from 'sonner';
 import {useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -219,14 +220,15 @@ const TestimonialsModal = NiceModal.create(() => {
                                 </div>
                                 <Button
                                     className='h-[38px]! rounded-lg'
-                                    color="black"
                                     disabled={saveState === 'saving'}
-                                    label="Send testimonial"
-                                    loading={saveState === 'saving'}
+                                    type='button'
                                     onClick={async () => {
                                         await handleSave();
                                     }}
-                                />
+                                >
+                                    {saveState === 'saving' && <LoadingIndicator size='sm' />}
+                                    Send testimonial
+                                </Button>
                             </div>
                         </div>
                     </div>
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers.tsx b/apps/admin-x-settings/src/components/settings/growth/offers.tsx
index 3dee9ab6c02..4792489d2bb 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import TopLevelGroup from '../../top-level-group';
-import {Button} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
 import {checkStripeEnabled} from '@tryghost/admin-x-framework/api/settings';
 import {getPaidActiveTiers, useBrowseTiers} from '@tryghost/admin-x-framework/api/tiers';
 import {useBrowseOffers} from '@tryghost/admin-x-framework/api/offers';
@@ -29,7 +29,7 @@ const Offers: React.FC<{ keywords: string[] }> = ({keywords}) => {
 
     return (
         <TopLevelGroup
-            customButtons={<Button className='mt-[-5px]' color='clear' disabled={!checkStripeEnabled(settings, config)} label='Manage offers' size='sm' onClick={openOfferListModal}/>}
+            customButtons={<Button className='mt-[-5px]' disabled={!checkStripeEnabled(settings, config)} size='sm' type='button' variant='ghost' onClick={openOfferListModal}>Manage offers</Button>}
             description={<>Create discounts & coupons to boost new subscriptions and retain existing members.<span>{' '}</span><a className='text-green' href="https://ghost.org/help/offers" rel="noopener noreferrer" target="_blank">Learn more</a></>}
             keywords={keywords}
             navid='offers'
@@ -40,7 +40,7 @@ const Offers: React.FC<{ keywords: string[] }> = ({keywords}) => {
                 (<div>
                     <span>You must have an active tier to create an offer.</span>
                     {` `}
-                    <Button className='font-normal' color='green' label='Manage tiers' link linkWithPadding onClick={openTiers} />
+                    <Button className='h-auto p-1 font-normal' type='button' variant='link' onClick={openTiers}>Manage tiers</Button>
                 </div>
                 ) : ''
             }
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/add-offer-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/add-offer-modal.tsx
index 3d765b488ef..734dc9693bf 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/add-offer-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/add-offer-modal.tsx
@@ -1,7 +1,6 @@
 import PortalFrame from '../../membership/portal/portal-frame';
-import {Button} from '@tryghost/admin-x-design-system';
+import {Button, Field, FieldContent, FieldDescription, FieldError, FieldLabel, InputGroup, InputGroupAddon, InputGroupInput, RadioGroup, RadioGroupItem, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea} from '@tryghost/shade/components';
 import {type ErrorMessages, useForm} from '@tryghost/admin-x-framework/hooks';
-import {Field, FieldContent, FieldDescription, FieldError, FieldLabel, InputGroup, InputGroupAddon, InputGroupInput, RadioGroup, RadioGroupItem, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea} from '@tryghost/shade/components';
 import {Form, PreviewModalContent, TextField} from '@tryghost/admin-x-design-system';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
 import {formatNumber} from '@tryghost/shade/utils';
@@ -307,7 +306,7 @@ const Sidebar: React.FC<SidebarProps> = ({tierOptions,
 
                         <TextField
                             error={Boolean(errors.code)}
-                            hint={errors.code || (overrides.code.value !== '' ? <div className='flex items-center justify-between'><div>{homepageUrl}<span className='font-bold'>{overrides.code.value}</span></div><span></span><Button className='text-sm' color='green' label={`${isCopied ? 'Copied' : 'Copy'}`} size='sm' link onClick={handleCopyClick} /></div> : null)}
+                            hint={errors.code || (overrides.code.value !== '' ? <div className='flex items-center justify-between'><div>{homepageUrl}<span className='font-bold'>{overrides.code.value}</span></div><span></span><Button className='h-auto p-0 text-sm text-green hover:text-green' size='sm' type='button' variant='link' onClick={handleCopyClick}>{isCopied ? 'Copied' : 'Copy'}</Button></div> : null)}
                             placeholder='black-friday'
                             title='Offer code'
                             value={overrides.code.value}
@@ -671,8 +670,8 @@ const AddOfferModal = () => {
         cancelLabel='Cancel'
         dirty={saveState === 'unsaved'}
         height='full'
-        okColor={okProps.color}
         okLabel='Publish'
+        okVariant={okProps.variant}
         preview={iframe}
         previewToolbar={false}
         sidebar={sidebar}
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/edit-offer-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/edit-offer-modal.tsx
index 2dd9aeb2aee..91d0b3fe89f 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/edit-offer-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/edit-offer-modal.tsx
@@ -1,9 +1,9 @@
 import NiceModal from '@ebay/nice-modal-react';
 import PortalFrame from '../../membership/portal/portal-frame';
 import SettingsBreadcrumbs from '../../settings-breadcrumbs';
-import {Button, ConfirmationModal, Form, PreviewModalContent, TextField} from '@tryghost/admin-x-design-system';
+import {Button, Field, FieldLabel, Textarea} from '@tryghost/shade/components';
+import {ConfirmationModal, Form, PreviewModalContent, TextField} from '@tryghost/admin-x-design-system';
 import {type ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
-import {Field, FieldLabel, Textarea} from '@tryghost/shade/components';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
 import {type Offer, useBrowseOffersById, useEditOffer} from '@tryghost/admin-x-framework/api/offers';
 import {createOfferRedemptionFilterUrl} from './offer-helpers';
@@ -63,7 +63,7 @@ const Sidebar: React.FC<{
                             <p>All members that previously redeemed <strong>{offer?.name}</strong> will remain unchanged.</p>
                         </>,
                         okLabel: 'Archive',
-                        okColor: 'red',
+                        okVariant: 'destructive',
                         onOk: async (modal) => {
                             try {
                                 await editOffer({...offer, status: 'archived'});
@@ -144,7 +144,7 @@ const Sidebar: React.FC<{
                                     error={Boolean(errors.code)}
                                     hint={errors.code || (offer?.code !== '' ? <span className='truncate text-grey-700'>{homepageUrl}<span className='font-bold text-black dark:text-white'>{offer?.code}</span></span> : null)}
                                     placeholder='black-friday'
-                                    rightPlaceholder={offer?.code !== '' ? <Button className='mt-1 mr-0.5' color='green' label={isCopied ? 'Copied!' : 'Copy link'} size='sm' onClick={handleCopyClick} /> : null}
+                                    rightPlaceholder={offer?.code !== '' ? <Button className='mt-1 mr-0.5' size='sm' type='button' variant='link' onClick={handleCopyClick}>{isCopied ? 'Copied!' : 'Copy link'}</Button> : null}
                                     title='Offer code'
                                     value={offer?.code ?? ''}
                                     onChange={e => updateOffer({code: e.target.value})}
@@ -167,7 +167,7 @@ const Sidebar: React.FC<{
                         </section>
                     </Form>
                     <div className='mb-2'>
-                        {offer?.status === 'active' ? <Button color='red' label='Archive offer' link onClick={confirmStatusChange} /> : <Button color='green' label='Reactivate offer' link onClick={confirmStatusChange} />}
+                        {offer?.status === 'active' ? <Button className='h-auto p-0 text-destructive hover:text-destructive' type='button' variant='link' onClick={confirmStatusChange}>Archive offer</Button> : <Button className='h-auto p-0 text-green hover:text-green' type='button' variant='link' onClick={confirmStatusChange}>Reactivate offer</Button>}
                     </div>
                 </div>
             );
@@ -263,8 +263,8 @@ const EditOfferModal: React.FC<{id: string}> = ({id}) => {
         cancelLabel='Cancel'
         dirty={saveState === 'unsaved'}
         height='full'
-        okColor={okProps.color}
         okLabel={okProps.label || 'Save'}
+        okVariant={okProps.variant}
         preview={iframe}
         previewToolbarBreadcrumbs={
             <SettingsBreadcrumbs
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/edit-retention-offer-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/edit-retention-offer-modal.tsx
index 0106f7ca3c3..4cda9c15f62 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/edit-retention-offer-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/edit-retention-offer-modal.tsx
@@ -655,8 +655,8 @@ const EditRetentionOfferModal: React.FC<{id: string}> = ({id}) => {
             cancelLabel='Cancel'
             dirty={saveState === 'unsaved'}
             height='full'
-            okColor={okProps.color}
             okLabel={okProps.label || 'Save'}
+            okVariant={okProps.variant}
             preview={preview}
             previewToolbarBreadcrumbs={
                 <SettingsBreadcrumbs
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/offer-success.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/offer-success.tsx
index 84766ab090b..ea70d30e7b9 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/offer-success.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/offer-success.tsx
@@ -1,12 +1,12 @@
 import SettingsBreadcrumbs from '../../settings-breadcrumbs';
-import {Button} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
 import {Icon} from '@tryghost/admin-x-design-system';
 import {Modal} from '@tryghost/admin-x-design-system';
 import {type Offer, useBrowseOffersById} from '@tryghost/admin-x-framework/api/offers';
 import {TextField} from '@tryghost/admin-x-design-system';
 import {currencyToDecimal} from '../../../../utils/currency';
+import {formatNumber} from '@tryghost/shade/utils';
 import {getHomepageUrl} from '@tryghost/admin-x-framework/api/site';
-import {numberWithCommas} from '../../../../utils/helpers';
 import {useEffect, useState} from 'react';
 import {useGlobalData} from '../../../providers/global-data-provider';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -39,7 +39,7 @@ const OfferSuccess: React.FC<{id: string}> = ({id}) => {
             discount = offer?.amount + '% discount';
             break;
         case 'fixed':
-            discount = numberWithCommas(currencyToDecimal(offer?.amount)) + ' ' + offer?.currency + ' discount';
+            discount = formatNumber(currencyToDecimal(offer?.amount), {maximumFractionDigits: 2}) + ' ' + offer?.currency + ' discount';
             break;
         case 'trial':
             discount = offer?.amount + ' days free trial';
@@ -95,13 +95,13 @@ const OfferSuccess: React.FC<{id: string}> = ({id}) => {
             <div className='mt-8 flex w-full max-w-md flex-col gap-8'>
                 <div className='flex flex-col-reverse gap-2'>
                     <TextField name='offer-url' type='url' value={offerLink} disabled />
-                    <Button color='green' label={isCopied ? 'Copied!' : 'Copy link'} fullWidth onClick={handleCopyClick} />
+                    <Button className='w-full' type='button' onClick={handleCopyClick}>{isCopied ? 'Copied!' : 'Copy link'}</Button>
                 </div>
                 <div className='flex items-center gap-4 text-sm font-medium before:h-px before:grow before:bg-grey-300 before:content-[""] after:h-px after:grow after:bg-grey-300 after:content-[""] dark:before:bg-grey-800 dark:after:bg-grey-800'>OR</div>
                 <div className='flex gap-2'>
-                    <Button className='h-8 border border-grey-300 dark:border-grey-800' icon='twitter-x' iconColorClass='w-[14px] h-[14px]' size='sm' fullWidth onClick={handleTwitter} />
-                    <Button className='h-8 border border-grey-300 dark:border-grey-800' icon='facebook' size='sm' fullWidth onClick={handleFacebook} />
-                    <Button className='h-8 border border-grey-300 dark:border-grey-800' icon='linkedin' size='sm' fullWidth onClick={handleLinkedIn} />
+                    <Button aria-label='Share on X' className='h-8 flex-1' size='sm' type='button' variant='outline' onClick={handleTwitter}><Icon className='size-3.5!' name='twitter-x' /></Button>
+                    <Button aria-label='Share on Facebook' className='h-8 flex-1' size='sm' type='button' variant='outline' onClick={handleFacebook}><Icon name='facebook' size='sm' /></Button>
+                    <Button aria-label='Share on LinkedIn' className='h-8 flex-1' size='sm' type='button' variant='outline' onClick={handleLinkedIn}><Icon name='linkedin' size='sm' /></Button>
                 </div>
             </div>
         </div>
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/offers-index.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/offers-index.tsx
index fa9a9f18098..5cb792eab0d 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/offers-index.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/offers-index.tsx
@@ -1,6 +1,4 @@
-import {Badge, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from '@tryghost/shade/components';
-import {Button, type ButtonProps} from '@tryghost/admin-x-design-system';
-import {ButtonGroup} from '@tryghost/admin-x-design-system';
+import {Badge, Button, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from '@tryghost/shade/components';
 import {Icon} from '@tryghost/admin-x-design-system';
 import {Inline, Stack} from '@tryghost/shade/primitives';
 import {LucideIcon, formatNumber} from '@tryghost/shade/utils';
@@ -76,7 +74,9 @@ const OffersFilterMenu: React.FC<{
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button aria-label='Filter options' className='p-1 text-muted-foreground hover:text-foreground' label={<LucideIcon.ListFilter size={16} strokeWidth={1.5} />} unstyled={true} />
+                <Button aria-label='Filter options' className='text-muted-foreground hover:text-foreground' size='icon' type='button' variant='ghost'>
+                    <LucideIcon.ListFilter size={16} strokeWidth={1.5} />
+                </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align='end' className='z-[9999] min-w-[200px] normal-case'>
                 <DropdownMenuLabel className='text-xs tracking-wide text-muted-foreground uppercase'>Sort by</DropdownMenuLabel>
@@ -328,29 +328,24 @@ export const OffersIndexModal: React.FC = () => {
         return offer.status === 'archived' || offerTier?.active === false;
     };
 
-    const buttons: ButtonProps[] = [
-        {
-            key: 'cancel-modal',
-            label: 'Close',
-            onClick: () => {
+    const actions = (
+        <Inline gap='md'>
+            <Button className='font-semibold' type='button' variant='ghost' onClick={() => {
                 modal.remove();
                 updateRoute('offers');
-            }
-        },
-        {
-            key: 'new-offer',
-            icon: 'add',
-            label: 'New offer',
-            color: 'green' as const,
-            onClick: () => {
+            }}>Close</Button>
+            <Button type='button' onClick={() => {
                 if (paidActiveTiers.length === 0) {
                     toast.info('You must have an active tier to create an offer.');
                 } else {
                     updateRoute('offers/new');
                 }
-            }
-        }
-    ];
+            }}>
+                <LucideIcon.Plus />
+                New offer
+            </Button>
+        </Inline>
+    );
 
     const listLayoutOutput = <div className='overflow-x-auto'>
         <Table className='m-0 min-w-[900px]'>
@@ -429,7 +424,7 @@ export const OffersIndexModal: React.FC = () => {
         size='lg'
         testId='offers-modal'
         title='Offers'
-        topRightContent={<ButtonGroup buttons={buttons} />}
+        topRightContent={actions}
         width={1140}
     >
         <Stack className='h-full pt-8'>
diff --git a/apps/admin-x-settings/src/components/settings/growth/recommendations.tsx b/apps/admin-x-settings/src/components/settings/growth/recommendations.tsx
index 3ebf2e95788..226325b7007 100644
--- a/apps/admin-x-settings/src/components/settings/growth/recommendations.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/recommendations.tsx
@@ -3,7 +3,7 @@ import React, {useState} from 'react';
 import RecommendationList from './recommendations/recommendation-list';
 import TopLevelGroup from '../../top-level-group';
 import useSettingGroup from '../../../hooks/use-setting-group';
-import {Button} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
 import {Tabs, TabsContent, TabsList, TabsTrigger, TabsTriggerCount} from '@tryghost/shade/components';
 import {formatNumber} from '@tryghost/shade/utils';
 import {keepPreviousData} from '@tanstack/react-query';
@@ -101,9 +101,9 @@ const Recommendations: React.FC<{ keywords: string[] }> = ({keywords}) => {
     };
 
     const buttons = (
-        <Button className='mt-[-5px] hidden md:!visible md:!block' color='clear' label='Add recommendation' size='sm' onClick={() => {
+        <Button className='mt-[-5px] hidden md:!visible md:!block' size='sm' type='button' variant='ghost' onClick={() => {
             openAddNewRecommendationModal();
-        }} />
+        }}>Add recommendation</Button>
     );
 
     return (
@@ -119,9 +119,9 @@ const Recommendations: React.FC<{ keywords: string[] }> = ({keywords}) => {
             onSave={handleSave}
         >
             <div className='flex justify-center rounded border border-green px-4 py-2 md:hidden'>
-                <Button color='light-grey' label='Add recommendation' link onClick={() => {
+                <Button type='button' variant='ghost' onClick={() => {
                     openAddNewRecommendationModal();
-                }} />
+                }}>Add recommendation</Button>
             </div>
             <Tabs value={selectedTab} variant='underline' onValueChange={setSelectedTab}>
                 <TabsList>
diff --git a/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal-confirm.tsx b/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal-confirm.tsx
index 0ae5325aef4..1858b497962 100644
--- a/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal-confirm.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal-confirm.tsx
@@ -3,8 +3,9 @@ import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React from 'react';
 import RecommendationDescriptionForm, {validateDescriptionForm} from './recommendation-description-form';
 import trackEvent from '../../../../utils/analytics';
+import {Button} from '@tryghost/shade/components';
 import {type EditOrAddRecommendation, useAddRecommendation} from '@tryghost/admin-x-framework/api/recommendations';
-import {Modal} from '@tryghost/admin-x-design-system';
+import {Icon, Modal} from '@tryghost/admin-x-design-system';
 import {toast} from 'sonner';
 import {useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -49,13 +50,8 @@ const AddRecommendationModalConfirm: React.FC<AddRecommendationModalProps> = ({r
         okLabel = 'Added';
     }
 
-    const leftButtonProps = {
-        label: 'Back',
-        icon: 'arrow-left',
-        iconColorClass: 'text-black dark:text-white',
-        link: true,
-        size: 'sm' as const,
-        onClick: () => {
+    const leftButton = (
+        <Button size='sm' type='button' variant='ghost' onClick={() => {
             if (saveState === 'saving') {
                 // Already saving
                 return;
@@ -70,8 +66,11 @@ const AddRecommendationModalConfirm: React.FC<AddRecommendationModalProps> = ({r
                     ...formState
                 }
             });
-        }
-    };
+        }}>
+            <Icon name='arrow-left' size='sm' />
+            Back
+        </Button>
+    );
 
     return <Modal
         afterClose={() => {
@@ -82,10 +81,10 @@ const AddRecommendationModalConfirm: React.FC<AddRecommendationModalProps> = ({r
         backDropClick={false}
         cancelLabel={'Cancel'}
         dirty={true}
-        leftButtonProps={leftButtonProps}
-        okColor='black'
+        leftButton={leftButton}
         okLabel={okLabel}
         okLoading={loadingState}
+        okVariant='default'
         size='sm'
         testId='add-recommendation-modal'
         title={'Add recommendation'}
diff --git a/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal.tsx
index ee30dd23555..8d32417d44f 100644
--- a/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal.tsx
@@ -183,9 +183,9 @@ const AddRecommendationModal: React.FC<RoutingModalProps & AddRecommendationModa
         }}
         animate={animate ?? true}
         backDropClick={false}
-        okColor='black'
         okLabel={'Next'}
         okLoading={saveState === 'saving'}
+        okVariant='default'
         size='sm'
         testId='add-recommendation-modal'
         title='Add recommendation'
diff --git a/apps/admin-x-settings/src/components/settings/growth/recommendations/edit-recommendation-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/recommendations/edit-recommendation-modal.tsx
index d83bf4ead7f..7e29dd02474 100644
--- a/apps/admin-x-settings/src/components/settings/growth/recommendations/edit-recommendation-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/recommendations/edit-recommendation-modal.tsx
@@ -1,6 +1,7 @@
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React from 'react';
 import RecommendationDescriptionForm, {validateDescriptionForm} from './recommendation-description-form';
+import {Button} from '@tryghost/shade/components';
 import {ConfirmationModal, Modal} from '@tryghost/admin-x-design-system';
 import {type Recommendation, useDeleteRecommendation, useEditRecommendation} from '@tryghost/admin-x-framework/api/recommendations';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
@@ -35,12 +36,8 @@ const EditRecommendationModal: React.FC<RoutingModalProps & EditRecommendationMo
         }
     });
 
-    const leftButtonProps = {
-        label: 'Delete',
-        link: true,
-        color: 'red' as const,
-        size: 'sm' as const,
-        onClick: () => {
+    const leftButton = (
+        <Button className='text-destructive hover:text-destructive' size='sm' type='button' variant='ghost' onClick={() => {
             modal.remove();
             NiceModal.show(ConfirmationModal, {
                 title: 'Delete recommendation',
@@ -48,6 +45,7 @@ const EditRecommendationModal: React.FC<RoutingModalProps & EditRecommendationMo
                     <p>Your recommendation <strong>{recommendation.title}</strong> will no longer be visible to your audience.</p>
                 </>,
                 okLabel: 'Delete',
+                okVariant: 'destructive',
                 onOk: async (deleteModal) => {
                     try {
                         await deleteRecommendation(recommendation);
@@ -58,8 +56,8 @@ const EditRecommendationModal: React.FC<RoutingModalProps & EditRecommendationMo
                     }
                 }
             });
-        }
-    };
+        }}>Delete</Button>
+    );
 
     return <Modal
         afterClose={() => {
@@ -70,9 +68,9 @@ const EditRecommendationModal: React.FC<RoutingModalProps & EditRecommendationMo
         backDropClick={false}
         buttonsDisabled={okProps.disabled}
         cancelLabel={'Close'}
-        leftButtonProps={leftButtonProps}
-        okColor={okProps.color}
+        leftButton={leftButton}
         okLabel={okProps.label || 'Save'}
+        okVariant={okProps.variant}
         size='sm'
         testId='edit-recommendation-modal'
         title={'Edit recommendation'}
diff --git a/apps/admin-x-settings/src/components/settings/growth/recommendations/incoming-recommendation-list.tsx b/apps/admin-x-settings/src/components/settings/growth/recommendations/incoming-recommendation-list.tsx
index 85a86a56630..a623322a185 100644
--- a/apps/admin-x-settings/src/components/settings/growth/recommendations/incoming-recommendation-list.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/recommendations/incoming-recommendation-list.tsx
@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
 import RecommendationIcon from './recommendation-icon';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, LoadingIndicator, NoValueLabel} from '@tryghost/shade/components';
-import {Button} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
 import {type IncomingRecommendation} from '@tryghost/admin-x-framework/api/recommendations';
 import {Inline} from '@tryghost/shade/primitives';
 import {type ReferrerHistoryItem} from '@tryghost/admin-x-framework/api/referrers';
@@ -79,8 +79,7 @@ const IncomingRecommendationItem: React.FC<{incomingRecommendation: IncomingReco
             {!incomingRecommendation.recommending_back && (
                 <ActionListItemActions visibility='hover'>
                 <div className="flex items-center justify-end">
-                    <Button color='green' label='Recommend back' size='sm' link onClick={recommendBack}
-                    />
+                    <Button size='sm' type='button' variant='ghost' onClick={recommendBack}>Recommend back</Button>
                 </div>
                 </ActionListItemActions>
             )}
@@ -98,7 +97,7 @@ const IncomingRecommendationList: React.FC<IncomingRecommendationListProps> = ({
             <ActionList>
                 {incomingRecommendations.map(rec => <IncomingRecommendationItem key={rec.id} incomingRecommendation={rec} stats={stats} />)}
             </ActionList>
-            {showMore?.hasMore && <div className='border-t border-border pt-2'><button className='font-bold text-green hover:opacity-80' type='button' onClick={showMore.loadMore}>Show all</button></div>}
+            {showMore?.hasMore && <div className='border-t border-border pt-2'><Button className='h-auto p-0 text-green hover:text-green' type='button' variant='link' onClick={showMore.loadMore}>Show all</Button></div>}
         </>;
     } else {
         return <NoValueLabel>
diff --git a/apps/admin-x-settings/src/components/settings/growth/recommendations/recommendation-list.tsx b/apps/admin-x-settings/src/components/settings/growth/recommendations/recommendation-list.tsx
index bb8a51f5b47..f289913180b 100644
--- a/apps/admin-x-settings/src/components/settings/growth/recommendations/recommendation-list.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/recommendations/recommendation-list.tsx
@@ -3,8 +3,8 @@ import NiceModal from '@ebay/nice-modal-react';
 import React, {useState} from 'react';
 import RecommendationIcon from './recommendation-icon';
 import useSettingGroup from '../../../../hooks/use-setting-group';
-import {ActionList, ActionListItem, ActionListItemContent, LoadingIndicator, NoValueLabel, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from '@tryghost/shade/components';
-import {Button} from '@tryghost/admin-x-design-system';
+import {ActionList, ActionListItem, ActionListItemContent, Button, LoadingIndicator, NoValueLabel, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from '@tryghost/shade/components';
+import {Icon} from '@tryghost/admin-x-design-system';
 import {Inline} from '@tryghost/shade/primitives';
 import {type Recommendation} from '@tryghost/admin-x-framework/api/recommendations';
 import {formatNumber} from '@tryghost/shade/utils';
@@ -95,22 +95,20 @@ const RecommendationList: React.FC<RecommendationListProps> = ({recommendations,
                 {recommendations.map(recommendation => <RecommendationItem key={recommendation.id} recommendation={recommendation} />)}
             </ActionList>
             <div className='border-t border-border pt-2'>
-                {showMore?.hasMore && <button className='mb-2 font-bold text-green hover:opacity-80' type='button' onClick={showMore.loadMore}>Show all</button>}
+                {showMore?.hasMore && <Button className='mb-2 h-auto p-0 text-green hover:text-green' type='button' variant='link' onClick={showMore.loadMore}>Show all</Button>}
                 <div className='text-sm text-muted-foreground'>
                     Shared with new members after signup, or anytime using <a className='text-green hover:text-green-400' href={recommendationsURL} rel='noopener noreferrer' target='_blank'>this link</a>
                     <TooltipProvider delayDuration={0}>
                         <Tooltip>
                             <TooltipTrigger asChild>
                                 <Button
-                                    className='ml-1 align-middle leading-none'
-                                    color='clear'
-                                    hideLabel={true}
-                                    icon={copied ? 'check-circle' : 'duplicate'}
-                                    iconColorClass={copied ? 'text-green w-[14px] h-[14px]' : 'text-muted-foreground hover:opacity-80 w-[14px] h-[14px]'}
-                                    label={copied ? 'Copied' : 'Copy'}
-                                    unstyled={true}
+                                    aria-label={copied ? 'Copied' : 'Copy'}
+                                    className='ml-1 size-6 align-middle leading-none'
+                                    size='icon'
+                                    type='button'
+                                    variant='ghost'
                                     onClick={copyRecommendationsUrl}
-                                />
+                                ><Icon className={copied ? 'size-3.5! text-green' : 'size-3.5! text-muted-foreground'} name={copied ? 'check-circle' : 'duplicate'} /></Button>
                             </TooltipTrigger>
                             <TooltipContent>{copied ? 'Copied' : 'Copy link'}</TooltipContent>
                         </Tooltip>
@@ -120,9 +118,9 @@ const RecommendationList: React.FC<RecommendationListProps> = ({recommendations,
         </>;
     } else {
         return <NoValueLabel>
-            <Button color='grey' label='Add first recommendation' size='sm' onClick={() => {
+            <Button size='sm' type='button' variant='secondary' onClick={() => {
                 openAddNewRecommendationModal();
-            }}></Button>
+            }}>Add first recommendation</Button>
             <span className='mt-2 max-w-[40ch] text-center text-sm'>Need inspiration? <a className='text-green hover:text-green-400' href="https://ghost.org/explore" rel='noopener noreferrer' target='_blank'>Explore thousands of sites</a></span>
         </NoValueLabel>;
     }
diff --git a/apps/admin-x-settings/src/components/settings/membership/custom-fields.tsx b/apps/admin-x-settings/src/components/settings/membership/custom-fields.tsx
index ac24306d08d..463eeb479eb 100644
--- a/apps/admin-x-settings/src/components/settings/membership/custom-fields.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/custom-fields.tsx
@@ -3,8 +3,8 @@ import NiceModal from '@ebay/nice-modal-react';
 import React, {useEffect, useRef, useState} from 'react';
 import TopLevelGroup from '../../top-level-group';
 import useFeatureFlag from '../../../hooks/use-feature-flag';
-import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, NoValueLabel, NoValueLabelIcon, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
-import {Button, Icon} from '@tryghost/admin-x-design-system';
+import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button, NoValueLabel, NoValueLabelIcon, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
+import {Icon} from '@tryghost/admin-x-design-system';
 import {TextCursorInput} from 'lucide-react';
 import {useBrowseMemberCustomFieldsIncludingArchived, userTypeForField} from '@tryghost/admin-x-framework/api/member-custom-fields';
 import {withErrorBoundary} from '../../error-boundary';
@@ -56,7 +56,7 @@ const FieldList: React.FC<{
                                 </button>
                             </ActionListItemContent>
                             <ActionListItemActions>
-                                <Button color='green' label='Edit' link onClick={() => openModal(field)} />
+                                <Button className='h-auto p-0 font-bold text-green hover:text-green/90 hover:no-underline' size='sm' type='button' variant='link' onClick={() => openModal(field)}>Edit</Button>
                             </ActionListItemActions>
                         </ActionListItem>
                     );
@@ -112,7 +112,7 @@ const CustomFields: React.FC<{keywords: string[]}> = ({keywords}) => {
 
     return (
         <TopLevelGroup
-            customButtons={<Button color='clear' label='Add custom field' size='sm' onClick={() => openModal()} />}
+            customButtons={<Button size='sm' type='button' variant='ghost' onClick={() => openModal()}>Add custom field</Button>}
             description='Create and manage custom fields to store extra information about your members'
             keywords={keywords}
             navid='custom-fields'
diff --git a/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-modal.tsx b/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-modal.tsx
index d994040fbad..afd2861124c 100644
--- a/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-modal.tsx
@@ -1,7 +1,7 @@
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React from 'react';
-import {Button, ConfirmationModal, Form, Icon, Modal, TextField} from '@tryghost/admin-x-design-system';
-import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Field, FieldDescription, FieldLabel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@tryghost/shade/components';
+import {Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Field, FieldDescription, FieldLabel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@tryghost/shade/components';
+import {ConfirmationModal, Form, Icon, Modal, TextField} from '@tryghost/admin-x-design-system';
 import {ValidationError, getErrorMessage} from '@tryghost/admin-x-framework/errors';
 import {memberCustomFieldUserTypes, useCreateMemberCustomField, useDeleteMemberCustomField, useEditMemberCustomField, userTypeForField} from '@tryghost/admin-x-framework/api/member-custom-fields';
 import {toast} from 'sonner';
@@ -79,12 +79,8 @@ const CustomFieldModal = NiceModal.create<{field?: MemberCustomField}>(({field})
     // The modal's third action mirrors the field's state: an active field can
     // be archived, an archived one reactivated. Both confirm first (the
     // newsletters pattern) — they change what every collection surface shows.
-    const archiveButtonProps = {
-        label: 'Archive',
-        link: true,
-        color: 'red' as const,
-        size: 'sm' as const,
-        onClick: () => {
+    const archiveButton = (
+        <Button className='text-destructive hover:text-destructive' size='sm' type='button' variant='ghost' onClick={() => {
             modal.remove();
             NiceModal.show(ConfirmationModal, {
                 title: 'Archive custom field',
@@ -93,7 +89,7 @@ const CustomFieldModal = NiceModal.create<{field?: MemberCustomField}>(({field})
                     <div>Values already collected for this field will remain unchanged.</div>
                 </>,
                 okLabel: 'Archive',
-                okColor: 'red',
+                okVariant: 'destructive',
                 onOk: async (archiveModal) => {
                     try {
                         // Archiving is a status change over the same PUT a rename
@@ -108,15 +104,11 @@ const CustomFieldModal = NiceModal.create<{field?: MemberCustomField}>(({field})
                     }
                 }
             });
-        }
-    };
+        }}>Archive</Button>
+    );
 
-    const reactivateButtonProps = {
-        label: 'Reactivate',
-        link: true,
-        color: 'green' as const,
-        size: 'sm' as const,
-        onClick: () => {
+    const reactivateButton = (
+        <Button className='text-green hover:text-green' size='sm' type='button' variant='ghost' onClick={() => {
             modal.remove();
             NiceModal.show(ConfirmationModal, {
                 title: 'Reactivate custom field',
@@ -136,12 +128,12 @@ const CustomFieldModal = NiceModal.create<{field?: MemberCustomField}>(({field})
                     }
                 }
             });
-        }
-    };
+        }}>Reactivate</Button>
+    );
 
-    let leftButtonProps;
+    let leftButton;
     if (isEdit) {
-        leftButtonProps = isArchived ? reactivateButtonProps : archiveButtonProps;
+        leftButton = isArchived ? reactivateButton : archiveButton;
     }
 
     // Permanent deletion hides behind the header menu — one deliberate click
@@ -154,7 +146,7 @@ const CustomFieldModal = NiceModal.create<{field?: MemberCustomField}>(({field})
             title: 'Delete custom field',
             prompt: <><strong>{field!.name}</strong> and every value collected from your members will be permanently deleted from the database. This can&rsquo;t be undone.</>,
             okLabel: 'Delete',
-            okColor: 'red',
+            okVariant: 'destructive',
             onOk: async (deleteModal) => {
                 try {
                     await deleteField(field!.key);
@@ -171,7 +163,9 @@ const CustomFieldModal = NiceModal.create<{field?: MemberCustomField}>(({field})
     const archivedFieldMenu = (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button icon='ellipsis' label='Menu' hideLabel />
+                <Button aria-label='Menu' size='icon' type='button' variant='ghost'>
+                    <Icon name='ellipsis' size='sm' />
+                </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align='end' className='z-[9999]'>
                 <DropdownMenuItem className='text-destructive focus:text-destructive' onSelect={confirmDeleteField}>
@@ -186,9 +180,9 @@ const CustomFieldModal = NiceModal.create<{field?: MemberCustomField}>(({field})
         <Modal
             buttonsDisabled={okProps.disabled}
             cancelLabel={isEdit ? 'Close' : 'Cancel'}
-            leftButtonProps={leftButtonProps}
-            okColor={okProps.color}
+            leftButton={leftButton}
             okLabel={okProps.label || 'Save'}
+            okVariant={okProps.variant}
             size='sm'
             testId='custom-field-modal'
             title={isEdit ? 'Edit custom field' : 'Add custom field'}
diff --git a/apps/admin-x-settings/src/components/settings/membership/member-emails.tsx b/apps/admin-x-settings/src/components/settings/membership/member-emails.tsx
index 90f0bbb3d70..1b3e103e454 100644
--- a/apps/admin-x-settings/src/components/settings/membership/member-emails.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/member-emails.tsx
@@ -6,7 +6,8 @@ import WelcomeEmailModal from './member-emails/welcome-email-modal';
 import useQueryParams from '../../../hooks/use-query-params';
 import {APIError} from '@tryghost/admin-x-framework/errors';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Switch} from '@tryghost/shade/components';
-import {Button, ConfirmationModal, Icon} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
+import {ConfirmationModal, Icon} from '@tryghost/admin-x-design-system';
 import {WELCOME_EMAIL_SLUGS, type WelcomeEmailType, getDefaultWelcomeEmailRecord, getDefaultWelcomeEmailValues} from './member-emails/default-welcome-email-values';
 import {checkStripeEnabled, getSettingValues} from '@tryghost/admin-x-framework/api/settings';
 import {toast} from 'sonner';
@@ -69,9 +70,7 @@ const EmailPreviewRow: React.FC<{
                         onCheckedChange={onToggle}
                     />
                 )}
-                <button className='font-semibold text-green hover:opacity-80' type='button' onClick={onEdit}>
-                    Edit
-                </button>
+                <Button className='h-auto p-0 font-bold text-green hover:text-green/90 hover:no-underline' type='button' variant='link' onClick={onEdit}>Edit</Button>
                 </div>
             </ActionListItemActions>
         </ActionListItem>
@@ -282,11 +281,13 @@ const MemberEmails: React.FC<{ keywords: string[] }> = ({keywords}) => {
             customButtons={(
                 <Button
                     className='mt-[-5px]'
-                    color='clear'
-                    label='Customize'
                     size='sm'
+                    type='button'
+                    variant='ghost'
                     onClick={() => NiceModal.show(WelcomeEmailCustomizeModal)}
-                />
+                >
+                    Customize
+                </Button>
             )}
             description="Create and manage automated emails for your members"
             keywords={keywords}
diff --git a/apps/admin-x-settings/src/components/settings/membership/member-emails/test-email-dropdown.tsx b/apps/admin-x-settings/src/components/settings/membership/member-emails/test-email-dropdown.tsx
index 636ae8bd760..21ec1d419b9 100644
--- a/apps/admin-x-settings/src/components/settings/membership/member-emails/test-email-dropdown.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/member-emails/test-email-dropdown.tsx
@@ -1,7 +1,8 @@
 import validator from 'validator';
-import {Button, TextField} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
 import {FieldError, PopoverContent} from '@tryghost/shade/components';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
+import {TextField} from '@tryghost/admin-x-design-system';
 import {useCurrentUser} from '@tryghost/admin-x-framework/api/current-user';
 import {useEffect, useRef, useState} from 'react';
 import {useSendTestWelcomeEmail} from '@tryghost/admin-x-framework/api/automated-emails';
@@ -97,11 +98,12 @@ const TestEmailDropdown: React.FC<TestEmailDropdownProps> = ({
             </div>
             <Button
                 className='w-full'
-                color={sendState === 'sent' ? 'green' : 'black'}
                 disabled={sendState === 'sending'}
-                label={sendState === 'sent' ? 'Sent' : sendState === 'sending' ? 'Sending...' : 'Send'}
+                type='button'
                 onClick={handleSendTestEmail}
-            />
+            >
+                {sendState === 'sent' ? 'Sent' : sendState === 'sending' ? 'Sending...' : 'Send'}
+            </Button>
             {testEmailError && <FieldError className='mt-2'>{testEmailError}</FieldError>}
         </PopoverContent>
     );
diff --git a/apps/admin-x-settings/src/components/settings/membership/member-emails/welcome-email-customize-modal.tsx b/apps/admin-x-settings/src/components/settings/membership/member-emails/welcome-email-customize-modal.tsx
index 0600e8eb61a..5c0a434f374 100644
--- a/apps/admin-x-settings/src/components/settings/membership/member-emails/welcome-email-customize-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/member-emails/welcome-email-customize-modal.tsx
@@ -517,7 +517,7 @@ const WelcomeEmailCustomizeModal = NiceModal.create(() => {
     const fetchErrorMessage = 'Unable to load email design settings. Please try again.';
     const modalOkProps = hasSaveError ? {
         ...okProps,
-        color: 'red' as const,
+        variant: 'destructive' as const,
         label: 'Retry'
     } : okProps;
 
diff --git a/apps/admin-x-settings/src/components/settings/membership/member-emails/welcome-email-modal.tsx b/apps/admin-x-settings/src/components/settings/membership/member-emails/welcome-email-modal.tsx
index 228c07011b9..ec5958f8613 100644
--- a/apps/admin-x-settings/src/components/settings/membership/member-emails/welcome-email-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/member-emails/welcome-email-modal.tsx
@@ -6,7 +6,7 @@ import MemberEmailEditor from './member-email-editor';
 import WelcomeEmailPreviewFrame from './welcome-email-preview-frame';
 import {DirtyConfirmDialog, useDirtyConfirmation} from '@tryghost/shade/patterns';
 import {FieldError} from '@tryghost/shade/components';
-import {Button as LegacyButton, Modal, TextField} from '@tryghost/admin-x-design-system';
+import {Icon, Modal, TextField} from '@tryghost/admin-x-design-system';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
 import {getWelcomeEmailValidationErrors} from './welcome-email-validation';
 import {useBrowseAutomatedEmails, useEditAutomatedEmail, usePreviewWelcomeEmail} from '@tryghost/admin-x-framework/api/automated-emails';
@@ -234,9 +234,10 @@ const WelcomeEmailModal = NiceModal.create<WelcomeEmailModalProps>(({emailType =
                 className='dark:bg-[#151719]'
                 headerActions={
                     <>
-                        <Button variant="outline" onClick={handleClose}>Close</Button>
+                        <Button className='font-semibold' type='button' variant='ghost' onClick={handleClose}>Close</Button>
                         <Button
                             disabled={okProps.disabled}
+                            type='button'
                             onClick={async () => await handleSave({fakeWhenUnchanged: true})}
                         >
                             {saveButtonLabel}
@@ -260,12 +261,7 @@ const WelcomeEmailModal = NiceModal.create<WelcomeEmailModalProps>(({emailType =
                                     </div>
                                     <Popover open={showTestDropdown} onOpenChange={setShowTestDropdown}>
                                         <PopoverTrigger asChild>
-                                            <LegacyButton
-                                                className='border border-control-border font-semibold hover:bg-button-hover!'
-                                                color="clear"
-                                                icon='send'
-                                                label="Test"
-                                            />
+                                            <Button type='button' variant='outline'><Icon name='send' size='sm' />Test</Button>
                                         </PopoverTrigger>
                                         {showTestDropdown && (
                                             <TestEmailDropdown automatedEmailId={automatedEmail.id} lexical={formState.lexical} subject={formState.subject} validateForm={validate} />
diff --git a/apps/admin-x-settings/src/components/settings/membership/portal.tsx b/apps/admin-x-settings/src/components/settings/membership/portal.tsx
index bbf4594473c..940a08ed98a 100644
--- a/apps/admin-x-settings/src/components/settings/membership/portal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/portal.tsx
@@ -2,7 +2,7 @@ import FakeLogo from '../../../assets/images/portal-splash-default-logo.png';
 import React from 'react';
 import TopLevelGroup from '../../top-level-group';
 import UserAddIcon from '../../../assets/images/portal-splash-user-add.png';
-import {Button} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
 import {useGlobalData} from '../../providers/global-data-provider';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -37,7 +37,7 @@ const Portal: React.FC<{ keywords: string[] }> = ({keywords}) => {
 
     return (
         <TopLevelGroup
-            customButtons={<Button className='mt-[-5px]' color='clear' disabled={membersSignupAccess === 'none'} label='Customize' size='sm' onClick={openPreviewModal}/>}
+            customButtons={<Button className='mt-[-5px]' disabled={membersSignupAccess === 'none'} size='sm' type='button' variant='ghost' onClick={openPreviewModal}>Customize</Button>}
             description="Customize members modal signup flow"
             keywords={keywords}
             navid='portal'
diff --git a/apps/admin-x-settings/src/components/settings/membership/portal/portal-links.tsx b/apps/admin-x-settings/src/components/settings/membership/portal/portal-links.tsx
index 24c4a5ef434..646146c8531 100644
--- a/apps/admin-x-settings/src/components/settings/membership/portal/portal-links.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/portal/portal-links.tsx
@@ -1,6 +1,7 @@
 import React, {useEffect, useId, useState} from 'react';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Field, FieldLabel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@tryghost/shade/components';
-import {Button, ModalPage, TextField} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
+import {ModalPage, TextField} from '@tryghost/admin-x-design-system';
 import {getHomepageUrl} from '@tryghost/admin-x-framework/api/site';
 import {getPaidActiveTiers, useBrowseTiers} from '@tryghost/admin-x-framework/api/tiers';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
@@ -20,14 +21,18 @@ const PortalLink: React.FC<PortalLinkPrefs> = ({name, value}) => {
                 <label className='inline-block whitespace-nowrap lg:w-[180px] lg:min-w-[180px]' htmlFor={id}>{name}:</label>
                 <TextField className='grow border-b-border bg-transparent py-1 text-muted-foreground lg:p-1' id={id} value={value} disabled unstyled />
             </ActionListItemContent>
-            <ActionListItemActions><Button color='black' label='Copy' link onClick={(e) => {
-                navigator.clipboard.writeText(value);
-                const button = e?.target as HTMLButtonElement;
-                button.innerText = 'Copied';
-                setTimeout(() => {
-                    button.innerText = 'Copy';
-                }, 1000);
-            }}/></ActionListItemActions>
+            <ActionListItemActions><Button size='sm' type='button' variant='ghost' onClick={async (e) => {
+                const button = e.currentTarget;
+                try {
+                    await navigator.clipboard.writeText(value);
+                    button.innerText = 'Copied';
+                    setTimeout(() => {
+                        button.innerText = 'Copy';
+                    }, 1000);
+                } catch {
+                    // Leave the label unchanged when clipboard access is denied.
+                }
+            }}>Copy</Button></ActionListItemActions>
         </ActionListItem>
     );
 };
@@ -66,7 +71,7 @@ const PortalLinks: React.FC = () => {
             <section>
                 <div className='flex items-center justify-between border-b border-border pb-2'>
                     <h2 className='text-xl font-semibold'>Generic</h2>
-                    <Button color='green' label={isDataAttributes ? 'Links' : 'Data attributes'} link onClick={toggleIsDataAttributes}/>
+                    <Button size='sm' type='button' variant='ghost' onClick={toggleIsDataAttributes}>{isDataAttributes ? 'Links' : 'Data attributes'}</Button>
                 </div>
                 <ActionList>
                     <PortalLink name='Default' value={isDataAttributes ? 'data-portal' : `${homePageURL}#/portal`} />
diff --git a/apps/admin-x-settings/src/components/settings/membership/portal/portal-modal.tsx b/apps/admin-x-settings/src/components/settings/membership/portal/portal-modal.tsx
index e61ca1b1342..d79cb46c3d5 100644
--- a/apps/admin-x-settings/src/components/settings/membership/portal/portal-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/portal/portal-modal.tsx
@@ -231,8 +231,8 @@ const PortalModal: React.FC = () => {
         buttonsDisabled={okProps.disabled}
         cancelLabel='Close'
         dirty={saveState === 'unsaved'}
-        okColor={okProps.color}
         okLabel={okProps.label || 'Save'}
+        okVariant={okProps.variant}
         preview={preview}
         previewBgColor={selectedPreviewTab === 'links' ? 'white' : 'greygradient'}
         previewToolbarTabs={previewTabs}
diff --git a/apps/admin-x-settings/src/components/settings/membership/stripe/stripe-connect-modal.tsx b/apps/admin-x-settings/src/components/settings/membership/stripe/stripe-connect-modal.tsx
index e81dba1c04b..71d113078f6 100644
--- a/apps/admin-x-settings/src/components/settings/membership/stripe/stripe-connect-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/stripe/stripe-connect-modal.tsx
@@ -7,8 +7,8 @@ import StripeButton from '../../../stripe-button';
 import StripeLogo from '../../../../assets/images/stripe-emblem.svg';
 import StripeVerifiedBadge from '../../../../assets/images/stripe-verified.svg';
 import useSettingGroup from '../../../../hooks/use-setting-group';
-import {Button, ConfirmationModal, Form, LimitModal, Modal, TextField} from '@tryghost/admin-x-design-system';
-import {Field, FieldError, FieldLabel, Switch, Textarea} from '@tryghost/shade/components';
+import {Button, Field, FieldError, FieldLabel, Switch, Textarea} from '@tryghost/shade/components';
+import {ConfirmationModal, Form, Icon, LimitModal, Modal, TextField} from '@tryghost/admin-x-design-system';
 import {HostLimitError, useLimiter} from '../../../../hooks/use-limiter';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
 import {Text} from '@tryghost/shade/primitives';
@@ -135,14 +135,14 @@ const Connect: React.FC = () => {
             <div className='mt-2 mb-4'>
                 Click on the <strong>“Connect with Stripe”</strong> button to generate a secure key that connects your Ghost site with Stripe.
             </div>
-            <StripeButton href={stripeConnectUrl} tag='a' target='_blank' />
+            <StripeButton href={stripeConnectUrl} target='_blank' />
             <Text as='h6' className='mt-8 mb-2 text-base' tone='secondary' weight='semibold'>Step 2 — <span className='text-foreground'>Paste secure key</span></Text>
             <Field data-invalid={Boolean(error) || undefined}>
                 <FieldLabel className='sr-only' htmlFor='stripe-secure-key'>Secure key</FieldLabel>
                 <Textarea aria-invalid={Boolean(error) || undefined} className='border-transparent bg-muted' id='stripe-secure-key' placeholder='Paste your secure key here' onChange={onTokenChange} />
                 {error && <FieldError>{error}</FieldError>}
             </Field>
-            {submitEnabled && <Button className='mt-5' color='green' label='Save Stripe settings' onClick={onSubmit} />}
+            {submitEnabled && <Button className='mt-5' type='button' onClick={onSubmit}>Save Stripe settings</Button>}
         </div>
     );
 };
@@ -184,8 +184,13 @@ const Connected: React.FC<{onClose?: () => void}> = ({onClose}) => {
     return (
         <section>
             <div className='flex items-center justify-between'>
-                <Button color='red' disabled={isFetchingMembers} icon='link-broken' iconColorClass='text-red' label='Disconnect' link onClick={openDisconnectStripeModal} />
-                <Button icon='close' iconColorClass='dark:text-white' label='Close' size='sm' hideLabel link onClick={onClose} />
+                <Button className='text-destructive hover:text-destructive' disabled={isFetchingMembers} type='button' variant='ghost' onClick={openDisconnectStripeModal}>
+                    <Icon name='link-broken' size='sm' />
+                    Disconnect
+                </Button>
+                <Button aria-label='Close' size='icon' type='button' variant='ghost' onClick={onClose}>
+                    <Icon name='close' size='sm' />
+                </Button>
             </div>
             <div className='my-20 flex flex-col items-center'>
                 <div className='relative h-20 w-[200px]'>
@@ -240,7 +245,7 @@ const Direct: React.FC<{onClose: () => void}> = ({onClose}) => {
             <Form marginBottom={false} marginTop>
                 <TextField title='Publishable key' value={publishableKey?.toString() ?? ''} onChange={e => updateSetting('stripe_publishable_key', e.target.value)} />
                 <TextField title='Secure key' value={secretKey?.toString() ?? ''} onChange={e => updateSetting('stripe_secret_key', e.target.value)} />
-                <Button className='mt-5' color='green' disabled={saveState === 'saving'} label='Save Stripe settings' onClick={onSubmit} />
+                <Button className='mt-5' disabled={saveState === 'saving'} type='button' onClick={onSubmit}>Save Stripe settings</Button>
             </Form>
         </div>
     );
diff --git a/apps/admin-x-settings/src/components/settings/membership/tiers.tsx b/apps/admin-x-settings/src/components/settings/membership/tiers.tsx
index 2383486668e..7806c14d7b3 100644
--- a/apps/admin-x-settings/src/components/settings/membership/tiers.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/tiers.tsx
@@ -4,25 +4,26 @@ import StripeButton from '../../stripe-button';
 import TiersList from './tiers/tiers-list';
 import TopLevelGroup from '../../top-level-group';
 import clsx from 'clsx';
-import {Button, LimitModal} from '@tryghost/admin-x-design-system';
+import {Button, Indicator, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
 import {HostLimitError, useLimiter} from '../../../hooks/use-limiter';
-import {Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
+import {LimitModal} from '@tryghost/admin-x-design-system';
 import {type Tier, getActiveTiers, getArchivedTiers, useBrowseTiers} from '@tryghost/admin-x-framework/api/tiers';
 import {checkStripeEnabled} from '@tryghost/admin-x-framework/api/settings';
+import {formatNumber} from '@tryghost/shade/utils';
 import {useGlobalData} from '../../providers/global-data-provider';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 import {withErrorBoundary} from '../../error-boundary';
 
 const StripeConnectedButton: React.FC<{className?: string; onClick: () => void;}> = ({className, onClick}) => {
     className = clsx(
-        'group flex shrink-0 items-center justify-center rounded border border-grey-300 px-3 py-1.5 font-semibold whitespace-nowrap text-grey-900 transition-all hover:border-grey-500 dark:border-grey-900 dark:text-white',
+        'h-[34px] shrink-0 gap-2 px-3 font-semibold',
         className
     );
     return (
-        <button className={className} data-testid='stripe-connected' type='button' onClick={onClick}>
-            <span className="inline-flex size-2 rounded-full bg-green transition-all group-hover:bg-[#625BF6]"></span>
-            <span className='ml-2'>Connected to Stripe</span>
-        </button>
+        <Button className={className} data-testid='stripe-connected' type='button' variant='outline' onClick={onClick}>
+            <Indicator variant='success' />
+            <span>Connected to Stripe</span>
+        </Button>
     );
 };
 
@@ -77,7 +78,7 @@ const Tiers: React.FC<{ keywords: string[] }> = ({keywords}) => {
     return (
         <TopLevelGroup
             customButtons={checkStripeEnabled(settings, config) ?
-                <StripeConnectedButton className='hidden tablet:!visible tablet:!block' onClick={openConnectModal} />
+                <StripeConnectedButton className='hidden tablet:!visible tablet:!inline-flex' onClick={openConnectModal} />
                 :
                 <StripeButton className='hidden tablet:!visible tablet:!block' onClick={openConnectModal}/>}
             description='Set prices and paid member sign up settings'
@@ -96,10 +97,12 @@ const Tiers: React.FC<{ keywords: string[] }> = ({keywords}) => {
 
             {content}
             {isEnd === false && <Button
-                label={`Load more (showing ${tiers?.length || 0}/${meta?.pagination.total || 0} tiers)`}
-                link
+                type='button'
+                variant='link'
                 onClick={() => fetchNextPage()}
-            />}
+            >
+                {`Load more (showing ${formatNumber(tiers?.length || 0)}/${formatNumber(meta?.pagination.total || 0)} tiers)`}
+            </Button>}
         </TopLevelGroup>
     );
 };
diff --git a/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-modal.tsx b/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-modal.tsx
index 0d996984389..a3f0f970cc1 100644
--- a/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-modal.tsx
@@ -5,8 +5,8 @@ import useCurrencyInput from '../../../../hooks/use-currency-input';
 import useSettingGroup from '../../../../hooks/use-setting-group';
 import useSortableIndexedList from '../../../../hooks/use-sortable-indexed-list';
 import useUrlInput from '../../../../hooks/use-url-input';
-import {Button, type ButtonProps, ConfirmationModal, Form, Icon, Modal, TextField} from '@tryghost/admin-x-design-system';
-import {Combobox, ComboboxContent, ComboboxTrigger, ComboboxValue, Field, FieldDescription, FieldError, FieldLabel, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, MultiSelectCombobox, SortableList, Switch} from '@tryghost/shade/components';
+import {Button, Combobox, ComboboxContent, ComboboxTrigger, ComboboxValue, Field, FieldDescription, FieldError, FieldLabel, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, MultiSelectCombobox, SortableList, Switch} from '@tryghost/shade/components';
+import {ConfirmationModal, Form, Icon, Modal, TextField} from '@tryghost/admin-x-design-system';
 import {type ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
 import {Text} from '@tryghost/shade/primitives';
@@ -158,7 +158,7 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
                 prompt: prompt,
                 okLabel: okLabel,
                 cancelLabel: 'Cancel',
-                okColor: tier.active ? 'red' : 'black',
+                okVariant: tier.active ? 'destructive' : 'default',
                 onOk: (confirmModal) => {
                     updateTier({...tier, active: !tier.active});
                     confirmModal?.remove();
@@ -168,22 +168,12 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
         }
     };
 
-    let leftButtonProps: ButtonProps = {};
+    let leftButton: React.ReactNode;
     if (tier) {
         if (tier.active && tier.type !== 'free') {
-            leftButtonProps = {
-                label: 'Archive tier',
-                color: 'red',
-                link: true,
-                onClick: confirmTierStatusChange
-            };
+            leftButton = <Button className='text-destructive hover:text-destructive' type='button' variant='ghost' onClick={confirmTierStatusChange}>Archive tier</Button>;
         } else if (!tier.active) {
-            leftButtonProps = {
-                label: 'Reactivate tier',
-                color: 'green',
-                link: true,
-                onClick: confirmTierStatusChange
-            };
+            leftButton = <Button className='text-green hover:text-green' type='button' variant='ghost' onClick={confirmTierStatusChange}>Reactivate tier</Button>;
         }
     }
 
@@ -194,9 +184,9 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
         buttonsDisabled={okProps.disabled}
         cancelLabel='Close'
         dirty={saveState === 'unsaved'}
-        leftButtonProps={leftButtonProps}
-        okColor={okProps.color}
+        leftButton={leftButton}
         okLabel={okProps.label || 'Save'}
+        okVariant={okProps.variant}
         size='lg'
         testId='tier-detail-modal'
         title={(tier ? (tier.active ? 'Edit tier' : 'Edit archived tier') : 'New tier')}
@@ -363,7 +353,9 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
                                     value={item}
                                     onChange={e => benefits.updateItem(id, e.target.value)}
                                 />
-                                <Button className='absolute top-1/2 right-1 z-10 size-5! -translate-y-1/2 p-0! opacity-0 group-hover:opacity-100' color='grey' icon='trash' size='sm' onClick={() => benefits.removeItem(id)} />
+                                <Button aria-label='Delete benefit' className='absolute top-1/2 right-1 z-10 size-5! -translate-y-1/2 p-0! opacity-0 group-hover:opacity-100' size='icon' type='button' variant='secondary' onClick={() => benefits.removeItem(id)}>
+                                    <Icon name='trash' size='sm' />
+                                </Button>
                             </div>}
                             onMove={benefits.moveItem}
                         />
@@ -386,15 +378,14 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
                             }}
                         />
                         <Button
+                            aria-label='Add benefit'
                             className='absolute top-1/2 right-1 z-10 size-[22px]! -translate-y-1/2 p-0!'
-                            color='green'
-                            icon='add'
-                            iconColorClass='text-white'
-                            label='Add'
-                            size='sm'
-                            hideLabel
+                            size='icon'
+                            type='button'
                             onClick={() => benefits.addItem()}
-                        />
+                        >
+                            <Icon name='add' size='sm' />
+                        </Button>
                     </div>
                 </Form>
             </div>
diff --git a/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-preview.tsx b/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-preview.tsx
index 6b3b03f7062..e94deff8aa9 100644
--- a/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-preview.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-preview.tsx
@@ -1,6 +1,7 @@
 import React, {useState} from 'react';
 import clsx from 'clsx';
-import {Button, Icon} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
+import {Icon} from '@tryghost/admin-x-design-system';
 import {Text} from '@tryghost/shade/primitives';
 import {type TierFormState} from './tier-detail-modal';
 import {currencyToDecimal, getSymbol} from '../../../../utils/currency';
@@ -95,8 +96,8 @@ const TierDetailPreview: React.FC<TierDetailPreviewProps> = ({tier, isFreeTier})
             <div className="flex items-baseline justify-between">
                 <Text as='h6' className="pb-2 text-base" weight='semibold'>{isFreeTier ? 'Free membership preview' : 'Tier preview'}</Text>
                 {!isFreeTier && <div className="flex gap-1">
-                    <Button className={`${showingYearly === true ? 'text-grey-500' : 'text-grey-900 dark:text-white'}`} label="Monthly" link unstyled onClick={() => setShowingYearly(false)} />
-                    <Button className={`ml-2 ${showingYearly === true ? 'text-grey-900 dark:text-white' : 'text-grey-500'}`} label="Yearly" link unstyled onClick={() => setShowingYearly(true)} />
+                    <Button className={showingYearly ? 'h-auto p-0 text-muted-foreground' : 'h-auto p-0 text-foreground'} type='button' variant='link' onClick={() => setShowingYearly(false)}>Monthly</Button>
+                    <Button className={showingYearly ? 'ml-2 h-auto p-0 text-foreground' : 'ml-2 h-auto p-0 text-muted-foreground'} type='button' variant='link' onClick={() => setShowingYearly(true)}>Yearly</Button>
                 </div>}
             </div>
             <div className='rounded-sm border border-grey-200 bg-white dark:border-transparent'>
diff --git a/apps/admin-x-settings/src/components/settings/site/announcement-bar-modal.tsx b/apps/admin-x-settings/src/components/settings/site/announcement-bar-modal.tsx
index de14be5fe71..47e09027c4a 100644
--- a/apps/admin-x-settings/src/components/settings/site/announcement-bar-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/announcement-bar-modal.tsx
@@ -227,8 +227,8 @@ const AnnouncementBarModal: React.FC = () => {
         cancelLabel='Close'
         deviceSelector={deviceSelector}
         dirty={false}
-        okColor={okProps.color}
         okLabel={okProps.label || 'Save'}
+        okVariant={okProps.variant}
         preview={preview}
         previewBgColor='greygradient'
         previewToolbarTabs={previewTabs}
diff --git a/apps/admin-x-settings/src/components/settings/site/announcement-bar.tsx b/apps/admin-x-settings/src/components/settings/site/announcement-bar.tsx
index aba644c65b0..f464afe8b0f 100644
--- a/apps/admin-x-settings/src/components/settings/site/announcement-bar.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/announcement-bar.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import TopLevelGroup from '../../top-level-group';
-import {Button} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 import {withErrorBoundary} from '../../error-boundary';
 
@@ -12,7 +12,7 @@ const AnnouncementBar: React.FC<{ keywords: string[] }> = ({keywords}) => {
 
     return (
         <TopLevelGroup
-            customButtons={<Button className='mt-[-5px]' color='clear' label='Customize' size='sm' onClick={openModal}/>}
+            customButtons={<Button className='mt-[-5px]' size='sm' type='button' variant='ghost' onClick={openModal}>Customize</Button>}
             description="Highlight important updates or offers"
             keywords={keywords}
             navid='announcement-bar'
diff --git a/apps/admin-x-settings/src/components/settings/site/change-theme.tsx b/apps/admin-x-settings/src/components/settings/site/change-theme.tsx
index 854ef9aa589..493d79a779b 100644
--- a/apps/admin-x-settings/src/components/settings/site/change-theme.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/change-theme.tsx
@@ -1,8 +1,8 @@
 import NiceModal from '@ebay/nice-modal-react';
 import React, {useEffect, useState} from 'react';
 import TopLevelGroup from '../../top-level-group';
-import {Button, LimitModal, SettingGroupContent} from '@tryghost/admin-x-design-system';
-import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from '@tryghost/shade/components';
+import {Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from '@tryghost/shade/components';
+import {Icon, LimitModal, SettingGroupContent} from '@tryghost/admin-x-design-system';
 import {Text} from '@tryghost/shade/primitives';
 import {type Theme, useBrowseThemes} from '@tryghost/admin-x-framework/api/themes';
 import {downloadFile, getGhostPaths} from '@tryghost/admin-x-framework/helpers';
@@ -81,7 +81,7 @@ const ChangeTheme: React.FC<{ keywords: string[] }> = ({keywords}) => {
                     <div className='-mr-3'>
                         <DropdownMenu>
                             <DropdownMenuTrigger asChild>
-                                <Button disabled={!activeTheme} icon='ellipsis' iconColorClass='text-base' label='Menu' size='sm' hideLabel />
+                                <Button aria-label='Menu' disabled={!activeTheme} size='icon' type='button' variant='ghost'><Icon name='ellipsis' size='sm' /></Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align='end'>
                                 <DropdownMenuItem onSelect={openThemeEditor}>Edit code</DropdownMenuItem>
@@ -97,7 +97,7 @@ const ChangeTheme: React.FC<{ keywords: string[] }> = ({keywords}) => {
     return (
         <TopLevelGroup
             customButtons={
-                <Button className='mt-[-5px]' color='clear' label='Change theme' size='sm' onClick={openPreviewModal} />
+                <Button className='mt-[-5px]' size='sm' type='button' variant='ghost' onClick={openPreviewModal}>Change theme</Button>
             }
             description="Browse and install official themes or upload one"
             keywords={keywords}
diff --git a/apps/admin-x-settings/src/components/settings/site/design-modal.tsx b/apps/admin-x-settings/src/components/settings/site/design-modal.tsx
index e39a14b95aa..54dc736a401 100644
--- a/apps/admin-x-settings/src/components/settings/site/design-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/design-modal.tsx
@@ -220,8 +220,8 @@ const DesignModal: React.FC = () => {
         cancelLabel='Close'
         deviceSelector={deviceSelector}
         dirty={saveState === 'unsaved'}
-        okColor={okProps.color}
         okLabel={okProps.label || 'Save'}
+        okVariant={okProps.variant}
         preview={previewContent}
         previewToolbarTabs={previewTabs}
         sidebar={sidebarContent}
diff --git a/apps/admin-x-settings/src/components/settings/site/design-setting.tsx b/apps/admin-x-settings/src/components/settings/site/design-setting.tsx
index b1bbe1f853f..b0b84d2e938 100644
--- a/apps/admin-x-settings/src/components/settings/site/design-setting.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/design-setting.tsx
@@ -1,7 +1,7 @@
 import DesignSettingsImg from '../../../assets/images/design-settings.png';
 import React from 'react';
 import TopLevelGroup from '../../top-level-group';
-import {Button} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 import {withErrorBoundary} from '../../error-boundary';
 
@@ -13,7 +13,7 @@ const DesignSetting: React.FC<{ keywords: string[] }> = ({keywords}) => {
 
     return (
         <TopLevelGroup
-            customButtons={<Button className='mt-[-5px]' color='clear' label='Customize' size='sm' onClick={openPreviewModal}/>}
+            customButtons={<Button className='mt-[-5px]' size='sm' type='button' variant='ghost' onClick={openPreviewModal}>Customize</Button>}
             description="Customize the style and layout of your site"
             keywords={keywords}
             navid='design'
diff --git a/apps/admin-x-settings/src/components/settings/site/navigation.tsx b/apps/admin-x-settings/src/components/settings/site/navigation.tsx
index 47fde4c770c..ae58b659974 100644
--- a/apps/admin-x-settings/src/components/settings/site/navigation.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/navigation.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import TopLevelGroup from '../../top-level-group';
-import {Button} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 import {withErrorBoundary} from '../../error-boundary';
 
@@ -12,7 +12,7 @@ const Navigation: React.FC<{ keywords: string[] }> = ({keywords}) => {
 
     return (
         <TopLevelGroup
-            customButtons={<Button className='mt-[-5px]' color='clear' label='Customize' size='sm' onClick={openPreviewModal}/>}
+            customButtons={<Button className='mt-[-5px]' size='sm' type='button' variant='ghost' onClick={openPreviewModal}>Customize</Button>}
             description="Set up primary and secondary menus"
             keywords={keywords}
             navid='navigation'
diff --git a/apps/admin-x-settings/src/components/settings/site/navigation/navigation-edit-form.tsx b/apps/admin-x-settings/src/components/settings/site/navigation/navigation-edit-form.tsx
index 67a2c83a394..ede7351aa48 100644
--- a/apps/admin-x-settings/src/components/settings/site/navigation/navigation-edit-form.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/navigation/navigation-edit-form.tsx
@@ -1,9 +1,9 @@
 import NavigationItemEditor from './navigation-item-editor';
 import React from 'react';
-import {Button, Icon} from '@tryghost/admin-x-design-system';
+import {Button, SortableList} from '@tryghost/shade/components';
+import {Icon} from '@tryghost/admin-x-design-system';
 import {Inline} from '@tryghost/shade/primitives';
 import {type NavigationEditor} from '../../../../hooks/site/use-navigation-editor';
-import {SortableList} from '@tryghost/shade/components';
 
 const NavigationEditForm: React.FC<{
     baseUrl: string;
@@ -17,7 +17,7 @@ const NavigationEditForm: React.FC<{
             itemSeparator={false}
             renderItem={item => (
                 <NavigationItemEditor
-                    action={<Button icon="trash" iconColorClass='dark:text-white' size='sm' onClick={() => navigation.removeItem(item.id)} />}
+                    action={<Button aria-label='Delete navigation item' size='icon' type='button' variant='ghost' onClick={() => navigation.removeItem(item.id)}><Icon name='trash' size='sm' /></Button>}
                     baseUrl={baseUrl}
                     clearError={key => navigation.clearError(item.id, key)}
                     item={item}
@@ -31,7 +31,7 @@ const NavigationEditForm: React.FC<{
                 <Icon colorClass='text-grey-300 dark:text-grey-900' name='add' size='sm' />
             </Inline>
             <NavigationItemEditor
-                action={<Button className='mx-2 rounded bg-green p-1' data-testid="add-button" icon="add" iconColorClass='text-white' size='sm' unstyled onClick={navigation.addItem} />}
+                action={<Button aria-label='Add navigation item' className='mx-2' data-testid="add-button" size='icon' type='button' variant='ghost' onClick={navigation.addItem}><Icon name='add' size='sm' /></Button>}
                 addItem={navigation.addItem}
                 baseUrl={baseUrl}
                 className="mt-1"
diff --git a/apps/admin-x-settings/src/components/settings/site/theme-modal.tsx b/apps/admin-x-settings/src/components/settings/site/theme-modal.tsx
index 0ca043aab16..937ab705a45 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme-modal.tsx
@@ -5,8 +5,8 @@ import OfficialThemes from './theme/official-themes';
 import React, {useEffect, useState} from 'react';
 import ThemeInstalledModal from './theme/theme-installed-modal';
 import ThemePreview from './theme/theme-preview';
-import {Button, ConfirmationModal, LimitModal, Modal, PageHeader} from '@tryghost/admin-x-design-system';
-import {Dropzone, Tabs, TabsList, TabsTrigger} from '@tryghost/shade/components';
+import {Button, Dropzone, LoadingIndicator, Tabs, TabsList, TabsTrigger} from '@tryghost/shade/components';
+import {ConfirmationModal, LimitModal, Modal, PageHeader} from '@tryghost/admin-x-design-system';
 import {type InstalledTheme, type Theme, type ThemesInstallResponseType, isDefaultOrLegacyTheme, useActivateTheme, useBrowseThemes, useInstallTheme, useUploadTheme} from '@tryghost/admin-x-framework/api/themes';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
 import {type OfficialTheme} from '../../providers/settings-app-provider';
@@ -113,7 +113,7 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
                 okLabel: 'Overwrite',
                 cancelLabel: 'Cancel',
                 okRunningLabel: 'Overwriting...',
-                okColor: 'red',
+                okVariant: 'destructive',
                 onOk: async (confirmModal) => {
                     setUploading(true);
 
@@ -247,11 +247,11 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
     const right =
         <div className='flex items-center gap-14'>
             <div className='flex items-center gap-3'>
-                <Button label='Close' onClick={() => {
+                <Button className='font-semibold' type='button' variant='ghost' onClick={() => {
                     modal.remove();
                     onClose();
-                }} />
-                <Button color='black' label='Upload theme' loading={isUploading} onClick={handleUpload} />
+                }}>Close</Button>
+                <Button disabled={isUploading} type='button' onClick={handleUpload}>{isUploading && <LoadingIndicator size='sm' />}Upload theme</Button>
             </div>
         </div>;
 
@@ -357,7 +357,7 @@ const ChangeThemeModal: React.FC<ChangeThemeModalProps> = ({source, themeRef}) =
                     okLabel: 'Install',
                     cancelLabel: 'Cancel',
                     okRunningLabel: 'Installing...',
-                    okColor: 'black',
+                    okVariant: 'default',
                     onOk: async (confirmModal) => {
                         let data: ThemesInstallResponseType | undefined;
                         setInstalledFromMarketplace(true);
@@ -420,7 +420,7 @@ const ChangeThemeModal: React.FC<ChangeThemeModalProps> = ({source, themeRef}) =
                         okLabel: 'Overwrite',
                         okRunningLabel: 'Installing...',
                         cancelLabel: 'Cancel',
-                        okColor: 'red',
+                        okVariant: 'destructive',
                         onOk: async (confirmModal) => {
                             confirmModal?.remove();
                             await performInstallation();
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsx b/apps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsx
index 7d19f34878f..aa235e82002 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsx
@@ -2,9 +2,8 @@ import InvalidThemeModal, {type FatalErrors} from './invalid-theme-modal';
 import NiceModal from '@ebay/nice-modal-react';
 import React from 'react';
 import useCustomFonts from '../../../../hooks/use-custom-fonts';
-import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent} from '@tryghost/shade/components';
-import {Button, ConfirmationModal, LimitModal, ModalPage} from '@tryghost/admin-x-design-system';
-import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from '@tryghost/shade/components';
+import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from '@tryghost/shade/components';
+import {ConfirmationModal, Icon, LimitModal, ModalPage} from '@tryghost/admin-x-design-system';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
 import {type Theme, isActiveTheme, isDefaultTheme, isDeletableTheme, isLegacyTheme, useActivateTheme, useDeleteTheme} from '@tryghost/admin-x-framework/api/themes';
 import {downloadFile, getGhostPaths} from '@tryghost/admin-x-framework/helpers';
@@ -113,7 +112,7 @@ const ThemeActions: React.FC<ThemeActionProps> = ({
             ),
             okLabel: 'Delete',
             okRunningLabel: 'Deleting',
-            okColor: 'red',
+            okVariant: 'destructive',
             onOk: async (modal) => {
                 try {
                     await deleteTheme(theme.name);
@@ -146,11 +145,11 @@ const ThemeActions: React.FC<ThemeActionProps> = ({
             <Button
                 key='activate'
                 className='ml-2'
-                color='green'
-                label={'Activate'}
-                link={true}
+                size='sm'
+                type='button'
+                variant='ghost'
                 onClick={handleActivate}
-            />
+            >Activate</Button>
         );
     }
 
@@ -159,7 +158,7 @@ const ThemeActions: React.FC<ThemeActionProps> = ({
             {actions}
             <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                    <Button icon='ellipsis' iconColorClass='text-base' label='Menu' size='sm' hideLabel />
+                    <Button aria-label='Menu' size='icon' type='button' variant='ghost'><Icon name='ellipsis' size='sm' /></Button>
                 </DropdownMenuTrigger>
                 {/* legacy ModalPage overlay is z-[1000]; keep the portalled menu above it */}
                 <DropdownMenuContent align='end' className='z-[9999]'>
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/invalid-theme-modal.tsx b/apps/admin-x-settings/src/components/settings/site/theme/invalid-theme-modal.tsx
index 2e2ad8dda88..5b61f862025 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/invalid-theme-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/invalid-theme-modal.tsx
@@ -23,8 +23,8 @@ const InvalidThemeModal: React.FC<{
 
     return <ConfirmationModalContent
         cancelLabel='Close'
-        okColor='black'
         okLabel={'Retry'}
+        okVariant='default'
         prompt={<>
             <div className='space-y-5'>
                 <div className='text-sm text-foreground'>{promptText}</div>
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/theme-code-editor-modal.tsx b/apps/admin-x-settings/src/components/settings/site/theme/theme-code-editor-modal.tsx
index 2a179ba8dbf..df380a5b2b6 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/theme-code-editor-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/theme-code-editor-modal.tsx
@@ -375,14 +375,14 @@ const ThemeCodeEditorModal: React.FC<{themeName: string}> = ({themeName}) => {
         prompt,
         cancelLabel,
         okLabel,
-        okColor
+        okVariant
     }: ThemeEditorConfirmModalProps) => {
         const confirmed = await NiceModal.show(ThemeEditorConfirmModal, {
             title,
             prompt,
             cancelLabel,
             okLabel,
-            okColor
+            okVariant
         }) as boolean | undefined;
 
         return Boolean(confirmed);
@@ -414,7 +414,7 @@ const ThemeCodeEditorModal: React.FC<{themeName: string}> = ({themeName}) => {
                 title: 'Discard changes?',
                 prompt: 'You have unsaved theme changes. Close the editor and discard them?',
                 okLabel: 'Discard changes',
-                okColor: 'red'
+                okVariant: 'destructive'
             });
 
             if (!shouldDiscard) {
@@ -626,7 +626,7 @@ const ThemeCodeEditorModal: React.FC<{themeName: string}> = ({themeName}) => {
                 title: 'Delete file',
                 prompt: <>Delete <strong>{selectedNode.path}</strong> from this theme?</>,
                 okLabel: 'Delete',
-                okColor: 'red'
+                okVariant: 'destructive'
             });
 
             if (!confirmed) {
@@ -649,7 +649,7 @@ const ThemeCodeEditorModal: React.FC<{themeName: string}> = ({themeName}) => {
             title: 'Delete folder',
             prompt: <>Delete {matchingPaths.length} file{matchingPaths.length === 1 ? '' : 's'} from <strong>{selectedNode.path}</strong>?</>,
             okLabel: 'Delete',
-            okColor: 'red'
+            okVariant: 'destructive'
         });
 
         if (!confirmed) {
@@ -747,7 +747,7 @@ const ThemeCodeEditorModal: React.FC<{themeName: string}> = ({themeName}) => {
                 title: 'Overwrite theme',
                 prompt: <><strong>{nextThemeName}</strong> already exists. Do you want to overwrite it?</>,
                 okLabel: 'Overwrite',
-                okColor: 'red'
+                okVariant: 'destructive'
             });
 
             if (!confirmedOverwrite) {
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/theme-editor-confirm-modal.tsx b/apps/admin-x-settings/src/components/settings/site/theme/theme-editor-confirm-modal.tsx
index 5908a399bad..4e88afd4773 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/theme-editor-confirm-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/theme-editor-confirm-modal.tsx
@@ -1,13 +1,14 @@
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React from 'react';
 import {Modal} from '@tryghost/admin-x-design-system';
+import type {ButtonProps} from '@tryghost/shade/components';
 
 export type ThemeEditorConfirmModalProps = {
     title: string;
     prompt: React.ReactNode;
     cancelLabel?: string;
     okLabel?: string;
-    okColor?: 'black' | 'red' | 'green' | 'outline';
+    okVariant?: ButtonProps['variant'];
 };
 
 const ThemeEditorConfirmModal = NiceModal.create<ThemeEditorConfirmModalProps>(({
@@ -15,7 +16,7 @@ const ThemeEditorConfirmModal = NiceModal.create<ThemeEditorConfirmModalProps>((
     prompt,
     cancelLabel = 'Cancel',
     okLabel = 'OK',
-    okColor = 'black'
+    okVariant = 'default'
 }) => {
     const modal = useModal();
 
@@ -28,8 +29,8 @@ const ThemeEditorConfirmModal = NiceModal.create<ThemeEditorConfirmModalProps>((
         <Modal
             backDropClick={false}
             cancelLabel={cancelLabel}
-            okColor={okColor}
             okLabel={okLabel}
+            okVariant={okVariant}
             testId='theme-editor-confirm-modal'
             title={title}
             width={540}
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/theme-installed-modal.tsx b/apps/admin-x-settings/src/components/settings/site/theme/theme-installed-modal.tsx
index 49970d66d49..41b51e65b2d 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/theme-installed-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/theme-installed-modal.tsx
@@ -48,9 +48,9 @@ const ThemeInstalledModal: React.FC<{
 
     return <ConfirmationModalContent
         cancelLabel='Close'
-        okColor='black'
         okLabel={okLabel}
         okRunningLabel='Activating...'
+        okVariant='default'
         prompt={<>
             <div className='space-y-5'>
                 {installedTheme.active ? (
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/theme-preview.tsx b/apps/admin-x-settings/src/components/settings/site/theme/theme-preview.tsx
index 1b442fa314b..5504bd0748e 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/theme-preview.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/theme-preview.tsx
@@ -1,7 +1,8 @@
 import React, {useState} from 'react';
 import SettingsBreadcrumbs from '../../settings-breadcrumbs';
-import {Button, ButtonGroup, DesktopChrome, MobileChrome, PageHeader} from '@tryghost/admin-x-design-system';
-import {Field, FieldLabel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@tryghost/shade/components';
+import {Button, Field, FieldLabel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@tryghost/shade/components';
+import {DesktopChrome, Icon, MobileChrome, PageHeader} from '@tryghost/admin-x-design-system';
+import {Inline} from '@tryghost/shade/primitives';
 import {type OfficialTheme, type ThemeVariant} from '../../../providers/settings-app-provider';
 import {type Theme, isDefaultOrLegacyTheme} from '@tryghost/admin-x-framework/api/themes';
 
@@ -101,34 +102,21 @@ const ThemePreview: React.FC<{
 
     const right =
         <div className='flex justify-end gap-8'>
-            <ButtonGroup
-                buttons={[
-                    {
-                        icon: 'laptop',
-                        iconColorClass: (previewMode === 'desktop' ? 'text-black dark:text-green' : 'text-grey-500 dark:text-grey-600'),
-                        link: true,
-                        size: 'sm',
-                        onClick: () => {
-                            setPreviewMode('desktop');
-                        }
-                    },
-                    {
-                        icon: 'mobile',
-                        iconColorClass: (previewMode === 'mobile' ? 'text-black dark:text-green' : 'text-grey-500 dark:text-grey-600'),
-                        link: true,
-                        size: 'sm',
-                        onClick: () => {
-                            setPreviewMode('mobile');
-                        }
-                    }
-                ]}
-            />
+            <Inline gap='sm'>
+                <Button aria-label='Desktop preview' size='icon' type='button' variant='ghost' onClick={() => setPreviewMode('desktop')}>
+                    <Icon colorClass={previewMode === 'desktop' ? 'text-foreground' : 'text-muted-foreground'} name='laptop' size='sm' />
+                </Button>
+                <Button aria-label='Mobile preview' size='icon' type='button' variant='ghost' onClick={() => setPreviewMode('mobile')}>
+                    <Icon colorClass={previewMode === 'mobile' ? 'text-foreground' : 'text-muted-foreground'} name='mobile' size='sm' />
+                </Button>
+            </Inline>
             <Button
-                color='green'
                 disabled={isInstalling}
-                label={isInstalling ? 'Installing...' : installButtonLabel}
+                type='button'
                 onClick={handleInstall}
-            />
+            >
+                {isInstalling ? 'Installing...' : installButtonLabel}
+            </Button>
         </div>;
 
     return (
diff --git a/apps/admin-x-settings/src/components/stripe-button.tsx b/apps/admin-x-settings/src/components/stripe-button.tsx
index 60ceb1b01d8..4d15e05b99c 100644
--- a/apps/admin-x-settings/src/components/stripe-button.tsx
+++ b/apps/admin-x-settings/src/components/stripe-button.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import clsx from 'clsx';
-import {Button, type ButtonProps} from '@tryghost/admin-x-design-system';
+import {Button, type ButtonProps} from '@tryghost/shade/components';
 
-export interface StripeButtonProps {
+export interface StripeButtonProps extends Omit<ButtonProps, 'asChild' | 'children'> {
     label?: React.ReactNode;
-    className?: string;
+    href?: string;
+    target?: React.HTMLAttributeAnchorTarget;
 }
 
-const StripeButton: React.FC<StripeButtonProps | ButtonProps> = ({label, className, ...props}) => {
+const StripeButton: React.FC<StripeButtonProps> = ({label, className, href, target, ...props}) => {
     const classNames = clsx(
         'inline-block cursor-pointer rounded-md bg-[#625BF6] font-semibold text-white transition-all hover:opacity-90',
         label ? 'px-5 py-2' : 'px-6 py-[9px]',
@@ -21,9 +22,15 @@ const StripeButton: React.FC<StripeButtonProps | ButtonProps> = ({label, classNa
         </>;
     }
 
-    return (
-        <Button className={classNames} label={label} unstyled {...props} />
-    );
+    if (href) {
+        return (
+            <Button className={classNames} asChild {...props}>
+                <a href={href} rel='noopener noreferrer' target={target}>{label}</a>
+            </Button>
+        );
+    }
+
+    return <Button className={classNames} type='button' {...props}>{label}</Button>;
 };
 
 export default StripeButton;
diff --git a/apps/shade/src/components/ui/button.tsx b/apps/shade/src/components/ui/button.tsx
index 2da71bf5b86..11a2afa60a0 100644
--- a/apps/shade/src/components/ui/button.tsx
+++ b/apps/shade/src/components/ui/button.tsx
@@ -20,7 +20,7 @@ const buttonVariants = cva(
             },
             size: {
                 default: 'h-(--control-height) px-2.5 py-2',
-                sm: 'h-7 rounded-md px-3 text-sm [&_svg]:size-3',
+                sm: 'h-7 rounded-md px-3 text-sm! [&_svg]:size-3',
                 lg: 'h-11 rounded-md px-8 text-md font-semibold',
                 icon: 'size-9'
             }
diff --git a/apps/shade/src/docs/adoption-data.json b/apps/shade/src/docs/adoption-data.json
index 28e70c8e14b..e308327dcf7 100644
--- a/apps/shade/src/docs/adoption-data.json
+++ b/apps/shade/src/docs/adoption-data.json
@@ -1,21 +1,21 @@
 {
   "snapshot": {
-    "generatedAt": "2026-07-22T14:12:23.896Z",
-    "sha": "6c43413cdcf991d0e0cb924e1271b4ef5aa4658f",
-    "branch": "codex/admin-settings-shade-tabs"
+    "generatedAt": "2026-07-22T23:23:28.078Z",
+    "sha": "0c8323b77b84da688b7db1f3d9b15b5635434c10",
+    "branch": "codex/admin-settings-shade-buttons"
   },
   "summary": {
-    "adminReactFilesTotal": 692,
-    "adminReactFilesUsingShade": 324,
-    "shadeAdoptionPct": 46.8,
-    "uniqueShadeComponentsUsed": 264,
-    "adminXDsComponentsStillUsed": 60
+    "adminReactFilesTotal": 702,
+    "adminReactFilesUsingShade": 364,
+    "shadeAdoptionPct": 51.9,
+    "uniqueShadeComponentsUsed": 285,
+    "adminXDsComponentsStillUsed": 28
   },
   "apps": [
     {
       "name": "admin",
-      "files": 350,
-      "shadeFiles": 177,
+      "files": 352,
+      "shadeFiles": 178,
       "adminXDsFiles": 0,
       "shadeComponents": [
         {
@@ -32,7 +32,7 @@
         },
         {
           "name": "cn",
-          "count": 33
+          "count": 35
         },
         {
           "name": "Card",
@@ -842,6 +842,18 @@
           "name": "ContextMenuTrigger",
           "count": 1
         },
+        {
+          "name": "HoverCard",
+          "count": 1
+        },
+        {
+          "name": "HoverCardContent",
+          "count": 1
+        },
+        {
+          "name": "HoverCardTrigger",
+          "count": 1
+        },
         {
           "name": "DropdownMenuShortcut",
           "count": 1
@@ -1188,20 +1200,28 @@
     },
     {
       "name": "admin-x-settings",
-      "files": 241,
-      "shadeFiles": 98,
-      "adminXDsFiles": 125,
+      "files": 249,
+      "shadeFiles": 137,
+      "adminXDsFiles": 108,
       "shadeComponents": [
         {
-          "name": "Field",
-          "count": 40
+          "name": "Button",
+          "count": 68
         },
         {
           "name": "FieldLabel",
-          "count": 40
+          "count": 43
+        },
+        {
+          "name": "Field",
+          "count": 41
         },
         {
           "name": "FieldDescription",
+          "count": 31
+        },
+        {
+          "name": "formatNumber",
           "count": 26
         },
         {
@@ -1241,33 +1261,81 @@
           "count": 20
         },
         {
-          "name": "formatNumber",
-          "count": 19
+          "name": "Text",
+          "count": 17
         },
         {
           "name": "TabsContent",
           "count": 17
         },
+        {
+          "name": "ActionList",
+          "count": 16
+        },
         {
           "name": "FieldError",
           "count": 16
         },
+        {
+          "name": "Inline",
+          "count": 14
+        },
+        {
+          "name": "ActionListItem",
+          "count": 14
+        },
+        {
+          "name": "ActionListItemContent",
+          "count": 14
+        },
         {
           "name": "FieldContent",
           "count": 14
         },
+        {
+          "name": "LoadingIndicator",
+          "count": 12
+        },
+        {
+          "name": "ActionListItemActions",
+          "count": 12
+        },
         {
           "name": "Textarea",
           "count": 12
         },
         {
-          "name": "Button",
-          "count": 10
+          "name": "ToggleGroup",
+          "count": 9
         },
         {
-          "name": "Inline",
+          "name": "ToggleGroupItem",
           "count": 9
         },
+        {
+          "name": "ImageUpload",
+          "count": 8
+        },
+        {
+          "name": "ImageUploadAction",
+          "count": 8
+        },
+        {
+          "name": "ImageUploadActions",
+          "count": 8
+        },
+        {
+          "name": "ImageUploadDropzone",
+          "count": 8
+        },
+        {
+          "name": "ImageUploadImage",
+          "count": 8
+        },
+        {
+          "name": "ImageUploadPreview",
+          "count": 8
+        },
         {
           "name": "NoValueLabel",
           "count": 8
@@ -1281,12 +1349,12 @@
           "count": 8
         },
         {
-          "name": "ToggleGroup",
-          "count": 7
+          "name": "Stack",
+          "count": 6
         },
         {
-          "name": "ToggleGroupItem",
-          "count": 7
+          "name": "Dropzone",
+          "count": 6
         },
         {
           "name": "NoValueLabelIcon",
@@ -1309,12 +1377,16 @@
           "count": 6
         },
         {
-          "name": "LoadingIndicator",
+          "name": "cn",
           "count": 6
         },
         {
-          "name": "cn",
-          "count": 6
+          "name": "DirtyConfirmDialog",
+          "count": 5
+        },
+        {
+          "name": "useDirtyConfirmation",
+          "count": 5
         },
         {
           "name": "InputGroup",
@@ -1344,6 +1416,10 @@
           "name": "DropdownMenuTrigger",
           "count": 5
         },
+        {
+          "name": "Input",
+          "count": 5
+        },
         {
           "name": "LucideIcon",
           "count": 4
@@ -1353,11 +1429,11 @@
           "count": 4
         },
         {
-          "name": "Input",
+          "name": "Popover",
           "count": 4
         },
         {
-          "name": "Popover",
+          "name": "PopoverContent",
           "count": 4
         },
         {
@@ -1365,17 +1441,21 @@
           "count": 4
         },
         {
-          "name": "PopoverContent",
-          "count": 4
+          "name": "useGlobalDirtyState",
+          "count": 3
         },
         {
-          "name": "Stack",
-          "count": 4
+          "name": "Badge",
+          "count": 3
         },
         {
           "name": "InputGroupButton",
           "count": 3
         },
+        {
+          "name": "useFocusContext",
+          "count": 3
+        },
         {
           "name": "FieldLegend",
           "count": 3
@@ -1384,6 +1464,10 @@
           "name": "FieldSet",
           "count": 3
         },
+        {
+          "name": "SortableList",
+          "count": 3
+        },
         {
           "name": "CopyField",
           "count": 3
@@ -1421,7 +1505,19 @@
           "count": 3
         },
         {
-          "name": "Badge",
+          "name": "ButtonProps",
+          "count": 2
+        },
+        {
+          "name": "inputSurface",
+          "count": 2
+        },
+        {
+          "name": "ColorSwatchOption",
+          "count": 2
+        },
+        {
+          "name": "ColorSwatchRow",
           "count": 2
         },
         {
@@ -1437,143 +1533,147 @@
           "count": 2
         },
         {
-          "name": "GhostOrb",
+          "name": "Tooltip",
           "count": 2
         },
         {
-          "name": "Kbd",
-          "count": 1
+          "name": "TooltipContent",
+          "count": 2
         },
         {
-          "name": "Breadcrumb",
-          "count": 1
+          "name": "TooltipTrigger",
+          "count": 2
         },
         {
-          "name": "BreadcrumbItem",
-          "count": 1
+          "name": "Table",
+          "count": 2
         },
         {
-          "name": "BreadcrumbLink",
-          "count": 1
+          "name": "TableBody",
+          "count": 2
         },
         {
-          "name": "BreadcrumbList",
-          "count": 1
+          "name": "TableCell",
+          "count": 2
         },
         {
-          "name": "BreadcrumbPage",
-          "count": 1
+          "name": "TableHead",
+          "count": 2
         },
         {
-          "name": "BreadcrumbSeparator",
-          "count": 1
+          "name": "TableHeader",
+          "count": 2
         },
         {
-          "name": "InputGroupText",
-          "count": 1
+          "name": "TableRow",
+          "count": 2
         },
         {
-          "name": "abbreviateNumber",
+          "name": "GhostOrb",
+          "count": 2
+        },
+        {
+          "name": "Kbd",
           "count": 1
         },
         {
-          "name": "Tooltip",
+          "name": "ColorPicker",
           "count": 1
         },
         {
-          "name": "TooltipContent",
+          "name": "ColorPickerTrigger",
           "count": 1
         },
         {
-          "name": "TooltipProvider",
+          "name": "Breadcrumb",
           "count": 1
         },
         {
-          "name": "TooltipTrigger",
+          "name": "BreadcrumbItem",
           "count": 1
         },
         {
-          "name": "DropdownMenuCheckboxItem",
+          "name": "BreadcrumbLink",
           "count": 1
         },
         {
-          "name": "DropdownMenuLabel",
+          "name": "BreadcrumbList",
           "count": 1
         },
         {
-          "name": "DropdownMenuRadioGroup",
+          "name": "BreadcrumbPage",
           "count": 1
         },
         {
-          "name": "DropdownMenuRadioItem",
+          "name": "BreadcrumbSeparator",
           "count": 1
         },
         {
-          "name": "DropdownMenuSeparator",
+          "name": "Indicator",
           "count": 1
         },
         {
-          "name": "FieldSeparator",
+          "name": "InputGroupText",
           "count": 1
         },
         {
-          "name": "GhostLogo",
+          "name": "abbreviateNumber",
           "count": 1
         },
         {
-          "name": "Dropzone",
+          "name": "TooltipProvider",
           "count": 1
         },
         {
-          "name": "Dialog",
+          "name": "DropdownMenuCheckboxItem",
           "count": 1
         },
         {
-          "name": "DialogContent",
+          "name": "DropdownMenuLabel",
           "count": 1
         },
         {
-          "name": "DialogTitle",
+          "name": "DropdownMenuRadioGroup",
           "count": 1
         },
         {
-          "name": "AlertDialog",
+          "name": "DropdownMenuRadioItem",
           "count": 1
         },
         {
-          "name": "AlertDialogAction",
+          "name": "DropdownMenuSeparator",
           "count": 1
         },
         {
-          "name": "AlertDialogCancel",
+          "name": "StickyFooter",
           "count": 1
         },
         {
-          "name": "AlertDialogContent",
+          "name": "FieldSeparator",
           "count": 1
         },
         {
-          "name": "AlertDialogDescription",
+          "name": "GhostLogo",
           "count": 1
         },
         {
-          "name": "AlertDialogFooter",
+          "name": "Dialog",
           "count": 1
         },
         {
-          "name": "AlertDialogHeader",
+          "name": "DialogContent",
           "count": 1
         },
         {
-          "name": "AlertDialogTitle",
+          "name": "DialogTitle",
           "count": 1
         },
         {
-          "name": "ColorPicker",
+          "name": "DragIndicator",
           "count": 1
         },
         {
-          "name": "inputSurface",
+          "name": "SortableItemContainerProps",
           "count": 1
         },
         {
@@ -1587,8 +1687,8 @@
       ],
       "adminXDsComponents": [
         {
-          "name": "Button",
-          "count": 54
+          "name": "Icon",
+          "count": 39
         },
         {
           "name": "Modal",
@@ -1596,15 +1696,7 @@
         },
         {
           "name": "TextField",
-          "count": 34
-        },
-        {
-          "name": "showToast",
-          "count": 31
-        },
-        {
-          "name": "Icon",
-          "count": 29
+          "count": 33
         },
         {
           "name": "Form",
@@ -1618,66 +1710,22 @@
           "name": "SettingGroupContent",
           "count": 19
         },
-        {
-          "name": "Heading",
-          "count": 17
-        },
         {
           "name": "LimitModal",
           "count": 10
         },
-        {
-          "name": "List",
-          "count": 10
-        },
-        {
-          "name": "ListItem",
-          "count": 9
-        },
         {
           "name": "PreviewModalContent",
           "count": 7
         },
-        {
-          "name": "ButtonGroup",
-          "count": 6
-        },
-        {
-          "name": "ImageUpload",
-          "count": 6
-        },
-        {
-          "name": "Table",
-          "count": 6
-        },
-        {
-          "name": "TableRow",
-          "count": 6
-        },
         {
           "name": "SettingGroupHeader",
           "count": 5
         },
-        {
-          "name": "confirmIfDirty",
-          "count": 4
-        },
         {
           "name": "SettingGroup",
           "count": 4
         },
-        {
-          "name": "FileUpload",
-          "count": 4
-        },
-        {
-          "name": "ColorPickerField",
-          "count": 4
-        },
-        {
-          "name": "useGlobalDirtyState",
-          "count": 3
-        },
         {
           "name": "DesktopChrome",
           "count": 3
@@ -1686,32 +1734,12 @@
           "name": "MobileChrome",
           "count": 3
         },
-        {
-          "name": "HtmlField",
-          "count": 3
-        },
         {
           "name": "ModalPage",
           "count": 3
         },
         {
-          "name": "SortableList",
-          "count": 3
-        },
-        {
-          "name": "ShowMoreData",
-          "count": 3
-        },
-        {
-          "name": "Link",
-          "count": 3
-        },
-        {
-          "name": "dismissAllToasts",
-          "count": 3
-        },
-        {
-          "name": "useSortableIndexedList",
+          "name": "useDesignSystem",
           "count": 2
         },
         {
@@ -1722,22 +1750,6 @@
           "name": "ConfirmationModalContent",
           "count": 2
         },
-        {
-          "name": "StripeButton",
-          "count": 2
-        },
-        {
-          "name": "ButtonProps",
-          "count": 2
-        },
-        {
-          "name": "PaginationData",
-          "count": 2
-        },
-        {
-          "name": "CodeEditor",
-          "count": 2
-        },
         {
           "name": "topLevelBackdropClasses",
           "count": 1
@@ -1766,10 +1778,6 @@
           "name": "SettingNavSection",
           "count": 1
         },
-        {
-          "name": "useFocusContext",
-          "count": 1
-        },
         {
           "name": "SettingSection",
           "count": 1
@@ -1778,26 +1786,6 @@
           "name": "SettingSectionProps",
           "count": 1
         },
-        {
-          "name": "ColorIndicator",
-          "count": 1
-        },
-        {
-          "name": "KoenigInstance",
-          "count": 1
-        },
-        {
-          "name": "loadKoenig",
-          "count": 1
-        },
-        {
-          "name": "useDesignSystem",
-          "count": 1
-        },
-        {
-          "name": "StickyFooter",
-          "count": 1
-        },
         {
           "name": "FacebookLogo",
           "count": 1
@@ -1809,54 +1797,42 @@
         {
           "name": "XLogo",
           "count": 1
-        },
-        {
-          "name": "IconLabel",
-          "count": 1
-        },
-        {
-          "name": "DragIndicator",
-          "count": 1
-        },
-        {
-          "name": "SortableItemContainerProps",
-          "count": 1
-        },
-        {
-          "name": "InfiniteScrollListener",
-          "count": 1
         }
       ]
     }
   ],
   "topShadeComponents": [
     {
-      "name": "LucideIcon",
-      "count": 139
+      "name": "Button",
+      "count": 183
     },
     {
-      "name": "Button",
-      "count": 125
+      "name": "LucideIcon",
+      "count": 139
     },
     {
       "name": "formatNumber",
-      "count": 67
+      "count": 74
     },
     {
       "name": "LoadingIndicator",
+      "count": 52
+    },
+    {
+      "name": "FieldLabel",
       "count": 46
     },
     {
-      "name": "Field",
-      "count": 43
+      "name": "cn",
+      "count": 44
     },
     {
-      "name": "FieldLabel",
-      "count": 43
+      "name": "Field",
+      "count": 44
     },
     {
-      "name": "cn",
-      "count": 42
+      "name": "FieldDescription",
+      "count": 32
     },
     {
       "name": "Tabs",
@@ -1882,10 +1858,6 @@
       "name": "TabsTrigger",
       "count": 27
     },
-    {
-      "name": "FieldDescription",
-      "count": 27
-    },
     {
       "name": "DialogContent",
       "count": 26
@@ -1913,8 +1885,8 @@
   ],
   "adminXDsComponentsAggregate": [
     {
-      "name": "Button",
-      "count": 54
+      "name": "Icon",
+      "count": 39
     },
     {
       "name": "Modal",
@@ -1922,15 +1894,7 @@
     },
     {
       "name": "TextField",
-      "count": 34
-    },
-    {
-      "name": "showToast",
-      "count": 31
-    },
-    {
-      "name": "Icon",
-      "count": 29
+      "count": 33
     },
     {
       "name": "Form",
@@ -1944,66 +1908,22 @@
       "name": "SettingGroupContent",
       "count": 19
     },
-    {
-      "name": "Heading",
-      "count": 17
-    },
     {
       "name": "LimitModal",
       "count": 10
     },
-    {
-      "name": "List",
-      "count": 10
-    },
-    {
-      "name": "ListItem",
-      "count": 9
-    },
     {
       "name": "PreviewModalContent",
       "count": 7
     },
-    {
-      "name": "ButtonGroup",
-      "count": 6
-    },
-    {
-      "name": "ImageUpload",
-      "count": 6
-    },
-    {
-      "name": "Table",
-      "count": 6
-    },
-    {
-      "name": "TableRow",
-      "count": 6
-    },
     {
       "name": "SettingGroupHeader",
       "count": 5
     },
-    {
-      "name": "confirmIfDirty",
-      "count": 4
-    },
     {
       "name": "SettingGroup",
       "count": 4
     },
-    {
-      "name": "FileUpload",
-      "count": 4
-    },
-    {
-      "name": "ColorPickerField",
-      "count": 4
-    },
-    {
-      "name": "useGlobalDirtyState",
-      "count": 3
-    },
     {
       "name": "DesktopChrome",
       "count": 3
@@ -2012,32 +1932,12 @@
       "name": "MobileChrome",
       "count": 3
     },
-    {
-      "name": "HtmlField",
-      "count": 3
-    },
     {
       "name": "ModalPage",
       "count": 3
     },
     {
-      "name": "SortableList",
-      "count": 3
-    },
-    {
-      "name": "ShowMoreData",
-      "count": 3
-    },
-    {
-      "name": "Link",
-      "count": 3
-    },
-    {
-      "name": "dismissAllToasts",
-      "count": 3
-    },
-    {
-      "name": "useSortableIndexedList",
+      "name": "useDesignSystem",
       "count": 2
     },
     {
@@ -2048,22 +1948,6 @@
       "name": "ConfirmationModalContent",
       "count": 2
     },
-    {
-      "name": "StripeButton",
-      "count": 2
-    },
-    {
-      "name": "ButtonProps",
-      "count": 2
-    },
-    {
-      "name": "PaginationData",
-      "count": 2
-    },
-    {
-      "name": "CodeEditor",
-      "count": 2
-    },
     {
       "name": "topLevelBackdropClasses",
       "count": 1
@@ -2092,10 +1976,6 @@
       "name": "SettingNavSection",
       "count": 1
     },
-    {
-      "name": "useFocusContext",
-      "count": 1
-    },
     {
       "name": "SettingSection",
       "count": 1
@@ -2104,26 +1984,6 @@
       "name": "SettingSectionProps",
       "count": 1
     },
-    {
-      "name": "ColorIndicator",
-      "count": 1
-    },
-    {
-      "name": "KoenigInstance",
-      "count": 1
-    },
-    {
-      "name": "loadKoenig",
-      "count": 1
-    },
-    {
-      "name": "useDesignSystem",
-      "count": 1
-    },
-    {
-      "name": "StickyFooter",
-      "count": 1
-    },
     {
       "name": "FacebookLogo",
       "count": 1
@@ -2135,22 +1995,6 @@
     {
       "name": "XLogo",
       "count": 1
-    },
-    {
-      "name": "IconLabel",
-      "count": 1
-    },
-    {
-      "name": "DragIndicator",
-      "count": 1
-    },
-    {
-      "name": "SortableItemContainerProps",
-      "count": 1
-    },
-    {
-      "name": "InfiniteScrollListener",
-      "count": 1
     }
   ],
   "ember": {
diff --git a/apps/shade/test/unit/components/ui/button.test.tsx b/apps/shade/test/unit/components/ui/button.test.tsx
index 2b94fba7ba4..45df7be115d 100644
--- a/apps/shade/test/unit/components/ui/button.test.tsx
+++ b/apps/shade/test/unit/components/ui/button.test.tsx
@@ -25,6 +25,7 @@ describe('Button Component', () => {
         const button = screen.getByRole('button', {name: /small/i});
         
         assert.ok(button.className.includes('h-7'), 'Should have small size class');
+        assert.ok(button.className.includes('text-sm!'), 'Should override the base control typography');
     });
 
     it('handles click events', () => {
@@ -66,4 +67,4 @@ describe('Button Component', () => {
         assert.equal(link.tagName.toLowerCase(), 'a', 'Should be an A element');
         assert.equal(link.getAttribute('href'), 'https://example.com', 'Should have correct href');
     });
-}); 
\ No newline at end of file
+});

From 573152c12547dcf6ca783091ea906f274186ea96 Mon Sep 17 00:00:00 2001
From: Weyland Swart <49831538+weylandswart@users.noreply.github.com>
Date: Thu, 23 Jul 2026 02:39:44 +0100
Subject: [PATCH 4/6] Migrated settings icons from admin-x-design-system
 (#29547)

no ref

Migrating the icons in Settings off on `admin-x-design-system` and onto Lucide.
---
 .../src/assets/icons/aa.svg                   |  1 -
 .../src/assets/icons/add.svg                  |  1 -
 .../src/assets/icons/ai-tagging-spark.svg     |  1 -
 .../src/assets/icons/align-center.svg         |  1 -
 .../src/assets/icons/align-left.svg           |  1 -
 .../src/assets/icons/angle-brackets.svg       |  1 -
 .../src/assets/icons/ap-network.svg           |  6 --
 .../src/assets/icons/arrow-bottom-left.svg    |  1 -
 .../src/assets/icons/arrow-bottom-right.svg   |  1 -
 .../src/assets/icons/arrow-down.svg           |  1 -
 .../src/assets/icons/arrow-left.svg           |  1 -
 .../src/assets/icons/arrow-right.svg          |  1 -
 .../src/assets/icons/arrow-top-left.svg       |  4 -
 .../src/assets/icons/arrow-top-right.svg      |  4 -
 .../src/assets/icons/arrow-up.svg             |  1 -
 .../src/assets/icons/at-sign.svg              |  1 -
 .../src/assets/icons/baseline-chart.svg       |  1 -
 .../src/assets/icons/bell.svg                 |  1 -
 .../src/assets/icons/bills.svg                |  1 -
 .../src/assets/icons/block.svg                |  4 -
 .../src/assets/icons/book-open.svg            |  1 -
 .../src/assets/icons/brackets.svg             |  1 -
 .../src/assets/icons/card-list.svg            |  1 -
 .../src/assets/icons/cardview.svg             |  1 -
 .../src/assets/icons/check-circle.svg         |  1 -
 .../src/assets/icons/check.svg                |  3 -
 .../src/assets/icons/chevron-down.svg         |  1 -
 .../src/assets/icons/chevron-left.svg         |  1 -
 .../src/assets/icons/chevron-right.svg        |  1 -
 .../src/assets/icons/chevron-up.svg           |  1 -
 .../src/assets/icons/circle.svg               |  3 -
 .../src/assets/icons/close.svg                |  1 -
 .../src/assets/icons/column-layout.svg        |  1 -
 .../src/assets/icons/comment-fill.svg         |  4 -
 .../src/assets/icons/comment.svg              |  3 -
 .../src/assets/icons/crown.svg                |  1 -
 .../src/assets/icons/discount.svg             |  1 -
 .../src/assets/icons/dotdotdot.svg            | 10 ---
 .../src/assets/icons/download.svg             |  1 -
 .../src/assets/icons/duplicate.svg            |  1 -
 .../src/assets/icons/ellipsis.svg             |  5 --
 .../src/assets/icons/email-check.svg          |  1 -
 .../src/assets/icons/email.svg                |  1 -
 .../src/assets/icons/emailfield.svg           |  1 -
 .../src/assets/icons/error-fill.svg           |  1 -
 .../src/assets/icons/export.svg               |  1 -
 .../src/assets/icons/finger-up.svg            |  1 -
 .../src/assets/icons/gift.svg                 |  6 --
 .../src/assets/icons/globe-simple.svg         |  1 -
 .../src/assets/icons/hamburger.svg            |  1 -
 .../src/assets/icons/heart-fill.svg           |  1 -
 .../src/assets/icons/heart.svg                |  3 -
 .../src/assets/icons/home.svg                 |  1 -
 .../src/assets/icons/hyperlink-circle.svg     |  1 -
 .../src/assets/icons/import.svg               |  1 -
 .../src/assets/icons/info-fill.svg            |  1 -
 .../src/assets/icons/info.svg                 |  1 -
 .../src/assets/icons/integration.svg          |  1 -
 .../src/assets/icons/key.svg                  |  1 -
 .../src/assets/icons/labs-flask.svg           |  1 -
 .../src/assets/icons/language.svg             |  1 -
 .../src/assets/icons/laptop.svg               |  1 -
 .../src/assets/icons/layer.svg                |  1 -
 .../src/assets/icons/layout-2-col.svg         |  1 -
 .../src/assets/icons/layout-headline.svg      |  1 -
 .../src/assets/icons/layout-module-1.svg      |  1 -
 .../src/assets/icons/like.svg                 |  1 -
 .../src/assets/icons/line-dashed.svg          |  5 --
 .../src/assets/icons/line-dotted.svg          |  5 --
 .../src/assets/icons/line-solid.svg           |  3 -
 .../src/assets/icons/link-broken.svg          |  1 -
 .../src/assets/icons/listview.svg             |  1 -
 .../src/assets/icons/lock-locked.svg          |  1 -
 .../src/assets/icons/lock-unlocked.svg        |  1 -
 .../src/assets/icons/long-text.svg            |  1 -
 .../src/assets/icons/magnifying-glass.svg     |  1 -
 .../src/assets/icons/mail-block.svg           |  1 -
 .../src/assets/icons/mailplus.svg             |  1 -
 .../src/assets/icons/map-pin.svg              |  1 -
 .../src/assets/icons/megaphone.svg            |  1 -
 .../src/assets/icons/message-quote.svg        |  1 -
 .../src/assets/icons/mobile.svg               |  1 -
 .../src/assets/icons/modules-3.svg            |  1 -
 .../src/assets/icons/money-bags.svg           |  1 -
 .../src/assets/icons/navigation.svg           |  1 -
 .../src/assets/icons/palette.svg              |  1 -
 .../src/assets/icons/pen.svg                  |  1 -
 .../src/assets/icons/picture.svg              |  1 -
 .../src/assets/icons/piggybank.svg            |  1 -
 .../src/assets/icons/play-fill.svg            |  4 -
 .../src/assets/icons/portal.svg               | 11 ---
 .../src/assets/icons/question-circle.svg      |  1 -
 .../src/assets/icons/quote.svg                |  1 -
 .../src/assets/icons/recepients.svg           |  1 -
 .../src/assets/icons/reload.svg               |  1 -
 .../src/assets/icons/send.svg                 |  1 -
 .../src/assets/icons/share.svg                |  1 -
 .../src/assets/icons/single-user-block.svg    |  1 -
 .../src/assets/icons/single-user-fill.svg     |  1 -
 .../src/assets/icons/sparkle.svg              |  1 -
 .../src/assets/icons/square.svg               |  3 -
 .../src/assets/icons/squircle-fill.svg        |  3 -
 .../src/assets/icons/squircle.svg             |  3 -
 .../src/assets/icons/stripe-verified.svg      |  3 -
 .../src/assets/icons/substract.svg            |  1 -
 .../src/assets/icons/success-fill.svg         |  1 -
 .../src/assets/icons/tags-block.svg           |  1 -
 .../src/assets/icons/tags-check.svg           |  1 -
 .../src/assets/icons/text-bold.svg            |  3 -
 .../src/assets/icons/text-regular.svg         |  4 -
 .../src/assets/icons/text-underline.svg       |  4 -
 .../src/assets/icons/textfield.svg            |  1 -
 .../src/assets/icons/thumbs-down.svg          |  3 -
 .../src/assets/icons/thumbs-up.svg            |  3 -
 .../src/assets/icons/time-back.svg            |  1 -
 .../src/assets/icons/trash.svg                |  1 -
 .../src/assets/icons/typography.svg           |  1 -
 .../src/assets/icons/unsplash-logo.svg        |  3 -
 .../src/assets/icons/upload.svg               |  1 -
 .../src/assets/icons/user-add.svg             |  1 -
 .../src/assets/icons/user-fill.svg            |  1 -
 .../src/assets/icons/user-page.svg            |  1 -
 .../src/assets/icons/user-pen.svg             |  1 -
 .../src/assets/icons/user.svg                 |  1 -
 .../src/assets/icons/warning.svg              |  1 -
 .../src/assets/icons/world-clock.svg          |  1 -
 .../src/assets/icons/zapier-logo.svg          |  4 -
 .../src/global/icon.stories.tsx               | 60 --------------
 .../admin-x-design-system/src/global/icon.tsx | 82 -------------------
 .../src/global/layout/app-menu.tsx            |  4 +-
 .../src/global/layout/global-actions.tsx      |  4 +-
 .../src/global/layout/page.stories.tsx        |  4 +-
 .../src/global/layout/page.tsx                |  8 +-
 .../src/global/modal/modal.tsx                |  5 +-
 .../src/global/modal/preview-modal.tsx        |  5 +-
 apps/admin-x-design-system/src/index.ts       |  2 -
 .../src/settings/setting-nav-item.tsx         |  7 +-
 .../src/api/member-custom-fields.ts           | 10 +--
 .../assets/images/brand-icons}/beehiiv.svg    |  0
 .../assets/images/brand-icons}/facebook.svg   |  0
 .../images/brand-icons}/firstpromoter.svg     |  0
 .../assets/images/brand-icons}/linkedin.svg   |  0
 .../assets/images/brand-icons}/mailchimp.svg  |  0
 .../src/assets/images/brand-icons}/medium.svg |  0
 .../assets/images/brand-icons}/pintura.svg    |  0
 .../images/brand-icons}/portal-icon-1.svg     |  0
 .../images/brand-icons}/portal-icon-2.svg     |  0
 .../images/brand-icons}/portal-icon-3.svg     |  0
 .../images/brand-icons}/portal-icon-4.svg     |  0
 .../images/brand-icons}/portal-icon-5.svg     |  0
 .../src/assets/images/brand-icons}/slack.svg  |  0
 .../images/brand-icons}/squarespace.svg       |  0
 .../assets/images/brand-icons}/substack.svg   |  0
 .../assets/images/brand-icons}/transistor.svg |  0
 .../assets/images/brand-icons}/twitter-x.svg  |  0
 .../assets/images/brand-icons}/unsplash.svg   |  0
 .../assets/images/brand-icons}/wordpress.svg  |  0
 .../src/assets/images/brand-icons}/zapier.svg |  0
 .../src/components/exit-settings-button.tsx   |  5 +-
 .../src/components/icons/brand-icon.tsx       | 79 ++++++++++++++++++
 .../settings/advanced/history-modal.tsx       | 12 +--
 .../settings/advanced/integrations.tsx        | 22 ++---
 .../integrations/content-api-modal.tsx        |  7 +-
 .../integrations/first-promoter-modal.tsx     |  5 +-
 .../advanced/integrations/pintura-modal.tsx   |  5 +-
 .../advanced/integrations/slack-modal.tsx     |  5 +-
 .../integrations/transistor-modal.tsx         |  5 +-
 .../advanced/integrations/unsplash-modal.tsx  |  5 +-
 .../advanced/integrations/webhooks-table.tsx  |  6 +-
 .../advanced/integrations/zapier-modal.tsx    |  8 +-
 .../migration-tools-export.tsx                |  6 +-
 .../migration-tools-import.tsx                | 17 ++--
 .../src/components/settings/email/emails.tsx  |  5 +-
 .../settings/email/enable-newsletters.tsx     |  7 +-
 .../src/components/settings/email/mailgun.tsx |  4 +-
 .../newsletters/newsletter-detail-modal.tsx   | 36 ++++----
 .../newsletter-preview-content.tsx            | 10 +--
 .../src/components/settings/general/about.tsx |  9 +-
 .../components/settings/general/seo-meta.tsx  |  5 +-
 .../settings/general/user-detail-modal.tsx    | 11 +--
 .../components/settings/growth/explore.tsx    |  8 +-
 .../components/settings/growth/network.tsx    |  5 +-
 .../settings/growth/offers/offer-success.tsx  | 11 +--
 .../settings/growth/offers/offers-index.tsx   |  3 +-
 .../add-recommendation-modal-confirm.tsx      |  5 +-
 .../recommendations/recommendation-list.tsx   |  5 +-
 .../settings/membership/custom-fields.tsx     |  4 +-
 .../custom-fields/custom-field-icon.tsx       | 15 ++++
 .../custom-fields/custom-field-modal.tsx      | 10 ++-
 .../settings/membership/member-emails.tsx     | 11 +--
 .../member-emails/welcome-email-modal.tsx     |  6 +-
 .../membership/portal/look-and-feel.tsx       |  7 +-
 .../stripe/stripe-connect-modal.tsx           |  7 +-
 .../membership/tiers/tier-detail-modal.tsx    | 11 +--
 .../membership/tiers/tier-detail-preview.tsx  |  7 +-
 .../settings/membership/tiers/tiers-list.tsx  |  4 +-
 .../components/settings/site/change-theme.tsx |  5 +-
 .../site/navigation/navigation-edit-form.tsx  |  8 +-
 .../site/theme/advanced-theme-settings.tsx    |  5 +-
 .../settings/site/theme/theme-preview.tsx     |  7 +-
 .../src/components/sidebar.tsx                | 62 +++++++-------
 .../custom-fields.acceptance.test.tsx         |  1 -
 202 files changed, 318 insertions(+), 572 deletions(-)
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/aa.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/add.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/ai-tagging-spark.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/align-center.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/align-left.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/angle-brackets.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/ap-network.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/arrow-bottom-left.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/arrow-bottom-right.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/arrow-down.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/arrow-left.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/arrow-right.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/arrow-top-left.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/arrow-top-right.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/arrow-up.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/at-sign.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/baseline-chart.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/bell.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/bills.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/block.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/book-open.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/brackets.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/card-list.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/cardview.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/check-circle.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/check.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/chevron-down.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/chevron-left.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/chevron-right.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/chevron-up.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/circle.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/close.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/column-layout.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/comment-fill.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/comment.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/crown.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/discount.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/dotdotdot.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/download.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/duplicate.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/ellipsis.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/email-check.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/email.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/emailfield.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/error-fill.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/export.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/finger-up.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/gift.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/globe-simple.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/hamburger.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/heart-fill.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/heart.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/home.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/hyperlink-circle.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/import.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/info-fill.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/info.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/integration.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/key.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/labs-flask.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/language.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/laptop.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/layer.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/layout-2-col.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/layout-headline.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/layout-module-1.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/like.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/line-dashed.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/line-dotted.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/line-solid.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/link-broken.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/listview.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/lock-locked.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/lock-unlocked.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/long-text.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/magnifying-glass.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/mail-block.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/mailplus.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/map-pin.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/megaphone.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/message-quote.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/mobile.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/modules-3.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/money-bags.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/navigation.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/palette.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/pen.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/picture.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/piggybank.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/play-fill.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/portal.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/question-circle.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/quote.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/recepients.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/reload.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/send.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/share.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/single-user-block.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/single-user-fill.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/sparkle.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/square.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/squircle-fill.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/squircle.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/stripe-verified.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/substract.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/success-fill.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/tags-block.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/tags-check.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/text-bold.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/text-regular.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/text-underline.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/textfield.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/thumbs-down.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/thumbs-up.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/time-back.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/trash.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/typography.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/unsplash-logo.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/upload.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/user-add.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/user-fill.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/user-page.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/user-pen.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/user.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/warning.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/world-clock.svg
 delete mode 100644 apps/admin-x-design-system/src/assets/icons/zapier-logo.svg
 delete mode 100644 apps/admin-x-design-system/src/global/icon.stories.tsx
 delete mode 100644 apps/admin-x-design-system/src/global/icon.tsx
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/beehiiv.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/facebook.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/firstpromoter.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/linkedin.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/mailchimp.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/medium.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/pintura.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/portal-icon-1.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/portal-icon-2.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/portal-icon-3.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/portal-icon-4.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/portal-icon-5.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/slack.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/squarespace.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/substack.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/transistor.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/twitter-x.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/unsplash.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/wordpress.svg (100%)
 rename apps/{admin-x-design-system/src/assets/icons => admin-x-settings/src/assets/images/brand-icons}/zapier.svg (100%)
 create mode 100644 apps/admin-x-settings/src/components/icons/brand-icon.tsx
 create mode 100644 apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-icon.tsx

diff --git a/apps/admin-x-design-system/src/assets/icons/aa.svg b/apps/admin-x-design-system/src/assets/icons/aa.svg
deleted file mode 100644
index 3343b8c53b8..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/aa.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><title>aa</title><text x="12" y="18.5" fill="currentColor" font-size="19" font-weight="600" text-anchor="middle">Aa</text></svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/add.svg b/apps/admin-x-design-system/src/assets/icons/add.svg
deleted file mode 100644
index 682a97bf431..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/add.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs></defs><title>add</title><line x1="0.75" y1="12" x2="23.25" y2="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line><line x1="12" y1="0.75" x2="12" y2="23.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/ai-tagging-spark.svg b/apps/admin-x-design-system/src/assets/icons/ai-tagging-spark.svg
deleted file mode 100644
index e09d87e917b..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/ai-tagging-spark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-0.75 -0.75 24 24" height="24" width="24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.341093749999999 17.55496875c2.03146875 -0.408375 3.667125 -2.0639062499999996 4.07615625 -4.14796875 0.40903125 2.0840625 2.0442187499999998 3.73959375 4.07578125 4.14796875m0 0.00234375c-2.0315624999999997 0.408375 -3.667125 2.0639062499999996 -4.07615625 4.14796875 -0.40903125 -2.0840625 -2.0443125 -3.73959375 -4.07578125 -4.14796875" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m19.54621875 12.32025 0.56521875 -0.56521875c0.53071875 -0.53071875 0.8272499999999999 -1.25146875 0.8236875 -2.00203125l-0.0271875 -5.777896875000001c-0.00721875 -1.5429374999999999 -1.25625 -2.791940625 -2.7991875 -2.799225l-5.778 -0.027290625c-0.7505625 -0.003553125 -1.4713124999999998 0.293034375 -2.00203125 0.82374375L1.32765 10.97353125c-0.732223125 0.7321875 -0.7322203125000001 1.91934375 0.000009375 2.6516249999999997l7.13105625 7.131c0.732234375 0.73228125 1.9194093749999999 0.73228125 2.6516906249999996 0l0.94190625 -0.94190625" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M17.75428125 4.329000000000001c-0.1393125 -0.13935 -0.41803125 -0.139359375 -0.5574375 0 -0.1393125 0.13935 -0.1393125 0.418059375 0 0.557409375" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M17.7553125 4.328221875c0.13940625 0.13935 0.13940625 0.418059375 0 0.55741875 -0.1393125 0.13935 -0.41803125 0.13934062500000002 -0.55734375 -0.000009375" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/align-center.svg b/apps/admin-x-design-system/src/assets/icons/align-center.svg
deleted file mode 100644
index 826386427fc..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/align-center.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9 1.5H1"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7.5 5h-5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9 8.5H1"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/align-left.svg b/apps/admin-x-design-system/src/assets/icons/align-left.svg
deleted file mode 100644
index f43373f3543..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/align-left.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1 1.5h8"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1 5h5.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1 8.5h8"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/angle-brackets.svg b/apps/admin-x-design-system/src/assets/icons/angle-brackets.svg
deleted file mode 100644
index 15455f43594..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/angle-brackets.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m7.152187499999999 4.21875 -6.0375000000000005 6.0365625000000005a1.40625 1.40625 0 0 0 0 1.9884375l6.0375000000000005 6.0375000000000005" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m15.347812499999998 4.21875 6.0375000000000005 6.0365625000000005a1.40625 1.40625 0 0 1 0 1.9884375l-6.0375000000000005 6.0375000000000005" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/ap-network.svg b/apps/admin-x-design-system/src/assets/icons/ap-network.svg
deleted file mode 100644
index 388e9f5db4b..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/ap-network.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.69424 21.3087C2.87996 21.4945 3.10044 21.6418 3.34309 21.7423C3.58574 21.8428 3.84581 21.8945 4.10846 21.8945C4.3711 21.8945 4.63117 21.8428 4.87382 21.7423C5.11647 21.6418 5.33695 21.4945 5.52267 21.3087C5.70839 21.123 5.85571 20.9025 5.95622 20.6599C6.05672 20.4172 6.10846 20.1572 6.10846 19.8945C6.10846 19.6319 6.05672 19.3718 5.95622 19.1292C5.85571 18.8865 5.70839 18.666 5.52267 18.4803C5.33695 18.2946 5.11647 18.1473 4.87382 18.0468C4.63117 17.9463 4.3711 17.8945 4.10846 17.8945C3.84581 17.8945 3.58574 17.9463 3.34309 18.0468C3.10044 18.1473 2.87996 18.2946 2.69424 18.4803C2.50853 18.666 2.36121 18.8865 2.2607 19.1292C2.16019 19.3718 2.10846 19.6319 2.10846 19.8945C2.10846 20.1572 2.16019 20.4172 2.2607 20.6599C2.36121 20.9025 2.50853 21.123 2.69424 21.3087Z" stroke="currentColor" style="stroke:currentColor;stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M18.3542 5.52359C18.5399 5.70931 18.7604 5.85662 19.003 5.95713C19.2457 6.05764 19.5057 6.10937 19.7684 6.10937C20.031 6.10937 20.2911 6.05764 20.5337 5.95713C20.7764 5.85662 20.9969 5.70931 21.1826 5.52359C21.3683 5.33787 21.5156 5.11739 21.6161 4.87474C21.7166 4.63209 21.7684 4.37202 21.7684 4.10938C21.7684 3.84673 21.7166 3.58666 21.6161 3.34401C21.5156 3.10136 21.3683 2.88088 21.1826 2.69516C20.9969 2.50944 20.7764 2.36213 20.5337 2.26162C20.2911 2.16111 20.031 2.10938 19.7684 2.10938C19.5057 2.10938 19.2457 2.16111 19.003 2.26162C18.7604 2.36213 18.5399 2.50944 18.3542 2.69516C18.1684 2.88088 18.0211 3.10136 17.9206 3.34401C17.8201 3.58666 17.7684 3.84673 17.7684 4.10938C17.7684 4.37202 17.8201 4.63209 17.9206 4.87474C18.0211 5.11739 18.1684 5.33787 18.3542 5.52359Z" stroke="currentColor" style="stroke:currentColor;stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M7 12C7 12.6566 7.12933 13.3068 7.3806 13.9134C7.63188 14.52 8.00017 15.0712 8.46447 15.5355C8.92876 15.9998 9.47996 16.3681 10.0866 16.6194C10.6932 16.8707 11.3434 17 12 17C12.6566 17 13.3068 16.8707 13.9134 16.6194C14.52 16.3681 15.0712 15.9998 15.5355 15.5355C15.9998 15.0712 16.3681 14.52 16.6194 13.9134C16.8707 13.3068 17 12.6566 17 12C17 11.3434 16.8707 10.6932 16.6194 10.0866C16.3681 9.47996 15.9998 8.92876 15.5355 8.46447C15.0712 8.00017 14.52 7.63188 13.9134 7.3806C13.3068 7.12933 12.6566 7 12 7C11.3434 7 10.6932 7.12933 10.0866 7.3806C9.47996 7.63188 8.92876 8.00017 8.46447 8.46447C8.00017 8.92876 7.63188 9.47996 7.3806 10.0866C7.12933 10.6932 7 11.3434 7 12Z" stroke="currentColor" style="stroke:currentColor;stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8.47373 22.471C8.92281 22.6223 9.38069 22.7443 9.8445 22.8366C10.5527 22.9775 11.2748 23.0489 12.0004 23.0489C13.4515 23.0489 14.8884 22.7631 16.229 22.2078C17.5696 21.6525 18.7878 20.8386 19.8138 19.8125C20.8399 18.7864 21.6538 17.5683 22.2091 16.2277C22.7644 14.887 23.0503 13.4502 23.0503 11.9991C23.0503 10.7983 22.8545 9.60722 22.4724 8.47238M1.52846 15.5258C1.14628 14.3909 0.950562 13.1999 0.950562 11.9991C0.950562 10.548 1.23637 9.1111 1.79168 7.77047C2.34699 6.42984 3.16091 5.21172 4.18699 4.18564C5.21306 3.15957 6.43119 2.34564 7.77182 1.79034C9.11245 1.23503 10.5493 0.949219 12.0004 0.949219C13.2012 0.949219 14.3923 1.14493 15.5271 1.52712" stroke="currentColor" style="stroke:currentColor;stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/arrow-bottom-left.svg b/apps/admin-x-design-system/src/assets/icons/arrow-bottom-left.svg
deleted file mode 100644
index 45fa527cc8d..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/arrow-bottom-left.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"><defs></defs><title>arrow-corner-left</title><path d="M20.16 3.75 4.25 19.66" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="m4.25 4.66 0 15 15 0" fill-rule="evenodd" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/arrow-bottom-right.svg b/apps/admin-x-design-system/src/assets/icons/arrow-bottom-right.svg
deleted file mode 100644
index 877672be023..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/arrow-bottom-right.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"><defs></defs><title>arrow-corner-right</title><path d="m4 3.75 15.91 15.91" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="m4.91 19.66 15 0 0-15" fill-rule="evenodd" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/arrow-down.svg b/apps/admin-x-design-system/src/assets/icons/arrow-down.svg
deleted file mode 100644
index a47372f9682..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/arrow-down.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs></defs><title>arrow-down</title><line x1="12" y1="0.75" x2="12" y2="23.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line><polyline points="1.5 12.75 12 23.25 22.5 12.75" fill-rule="evenodd" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></polyline></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/arrow-left.svg b/apps/admin-x-design-system/src/assets/icons/arrow-left.svg
deleted file mode 100644
index 98cf6365a43..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/arrow-left.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs></defs><title>arrow-left</title><line x1="23.25" y1="12" x2="0.75" y2="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line><polyline points="11.25 1.5 0.75 12 11.25 22.5" fill-rule="evenodd" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></polyline></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/arrow-right.svg b/apps/admin-x-design-system/src/assets/icons/arrow-right.svg
deleted file mode 100644
index bace6cf9964..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/arrow-right.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs></defs><title>arrow-right</title><line x1="0.75" y1="12" x2="23.25" y2="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line><polyline points="12.75 22.5 23.25 12 12.75 1.5" fill-rule="evenodd" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></polyline></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/arrow-top-left.svg b/apps/admin-x-design-system/src/assets/icons/arrow-top-left.svg
deleted file mode 100644
index 6eb3752d7da..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/arrow-top-left.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20.16 20.25L4.25 4.34" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4.25 19.3398V4.33984H19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/arrow-top-right.svg b/apps/admin-x-design-system/src/assets/icons/arrow-top-right.svg
deleted file mode 100644
index 1f53b668aec..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/arrow-top-right.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.84 20.25L19.75 4.34" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M19.75 19.3398V4.33984H4.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/arrow-up.svg b/apps/admin-x-design-system/src/assets/icons/arrow-up.svg
deleted file mode 100644
index ae0e23966d7..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/arrow-up.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs></defs><title>arrow-up</title><line x1="12" y1="23.25" x2="12" y2="0.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line><polyline points="22.5 11.25 12 0.75 1.5 11.25" fill-rule="evenodd" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></polyline></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/at-sign.svg b/apps/admin-x-design-system/src/assets/icons/at-sign.svg
deleted file mode 100644
index 1b840d38fd5..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/at-sign.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M16.171875 11.25A4.921875 4.921875 0 1 1 11.25 6.328125 4.921875 4.921875 0 0 1 16.171875 11.25Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M16.171875 11.25v2.109375a2.8125 2.8125 0 0 0 5.625 0V11.25a10.5459375 10.5459375 0 1 0 -4.21875 8.4375" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/baseline-chart.svg b/apps/admin-x-design-system/src/assets/icons/baseline-chart.svg
deleted file mode 100644
index d68f249b56f..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/baseline-chart.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-0.75 -0.75 24 24" height="24" width="24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M0.9375 20.0625h1.8403125" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M19.723125 20.0625H21.5625" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M15.02625 20.0625h1.8403125" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.3303125 20.0625h1.839375" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5.6343749999999995 20.0625h1.839375" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m0.9375 16.53 4.790625 -6.511875a3.1565625 3.1565625 0 0 1 3.1753125 -1.2225000000000001l4.685625 0.9590624999999999a3.1565625 3.1565625 0 0 0 3.17625 -1.2215624999999999l4.790625 -6.511875" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/bell.svg b/apps/admin-x-design-system/src/assets/icons/bell.svg
deleted file mode 100644
index e9b771d42dc..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/bell.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Alarm-Bell--Streamline-Streamline--3.0" height="24" width="24"><desc>Alarm Bell Streamline Icon: https://streamlinehq.com</desc><defs></defs><title>alarm-bell</title><path d="M10 21.75a2.087 2.087 0 0 0 4.005 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m12 3 0 -2.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M12 3a7.5 7.5 0 0 1 7.5 7.5c0 7.046 1.5 8.25 1.5 8.25H3s1.5 -1.916 1.5 -8.25A7.5 7.5 0 0 1 12 3Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/bills.svg b/apps/admin-x-design-system/src/assets/icons/bills.svg
deleted file mode 100644
index 3440d618c36..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/bills.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-0.75 -0.75 24 24" height="24" width="24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M17.578125 4.21875H2.109375A1.40625 1.40625 0 0 0 0.703125 5.625v8.4375a1.40625 1.40625 0 0 0 1.40625 1.40625h15.46875a1.40625 1.40625 0 0 0 1.40625 -1.40625V5.625a1.40625 1.40625 0 0 0 -1.40625 -1.40625Z" stroke-width="1.5"></path><path stroke="currentColor" d="M3.8671875 7.734375a0.3515625 0.3515625 0 1 1 0 -0.703125" stroke-width="1.5"></path><path stroke="currentColor" d="M3.8671875 7.734375a0.3515625 0.3515625 0 1 0 0 -0.703125" stroke-width="1.5"></path><path stroke="currentColor" d="M15.8203125 12.65625a0.3515625 0.3515625 0 0 1 0 -0.703125" stroke-width="1.5"></path><path stroke="currentColor" d="M15.8203125 12.65625a0.3515625 0.3515625 0 0 0 0 -0.703125" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.84375 12.65625a2.8125 2.8125 0 1 0 0 -5.625 2.8125 2.8125 0 0 0 0 5.625Z" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M21.796875 8.4375v8.4375a1.40625 1.40625 0 0 1 -1.40625 1.40625H4.921875" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/block.svg b/apps/admin-x-design-system/src/assets/icons/block.svg
deleted file mode 100644
index 89890da98a2..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/block.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M19.0902 4.90918L4.9082 19.0912" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/book-open.svg b/apps/admin-x-design-system/src/assets/icons/book-open.svg
deleted file mode 100644
index 26148b367d3..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/book-open.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M12.1875 21.474375a15.9271875 15.9271875 0 0 1 8.3025 -3.646875 1.5 1.5 0 0 0 1.3040625000000001 -1.4878125V2.2171875a1.5121875 1.5121875 0 0 0 -1.7203125 -1.5A16.009687500000002 16.009687500000002 0 0 0 12.1875 4.3125a1.53375 1.53375 0 0 1 -1.875 0A16.009687500000002 16.009687500000002 0 0 0 2.4234375 0.7190625 1.5121875 1.5121875 0 0 0 0.703125 2.2171875v14.1225a1.5 1.5 0 0 0 1.3040625000000001 1.4878125A15.9271875 15.9271875 0 0 1 10.3125 21.474375a1.5309375 1.5309375 0 0 0 1.875 0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m11.25 4.629375 0 17.1665625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/brackets.svg b/apps/admin-x-design-system/src/assets/icons/brackets.svg
deleted file mode 100644
index 15455f43594..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/brackets.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m7.152187499999999 4.21875 -6.0375000000000005 6.0365625000000005a1.40625 1.40625 0 0 0 0 1.9884375l6.0375000000000005 6.0375000000000005" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m15.347812499999998 4.21875 6.0375000000000005 6.0365625000000005a1.40625 1.40625 0 0 1 0 1.9884375l-6.0375000000000005 6.0375000000000005" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/card-list.svg b/apps/admin-x-design-system/src/assets/icons/card-list.svg
deleted file mode 100644
index 39c5de18307..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/card-list.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Layout-Agenda--Streamline-Ultimate" height="24" width="24"><desc>Layout Agenda Streamline Icon: https://streamlinehq.com</desc><defs></defs><title>layout-agenda</title><path d="M2.25 0.747h19.5s1.5 0 1.5 1.5v6s0 1.5 -1.5 1.5H2.25s-1.5 0 -1.5 -1.5v-6s0 -1.5 1.5 -1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M2.25 14.247h19.5s1.5 0 1.5 1.5v6s0 1.5 -1.5 1.5H2.25s-1.5 0 -1.5 -1.5v-6s0 -1.5 1.5 -1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/cardview.svg b/apps/admin-x-design-system/src/assets/icons/cardview.svg
deleted file mode 100644
index 88d8b62e056..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/cardview.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.75 -0.75 24 24" height="24" width="24"><defs></defs><title>layout-module-1</title><path d="M2.109375 0.7003125h5.625s1.40625 0 1.40625 1.40625v5.625s0 1.40625 -1.40625 1.40625h-5.625s-1.40625 0 -1.40625 -1.40625v-5.625s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M2.109375 13.356562499999999h5.625s1.40625 0 1.40625 1.40625v5.625s0 1.40625 -1.40625 1.40625h-5.625s-1.40625 0 -1.40625 -1.40625v-5.625s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M14.765625 0.7003125h5.625s1.40625 0 1.40625 1.40625v5.625s0 1.40625 -1.40625 1.40625h-5.625s-1.40625 0 -1.40625 -1.40625v-5.625s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M14.765625 13.356562499999999h5.625s1.40625 0 1.40625 1.40625v5.625s0 1.40625 -1.40625 1.40625h-5.625s-1.40625 0 -1.40625 -1.40625v-5.625s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/check-circle.svg b/apps/admin-x-design-system/src/assets/icons/check-circle.svg
deleted file mode 100644
index 9965e6f68dd..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/check-circle.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5"><path d="M6,13.223,8.45,16.7a1.049,1.049,0,0,0,1.707.051L18,6.828" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M0.750 11.999 A11.250 11.250 0 1 0 23.250 11.999 A11.250 11.250 0 1 0 0.750 11.999 Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/check.svg b/apps/admin-x-design-system/src/assets/icons/check.svg
deleted file mode 100644
index 21cf58c82a1..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/check.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5">
-  <path style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;" d="m1.6 14.512 7.065 7.065 13.676-19" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/chevron-down.svg b/apps/admin-x-design-system/src/assets/icons/chevron-down.svg
deleted file mode 100644
index 135969085a0..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/chevron-down.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs></defs><title>arrow-down-1</title><path d="M23.25,7.311,12.53,18.03a.749.749,0,0,1-1.06,0L.75,7.311" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/chevron-left.svg b/apps/admin-x-design-system/src/assets/icons/chevron-left.svg
deleted file mode 100644
index 0690ab61366..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/chevron-left.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs></defs><title>arrow-left-1</title><path d="M16.25,23.25,5.53,12.53a.749.749,0,0,1,0-1.06L16.25.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/chevron-right.svg b/apps/admin-x-design-system/src/assets/icons/chevron-right.svg
deleted file mode 100644
index ee1de512e59..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/chevron-right.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs></defs><title>arrow-right-1</title><path d="M5.5.75,16.22,11.47a.749.749,0,0,1,0,1.06L5.5,23.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/chevron-up.svg b/apps/admin-x-design-system/src/assets/icons/chevron-up.svg
deleted file mode 100644
index 80a2b54f740..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/chevron-up.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs></defs><title>arrow-up-1</title><path d="M.75,17.189,11.47,6.47a.749.749,0,0,1,1.06,0L23.25,17.189" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/circle.svg b/apps/admin-x-design-system/src/assets/icons/circle.svg
deleted file mode 100644
index a02fd0c8e41..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/circle.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/close.svg b/apps/admin-x-design-system/src/assets/icons/close.svg
deleted file mode 100644
index e49c5fb03db..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/close.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs></defs><title>close</title><line x1="0.75" y1="23.249" x2="23.25" y2="0.749" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line><line x1="23.25" y1="23.249" x2="0.75" y2="0.749" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/column-layout.svg b/apps/admin-x-design-system/src/assets/icons/column-layout.svg
deleted file mode 100644
index f56aaa7590b..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/column-layout.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" id="Layout--Streamline-Ultimate" height="24" width="24"><desc>Layout Streamline Icon: https://streamlinehq.com</desc><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m1.5 2.99707 0 18.00003c0 0.8284 0.67157 1.5 1.5 1.5l18 0c0.8284 0 1.5 -0.6716 1.5 -1.5l0 -18.00003c0 -0.82843 -0.6716 -1.5 -1.5 -1.5l-18 0c-0.82843 0 -1.5 0.67157 -1.5 1.5Z" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m12.0029 22.4971 0 -21.00003" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m12.0029 11.9971 10 0" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/comment-fill.svg b/apps/admin-x-design-system/src/assets/icons/comment-fill.svg
deleted file mode 100644
index b562e5dadfd..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/comment-fill.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path d="M12 1.34C5.66 1.34 0.5 5.59 0.5 10.81a8.58 8.58 0 0 0 3.18 6.54l-2.3 4.59a0.49 0.49 0 0 0 0.09 0.57 0.5 0.5 0 0 0 0.57 0.1l6.15 -2.86a13.44 13.44 0 0 0 3.81 0.54c6.34 0 11.5 -4.25 11.5 -9.48S18.34 1.34 12 1.34Z" fill="currentColor" stroke-width="1.5px">
-  </path>
-</svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/comment.svg b/apps/admin-x-design-system/src/assets/icons/comment.svg
deleted file mode 100644
index 57cd4987d18..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/comment.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px" d="M12.658 2a9.307 9.307 0 0 0-8.15 4.788 9.326 9.326 0 0 0 .23 9.456L2 22l5.75-2.74a9.32 9.32 0 0 0 13.894-5.372 9.341 9.341 0 0 0-1.532-8.185A9.328 9.328 0 0 0 12.658 2Z"/>
-</svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/crown.svg b/apps/admin-x-design-system/src/assets/icons/crown.svg
deleted file mode 100644
index ebcc658eccb..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/crown.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5px"><g><path d="M21.92,17l1.32-10a.75.75,0,0,0-1.08-.78L17.88,9.56a.74.74,0,0,1-1.09-.16L12.56,3.22a.74.74,0,0,0-1.12,0L7.21,9.4a.74.74,0,0,1-1.09.16L1.84,6.3a.75.75,0,0,0-1.08.78L2.08,17Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><line x1="2.25" y1="21.03" x2="21.75" y2="21.03" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line></g></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/discount.svg b/apps/admin-x-design-system/src/assets/icons/discount.svg
deleted file mode 100644
index 5d5ef793b09..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/discount.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m2.109375 20.390625 18.28125 -18.28125Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M14.765625 17.578125a2.8125 2.8125 0 1 0 5.625 0 2.8125 2.8125 0 1 0 -5.625 0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M2.109375 4.921875a2.8125 2.8125 0 1 0 5.625 0 2.8125 2.8125 0 1 0 -5.625 0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/dotdotdot.svg b/apps/admin-x-design-system/src/assets/icons/dotdotdot.svg
deleted file mode 100644
index 743cb1af5e4..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/dotdotdot.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <defs>
-    <style>
-      .dotdotdotfill {fill:currentColor}
-    </style>
-  </defs>
-  <circle class="dotdotdotfill" cx="3.25" cy="12" r="2.6"/>
-  <circle class="dotdotdotfill" cx="12" cy="12" r="2.6"/>
-  <circle class="dotdotdotfill" cx="20.75" cy="12" r="2.6"/>
-</svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/download.svg b/apps/admin-x-design-system/src/assets/icons/download.svg
deleted file mode 100644
index d9753519323..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/download.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m11.2509375 3.515625 0 11.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m7.0321875 10.546875 4.21875 4.21875 4.21875 -4.21875" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M21.797812500000003 14.765625v1.40625a2.8125 2.8125 0 0 1 -2.8125 2.8125h-15.46875a2.8125 2.8125 0 0 1 -2.8125 -2.8125v-1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/duplicate.svg b/apps/admin-x-design-system/src/assets/icons/duplicate.svg
deleted file mode 100644
index 4272289ca85..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/duplicate.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-0.75 -0.75 24 24" height="24" width="24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M15.703125 4.21875V1.640625a0.9375 0.9375 0 0 0 -0.9375 -0.9375h-13.125a0.9375 0.9375 0 0 0 -0.9375 0.9375v13.125a0.9375 0.9375 0 0 0 0.9375 0.9375H4.21875" stroke-width="1.5"></path><path stroke="currentColor" stroke-linejoin="round" d="M6.796875 7.734375a0.9375 0.9375 0 0 1 0.9375 -0.9375h13.125a0.9375 0.9375 0 0 1 0.9375 0.9375v13.125a0.9375 0.9375 0 0 1 -0.9375 0.9375h-13.125a0.9375 0.9375 0 0 1 -0.9375 -0.9375v-13.125Z" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/ellipsis.svg b/apps/admin-x-design-system/src/assets/icons/ellipsis.svg
deleted file mode 100644
index bdb73aadc4f..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/ellipsis.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="6" cy="12" r="1.5" fill="currentColor"/>
-<circle cx="12" cy="12" r="1.5" fill="currentColor"/>
-<path d="M19.5 12C19.5 12.8284 18.8284 13.5 18 13.5C17.1716 13.5 16.5 12.8284 16.5 12C16.5 11.1716 17.1716 10.5 18 10.5C18.8284 10.5 19.5 11.1716 19.5 12Z" fill="currentColor"/>
-</svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/email-check.svg b/apps/admin-x-design-system/src/assets/icons/email-check.svg
deleted file mode 100644
index a85cff2e81a..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/email-check.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M10.546875 16.171875a5.625 5.625 0 1 0 11.25 0 5.625 5.625 0 1 0 -11.25 0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m18.67875 14.536875 -2.7234374999999997 3.6309375000000004a0.705 0.705 0 0 1 -1.0603125 0.0759375l-1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M7.734375 14.765625h-5.625a1.40625 1.40625 0 0 1 -1.40625 -1.40625v-11.25a1.40625 1.40625 0 0 1 1.40625 -1.40625h16.875a1.40625 1.40625 0 0 1 1.40625 1.40625V8.4375" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m20.0728125 1.21875 -7.635 5.8725000000000005a3.10125 3.10125 0 0 1 -3.781875 0L1.0209375 1.21875" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/email.svg b/apps/admin-x-design-system/src/assets/icons/email.svg
deleted file mode 100644
index 188a97ba7c4..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/email.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m1.40625 4.453125 19.6875 0 0 14.0625 -19.6875 0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m20.7759375 4.96875 -7.635 5.8725000000000005a3.10125 3.10125 0 0 1 -3.781875 0L1.7240625 4.96875" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/emailfield.svg b/apps/admin-x-design-system/src/assets/icons/emailfield.svg
deleted file mode 100644
index ba90c9046a8..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/emailfield.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.75 -0.75 24 24" height="24" width="24"><defs></defs><path d="M21.796875 12.421875v5.859375a0.9375 0.9375 0 0 1 -0.9375 0.9375H1.640625a0.9375 0.9375 0 0 1 -0.9375 -0.9375V8.671875a0.9375 0.9375 0 0 1 0.9375 -0.9375H8.4375" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M18.125625 13.300312499999999A5.15625 5.15625 0 1 1 21.5625 8.4375" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M14.6878125 8.4375a1.7184375 1.7184375 0 1 0 3.436875 0 1.7184375 1.7184375 0 1 0 -3.436875 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M18.1246875 8.4375A1.719375 1.719375 0 0 0 21.5625 8.4375" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m4.3706249999999995 10.9378125 0 5.077500000000001" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/error-fill.svg b/apps/admin-x-design-system/src/assets/icons/error-fill.svg
deleted file mode 100644
index dfa0fd2ea0c..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/error-fill.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" id="Alert-Triangle--Streamline-Ultimate"><desc>Alert Triangle Streamline Icon: https://streamlinehq.com</desc><path d="m23.77 20.57 -10 -19A2 2 0 0 0 12 0.5a2 2 0 0 0 -1.77 1.07l-10 19a2 2 0 0 0 0.06 2A2 2 0 0 0 2 23.5h20a2 2 0 0 0 1.77 -2.93ZM11 8.5a1 1 0 0 1 2 0v6a1 1 0 0 1 -2 0ZM12.05 20a1.53 1.53 0 0 1 -1.52 -1.47A1.48 1.48 0 0 1 12 17a1.53 1.53 0 0 1 1.52 1.47A1.48 1.48 0 0 1 12.05 20Z" fill="currentColor" stroke-width="1"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/export.svg b/apps/admin-x-design-system/src/assets/icons/export.svg
deleted file mode 100644
index 12ef11c4850..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/export.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-0.75 -0.75 24 24" height="24" width="24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M18.09646875 20.3938125c0.674625 0 1.219125 -0.54459375 1.219125 -1.21921875V5.666521875c0 -0.325096875 -0.13003125 -0.6420750000000001 -0.36571875 -0.8696531249999999l-2.43825 -2.34075c-0.227625 -0.227578125 -0.5364375 -0.349490625 -0.85340625 -0.349490625H4.4042625c-0.674596875 0 -1.21914375 0.544546875 -1.21914375 1.21914375V19.17459375c0 0.674625 0.544546875 1.21921875 1.21914375 1.21921875H18.09646875Z" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m8.476865625 12.861375 2.774446875 2.77453125 2.77453125 -2.77453125" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m11.2490625 15.63534375 0 -8.770715625" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/finger-up.svg b/apps/admin-x-design-system/src/assets/icons/finger-up.svg
deleted file mode 100644
index 778036291c3..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/finger-up.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-0.75 -0.75 24 24" height="24" width="24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M6.140625 10.828125c-1.78125 0 -3.28125 1.5 -3.28125 3.28125 0 1.5 0.375 3 1.21875 4.3125l0.65625 1.125c0.84375 1.40625 2.4375 2.25 4.03125 2.25h6.1875c2.625 0 4.6875 -2.0625 4.6875 -4.6875v-6.84375c0 -0.9375 -0.75 -1.6875 -1.6875 -1.6875s-1.6875 0.75 -1.6875 1.6875v-0.9375c0 -0.9375 -0.75 -1.6875 -1.6875 -1.6875s-1.6875 0.75 -1.6875 1.6875v0.28125l0 -0.75c0 -0.9375 -0.75 -1.6875 -1.6875 -1.6875s-1.6875 0.75 -1.6875 1.6875l0 0.215625m0 0.5343749999999999 0 -0.5343749999999999m-3.375 4.753125000000001V2.390625c0 -0.9375 0.75 -1.6875 1.6875 -1.6875s1.6875 0.75 1.6875 1.6875l0 6.684375" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/gift.svg b/apps/admin-x-design-system/src/assets/icons/gift.svg
deleted file mode 100644
index a67988e2546..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/gift.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-  <rect x="3" y="8" width="18" height="4" rx="1" />
-  <path d="M12 8v13" />
-  <path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7" />
-  <path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5" />
-</svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/globe-simple.svg b/apps/admin-x-design-system/src/assets/icons/globe-simple.svg
deleted file mode 100644
index 37dc472b41c..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/globe-simple.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0.25 0.25 23.5 23.5" stroke-width="1" height="24" width="24"><g><circle cx="12" cy="12" r="11.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></circle><path d="M9.88,23.05c-1.57-2.2-2.63-6.33-2.63-11S8.31,3.15,9.88,1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.12,23.05c1.57-2.2,2.63-6.33,2.63-11S15.69,3.15,14.12,1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><line x1="0.75" y1="12" x2="23.25" y2="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="2.05" y1="17.25" x2="21.95" y2="17.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="2.05" y1="6.75" x2="21.95" y2="6.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line></g></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/hamburger.svg b/apps/admin-x-design-system/src/assets/icons/hamburger.svg
deleted file mode 100644
index 39ad1359f32..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/hamburger.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs></defs><title>navigation-menu</title><line x1="2.25" y1="18.003" x2="21.75" y2="18.003" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line><line x1="2.25" y1="12.003" x2="21.75" y2="12.003" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line><line x1="2.25" y1="6.003" x2="21.75" y2="6.003" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/heart-fill.svg b/apps/admin-x-design-system/src/assets/icons/heart-fill.svg
deleted file mode 100644
index 89de5d87f3b..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/heart-fill.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" id="Hearts-Card--Streamline-Ultimate.svg" height="24" width="24"><desc>Hearts Card Streamline Icon: https://streamlinehq.com</desc><path fill="currentColor" fill-rule="evenodd" d="M7.284 2.513a6.376 6.376 0 0 0 -4.146 11.22l8.014 7.42a1.25 1.25 0 0 0 1.698 0l8.024 -7.43A6.376 6.376 0 1 0 12 4.599a6.36 6.36 0 0 0 -4.716 -2.086Z" clip-rule="evenodd" stroke-width="1"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/heart.svg b/apps/admin-x-design-system/src/assets/icons/heart.svg
deleted file mode 100644
index 8f2e19899bf..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/heart.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="26" height="24" viewBox="0 0 26 24" xmlns="http://www.w3.org/2000/svg">
-  <path d="M23.651 5.357c-.878-1.717-2.269-2.728-4.173-3.034-1.904-.305-3.541.22-4.912 1.577L13 5.329 11.434 3.9c-1.371-1.356-3.009-1.881-4.913-1.575-1.904.306-3.295 1.317-4.172 3.035-1.222 2.42-.867 4.582 1.063 6.486L13 21.75l9.588-9.907c1.93-1.904 2.285-4.066 1.063-6.486z" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="currentColor" stroke-width="1.5" />
-</svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/home.svg b/apps/admin-x-design-system/src/assets/icons/home.svg
deleted file mode 100644
index 9f44dc3facb..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/home.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="House-Entrance--Streamline-Streamline--3.0" height="24" width="24"><desc>House Entrance Streamline Icon: https://streamlinehq.com</desc><defs></defs><title>house-entrance</title><path d="M22.868 8.947 12 0.747l-10.878 8.2a1.177 1.177 0 0 0 -0.377 0.8v12.522a0.981 0.981 0 0 0 0.978 0.978h6.522V18a3.75 3.75 0 0 1 7.5 0v5.25h6.521a0.982 0.982 0 0 0 0.979 -0.978V9.747a1.181 1.181 0 0 0 -0.377 -0.8Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/hyperlink-circle.svg b/apps/admin-x-design-system/src/assets/icons/hyperlink-circle.svg
deleted file mode 100644
index 86106cffb93..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/hyperlink-circle.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" id="Hyperlink-Circle--Streamline-Ultimate" height="20" width="20"><desc>Hyperlink Circle Streamline Icon: https://streamlinehq.com</desc><path d="M10.426416666666666 16.262500000000003C9.295 18.64975 6.448083333333334 19.675166666666666 4.054333333333333 18.55766666666667H4.054333333333333C1.6670833333333335 17.42625 0.6416666666666667 14.579250000000002 1.75925 12.185500000000001L3.2155 9.090583333333333C4.3465 6.7035 7.193166666666667 5.678 9.586583333333333 6.7955000000000005H9.586583333333333C10.948333333333334 7.437916666666666 11.928416666666667 8.6835 12.232583333333334 10.158083333333334" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M9.573916666666667 3.7375000000000003C10.705333333333334 1.3502500000000002 13.552333333333333 0.3248333333333333 15.946083333333334 1.442416666666667H15.946083333333334C18.33275 2.57375 19.358 5.4199166666666665 18.241166666666665 7.813416666666666L16.784833333333335 10.908333333333333C15.653416666666667 13.295583333333335 12.806500000000002 14.321 10.41275 13.203416666666666H10.41275C9.248583333333334 12.654916666666667 8.354916666666668 11.659916666666666 7.934333333333334 10.443666666666667" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/import.svg b/apps/admin-x-design-system/src/assets/icons/import.svg
deleted file mode 100644
index fb62e9fd764..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/import.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-0.75 -0.75 24 24" height="24" width="24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M18.09553125 20.3938125c0.674625 0 1.21921875 -0.54459375 1.21921875 -1.21921875V5.666521875c0 -0.325096875 -0.13012500000000002 -0.6420750000000001 -0.3658125 -0.8696531249999999l-2.43825 -2.34075c-0.227625 -0.227578125 -0.5364375 -0.349490625 -0.85340625 -0.349490625H4.40334375c-0.6745875 0 -1.21914375 0.544546875 -1.21914375 1.21914375V19.17459375c0 0.674625 0.5445562500000001 1.21921875 1.21914375 1.21921875h13.692187500000001Z" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m8.47595625 9.638625 2.7744187499999997 -2.774559375L14.025 9.638625" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m11.248125 6.864684375 0 8.770659375000001" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/info-fill.svg b/apps/admin-x-design-system/src/assets/icons/info-fill.svg
deleted file mode 100644
index 9866e28014c..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/info-fill.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" id="Information-Circle--Streamline-Ultimate"><desc>Information Circle Streamline Icon: https://streamlinehq.com</desc><path d="M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm0.25 5a1.5 1.5 0 1 1 -1.5 1.5 1.5 1.5 0 0 1 1.5 -1.5Zm2.25 13.5h-4a1 1 0 0 1 0 -2h0.75a0.25 0.25 0 0 0 0.25 -0.25v-4.5a0.25 0.25 0 0 0 -0.25 -0.25h-0.75a1 1 0 0 1 0 -2h1a2 2 0 0 1 2 2v4.75a0.25 0.25 0 0 0 0.25 0.25h0.75a1 1 0 0 1 0 2Z" fill="currentcolor" stroke-width="1"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/info.svg b/apps/admin-x-design-system/src/assets/icons/info.svg
deleted file mode 100644
index 320f27f9394..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/info.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info-icon lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/integration.svg b/apps/admin-x-design-system/src/assets/icons/integration.svg
deleted file mode 100644
index 9c8db2d4d88..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/integration.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 46 43"><title>integration</title><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-width="1.5px"><path d="M-1-3h48v48H-1z" stroke="none"></path><g stroke-linecap="round" stroke-linejoin="round"><path d="M32.932 6.574c.713.428 1.069 1.057 1.068 1.888v9.278l-11 7.076-11-7.076V8.462c0-.831.355-1.46 1.068-1.888l8.8-5.28c.755-.453 1.51-.453 2.264 0l8.8 5.28zM23 13.816v11"></path><path d="M34 31.416l-11-6.6 11-7.076 10 6.426c.669.435 1.002 1.052 1 1.85v8.124c.002.798-.331 1.415-1 1.85l-8.8 5.66c-.793.51-1.587.51-2.38 0L23 35.34V24.816m11 6.6V42M23 24.816V35.34l-9.8 6.31c-.793.51-1.587.51-2.38 0l-8.8-5.66c-.678-.43-1.018-1.047-1.02-1.85v-8.124c-.002-.798.331-1.415 1-1.85l10-6.426 11 7.076-11 6.6m0 0L1.262 24.974M12 31.416V42m11-28.184L12.282 7.384m21.436 0L23 13.816m21.738 11.158L34 31.416"></path></g></g></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/key.svg b/apps/admin-x-design-system/src/assets/icons/key.svg
deleted file mode 100644
index f6bc294224f..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/key.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.75 -0.75 24 24" height="24" width="24"><g><path d="M12.01875 13.603125 14.399999999999999 11.25l1.65 0.440625a1.4625000000000001 1.4625000000000001 0 0 0 1.415625 -0.440625 1.4812500000000002 1.4812500000000002 0 0 0 0.346875 -1.396875l-0.440625 -1.640625 0.7687499999999999 -0.7125 1.65 0.440625A1.4625000000000001 1.4625000000000001 0 0 0 21.20625 7.5 1.4812500000000002 1.4812500000000002 0 0 0 21.5625 6.1125l-0.440625 -1.640625a2.203125 2.203125 0 0 0 -3.121875 -3.121875l-9.103125 9.13125a5.896875 5.896875 0 1 0 3.121875 3.121875Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M3.99375 16.725a1.78125 1.78125 0 1 0 3.5625 0 1.78125 1.78125 0 1 0 -3.5625 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></g></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/labs-flask.svg b/apps/admin-x-design-system/src/assets/icons/labs-flask.svg
deleted file mode 100644
index c2ed46b6dd5..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/labs-flask.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-0.75 -0.75 24 24" height="24" width="24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6.305625 0.703125h9.84375" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14.743125000000001 7.734375V0.703125h-7.03125v7.03125L1.3959375 17.451562499999998A2.8125 2.8125 0 0 0 3.75 21.796875h14.95125a2.8125 2.8125 0 0 0 2.3578125 -4.3453124999999995L14.743125000000001 7.734375Z" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.9696875 11.953125h12.515625" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.336875000000001 16.171875h2.8125" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14.743125000000001 14.765625v2.8125" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14.743125000000001 3.515625h-2.8125" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14.743125000000001 6.328125h-2.8125" stroke-width="1.5"></path><path stroke="currentColor" d="M6.305625 18.6328125a0.3515625 0.3515625 0 0 1 0 -0.703125" stroke-width="1.5"></path><path stroke="currentColor" d="M6.305625 18.6328125a0.3515625 0.3515625 0 0 0 0 -0.703125" stroke-width="1.5"></path><g><path stroke="currentColor" d="M9.118125000000001 15.8203125a0.3515625 0.3515625 0 0 1 0 -0.703125" stroke-width="1.5"></path><path stroke="currentColor" d="M9.118125000000001 15.8203125a0.3515625 0.3515625 0 0 0 0 -0.703125" stroke-width="1.5"></path></g></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/language.svg b/apps/admin-x-design-system/src/assets/icons/language.svg
deleted file mode 100644
index aafff55f38d..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/language.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.75 -0.75 24 24" height="24" width="24"><g><path d="M2.109375 0.703125h8.4375s1.40625 0 1.40625 1.40625v8.4375s0 1.40625 -1.40625 1.40625h-8.4375s-1.40625 0 -1.40625 -1.40625v-8.4375s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M14.765625 10.546875h5.625a1.40625 1.40625 0 0 1 1.40625 1.40625v8.4375a1.40625 1.40625 0 0 1 -1.40625 1.40625h-8.4375a1.40625 1.40625 0 0 1 -1.40625 -1.40625v-5.625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m14.53125 16.875 3.28125 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><g><path d="m6.328125 3.515625 0 1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m3.515625 4.921875 5.625 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M7.734375 4.921875s-1.40625 4.21875 -4.21875 4.21875" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M6.328125 7.5a3.675 3.675 0 0 0 2.8125 1.621875" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></g><path d="M14.53125 18.984375v-3.75a1.640625 1.640625 0 0 1 3.28125 0v3.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></g></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/laptop.svg b/apps/admin-x-design-system/src/assets/icons/laptop.svg
deleted file mode 100644
index be93d4f9795..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/laptop.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs></defs><title>Desktop</title><path d="M21,14.25V4.5A1.5,1.5,0,0,0,19.5,3H4.5A1.5,1.5,0,0,0,3,4.5v9.75Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></path><path d="M23.121,18.891A1.5,1.5,0,0,1,21.75,21H2.25A1.5,1.5,0,0,1,.879,18.891L3,14.25H21Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></path><line x1="10.5" y1="18" x2="13.5" y2="18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/layer.svg b/apps/admin-x-design-system/src/assets/icons/layer.svg
deleted file mode 100644
index 64f8f244c65..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/layer.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M21.478125 6.5184375 11.90625 1.5675a1.4465625 1.4465625 0 0 0 -1.3275 0L1.00875 6.5184375a0.5765625 0.5765625 0 0 0 0 1.025625l9.5709375 4.950937499999999a1.4465625 1.4465625 0 0 0 1.3275 0L21.478125 7.544062500000001a0.5775 0.5775 0 0 0 0 -1.025625Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m0.7106250000000001 11.953125 9.8690625 4.760625a1.4465625 1.4465625 0 0 0 1.3275 0l9.897187500000001 -4.760625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m0.7106250000000001 16.171875 9.8690625 4.760625a1.4465625 1.4465625 0 0 0 1.3275 0l9.897187500000001 -4.760625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/layout-2-col.svg b/apps/admin-x-design-system/src/assets/icons/layout-2-col.svg
deleted file mode 100644
index 2f6cd45c2e1..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/layout-2-col.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Browser-Page-Layout--Streamline-Ultimate" height="24" width="24"><desc>Browser Page Layout Streamline Icon: https://streamlinehq.com</desc><defs></defs><title>browser-page-layout</title><path d="M3 2.25h18s1.5 0 1.5 1.5v16.5s0 1.5 -1.5 1.5H3s-1.5 0 -1.5 -1.5V3.75s0 -1.5 1.5 -1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m1.5 6.75 21 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m9 6.75 0 15" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m9 14.25 13.5 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/layout-headline.svg b/apps/admin-x-design-system/src/assets/icons/layout-headline.svg
deleted file mode 100644
index 7a6cfeed7e6..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/layout-headline.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.75 -0.75 24 24" height="24" width="24"><defs></defs><title>layout-headline</title><path d="M2.109375 0.7003125h18.28125s1.40625 0 1.40625 1.40625v1.40625s0 1.40625 -1.40625 1.40625H2.109375s-1.40625 0 -1.40625 -1.40625v-1.40625s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M2.109375 9.137812499999999h18.28125s1.40625 0 1.40625 1.40625v1.40625s0 1.40625 -1.40625 1.40625H2.109375s-1.40625 0 -1.40625 -1.40625v-1.40625s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M2.109375 17.5753125h18.28125s1.40625 0 1.40625 1.40625v1.40625s0 1.40625 -1.40625 1.40625H2.109375s-1.40625 0 -1.40625 -1.40625v-1.40625s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/layout-module-1.svg b/apps/admin-x-design-system/src/assets/icons/layout-module-1.svg
deleted file mode 100644
index 88d8b62e056..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/layout-module-1.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.75 -0.75 24 24" height="24" width="24"><defs></defs><title>layout-module-1</title><path d="M2.109375 0.7003125h5.625s1.40625 0 1.40625 1.40625v5.625s0 1.40625 -1.40625 1.40625h-5.625s-1.40625 0 -1.40625 -1.40625v-5.625s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M2.109375 13.356562499999999h5.625s1.40625 0 1.40625 1.40625v5.625s0 1.40625 -1.40625 1.40625h-5.625s-1.40625 0 -1.40625 -1.40625v-5.625s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M14.765625 0.7003125h5.625s1.40625 0 1.40625 1.40625v5.625s0 1.40625 -1.40625 1.40625h-5.625s-1.40625 0 -1.40625 -1.40625v-5.625s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M14.765625 13.356562499999999h5.625s1.40625 0 1.40625 1.40625v5.625s0 1.40625 -1.40625 1.40625h-5.625s-1.40625 0 -1.40625 -1.40625v-5.625s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/like.svg b/apps/admin-x-design-system/src/assets/icons/like.svg
deleted file mode 100644
index b9ebfeb0e62..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/like.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-0.75 -0.75 24 24" height="24" width="24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M0.78375 9.6103125h1.3031249999999999c1.966875 0 3.855 -0.0684375 5.257499999999999 -1.4465625a7.5 7.5 0 0 0 2.2424999999999997 -5.2190625c0 -3.1734375 4.010624999999999 -1.6875 4.010624999999999 1.14375v3.646875a1.875 1.875 0 0 0 1.875 1.875h4.414687499999999c0.9806250000000001 0 1.8046875 0.7565625 1.8234375 1.7371874999999999 0.061875 3.1275 -0.459375 5.4028125 -1.7240625 7.824375 -0.729375 1.396875 -2.2434374999999998 2.175 -3.8184375000000004 2.1403125C5.2228125 21.065624999999997 6.6384375 19.21875 0.78375 19.21875" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/line-dashed.svg b/apps/admin-x-design-system/src/assets/icons/line-dashed.svg
deleted file mode 100644
index 44f2b774f21..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/line-dashed.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M14 12H10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M6 12H2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M22 12H18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/line-dotted.svg b/apps/admin-x-design-system/src/assets/icons/line-dotted.svg
deleted file mode 100644
index fa07cc540bd..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/line-dotted.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 12.75C12.4142 12.75 12.75 12.4142 12.75 12C12.75 11.5858 12.4142 11.25 12 11.25C11.5858 11.25 11.25 11.5858 11.25 12C11.25 12.4142 11.5858 12.75 12 12.75Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M20.25 12.75C20.6642 12.75 21 12.4142 21 12C21 11.5858 20.6642 11.25 20.25 11.25C19.8358 11.25 19.5 11.5858 19.5 12C19.5 12.4142 19.8358 12.75 20.25 12.75Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M3.75 12.75C4.16421 12.75 4.5 12.4142 4.5 12C4.5 11.5858 4.16421 11.25 3.75 11.25C3.33579 11.25 3 11.5858 3 12C3 12.4142 3.33579 12.75 3.75 12.75Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/line-solid.svg b/apps/admin-x-design-system/src/assets/icons/line-solid.svg
deleted file mode 100644
index ef5d5c458d0..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/line-solid.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M22 12L2 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/link-broken.svg b/apps/admin-x-design-system/src/assets/icons/link-broken.svg
deleted file mode 100644
index 1c71ac8bb05..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/link-broken.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5"><path d="M5.25 12.373h-3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="m5.25 15.373-1.5 1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="m5.25 9.373-1.5-1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.75 12.373h3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="m18.75 15.373 1.5 1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="m18.75 9.373 1.5-1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.25 9.373v-4.5A3.762 3.762 0 0 1 12 1.123h0a3.761 3.761 0 0 1 3.75 3.75v5.25a3.763 3.763 0 0 1-2.25 3.435 3.709 3.709 0 0 1-1.5.315" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.75 14.623v4.5a3.76 3.76 0 0 1-3.75 3.75h0a3.761 3.761 0 0 1-3.75-3.75v-4.5a3.762 3.762 0 0 1 3.75-3.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/listview.svg b/apps/admin-x-design-system/src/assets/icons/listview.svg
deleted file mode 100644
index 7a6cfeed7e6..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/listview.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.75 -0.75 24 24" height="24" width="24"><defs></defs><title>layout-headline</title><path d="M2.109375 0.7003125h18.28125s1.40625 0 1.40625 1.40625v1.40625s0 1.40625 -1.40625 1.40625H2.109375s-1.40625 0 -1.40625 -1.40625v-1.40625s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M2.109375 9.137812499999999h18.28125s1.40625 0 1.40625 1.40625v1.40625s0 1.40625 -1.40625 1.40625H2.109375s-1.40625 0 -1.40625 -1.40625v-1.40625s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M2.109375 17.5753125h18.28125s1.40625 0 1.40625 1.40625v1.40625s0 1.40625 -1.40625 1.40625H2.109375s-1.40625 0 -1.40625 -1.40625v-1.40625s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/lock-locked.svg b/apps/admin-x-design-system/src/assets/icons/lock-locked.svg
deleted file mode 100644
index f47f37b3709..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/lock-locked.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5px"><defs></defs><title>lock-1</title><rect x="3.75" y="9.75" width="16.5" height="13.5" rx="1.5" ry="1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></rect><path d="M6.75,9.75V6a5.25,5.25,0,0,1,10.5,0V9.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><line x1="12" y1="15" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/lock-unlocked.svg b/apps/admin-x-design-system/src/assets/icons/lock-unlocked.svg
deleted file mode 100644
index 2a10992b474..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/lock-unlocked.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5px"><defs></defs><title>lock-unlock</title><path d="M.75,9.75V6a5.25,5.25,0,0,1,10.5,0V9.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><rect x="6.75" y="9.75" width="16.5" height="13.5" rx="1.5" ry="1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></rect><line x1="15" y1="15" x2="15" y2="18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/long-text.svg b/apps/admin-x-design-system/src/assets/icons/long-text.svg
deleted file mode 100644
index 242d4f0a0de..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/long-text.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><title>long-text</title><path d="M2.5 6h19" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M2.5 12h19" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M2.5 18h11" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/magnifying-glass.svg b/apps/admin-x-design-system/src/assets/icons/magnifying-glass.svg
deleted file mode 100644
index 536707d0b9d..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/magnifying-glass.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5"><path d="M0.750 9.812 A9.063 9.063 0 1 0 18.876 9.812 A9.063 9.063 0 1 0 0.750 9.812 Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(-3.056 4.62) rotate(-23.025)"></path><path d="M16.221 16.22L23.25 23.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/mail-block.svg b/apps/admin-x-design-system/src/assets/icons/mail-block.svg
deleted file mode 100644
index b1933224012..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/mail-block.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5"><path d="M11.25 17.25a6 6 0 1 0 12 0 6 6 0 1 0-12 0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="m13.008 21.491 8.484-8.483" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.25 15.75h-6a1.5 1.5 0 0 1-1.5-1.5v-12a1.5 1.5 0 0 1 1.5-1.5h18a1.5 1.5 0 0 1 1.5 1.5V9" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="m21.411 1.3-8.144 6.264a3.308 3.308 0 0 1-4.034 0L1.089 1.3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/mailplus.svg b/apps/admin-x-design-system/src/assets/icons/mailplus.svg
deleted file mode 100644
index 411a67fceda..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/mailplus.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-plus-icon lucide-mail-plus"><path d="M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/><path d="M19 16v6"/><path d="M16 19h6"/></svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/map-pin.svg b/apps/admin-x-design-system/src/assets/icons/map-pin.svg
deleted file mode 100644
index f24994cf350..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/map-pin.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><title>map-pin</title><path d="M20 10c0 4.993 -5.539 10.193 -7.399 11.799a1 1 0 0 1 -1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M15 10a3 3 0 1 1 -6 0 3 3 0 0 1 6 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/megaphone.svg b/apps/admin-x-design-system/src/assets/icons/megaphone.svg
deleted file mode 100644
index 5d58b48ff31..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/megaphone.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M6.328125 14.296875H4.21875a3.515625 3.515625 0 0 1 0 -7.03125h2.109375Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M6.328125 14.296875a20.90625 20.90625 0 0 1 11.593125 3.5100000000000002l1.0631249999999999 0.70875V3.046875l-1.0631249999999999 0.70875A20.90625 20.90625 0 0 1 6.328125 7.265625Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m21.796875 9.375 0 2.8125" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M6.328125 14.296875A6.7865625 6.7865625 0 0 0 8.4375 19.21875" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/message-quote.svg b/apps/admin-x-design-system/src/assets/icons/message-quote.svg
deleted file mode 100644
index ce0d9568f9d..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/message-quote.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-quote-icon lucide-message-square-quote"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M8 12a2 2 0 0 0 2-2V8H8"/><path d="M14 12a2 2 0 0 0 2-2V8h-2"/></svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/mobile.svg b/apps/admin-x-design-system/src/assets/icons/mobile.svg
deleted file mode 100644
index 4f191e42f38..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/mobile.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Mobile</title><g><rect x="5.25" y="0.75" width="13.5" height="22.5" rx="3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></rect><line x1="5.25" y1="17.75" x2="18.75" y2="17.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line></g></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/modules-3.svg b/apps/admin-x-design-system/src/assets/icons/modules-3.svg
deleted file mode 100644
index 1dae91e54aa..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/modules-3.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.75 -0.75 24 24" height="24" width="24"><defs></defs><title>module-three</title><path d="M2.109375 12.65625H8.4375s1.40625 0 1.40625 1.40625v6.328125s0 1.40625 -1.40625 1.40625H2.109375s-1.40625 0 -1.40625 -1.40625V14.0625s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M14.0625 12.65625h6.328125s1.40625 0 1.40625 1.40625v6.328125s0 1.40625 -1.40625 1.40625H14.0625s-1.40625 0 -1.40625 -1.40625V14.0625s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M8.0859375 0.703125h6.328125s1.40625 0 1.40625 1.40625V8.4375s0 1.40625 -1.40625 1.40625h-6.328125s-1.40625 0 -1.40625 -1.40625V2.109375s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/money-bags.svg b/apps/admin-x-design-system/src/assets/icons/money-bags.svg
deleted file mode 100644
index 6a126bd0e3c..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/money-bags.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"><defs></defs><title>money-bags</title><path d="M14.045 7.988C16.091 9.4 18.75 12.8 18.75 15.863c0 3.107-3.361 5.625-6.75 5.625s-6.75-2.518-6.75-5.625c0-3.063 2.659-6.463 4.705-7.875L8.4 4.281a.9.9 0 0 1 .416-1.27 10.2 10.2 0 0 1 6.363 0 .9.9 0 0 1 .421 1.27Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.955 7.988h4.09"></path><path d="M4.5 20.738c-3 0-3.75-3-3.75-5.114a7.512 7.512 0 0 1 3.58-6.136L3.066 7.665a.75.75 0 0 1 .616-1.177H6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.329 17.332a2.225 2.225 0 0 0 1.858.876c1.139 0 2.063-.693 2.063-1.548s-.924-1.546-2.063-1.546-2.062-.693-2.062-1.548.924-1.547 2.062-1.547a2.221 2.221 0 0 1 1.858.875" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.187 18.208v1.03"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.187 10.988v1.031"></path><path d="M19.5 20.738c3 0 3.75-3 3.75-5.114a7.512 7.512 0 0 0-3.58-6.136l1.264-1.823a.75.75 0 0 0-.616-1.177H18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/navigation.svg b/apps/admin-x-design-system/src/assets/icons/navigation.svg
deleted file mode 100644
index 257a7264cbe..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/navigation.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.75 -0.75 24 24" height="24" width="24"><defs></defs><title>navigation-menu-4</title><path d="M2.109375 0.7059375h18.28125s1.40625 0 1.40625 1.40625v18.28125s0 1.40625 -1.40625 1.40625H2.109375s-1.40625 0 -1.40625 -1.40625v-18.28125s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m6.328125 7.0340625 9.84375 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m6.328125 11.252812500000001 9.84375 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m6.328125 15.471562500000001 9.84375 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/palette.svg b/apps/admin-x-design-system/src/assets/icons/palette.svg
deleted file mode 100644
index 4b5b7bc2856..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/palette.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-0.75 -0.75 24 24" height="24" width="24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7.03125 0.703125H2.8125a1.40625 1.40625 0 0 0 -1.40625 1.40625v18.28125a1.40625 1.40625 0 0 0 1.40625 1.40625h4.21875a1.40625 1.40625 0 0 0 1.40625 -1.40625V2.109375A1.40625 1.40625 0 0 0 7.03125 0.703125Z" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m11.025 0.80625 3.9000000000000004 1.6125a1.415625 1.415625 0 0 1 0.7687499999999999 1.875L8.4375 20.390625" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m17.8875 5.428125 2.8125 3.121875a1.40625 1.40625 0 0 1 -0.09375 1.9875L8.26875 21.046875" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.40625 6.796875H8.4375" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.40625 12.890625H8.4375" stroke-width="1.5"></path><path stroke="currentColor" d="M4.86 18.9890625a0.3515625 0.3515625 0 0 1 0 -0.703125" stroke-width="1.5"></path><path stroke="currentColor" d="M4.86 18.9890625a0.3515625 0.3515625 0 0 0 0 -0.703125" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/pen.svg b/apps/admin-x-design-system/src/assets/icons/pen.svg
deleted file mode 100644
index ad68385a9cf..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/pen.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"><defs></defs><title>pencil</title><path d="M22.19 1.81a3.639 3.639 0 0 0-5.17.035l-14.5 14.5L.75 23.25l6.905-1.771 14.5-14.5a3.637 3.637 0 0 0 .035-5.169Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="m16.606 2.26 5.134 5.134" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="m2.521 16.344 5.139 5.13" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/picture.svg b/apps/admin-x-design-system/src/assets/icons/picture.svg
deleted file mode 100644
index 77845d324ea..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/picture.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"><defs></defs><title>picture-sun</title><path d="M2.25.75h19.5s1.5 0 1.5 1.5v19.5s0 1.5-1.5 1.5H2.25s-1.5 0-1.5-1.5V2.25s0-1.5 1.5-1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.5 7.5a3 3 0 1 0 6 0 3 3 0 1 0-6 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3.961 14.959a8.194 8.194 0 0 1 11.694 4.149" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.382 16.918a4.449 4.449 0 0 1 5.851-.125" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/piggybank.svg b/apps/admin-x-design-system/src/assets/icons/piggybank.svg
deleted file mode 100644
index 0c22f4e1cbb..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/piggybank.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-0.75 -0.75 24 24" height="24" width="24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M21.796875 8.4375a2.8125 2.8125 0 0 1 -2.8125 2.8125" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.375 7.03125h2.8125" stroke-width="1.5"></path><path stroke="currentColor" d="M5.9193750000000005 10.542187499999999a0.3515625 0.3515625 0 0 1 0 -0.703125" stroke-width="1.5"></path><path stroke="currentColor" d="M5.9193750000000005 10.542187499999999a0.3515625 0.3515625 0 0 0 0 -0.703125" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7.40625 4.10625C6.309375 2.11875 3.515625 2.109375 3.515625 2.109375l0.590625 4.10625A7.415625 7.415625 0 0 0 2.4375 9.140625H0.703125v5.625h2.334375a7.903124999999999 7.903124999999999 0 0 0 1.875 2.2218750000000003V19.6875a0.7125 0.7125 0 0 0 0.703125 0.703125H7.03125a0.7125 0.7125 0 0 0 0.703125 -0.703125v-1.1625a8.924999999999999 8.924999999999999 0 0 0 5.625 0V19.6875a0.7125 0.7125 0 0 0 0.703125 0.703125h1.40625a0.7125 0.7125 0 0 0 0.703125 -0.703125v-2.68125a7.445625 7.445625 0 0 0 2.8125 -5.75625c0 -6.0843750000000005 -6.609375 -8.803125000000001 -11.578125 -7.14375Z" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/play-fill.svg b/apps/admin-x-design-system/src/assets/icons/play-fill.svg
deleted file mode 100644
index 228930ad019..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/play-fill.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path d="M23.14 10.61 2.25 0.16A1.56 1.56 0 0 0 0 1.56v20.88a1.56 1.56 0 0 0 2.25 1.4l20.89 -10.45a1.55 1.55 0 0 0 0 -2.78Z" fill="currentColor" stroke-width="1.5">
-  </path>
-</svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/portal.svg b/apps/admin-x-design-system/src/assets/icons/portal.svg
deleted file mode 100644
index 4638fb0ee85..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/portal.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_718_1014)">
-<path d="M16.5261 11.0917C16.3752 10.3419 16.0406 9.6412 15.5523 9.05252C15.064 8.46385 14.4372 8.00556 13.7282 7.71874M10.1882 7.75382C9.17274 8.18744 8.34628 8.97062 7.85872 9.96133C7.37116 10.952 7.25477 12.0847 7.53068 13.1538M9.63714 15.9655C10.3514 16.3922 11.1682 16.6168 12.0002 16.6154C12.749 16.6162 13.4866 16.4344 14.1493 16.0859C14.812 15.7373 15.3797 15.2325 15.8033 14.6151M14.0042 19.5877C15.072 19.3054 16.0682 18.801 16.9277 18.1074C17.7872 17.4139 18.4907 16.5467 18.9922 15.5627C19.4937 14.5786 19.7819 13.4998 19.8379 12.3968C19.8939 11.2938 19.7166 10.1913 19.3174 9.16151M17.1796 6.10613C15.7488 4.84585 13.9069 4.15158 12.0002 4.15382C10.0945 4.15064 8.25339 4.84434 6.8236 6.10428M4.71898 9.07013C4.29776 10.1172 4.10731 11.2428 4.16062 12.3702C4.21393 13.4976 4.50975 14.6002 5.02791 15.6029C5.54606 16.6056 6.27437 17.4847 7.16315 18.1803C8.05193 18.876 9.08027 19.3717 10.1781 19.6338" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M8.23731 22.4216C9.41239 22.8462 10.6789 23.0769 11.9998 23.0769C17.0952 23.0769 21.3875 19.6366 22.6798 14.9511M6.19547 2.5634C4.58338 3.55458 3.25226 4.94244 2.3292 6.59448C1.40614 8.24652 0.921948 10.1076 0.922853 12C0.922853 15.2723 2.34162 18.2132 4.59855 20.2412M22.9373 10.236C22.0918 4.95602 17.517 0.923096 11.9998 0.923096C11.3629 0.923096 10.7379 0.976634 10.1305 1.08002" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-</g>
-<defs>
-<clipPath id="clip0_718_1014">
-<rect width="24" height="24"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/question-circle.svg b/apps/admin-x-design-system/src/assets/icons/question-circle.svg
deleted file mode 100644
index 046e507694f..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/question-circle.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-0.75 -0.75 24 24" height="24" width="24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.4375 8.4375a2.8125 2.8125 0 1 1 3.75 2.6521875 1.40625 1.40625 0 0 0 -0.9375 1.3265625v0.943125" stroke-width="1.5"></path><path stroke="currentColor" d="M11.25 16.875a0.3515625 0.3515625 0 0 1 0 -0.703125" stroke-width="1.5"></path><path stroke="currentColor" d="M11.25 16.875a0.3515625 0.3515625 0 0 0 0 -0.703125" stroke-width="1.5"></path><path stroke="currentColor" stroke-miterlimit="10" d="M11.25 21.796875c5.8246875000000005 0 10.546875 -4.7221874999999995 10.546875 -10.546875S17.0746875 0.703125 11.25 0.703125 0.703125 5.4253124999999995 0.703125 11.25 5.4253124999999995 21.796875 11.25 21.796875Z" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/quote.svg b/apps/admin-x-design-system/src/assets/icons/quote.svg
deleted file mode 100644
index ac43810d30e..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/quote.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-quote-icon lucide-quote"><path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/></svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/recepients.svg b/apps/admin-x-design-system/src/assets/icons/recepients.svg
deleted file mode 100644
index 75919b8af28..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/recepients.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M21.796875 14.765625v5.625a1.40625 1.40625 0 0 1 -1.40625 1.40625h-8.4375a1.40625 1.40625 0 0 1 -1.40625 -1.40625v-5.625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M21.796875 14.765625a1.40625 1.40625 0 0 0 -1.40625 -1.40625h-8.4375a1.40625 1.40625 0 0 0 -1.40625 1.40625L15.4265625 17.8125a1.40625 1.40625 0 0 0 1.490625 0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M3.1640625 3.8671875a3.1640625 3.1640625 0 1 0 6.328125 0 3.1640625 3.1640625 0 1 0 -6.328125 0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M13.0078125 3.1640625a2.4609375 2.4609375 0 1 0 4.921875 0 2.4609375 2.4609375 0 1 0 -4.921875 0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M10.73625 10.542187499999999A5.6728125 5.6728125 0 0 0 0.703125 13.359375" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M19.6875 10.546875a4.20375 4.20375 0 0 0 -7.5346875 -2.578125" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/reload.svg b/apps/admin-x-design-system/src/assets/icons/reload.svg
deleted file mode 100644
index 5afa3c7227f..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/reload.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="Button-Refresh-Arrows--Streamline-Ultimate.svg" height="24" width="24"><desc>Button Refresh Arrows Streamline Icon: https://streamlinehq.com</desc><path d="m5.25 14.248 0 4.5 -4.5 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m18.75 9.748 0 -4.5 4.5 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M19.032 5.245A9.752 9.752 0 0 1 8.246 21" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M4.967 18.751A9.753 9.753 0 0 1 15.754 3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/send.svg b/apps/admin-x-design-system/src/assets/icons/send.svg
deleted file mode 100644
index 79e63994fe3..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/send.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send-icon lucide-send"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/share.svg b/apps/admin-x-design-system/src/assets/icons/share.svg
deleted file mode 100644
index 6feac81448c..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/share.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Share-1--Streamline-Streamline--3.0.svg" height="24" width="24"><desc>Share 1 Streamline Icon: https://streamlinehq.com</desc><defs></defs><title>share-1</title><path d="M17.25 8.25h1.5a1.5 1.5 0 0 1 1.5 1.5v12a1.5 1.5 0 0 1 -1.5 1.5H5.25a1.5 1.5 0 0 1 -1.5 -1.5v-12a1.5 1.5 0 0 1 1.5 -1.5h1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m12 0.75 0 10.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M8.25 4.5 12 0.75l3.75 3.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/single-user-block.svg b/apps/admin-x-design-system/src/assets/icons/single-user-block.svg
deleted file mode 100644
index 218bac9236e..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/single-user-block.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5"><path d="M.75,17.251a6.753,6.753,0,0,1,9.4-6.208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3.375 4.876 A4.125 4.125 0 1 0 11.625 4.876 A4.125 4.125 0 1 0 3.375 4.876 Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.250 17.249 A6.000 6.000 0 1 0 23.250 17.249 A6.000 6.000 0 1 0 11.250 17.249 Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.008 21.49L21.492 13.006" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/single-user-fill.svg b/apps/admin-x-design-system/src/assets/icons/single-user-fill.svg
deleted file mode 100644
index f84961fa7d2..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/single-user-fill.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" height="16" width="16"><g id="user-single-neutral--close-geometric-human-person-single-up-user"><path id="Union" fill="currentColor" fill-rule="evenodd" d="M10.5 3.5C10.5 5.433 8.93295 7 6.99995 7C5.06695 7 3.49995 5.433 3.49995 3.5C3.49995 1.567 5.06695 0 6.99995 0C8.93295 0 10.5 1.567 10.5 3.5ZM0.320435 13.4C1.21244 10.56 3.86563 8.50003 6.99996 8.50003C10.1343 8.50003 12.7875 10.56 13.6795 13.4C13.7751 13.7044 13.537 14 13.2179 14H0.781996C0.462883 14 0.224811 13.7044 0.320435 13.4Z" clip-rule="evenodd"></path></g></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/sparkle.svg b/apps/admin-x-design-system/src/assets/icons/sparkle.svg
deleted file mode 100644
index 458b8ec1864..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/sparkle.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles-icon lucide-sparkles"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/square.svg b/apps/admin-x-design-system/src/assets/icons/square.svg
deleted file mode 100644
index f569b74031a..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/square.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M22 2H2V22H22V2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/squircle-fill.svg b/apps/admin-x-design-system/src/assets/icons/squircle-fill.svg
deleted file mode 100644
index 5586636f3cd..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/squircle-fill.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M23 17C23 20.3137 20.3137 23 17 23H7C3.68629 23 1 20.3137 1 17V7C1 3.68629 3.68629 1 7 1H17C20.3137 1 23 3.68629 23 7V17Z" fill="currentColor"/>
-</svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/squircle.svg b/apps/admin-x-design-system/src/assets/icons/squircle.svg
deleted file mode 100644
index a56958d145f..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/squircle.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M17 2H7C4.23858 2 2 4.23858 2 7V17C2 19.7614 4.23858 22 7 22H17C19.7614 22 22 19.7614 22 17V7C22 4.23858 19.7614 2 17 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/stripe-verified.svg b/apps/admin-x-design-system/src/assets/icons/stripe-verified.svg
deleted file mode 100644
index af8813d1d86..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/stripe-verified.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="154" height="14" viewBox="0 0 154 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M69.79 4.12L67.1 11H65.66L62.96 4.12H64.67L66.38 8.75L68.09 4.12H69.79ZM70.57 11V4.12H74.91V5.48H72.24V6.85H74.52V8.16H72.24V9.64H74.99V11H70.57ZM77.91 5.44V7.26H78.67C79.24 7.26 79.65 6.87 79.65 6.35C79.65 5.81 79.24 5.44 78.67 5.44H77.91ZM76.28 11V4.12H78.89C80.31 4.12 81.32 5.04 81.32 6.35C81.32 7.24 80.85 7.96 80.06 8.34L81.59 11H79.81L78.47 8.57H77.91V11H76.28ZM82.68 11V4.12H84.35V11H82.68ZM85.99 11V4.12H90.33V5.48H87.66V7.11H89.94V8.47H87.66V11H85.99ZM91.46 11V4.12H93.13V11H91.46ZM94.77 11V4.12H99.11V5.48H96.44V6.85H98.72V8.16H96.44V9.64H99.19V11H94.77ZM100.48 11V4.12H103.21C105.2 4.12 106.61 5.55 106.61 7.56C106.61 9.57 105.2 11 103.21 11H100.48ZM102.15 5.48V9.64H103.13C104.18 9.64 104.91 8.79 104.91 7.56C104.91 6.33 104.18 5.48 103.13 5.48H102.15ZM110.32 11V4.12H112.97C114.41 4.12 115.43 5.06 115.43 6.39C115.43 7.72 114.41 8.64 112.97 8.64H111.95V11H110.32ZM111.95 5.44V7.33H112.75C113.34 7.33 113.77 6.94 113.77 6.39C113.77 5.82 113.34 5.44 112.75 5.44H111.95ZM115.07 11L117.77 4.12H119.21L121.9 11H120.28L119.75 9.58H117.22L116.7 11H115.07ZM118.49 6.13L117.68 8.34H119.29L118.49 6.13ZM124.31 5.44V7.26H125.07C125.64 7.26 126.05 6.87 126.05 6.35C126.05 5.81 125.64 5.44 125.07 5.44H124.31ZM122.68 11V4.12H125.29C126.71 4.12 127.72 5.04 127.72 6.35C127.72 7.24 127.25 7.96 126.46 8.34L127.99 11H126.21L124.87 8.57H124.31V11H122.68ZM130.32 11V5.48H128.33V4.12H133.96V5.48H131.98V11H130.32ZM135.02 11V4.12H136.46L139.56 8.36V4.12H141.11V11H139.67L136.58 6.76V11H135.02ZM142.75 11V4.12H147.09V5.48H144.42V6.85H146.7V8.16H144.42V9.64H147.17V11H142.75ZM150.09 5.44V7.26H150.85C151.42 7.26 151.83 6.87 151.83 6.35C151.83 5.81 151.42 5.44 150.85 5.44H150.09ZM148.46 11V4.12H151.07C152.49 4.12 153.5 5.04 153.5 6.35C153.5 7.24 153.03 7.96 152.24 8.34L153.77 11H151.99L150.65 8.57H150.09V11H148.46ZM41 3.068L55 0V10.935L41 14V3.068ZM46.323 9.537C46.4682 9.67288 46.6599 9.74814 46.8588 9.7474C47.0577 9.74665 47.2488 9.66996 47.393 9.533L51.207 5.869C51.2774 5.80109 51.3334 5.7197 51.3716 5.62966C51.4099 5.53963 51.4296 5.44282 51.4296 5.345C51.4296 5.24718 51.4099 5.15037 51.3716 5.06034C51.3334 4.9703 51.2774 4.88891 51.207 4.821C51.0622 4.68156 50.869 4.60365 50.668 4.60365C50.467 4.60365 50.2738 4.68156 50.129 4.821L46.859 7.95L45.873 7.05C45.7282 6.91056 45.535 6.83265 45.334 6.83265C45.133 6.83265 44.9398 6.91056 44.795 7.05C44.7243 7.11776 44.6681 7.19911 44.6297 7.28916C44.5913 7.37921 44.5715 7.4761 44.5715 7.574C44.5715 7.6719 44.5913 7.76879 44.6297 7.85884C44.6681 7.94889 44.7243 8.03024 44.795 8.098L46.323 9.537ZM32.97 8.07H28.542C28.642 9.163 29.419 9.485 30.301 9.485C31.2 9.485 31.907 9.291 32.524 8.969V10.849C31.909 11.2 31.097 11.454 30.016 11.454C27.812 11.454 26.268 10.031 26.268 7.217C26.268 4.841 27.578 2.954 29.73 2.954C31.88 2.954 33 4.84 33 7.23C33 7.455 32.98 7.944 32.97 8.07ZM29.716 4.856C29.15 4.856 28.521 5.296 28.521 6.348H30.861C30.861 5.298 30.271 4.856 29.716 4.856ZM22.679 11.454C21.888 11.454 21.404 11.109 21.079 10.864L21.074 13.504L18.812 14L18.811 3.11H20.803L20.921 3.686C21.1536 3.45305 21.43 3.26844 21.7343 3.14281C22.0386 3.01718 22.3648 2.95301 22.694 2.954C24.282 2.954 25.779 4.43 25.779 7.146C25.779 10.111 24.299 11.454 22.679 11.454ZM22.153 5.02C21.633 5.02 21.308 5.216 21.073 5.483L21.086 8.95C21.305 9.195 21.622 9.393 22.153 9.393C22.989 9.393 23.55 8.453 23.55 7.197C23.55 5.977 22.98 5.02 22.153 5.02ZM15.615 3.11H17.886V11.287H15.616V3.109L15.615 3.11ZM15.615 0.498L17.885 0V1.9L15.615 2.398V0.498ZM13.269 5.743V11.287H11.007V3.109H12.963L13.106 3.799C13.635 2.795 14.693 2.999 14.994 3.109V5.254C14.706 5.158 13.804 5.019 13.269 5.743ZM8.49398 8.418C8.49398 9.793 9.92098 9.365 10.211 9.245V11.145C9.90998 11.315 9.36298 11.454 8.62298 11.454C7.27998 11.454 6.27298 10.434 6.27298 9.053L6.28298 1.567L8.49198 1.083L8.49398 3.109H10.212V5.099H8.49398V8.418ZM5.74798 8.816C5.74798 10.496 4.45198 11.454 2.56998 11.454C1.78998 11.454 0.936976 11.298 0.0959759 10.924V8.697C0.855976 9.123 1.82298 9.442 2.57298 9.442C3.07698 9.442 3.44098 9.302 3.44098 8.872C3.44098 7.757 0.000976562 8.177 0.000976562 5.594C0.000976562 3.942 1.22498 2.954 3.05998 2.954C3.80998 2.954 4.55898 3.073 5.30798 3.381V5.578C4.61998 5.195 3.74598 4.978 3.05798 4.978C2.58398 4.978 2.28898 5.118 2.28898 5.483C2.28898 6.533 5.74798 6.034 5.74798 8.816Z" fill="#625BF6"/>
-</svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/substract.svg b/apps/admin-x-design-system/src/assets/icons/substract.svg
deleted file mode 100644
index 696f878ce69..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/substract.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="-0.75 -0.75 20 20" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><desc></desc><path d="m0.578125 9.279291666666667 17.34375 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/success-fill.svg b/apps/admin-x-design-system/src/assets/icons/success-fill.svg
deleted file mode 100644
index 9028cd1028b..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/success-fill.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" id="Check-Circle-1--Streamline-Ultimate"><desc>Check Circle 1 Streamline Icon: https://streamlinehq.com</desc><path d="M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm6.93 8.2 -6.85 9.29a1 1 0 0 1 -1.43 0.19l-4.89 -3.91a1 1 0 0 1 -0.15 -1.41A1 1 0 0 1 7 12.21l4.08 3.26L17.32 7a1 1 0 0 1 1.39 -0.21 1 1 0 0 1 0.22 1.41Z" fill="currentcolor" stroke-width="1"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/tags-block.svg b/apps/admin-x-design-system/src/assets/icons/tags-block.svg
deleted file mode 100644
index febbc688e7d..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/tags-block.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-0.75 -0.75 24 24" height="24" width="24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.437481250000001 17.98875c-0.26370937499999997 0.263625 -0.621328125 0.41175 -0.99421875 0.41175 -0.37288125 0 -0.730509375 -0.148125 -0.99421875 -0.41175l-5.042812499999999 -5.041875c-0.13067812499999998 -0.13059375 -0.23433749999999998 -0.28565625 -0.3050625 -0.45628125 -0.070734375 -0.17071875 -0.10713750000000001 -0.35362499999999997 -0.10713750000000001 -0.53840625 0 -0.1846875 0.036403125 -0.3676875 0.10713750000000001 -0.5383125000000001 0.070725 -0.17071875 0.174384375 -0.32578124999999997 0.3050625 -0.45637500000000003L11.25 1.11376875c0.13059375 -0.13055624999999998 0.28575 -0.2341059375 0.45637500000000003 -0.304723125 0.17071875 -0.07061625 0.35362499999999997 -0.10692 0.5383125000000001 -0.106835625h5.041875c0.3729375 0 0.73059375 0.1481578125 0.9943124999999999 0.4118775 0.26371875 0.263728125 0.4119375 0.6214125 0.4119375 0.9943687499999999v5.042812499999999c-0.00009375 0.372703125 -0.148125 0.730125 -0.4115625 0.99375" stroke-width="1.5"></path><path stroke="currentColor" d="M15.1771875 4.56939375c-0.19415625 0 -0.3515625 -0.15739687500000002 -0.3515625 -0.3515625 0 -0.19415625 0.15740625 -0.3515625 0.3515625 -0.3515625" stroke-width="1.5"></path><path stroke="currentColor" d="M15.1771875 4.56939375c0.19415625 0 0.3515625 -0.15739687500000002 0.3515625 -0.3515625 0 -0.19415625 -0.15740625 -0.3515625 -0.3515625 -0.3515625" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M15.8803125 21.795937499999997c3.10659375 0 5.625 -2.51840625 5.625 -5.625s-2.51840625 -5.625 -5.625 -5.625 -5.625 2.51840625 -5.625 5.625 2.51840625 5.625 5.625 5.625Z" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m19.858124999999998 12.193125 -7.95375 7.9546874999999995" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/tags-check.svg b/apps/admin-x-design-system/src/assets/icons/tags-check.svg
deleted file mode 100644
index f82f8764682..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/tags-check.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-0.75 -0.75 24 24" height="24" width="24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.437481250000001 17.98875c-0.26370937499999997 0.263625 -0.621328125 0.41175 -0.99421875 0.41175 -0.37288125 0 -0.730509375 -0.148125 -0.99421875 -0.41175l-5.042812499999999 -5.041875c-0.13067812499999998 -0.13059375 -0.23433749999999998 -0.28565625 -0.3050625 -0.45628125 -0.070734375 -0.17071875 -0.10713750000000001 -0.35362499999999997 -0.10713750000000001 -0.53840625 0 -0.1846875 0.036403125 -0.3676875 0.10713750000000001 -0.5383125000000001 0.070725 -0.17071875 0.174384375 -0.32578124999999997 0.3050625 -0.45637500000000003L11.25 1.11376875c0.13059375 -0.13055624999999998 0.28575 -0.2341059375 0.45637500000000003 -0.304723125 0.17071875 -0.07061625 0.35362499999999997 -0.10692 0.5383125000000001 -0.106835625h5.041875c0.3729375 0 0.73059375 0.1481578125 0.9943124999999999 0.4118775 0.26371875 0.263728125 0.4119375 0.6214125 0.4119375 0.9943687499999999v5.042812499999999c-0.00009375 0.372703125 -0.148125 0.730125 -0.4115625 0.99375" stroke-width="1.5"></path><path stroke="currentColor" d="M15.1771875 4.56939375c-0.19415625 0 -0.3515625 -0.15739687500000002 -0.3515625 -0.3515625 0 -0.19415625 0.15740625 -0.3515625 0.3515625 -0.3515625" stroke-width="1.5"></path><path stroke="currentColor" d="M15.1771875 4.56939375c0.19415625 0 0.3515625 -0.15739687500000002 0.3515625 -0.3515625 0 -0.19415625 -0.15740625 -0.3515625 -0.3515625 -0.3515625" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m18.38709375 14.53125 -2.7234374999999997 3.631875c-0.06046875 0.08053125 -0.13753125 0.14709375000000002 -0.22593749999999999 0.19528125000000002 -0.0885 0.0481875 -0.1861875 0.07678125 -0.28668750000000004 0.08390625 -0.10040625 0.007031249999999999 -0.20118750000000002 -0.0075 -0.29559375000000004 -0.04265625 -0.0943125 -0.035250000000000004 -0.18 -0.090375 -0.25115625 -0.16153125000000002l-1.40625 -1.40625" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M15.8803125 21.795937499999997c3.10659375 0 5.625 -2.51840625 5.625 -5.625s-2.51840625 -5.625 -5.625 -5.625 -5.625 2.51840625 -5.625 5.625 2.51840625 5.625 5.625 5.625Z" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/text-bold.svg b/apps/admin-x-design-system/src/assets/icons/text-bold.svg
deleted file mode 100644
index 3f1b03f6e16..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/text-bold.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M5 2V12M5 12H13C14.3261 12 15.5979 11.4732 16.5355 10.5355C17.4732 9.59785 18 8.32608 18 7C18 5.67392 17.4732 4.40215 16.5355 3.46447C15.5979 2.52678 14.3261 2 13 2H3M5 12V22M5 12H14C17.314 12 20 14.238 20 17C20 19.762 17.314 22 14 22H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/text-regular.svg b/apps/admin-x-design-system/src/assets/icons/text-regular.svg
deleted file mode 100644
index 57efd12436b..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/text-regular.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M3 2H20.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M11.75 2V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/text-underline.svg b/apps/admin-x-design-system/src/assets/icons/text-underline.svg
deleted file mode 100644
index e8fa37dbd12..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/text-underline.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M2 22H22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M5.33331 2V10.8889C5.33331 14.5708 8.31808 17.5556 12 17.5556C15.6819 17.5556 18.6666 14.5708 18.6666 10.8889V2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/textfield.svg b/apps/admin-x-design-system/src/assets/icons/textfield.svg
deleted file mode 100644
index 08f34068013..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/textfield.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.75 -0.75 24 24" height="24" width="24"><defs></defs><title>type-cursor</title><path d="M2.109375 6.32625h18.28125s1.40625 0 1.40625 1.40625v7.03125s0 1.40625 -1.40625 1.40625H2.109375s-1.40625 0 -1.40625 -1.40625v-7.03125s0 -1.40625 1.40625 -1.40625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m16.171875 17.57625 0 -12.65625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M11.953125 21.795a4.21875 4.21875 0 0 0 4.21875 -4.21875 4.21875 4.21875 0 0 0 4.21875 4.21875" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M11.953125 0.70125a4.21875 4.21875 0 0 1 4.21875 4.21875 4.21875 4.21875 0 0 1 4.21875 -4.21875" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/thumbs-down.svg b/apps/admin-x-design-system/src/assets/icons/thumbs-down.svg
deleted file mode 100644
index 20450e318ea..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/thumbs-down.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M22 14.429h-3.445a1.905 1.905 0 0 0-1.543.794l-4.617 7.095a1.622 1.622 0 0 1-2.783-.233 1.597 1.597 0 0 1-.103-1.1l.833-3.142a1.867 1.867 0 0 0-.993-2.164 1.911 1.911 0 0 0-.833-.193h-4.63A1.881 1.881 0 0 1 2.08 13.06v-.011l1.8-6.008v-.016c.733-2.36 1.992-3.97 4.47-3.97 5.933 0 5.594-.684 12.523 2.818.377.188.752.379 1.126.572V16.5"/>
-</svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/thumbs-up.svg b/apps/admin-x-design-system/src/assets/icons/thumbs-up.svg
deleted file mode 100644
index de4fdc04bef..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/thumbs-up.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.001 10.571h3.443a1.907 1.907 0 0 0 1.543-.794l4.618-7.095a1.62 1.62 0 0 1 1.992-.537 1.598 1.598 0 0 1 .892 1.871l-.832 3.14a1.867 1.867 0 0 0 .993 2.165c.259.127.544.193.832.194h4.63a1.883 1.883 0 0 1 1.807 2.426v.011l-1.8 6.008v.015c-.733 2.36-1.993 3.97-4.47 3.97-5.933 0-5.593.684-12.524-2.818-.375-.188-.75-.38-1.125-.57v-9.89"/>
-</svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/time-back.svg b/apps/admin-x-design-system/src/assets/icons/time-back.svg
deleted file mode 100644
index d03a7bc033d..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/time-back.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.75 -0.75 24 24" height="24" width="24"><defs></defs><title>time-reverse</title><path d="m8.5903125 16.5028125 2.8115625 -2.8125 0.0009375 -4.6875" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m13.273125 6.4246875 -3.75 -3.046875 4.21875 -2.578125" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M3.4753125 17.4375a9.2221875 9.2221875 0 1 0 6.1068750000000005 -14.0296875" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M6.42375 4.6284375a9.346875 9.346875 0 0 0 -2.8528125 2.7525" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M2.19 10.78125a9.5728125 9.5728125 0 0 0 0.12187500000000001 3.9628125" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/trash.svg b/apps/admin-x-design-system/src/assets/icons/trash.svg
deleted file mode 100644
index 16de1465bbf..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/trash.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M18.0576 22.3846H5.94219C5.48317 22.3846 5.04294 22.2023 4.71836 21.8777C4.39377 21.5531 4.21143 21.1129 4.21143 20.6538V5.07692H19.7883V20.6538C19.7883 21.1129 19.606 21.5531 19.2814 21.8777C18.9568 22.2023 18.5166 22.3846 18.0576 22.3846Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.40381 17.1923V10.2692"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14.5962 17.1923V10.2692"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M0.75 5.07692H23.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M14.5962 1.61539H9.40386C8.94484 1.61539 8.50461 1.79774 8.18003 2.12232C7.85544 2.4469 7.6731 2.88713 7.6731 3.34616V5.07693H16.3269V3.34616C16.3269 2.88713 16.1446 2.4469 15.82 2.12232C15.4954 1.79774 15.0552 1.61539 14.5962 1.61539Z"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/typography.svg b/apps/admin-x-design-system/src/assets/icons/typography.svg
deleted file mode 100644
index 60d79492c60..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/typography.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="-0.75 -0.75 20 20" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><desc>Typography</desc><path d="m0.578125 9.827354166666668 8.09375 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m12.140625 13.296104166666666 5.78125 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M12.140625 16.764854166666666V10.40625a2.890625 2.890625 0 0 1 5.78125 0v6.359375" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M0.578125 16.764854166666666V5.78125a4.046875 4.046875 0 0 1 8.09375 0v10.984375" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
diff --git a/apps/admin-x-design-system/src/assets/icons/unsplash-logo.svg b/apps/admin-x-design-system/src/assets/icons/unsplash-logo.svg
deleted file mode 100644
index 805b50f3e5d..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/unsplash-logo.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.43 122.41">
-    <path d="M83.86 54.15v34.13H38.57V54.15H0v68.26h122.43V54.15H83.86zM38.57 0h45.3v34.13h-45.3z"/>
-</svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/upload.svg b/apps/admin-x-design-system/src/assets/icons/upload.svg
deleted file mode 100644
index 31a3dd3ed08..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/upload.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"><defs></defs><title>upload-bottom</title><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.001 15.75v-12"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m16.501 8.25-4.5-4.5-4.5 4.5"></path><path d="M23.251 15.75v1.5a3 3 0 0 1-3 3h-16.5a3 3 0 0 1-3-3v-1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/user-add.svg b/apps/admin-x-design-system/src/assets/icons/user-add.svg
deleted file mode 100644
index b55adb4d150..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/user-add.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5"><path d="M11.250 17.250 A6.000 6.000 0 1 0 23.250 17.250 A6.000 6.000 0 1 0 11.250 17.250 Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17.25 14.25L17.25 20.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.25 17.25L20.25 17.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M.75,17.25a6.753,6.753,0,0,1,9.4-6.208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3.375 4.875 A4.125 4.125 0 1 0 11.625 4.875 A4.125 4.125 0 1 0 3.375 4.875 Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/user-fill.svg b/apps/admin-x-design-system/src/assets/icons/user-fill.svg
deleted file mode 100644
index 7f9c2270b61..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/user-fill.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Single-Neutral-Actions--Streamline-Ultimate.svg" height="24" width="24"><desc>Single Neutral Actions Streamline Icon: https://streamlinehq.com</desc><g><path d="M5.9611 6.2789C5.9611 10.9277 10.9935 13.8332 15.0195 11.5088C16.8879 10.43 18.0389 8.4364 18.0389 6.2789C18.0389 1.6302 13.0065 -1.2753 8.9805 1.0491C7.1121 2.1278 5.9611 4.1214 5.9611 6.2789" fill="currentColor" stroke-width="1"></path><path d="M12 13.5892C6.7337 13.589 2.4649 17.8581 2.4649 23.1243C2.4649 23.4754 2.7495 23.76 3.1005 23.76H20.8995C21.2505 23.76 21.5351 23.4754 21.5351 23.1243C21.5351 17.8581 17.2663 13.589 12 13.5892Z" fill="currentColor" stroke-width="1"></path></g></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/user-page.svg b/apps/admin-x-design-system/src/assets/icons/user-page.svg
deleted file mode 100644
index bed33abd336..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/user-page.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M0.703125 14.765625a7.03125 7.03125 0 1 0 14.0625 0 7.03125 7.03125 0 1 0 -14.0625 0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M4.921875 13.359375a2.8125 2.8125 0 1 0 5.625 0 2.8125 2.8125 0 1 0 -5.625 0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M12.3159375 20.0990625a5.1206249999999995 5.1206249999999995 0 0 0 -9.163124999999999 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M3.515625 4.921875v-2.8125a1.40625 1.40625 0 0 1 1.40625 -1.40625h9.9646875a1.40625 1.40625 0 0 1 0.99375 0.4115625l5.505 5.505a1.40625 1.40625 0 0 1 0.4115625 0.99375V20.390625a1.40625 1.40625 0 0 1 -1.40625 1.40625h-4.21875" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M21.796875 7.734375h-5.625a1.40625 1.40625 0 0 1 -1.40625 -1.40625v-5.625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/user-pen.svg b/apps/admin-x-design-system/src/assets/icons/user-pen.svg
deleted file mode 100644
index afd7766f1b8..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/user-pen.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-pen-icon lucide-user-pen"><path d="M11.5 15H7a4 4 0 0 0-4 4v2"/><path d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/><circle cx="10" cy="7" r="4"/></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/user.svg b/apps/admin-x-design-system/src/assets/icons/user.svg
deleted file mode 100644
index e954801d946..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/user.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Single-Neutral--Streamline-Streamline--3.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><desc>Single Neutral Streamline Icon: https://streamlinehq.com</desc><defs></defs><title>single-neutral</title><path d="M6.75 6a5.25 5.25 0 1 0 10.5 0 5.25 5.25 0 1 0 -10.5 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M2.25 23.25a9.75 9.75 0 0 1 19.5 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/warning.svg b/apps/admin-x-design-system/src/assets/icons/warning.svg
deleted file mode 100644
index d8092290f23..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/warning.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.313 2.27521C13.1833 2.04051 12.9931 1.84486 12.7622 1.70861C12.5313 1.57235 12.2681 1.50049 12 1.50049C11.7318 1.50049 11.4686 1.57235 11.2377 1.70861C11.0068 1.84486 10.8166 2.04051 10.687 2.27521L0.936968 20.2752C0.810886 20.5036 0.746538 20.7609 0.750276 21.0217C0.754014 21.2825 0.825708 21.5379 0.958282 21.7625C1.09086 21.9872 1.27972 22.1734 1.50625 22.3028C1.73277 22.4321 1.98911 22.5002 2.24997 22.5002H21.75C22.0108 22.5002 22.2672 22.4321 22.4937 22.3028C22.7202 22.1734 22.9091 21.9872 23.0417 21.7625C23.1742 21.5379 23.2459 21.2825 23.2497 21.0217C23.2534 20.7609 23.189 20.5036 23.063 20.2752L13.313 2.27521Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15V8.25"></path><path stroke="currentColor" stroke-width="1.5" d="M12 18.75C11.7929 18.75 11.625 18.5821 11.625 18.375C11.625 18.1679 11.7929 18 12 18"></path><path stroke="currentColor" stroke-width="1.5" d="M12 18.75C12.2071 18.75 12.375 18.5821 12.375 18.375C12.375 18.1679 12.2071 18 12 18"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/world-clock.svg b/apps/admin-x-design-system/src/assets/icons/world-clock.svg
deleted file mode 100644
index 5a5374e86ff..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/world-clock.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="-0.75 -0.75 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M10.546875 16.171875a5.625 5.625 0 1 0 11.25 0 5.625 5.625 0 1 0 -11.25 0Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m18.658125000000002 16.171875 -2.48625 0 0 -2.4853125" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M9.838125 21.703125a10.5478125 10.5478125 0 1 1 11.866875 -11.85375" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M8.7084375 21.4884375C7.2825 19.3959375 6.328125 15.593437499999999 6.328125 11.25S7.2825 3.105 8.7084375 1.0115625" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m0.7265625 10.546875 8.9278125 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M2.8115625 4.921875 19.6875 4.921875" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m1.92 16.171875 5.814375 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M13.7915625 1.0115625a15.9215625 15.9215625 0 0 1 2.15625 6.69" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/zapier-logo.svg b/apps/admin-x-design-system/src/assets/icons/zapier-logo.svg
deleted file mode 100644
index 8e2aa72f6ef..00000000000
--- a/apps/admin-x-design-system/src/assets/icons/zapier-logo.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="42" height="37" viewBox="0 0 80 37" xmlns="http://www.w3.org/2000/svg" class="css-1oudp6l-ZapierLogo--red500">
-    <title>zapier-logo</title>
-    <path fill="#ff4a00" fill-rule="evenodd" clip-rule="evenodd" d="M53.934 4.185h-2.94l2.079-2.073A5.053 5.053 0 0 0 51.886.928l-2.078 2.073V.07a5.129 5.129 0 0 0-.836-.07h-.006c-.285 0-.564.024-.836.07V3L46.052.929c-.23.163-.444.344-.642.543h-.002c-.198.198-.38.412-.543.641l2.078 2.073h-2.938s-.07.55-.07.835v.003c0 .284.024.564.07.836h2.938l-2.078 2.07a5.05 5.05 0 0 0 1.187 1.183l2.078-2.072v2.93c.272.046.55.07.835.07h.007c.285 0 .565-.024.836-.07v-2.93l2.078 2.072a5.098 5.098 0 0 0 1.186-1.184L50.995 5.86h2.94c.045-.272.07-.55.07-.834v-.007a5.08 5.08 0 0 0-.07-.833ZM58.85 25.53c-.84-.786-1.279-2.026-1.32-3.72h10.585c.02-.222.04-.488.06-.802.02-.312.031-.61.031-.892a9.263 9.263 0 0 0-.425-2.859c-.283-.877-.698-1.633-1.243-2.268a5.736 5.736 0 0 0-2.032-1.497c-.809-.364-1.75-.545-2.82-.545-1.254 0-2.341.217-3.261.65a6.532 6.532 0 0 0-2.29 1.755c-.606.736-1.056 1.603-1.349 2.6-.293 1-.44 2.073-.44 3.222 0 1.17.152 2.244.455 3.222a6.59 6.59 0 0 0 1.44 2.541c.657.716 1.492 1.27 2.503 1.664 1.01.393 2.223.59 3.64.59.97 0 1.854-.071 2.653-.212a10.191 10.191 0 0 0 2.198-.635 7.18 7.18 0 0 0-.181-1.286 4.54 4.54 0 0 0-.395-1.104 11.178 11.178 0 0 1-4.094.757c-1.638 0-2.876-.394-3.715-1.18ZM30.51 13.31a6.378 6.378 0 0 1 1.273-.121 7.115 7.115 0 0 1 1.274.12c.02.042.045.167.075.38.03.21.06.438.091.68.03.242.06.474.091.696.03.222.045.363.045.423.203-.323.445-.635.728-.938a4.85 4.85 0 0 1 1.016-.816 5.298 5.298 0 0 1 1.335-.575 6.016 6.016 0 0 1 1.653-.212c.91 0 1.753.152 2.532.454a5.068 5.068 0 0 1 2.001 1.406c.556.636.99 1.442 1.305 2.42.313.979.47 2.133.47 3.464 0 2.662-.723 4.744-2.169 6.246-1.446 1.503-3.492 2.254-6.141 2.254-.445 0-.9-.03-1.365-.09a8.095 8.095 0 0 1-1.213-.243v7.109a10.389 10.389 0 0 1-1.517.12c-.222 0-.47-.01-.742-.03-.273-.02-.52-.05-.743-.09V13.31Zm-6.218 5.294c0-1.19-.304-2.017-.91-2.481-.607-.463-1.486-.695-2.639-.695-.708 0-1.37.055-1.986.166-.617.111-1.219.257-1.804.438-.385-.665-.576-1.461-.576-2.39a14.015 14.015 0 0 1 2.274-.514 16.555 16.555 0 0 1 2.396-.181c2.021 0 3.558.46 4.61 1.376 1.05.918 1.576 2.385 1.576 4.401v9.71a47.6 47.6 0 0 1-2.577.5 18.55 18.55 0 0 1-3.094.256c-.99 0-1.885-.09-2.684-.272-.799-.181-1.476-.473-2.032-.877a4.061 4.061 0 0 1-1.289-1.543c-.303-.625-.454-1.38-.454-2.269 0-.866.176-1.628.53-2.283a4.77 4.77 0 0 1 1.44-1.634 6.427 6.427 0 0 1 2.093-.967 9.538 9.538 0 0 1 2.487-.318c.647 0 1.178.015 1.592.045.415.031.763.066 1.047.106v-.574Zm-23.625 9.8L8.855 15.7H1.637a7.356 7.356 0 0 1-.09-1.21c0-.424.03-.818.09-1.18h11.677l.15.393-8.248 12.735h7.734c.06.404.09.817.09 1.24 0 .404-.03.787-.09 1.15H.819l-.152-.424Zm22.472-6.987c.466.04.85.08 1.153.12v4.931a8.642 8.642 0 0 1-1.32.227 14.05 14.05 0 0 1-1.44.076c-.364 0-.748-.02-1.152-.06a2.9 2.9 0 0 1-1.107-.333 2.293 2.293 0 0 1-.834-.787c-.223-.342-.334-.817-.334-1.422 0-.947.328-1.653.986-2.117.656-.464 1.612-.696 2.866-.696.323 0 .717.02 1.182.061Zm11.555 5.172a5.87 5.87 0 0 1-1.183-.302v-6.292c0-.767.111-1.426.334-1.981.223-.555.515-1.014.88-1.377a3.58 3.58 0 0 1 1.243-.816c.464-.182.95-.273 1.455-.273 1.355 0 2.33.475 2.927 1.422.596.948.895 2.229.895 3.842 0 1.008-.127 1.88-.38 2.616-.253.736-.596 1.346-1.03 1.83a3.965 3.965 0 0 1-1.562 1.074 5.558 5.558 0 0 1-2.002.348c-.647 0-1.173-.03-1.577-.09Zm13.435-10.92h-1.972a3.793 3.793 0 0 1-.09-.56 6.432 6.432 0 0 1 0-1.24c.02-.211.05-.398.09-.56h4.914v15.52c-.223.039-.47.069-.743.09-.273.019-.521.03-.743.03-.203 0-.44-.011-.713-.03a7.367 7.367 0 0 1-.743-.09v-13.16Zm17.105 3.903a5.71 5.71 0 0 0-.227-1.62 4.113 4.113 0 0 0-.668-1.345 3.246 3.246 0 0 0-1.122-.922c-.455-.232-.996-.349-1.623-.349-1.233 0-2.178.374-2.836 1.12-.656.746-1.056 1.785-1.197 3.116h7.673Zm6.916-6.353a8.11 8.11 0 0 0-.637.09v15.519a10.308 10.308 0 0 0 1.517.12c.221 0 .47-.01.742-.03.273-.02.52-.05.743-.09v-7.714c0-1.048.117-1.905.35-2.57.231-.666.545-1.19.939-1.574a3.26 3.26 0 0 1 1.335-.801 5.33 5.33 0 0 1 1.562-.227h.409c.172 0 .338.02.5.06.04-.242.076-.494.107-.756a6.694 6.694 0 0 0 .014-1.392 4.99 4.99 0 0 0-.09-.575 4.641 4.641 0 0 0-.44-.045 8.203 8.203 0 0 0-.5-.015c-1.092 0-1.987.253-2.684.756a6.273 6.273 0 0 0-1.683 1.785c0-.343-.031-.76-.091-1.255a17.208 17.208 0 0 0-.182-1.195 5.019 5.019 0 0 0-.607-.09 7.54 7.54 0 0 0-.667-.031c-.223 0-.435.01-.637.03ZM50.034 6.084c.125-.33.194-.687.194-1.06v-.005c0-.373-.07-.73-.194-1.06a3.013 3.013 0 0 0-1.063-.193h-.004a3.03 3.03 0 0 0-1.064.193 3.03 3.03 0 0 0-.193 1.06v.005c0 .373.07.73.194 1.06.33.124.689.193 1.063.193h.005c.373 0 .732-.069 1.062-.193Z"/>
-</svg>
diff --git a/apps/admin-x-design-system/src/global/icon.stories.tsx b/apps/admin-x-design-system/src/global/icon.stories.tsx
deleted file mode 100644
index 3bb7b4d59a7..00000000000
--- a/apps/admin-x-design-system/src/global/icon.stories.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react-vite';
-
-import Icon from './icon';
-
-const meta = {
-    title: 'Global / Icon',
-    component: Icon,
-    tags: ['autodocs']
-} satisfies Meta<typeof Icon>;
-
-export default meta;
-type Story = StoryObj<typeof Icon>;
-
-export const Default: Story = {
-    args: {
-        name: 'lock-locked'
-    }
-};
-
-export const ExtraSmall: Story = {
-    args: {
-        size: 'xs',
-        name: 'lock-locked'
-    }
-};
-
-export const Small: Story = {
-    args: {
-        size: 'sm',
-        name: 'lock-locked'
-    }
-};
-
-export const Medium: Story = {
-    args: {
-        size: 'md',
-        name: 'lock-locked'
-    }
-};
-
-export const Large: Story = {
-    args: {
-        size: 'lg',
-        name: 'lock-locked'
-    }
-};
-
-export const ExtraLarge: Story = {
-    args: {
-        size: 'xl',
-        name: 'lock-locked'
-    }
-};
-
-export const Color: Story = {
-    args: {
-        colorClass: 'text-green',
-        name: 'lock-locked'
-    }
-};
diff --git a/apps/admin-x-design-system/src/global/icon.tsx b/apps/admin-x-design-system/src/global/icon.tsx
deleted file mode 100644
index cb0656a5811..00000000000
--- a/apps/admin-x-design-system/src/global/icon.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-const icons: Record<string, {default: React.FC<React.SVGProps<SVGSVGElement>>}> = import.meta.glob('../assets/icons/*.svg', {eager: true, query: '?react'});
-
-export type IconSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'custom' | number;
-
-export interface IconProps {
-    name: string;
-
-    /**
-     * Accepts either predefined sizes or number, in which case the size means the pixel width & height
-     */
-    size?: IconSize;
-
-    /**
-     * Accepts all colors available in the actual TailwindCSS theme, e.g. `black`, `green-100`
-     */
-    colorClass?: string;
-    styles?: string;
-    className?: string;
-}
-
-/**
- * Icon guidelines:
- * - all icons must be SVG's
- * - all icons must have all it's children color value set `currentColor`
- * - all strokes must be paths and _NOT_ outlined objects. Stroke width should be set to 1.5px
- */
-const Icon: React.FC<IconProps> = ({name, size = 'md', colorClass = '', className = ''}) => {
-    const {default: SvgComponent} = icons[`../assets/icons/${name}.svg`];
-
-    let classes = '';
-    let styles = {};
-
-    if (typeof size === 'number') {
-        styles = {
-            width: `${size}px`,
-            height: `${size}px`
-        };
-    }
-
-    if (!classes) {
-        switch (size) {
-        case 'custom':
-            break;
-        case '2xs':
-            classes = 'size-2';
-            break;
-        case 'xs':
-            classes = 'size-3';
-            break;
-        case 'sm':
-            classes = 'size-4';
-            break;
-        case 'lg':
-            classes = 'size-8';
-            break;
-        case 'xl':
-            classes = 'size-10';
-            break;
-
-        default:
-            classes = 'size-5';
-            break;
-        }
-    }
-
-    classes = clsx(
-        classes,
-        colorClass
-    );
-
-    if (SvgComponent) {
-        return (
-            <SvgComponent className={`pointer-events-none ${classes} ${className}`} style={styles} />
-        );
-    }
-    return null;
-};
-
-export default Icon;
diff --git a/apps/admin-x-design-system/src/global/layout/app-menu.tsx b/apps/admin-x-design-system/src/global/layout/app-menu.tsx
index 76bd85494a3..8f11e0aeddd 100644
--- a/apps/admin-x-design-system/src/global/layout/app-menu.tsx
+++ b/apps/admin-x-design-system/src/global/layout/app-menu.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import Icon from '../icon';
 import {Button} from '@tryghost/shade/components';
+import {LucideIcon} from '@tryghost/shade/utils';
 
 const PageMenu: React.FC = () => {
     return (
         <Button aria-label='Open app menu' size='icon' type='button' variant='ghost' onClick={() => {
             alert('Clicked on hamburger');
-        }}><Icon name='hamburger' size='sm' /></Button>
+        }}><LucideIcon.Menu /></Button>
     );
 };
 
diff --git a/apps/admin-x-design-system/src/global/layout/global-actions.tsx b/apps/admin-x-design-system/src/global/layout/global-actions.tsx
index 7df6a9caf22..030345f2780 100644
--- a/apps/admin-x-design-system/src/global/layout/global-actions.tsx
+++ b/apps/admin-x-design-system/src/global/layout/global-actions.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import Icon from '../icon';
 import {Button} from '@tryghost/shade/components';
+import {LucideIcon} from '@tryghost/shade/utils';
 
 const GlobalActions: React.FC = () => {
     return (
-        <Button aria-label='Search' size='icon' type='button' variant='ghost' onClick={() => {}}><Icon name='magnifying-glass' size='sm' /></Button>
+        <Button aria-label='Search' size='icon' type='button' variant='ghost' onClick={() => {}}><LucideIcon.Search /></Button>
     );
 };
 
diff --git a/apps/admin-x-design-system/src/global/layout/page.stories.tsx b/apps/admin-x-design-system/src/global/layout/page.stories.tsx
index bc455ac4448..a220f1c0207 100644
--- a/apps/admin-x-design-system/src/global/layout/page.stories.tsx
+++ b/apps/admin-x-design-system/src/global/layout/page.stories.tsx
@@ -5,6 +5,7 @@ import ViewContainer from './view-container';
 
 import {exampleActions as exampleActionButtons} from './view-container.stories';
 import {Text} from '@tryghost/shade/primitives';
+import {LucideIcon} from '@tryghost/shade/utils';
 
 const meta = {
     title: 'Global / Layout / Page',
@@ -22,7 +23,8 @@ const dummyContent = <div className='w-full bg-grey-100 p-5 text-center'>Placeho
 
 const customGlobalActions: CustomGlobalAction[] = [
     {
-        iconName: 'heart',
+        key: 'heart',
+        icon: <LucideIcon.Heart />,
         ariaLabel: 'Favorite',
         onClick: () => {
             alert('Clicked on custom action');
diff --git a/apps/admin-x-design-system/src/global/layout/page.tsx b/apps/admin-x-design-system/src/global/layout/page.tsx
index 925e99a15fa..17bc4f7d601 100644
--- a/apps/admin-x-design-system/src/global/layout/page.tsx
+++ b/apps/admin-x-design-system/src/global/layout/page.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 import clsx from 'clsx';
 import AppMenu from './app-menu';
 import GlobalActions from './global-actions';
-import Icon from '../icon';
 import PageHeader from './page-header';
 import {Button} from '@tryghost/shade/components';
 
 export interface CustomGlobalAction {
-    iconName: string;
+    key: string;
+    icon: React.ReactNode;
     ariaLabel: string;
     onClick?: () => void;
 }
@@ -88,9 +88,9 @@ const Page: React.FC<PageProps> = ({
     const globalActions = (
         (customGlobalActions?.length || showGlobalActions) &&
         <div className='sticky flex items-center gap-7'>
-            {(customGlobalActions?.map((action, idx) => {
+            {(customGlobalActions?.map((action) => {
                 return (
-                    <Button key={action.iconName ?? idx} aria-label={action.ariaLabel} size='icon' type='button' variant='ghost' onClick={action.onClick}><Icon name={action.iconName} size='sm' /></Button>
+                    <Button key={action.key} aria-label={action.ariaLabel} size='icon' type='button' variant='ghost' onClick={action.onClick}>{action.icon}</Button>
                 );
             }))}
             {showGlobalActions && <GlobalActions />}
diff --git a/apps/admin-x-design-system/src/global/modal/modal.tsx b/apps/admin-x-design-system/src/global/modal/modal.tsx
index 537b9bfac49..16efe398707 100644
--- a/apps/admin-x-design-system/src/global/modal/modal.tsx
+++ b/apps/admin-x-design-system/src/global/modal/modal.tsx
@@ -4,8 +4,7 @@ import React, {useEffect, useState, forwardRef} from 'react';
 import {Button, type ButtonProps, LoadingIndicator, StickyFooter} from '@tryghost/shade/components';
 import {DirtyConfirmDialog, useDirtyConfirmation} from '@tryghost/shade/patterns';
 import {Inline, Text} from '@tryghost/shade/primitives';
-import {useGlobalDirtyState} from '@tryghost/shade/utils';
-import Icon from '../icon';
+import {LucideIcon, useGlobalDirtyState} from '@tryghost/shade/utils';
 
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'bleed';
 
@@ -428,7 +427,7 @@ const Modal = forwardRef<HTMLElement, ModalProps>(({
                             {title && <Text as='h3' className='md:text-2xl' leading='heading' size='xl' weight='bold'>{title}</Text>}
                             <div className={`${topRightContent !== 'close' && 'md:!invisible md:!hidden'} ${hideXOnMobile && 'hidden'} absolute top-6 right-6`}>
                                 <Button aria-label='Close modal' className='-m-2 opacity-50 hover:opacity-100' data-testid='close-modal' size='icon' type='button' variant='ghost' onClick={removeModal}>
-                                    <Icon name='close' size='sm' />
+                                    <LucideIcon.X />
                                 </Button>
                             </div>
                         </header>)
diff --git a/apps/admin-x-design-system/src/global/modal/preview-modal.tsx b/apps/admin-x-design-system/src/global/modal/preview-modal.tsx
index b3aaf046126..d48aa875a40 100644
--- a/apps/admin-x-design-system/src/global/modal/preview-modal.tsx
+++ b/apps/admin-x-design-system/src/global/modal/preview-modal.tsx
@@ -1,12 +1,11 @@
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import clsx from 'clsx';
 import React, {useEffect} from 'react';
-import Icon from '../icon';
 import Modal, {ModalSize} from './modal';
 import {Button, type ButtonProps} from '@tryghost/shade/components';
 import {DirtyConfirmDialog, useDirtyConfirmation} from '@tryghost/shade/patterns';
 import {Inline, Text, type TextElement, type TextLeading, type TextSize} from '@tryghost/shade/primitives';
-import {useGlobalDirtyState} from '@tryghost/shade/utils';
+import {LucideIcon, useGlobalDirtyState} from '@tryghost/shade/utils';
 
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
@@ -157,7 +156,7 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
         if (siteLink) {
             viewSiteButton = (
                 <div className='ml-3 border-l border-grey-400 dark:border-grey-800'>
-                    <a className='ml-3 flex items-center gap-1' href={siteLink} rel="noopener noreferrer" target="_blank">View site <Icon name='arrow-top-right' size='xs' /></a>
+                    <a className='ml-3 flex items-center gap-1' href={siteLink} rel="noopener noreferrer" target="_blank">View site <LucideIcon.ExternalLink className='size-3' /></a>
                 </div>
             );
         }
diff --git a/apps/admin-x-design-system/src/index.ts b/apps/admin-x-design-system/src/index.ts
index 44d88430e9f..04e39bc2e42 100644
--- a/apps/admin-x-design-system/src/index.ts
+++ b/apps/admin-x-design-system/src/index.ts
@@ -30,8 +30,6 @@ export {default as Banner} from './global/banner';
 export type {BannerProps} from './global/banner';
 export {default as ErrorBoundary} from './global/error-boundary';
 export type {ErrorBoundaryProps} from './global/error-boundary';
-export {default as Icon} from './global/icon';
-export type {IconProps} from './global/icon';
 export {LoadingIndicator} from './global/loading-indicator';
 export type {LoadingIndicatorProps} from './global/loading-indicator';
 export {default as Separator} from './global/separator';
diff --git a/apps/admin-x-design-system/src/settings/setting-nav-item.tsx b/apps/admin-x-design-system/src/settings/setting-nav-item.tsx
index 6ebb210a58f..52c3dc23b17 100644
--- a/apps/admin-x-design-system/src/settings/setting-nav-item.tsx
+++ b/apps/admin-x-design-system/src/settings/setting-nav-item.tsx
@@ -1,11 +1,10 @@
 import clsx from 'clsx';
 import React, {forwardRef} from 'react';
-import Icon from '../global/icon';
 
 export interface SettingNavItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'ref' | 'title' | 'onClick'> {
     title: React.ReactNode;
     navid?: string;
-    icon?: string;
+    icon?: React.ReactNode;
     isCurrent?: boolean;
     isVisible?: boolean;
     onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
@@ -21,14 +20,14 @@ const SettingNavItem = forwardRef<HTMLLIElement, SettingNavItemProps>(function S
     ...props
 }, ref) {
     const classNames = clsx(
-        'mt-px flex h-[32px] w-100 cursor-pointer items-center rounded-md px-3 py-2 text-left font-medium transition-all hover:bg-grey-200 focus:bg-grey-100 dark:text-grey-600 dark:hover:bg-grey-950 dark:focus:bg-grey-900',
+        'mt-px flex h-[32px] w-100 cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-left text-control font-medium transition-all hover:bg-grey-200 focus:bg-grey-100 dark:text-grey-600 dark:hover:bg-grey-950 dark:focus:bg-grey-900 [&>svg]:size-4 [&>svg]:shrink-0',
         isCurrent ? 'bg-grey-200 text-black dark:bg-grey-950 dark:text-white' : 'text-grey-800',
         !isVisible && 'hidden'
     );
 
     return (
         <li ref={ref} {...props}><a className={classNames} id={navid} onClick={onClick}>
-            {icon && <Icon className='mr-[7px] size-[16px]' name={icon} size='custom' />}
+            {icon}
             {title}
         </a></li>
     );
diff --git a/apps/admin-x-framework/src/api/member-custom-fields.ts b/apps/admin-x-framework/src/api/member-custom-fields.ts
index b905c635912..2743fbd8e02 100644
--- a/apps/admin-x-framework/src/api/member-custom-fields.ts
+++ b/apps/admin-x-framework/src/api/member-custom-fields.ts
@@ -33,10 +33,6 @@ export type MemberCustomField = {
 export type MemberCustomFieldUserType = {
     id: FieldType;
     label: string;
-    // Icon name, resolved by the rendering app's icon set (today that's the
-    // admin-x-design-system set in Settings — the only surface showing type
-    // icons). A name rather than a component keeps this catalog render-free.
-    icon: string;
     // Which control collects/edits a value of this type
     input: 'text' | 'textarea' | 'address';
 };
@@ -45,9 +41,9 @@ export type MemberCustomFieldUserType = {
 // Record<FieldType, ...> annotation keeps this exhaustive: adding a field type
 // upstream fails to compile here until it has a presentation.
 const fieldTypePresentation: Record<FieldType, Omit<MemberCustomFieldUserType, 'id'>> = {
-    short_text: {label: 'Short text', icon: 'aa', input: 'text'},
-    long_text: {label: 'Long text', icon: 'long-text', input: 'textarea'},
-    address: {label: 'Address', icon: 'map-pin', input: 'address'}
+    short_text: {label: 'Short text', input: 'text'},
+    long_text: {label: 'Long text', input: 'textarea'},
+    address: {label: 'Address', input: 'address'}
 };
 
 // The catalog in the shared catalog's declared order, so every admin surface
diff --git a/apps/admin-x-design-system/src/assets/icons/beehiiv.svg b/apps/admin-x-settings/src/assets/images/brand-icons/beehiiv.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/beehiiv.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/beehiiv.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/facebook.svg b/apps/admin-x-settings/src/assets/images/brand-icons/facebook.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/facebook.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/facebook.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/firstpromoter.svg b/apps/admin-x-settings/src/assets/images/brand-icons/firstpromoter.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/firstpromoter.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/firstpromoter.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/linkedin.svg b/apps/admin-x-settings/src/assets/images/brand-icons/linkedin.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/linkedin.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/linkedin.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/mailchimp.svg b/apps/admin-x-settings/src/assets/images/brand-icons/mailchimp.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/mailchimp.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/mailchimp.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/medium.svg b/apps/admin-x-settings/src/assets/images/brand-icons/medium.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/medium.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/medium.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/pintura.svg b/apps/admin-x-settings/src/assets/images/brand-icons/pintura.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/pintura.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/pintura.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/portal-icon-1.svg b/apps/admin-x-settings/src/assets/images/brand-icons/portal-icon-1.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/portal-icon-1.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/portal-icon-1.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/portal-icon-2.svg b/apps/admin-x-settings/src/assets/images/brand-icons/portal-icon-2.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/portal-icon-2.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/portal-icon-2.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/portal-icon-3.svg b/apps/admin-x-settings/src/assets/images/brand-icons/portal-icon-3.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/portal-icon-3.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/portal-icon-3.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/portal-icon-4.svg b/apps/admin-x-settings/src/assets/images/brand-icons/portal-icon-4.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/portal-icon-4.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/portal-icon-4.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/portal-icon-5.svg b/apps/admin-x-settings/src/assets/images/brand-icons/portal-icon-5.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/portal-icon-5.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/portal-icon-5.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/slack.svg b/apps/admin-x-settings/src/assets/images/brand-icons/slack.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/slack.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/slack.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/squarespace.svg b/apps/admin-x-settings/src/assets/images/brand-icons/squarespace.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/squarespace.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/squarespace.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/substack.svg b/apps/admin-x-settings/src/assets/images/brand-icons/substack.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/substack.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/substack.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/transistor.svg b/apps/admin-x-settings/src/assets/images/brand-icons/transistor.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/transistor.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/transistor.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/twitter-x.svg b/apps/admin-x-settings/src/assets/images/brand-icons/twitter-x.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/twitter-x.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/twitter-x.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/unsplash.svg b/apps/admin-x-settings/src/assets/images/brand-icons/unsplash.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/unsplash.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/unsplash.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/wordpress.svg b/apps/admin-x-settings/src/assets/images/brand-icons/wordpress.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/wordpress.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/wordpress.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/zapier.svg b/apps/admin-x-settings/src/assets/images/brand-icons/zapier.svg
similarity index 100%
rename from apps/admin-x-design-system/src/assets/icons/zapier.svg
rename to apps/admin-x-settings/src/assets/images/brand-icons/zapier.svg
diff --git a/apps/admin-x-settings/src/components/exit-settings-button.tsx b/apps/admin-x-settings/src/components/exit-settings-button.tsx
index 1ef2bfa68a5..5c3ac148455 100644
--- a/apps/admin-x-settings/src/components/exit-settings-button.tsx
+++ b/apps/admin-x-settings/src/components/exit-settings-button.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import {Button} from '@tryghost/shade/components';
 import {DirtyConfirmDialog, useDirtyConfirmation} from '@tryghost/shade/patterns';
-import {Icon} from '@tryghost/admin-x-design-system';
-import {useGlobalDirtyState} from '@tryghost/shade/utils';
+import {LucideIcon, useGlobalDirtyState} from '@tryghost/shade/utils';
 
 const ExitSettingsButton: React.FC = () => {
     const {isDirty} = useGlobalDirtyState();
@@ -15,7 +14,7 @@ const ExitSettingsButton: React.FC = () => {
     return (
         <>
             <Button aria-label='Close settings' className='text-muted-foreground hover:text-foreground' data-testid='exit-settings' id='done-button' size='icon' title='Close (ESC)' type='button' variant='ghost' onClick={() => confirm(isDirty, navigateAway)}>
-                <Icon name='close' size='sm' />
+                <LucideIcon.X />
             </Button>
             <DirtyConfirmDialog {...dialogProps} />
         </>
diff --git a/apps/admin-x-settings/src/components/icons/brand-icon.tsx b/apps/admin-x-settings/src/components/icons/brand-icon.tsx
new file mode 100644
index 00000000000..631a80ae541
--- /dev/null
+++ b/apps/admin-x-settings/src/components/icons/brand-icon.tsx
@@ -0,0 +1,79 @@
+import Beehiiv from '../../assets/images/brand-icons/beehiiv.svg';
+import Facebook from '../../assets/images/brand-icons/facebook.svg';
+import FirstPromoter from '../../assets/images/brand-icons/firstpromoter.svg';
+import Linkedin from '../../assets/images/brand-icons/linkedin.svg';
+import Mailchimp from '../../assets/images/brand-icons/mailchimp.svg';
+import Medium from '../../assets/images/brand-icons/medium.svg';
+import Pintura from '../../assets/images/brand-icons/pintura.svg';
+import PortalIcon1 from '../../assets/images/brand-icons/portal-icon-1.svg';
+import PortalIcon2 from '../../assets/images/brand-icons/portal-icon-2.svg';
+import PortalIcon3 from '../../assets/images/brand-icons/portal-icon-3.svg';
+import PortalIcon4 from '../../assets/images/brand-icons/portal-icon-4.svg';
+import PortalIcon5 from '../../assets/images/brand-icons/portal-icon-5.svg';
+import React from 'react';
+import Slack from '../../assets/images/brand-icons/slack.svg';
+import Squarespace from '../../assets/images/brand-icons/squarespace.svg';
+import Substack from '../../assets/images/brand-icons/substack.svg';
+import Transistor from '../../assets/images/brand-icons/transistor.svg';
+import TwitterX from '../../assets/images/brand-icons/twitter-x.svg';
+import Unsplash from '../../assets/images/brand-icons/unsplash.svg';
+import Wordpress from '../../assets/images/brand-icons/wordpress.svg';
+import Zapier from '../../assets/images/brand-icons/zapier.svg';
+import clsx from 'clsx';
+
+const icons = {
+    beehiiv: {src: Beehiiv},
+    facebook: {src: Facebook, monochrome: true},
+    firstpromoter: {src: FirstPromoter},
+    linkedin: {src: Linkedin, monochrome: true},
+    mailchimp: {src: Mailchimp},
+    medium: {src: Medium},
+    pintura: {src: Pintura},
+    'portal-icon-1': {src: PortalIcon1, monochrome: true},
+    'portal-icon-2': {src: PortalIcon2, monochrome: true},
+    'portal-icon-3': {src: PortalIcon3, monochrome: true},
+    'portal-icon-4': {src: PortalIcon4, monochrome: true},
+    'portal-icon-5': {src: PortalIcon5, monochrome: true},
+    slack: {src: Slack},
+    squarespace: {src: Squarespace},
+    substack: {src: Substack},
+    transistor: {src: Transistor, monochrome: true},
+    'twitter-x': {src: TwitterX, monochrome: true},
+    unsplash: {src: Unsplash, monochrome: true},
+    wordpress: {src: Wordpress},
+    zapier: {src: Zapier}
+} as const;
+
+export type BrandIconName = keyof typeof icons;
+
+export interface BrandIconProps {
+    className?: string;
+    name: BrandIconName;
+    size?: number;
+    style?: React.CSSProperties;
+}
+
+const BrandIcon: React.FC<BrandIconProps> = ({name, size, className, style}) => {
+    const icon = icons[name];
+    const sizeStyle = size ? {width: size, height: size, ...style} : style;
+
+    if ('monochrome' in icon) {
+        const mask = `url("${icon.src}") center / contain no-repeat`;
+
+        return (
+            <span
+                aria-hidden='true'
+                className={clsx('pointer-events-none inline-block shrink-0 bg-current', className)}
+                style={{
+                    WebkitMask: mask,
+                    mask,
+                    ...sizeStyle
+                }}
+            />
+        );
+    }
+
+    return <img alt='' className={clsx('pointer-events-none', className)} src={icon.src} style={sizeStyle} />;
+};
+
+export default BrandIcon;
diff --git a/apps/admin-x-settings/src/components/settings/advanced/history-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/history-modal.tsx
index f3c5a0c8c26..1475cccbe4a 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/history-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/history-modal.tsx
@@ -2,9 +2,9 @@ import InfiniteScrollListener from '../../infinite-scroll-listener';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import {type Action, getActionTitle, getContextResource, getLinkTarget, isBulkAction, useBrowseActions} from '@tryghost/admin-x-framework/api/actions';
 import {ActionList, ActionListItem, ActionListItemContent, Avatar, Button, Field, FieldLabel, LoadingIndicator, MultiSelectCombobox, NoValueLabel, NoValueLabelIcon, Popover, PopoverContent, PopoverTrigger, Switch, inputSurface} from '@tryghost/shade/components';
-import {ChevronDown, History, X} from 'lucide-react';
-import {Icon, Modal} from '@tryghost/admin-x-design-system';
+import {ChevronDown, History, Pen, Plus, Trash2, X} from 'lucide-react';
 import {Inline, Stack} from '@tryghost/shade/primitives';
+import {Modal} from '@tryghost/admin-x-design-system';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
 import {type User} from '@tryghost/admin-x-framework/api/users';
 import {formatNumber} from '@tryghost/shade/utils';
@@ -13,18 +13,18 @@ import {useCallback, useEffect, useId, useRef, useState} from 'react';
 import {useFilterableApi} from '@tryghost/admin-x-framework/hooks';
 
 const HistoryIcon: React.FC<{action: Action}> = ({action}) => {
-    let name = 'pen';
+    let Icon = Pen;
 
     switch (action.event) {
     case 'added':
-        name = 'add';
+        Icon = Plus;
         break;
     case 'deleted':
-        name = 'trash';
+        Icon = Trash2;
         break;
     }
 
-    return <Icon name={name} size='xs' />;
+    return <Icon className='size-3' />;
 };
 
 const HistoryAvatar: React.FC<{action: Action}> = ({action}) => {
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations.tsx
index b85ec3bc2e2..bc51745b0ba 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations.tsx
@@ -1,11 +1,13 @@
+import BrandIcon from '../../icons/brand-icon';
 import IntegrationsSettingsImg from '../../../assets/images/integrations-settings.png';
 import NiceModal from '@ebay/nice-modal-react';
 import React, {useState} from 'react';
 import TopLevelGroup from '../../top-level-group';
 import usePinturaEditor from '../../../hooks/use-pintura-editor';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button, NoValueLabel, NoValueLabelIcon, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
-import {ConfirmationModal, Icon, SettingGroupHeader} from '@tryghost/admin-x-design-system';
+import {ConfirmationModal, SettingGroupHeader} from '@tryghost/admin-x-design-system';
 import {type Integration, useBrowseIntegrations, useDeleteIntegration} from '@tryghost/admin-x-framework/api/integrations';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {Plug} from 'lucide-react';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
 import {toast} from 'sonner';
@@ -69,7 +71,7 @@ const IntegrationItem: React.FC<IntegrationItemProps> = ({
         <Button className='text-destructive hover:text-destructive' size='sm' type='button' variant='ghost' onClick={handleDelete}>Delete</Button>
         :
         (disabled ?
-            <Button size='sm' type='button' variant='ghost' onClick={handleClick}><Icon name='lock-locked' size='xs' />Upgrade</Button> :
+            <Button size='sm' type='button' variant='ghost' onClick={handleClick}><LucideIcon.Lock />Upgrade</Button> :
             <Button className='h-auto p-0 font-bold text-green hover:text-green/90 hover:no-underline' size='sm' type='button' variant='link' onClick={handleClick}>Configure</Button>
         );
 
@@ -115,7 +117,7 @@ const BuiltInIntegrations: React.FC = () => {
         {
             detail: 'Automation for your apps',
             disabled: builtInApiIntegrationsDisabled,
-            icon: <Icon name='zapier' size={32} />,
+            icon: <BrandIcon name='zapier' size={32} />,
             modal: 'integrations/zapier',
             testId: 'zapier-integration',
             title: 'Zapier'
@@ -123,7 +125,7 @@ const BuiltInIntegrations: React.FC = () => {
         {
             active: !!(slackUrl && slackUsername),
             detail: 'A messaging app for teams',
-            icon: <Icon name='slack' size={32} />,
+            icon: <BrandIcon name='slack' size={32} />,
             modal: 'integrations/slack',
             testId: 'slack-integration',
             title: 'Slack'
@@ -131,7 +133,7 @@ const BuiltInIntegrations: React.FC = () => {
         {
             active: !!unsplashEnabled,
             detail: 'Beautiful, free photos',
-            icon: <Icon name='unsplash' size={32} />,
+            icon: <BrandIcon name='unsplash' size={32} />,
             modal: 'integrations/unsplash',
             testId: 'unsplash-integration',
             title: 'Unsplash'
@@ -139,7 +141,7 @@ const BuiltInIntegrations: React.FC = () => {
         {
             active: !!firstPromoterEnabled,
             detail: 'Launch your member referral program',
-            icon: <Icon name='firstpromoter' size={32} />,
+            icon: <BrandIcon name='firstpromoter' size={32} />,
             modal: 'integrations/firstpromoter',
             testId: 'firstpromoter-integration',
             title: 'FirstPromoter'
@@ -147,7 +149,7 @@ const BuiltInIntegrations: React.FC = () => {
         {
             active: pinturaEditor.isEnabled,
             detail: 'Advanced image editing',
-            icon: <Icon name='pintura' size={32} />,
+            icon: <BrandIcon name='pintura' size={32} />,
             modal: 'integrations/pintura',
             testId: 'pintura-integration',
             title: 'Pintura'
@@ -156,14 +158,14 @@ const BuiltInIntegrations: React.FC = () => {
             active: !!transistorEnabled,
             detail: 'Give your members access to private podcasts',
             disabled: builtInApiIntegrationsDisabled,
-            icon: <Icon name='transistor' size={32} />,
+            icon: <BrandIcon name='transistor' size={32} />,
             modal: 'integrations/transistor',
             testId: 'transistor-integration',
             title: 'Transistor.fm'
         },
         {
             detail: 'Access your content programmatically',
-            icon: <Icon name='angle-brackets' size={32} />,
+            icon: <LucideIcon.Code className='size-8' />,
             modal: 'integrations/contentapi',
             testId: 'content-api-integration',
             title: 'Content API'
@@ -213,7 +215,7 @@ const CustomIntegrations: React.FC<{integrations: Integration[]}> = ({integratio
                         icon={
                             integration.icon_image ?
                                 <img className='size-8 shrink-0 object-cover' role='presentation' src={integration.icon_image} /> :
-                                <Icon className='w-8 shrink-0' name='integration' />
+                                <LucideIcon.Blocks className='size-8 shrink-0' />
                         }
                         title={integration.name}
                         custom
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/content-api-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/content-api-modal.tsx
index b2fd970a2df..079732db332 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/content-api-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/content-api-modal.tsx
@@ -2,7 +2,8 @@ import APIKeys from './api-keys';
 import IntegrationHeader from './integration-header';
 import NiceModal from '@ebay/nice-modal-react';
 import {Button} from '@tryghost/shade/components';
-import {Icon, Modal} from '@tryghost/admin-x-design-system';
+import {LucideIcon} from '@tryghost/shade/utils';
+import {Modal} from '@tryghost/admin-x-design-system';
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
 import {useBrowseIntegrations} from '@tryghost/admin-x-framework/api/integrations';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -23,7 +24,7 @@ const ContentApiModal = NiceModal.create(() => {
             cancelLabel=''
             footer={
                 <div className='mx-8 flex w-full items-center justify-between'>
-                    <Button variant='outline' asChild><a href='https://ghost.org/docs/content-api/' rel='noopener noreferrer' target='_blank'>Open docs <Icon name='arrow-top-right' size='xs' /></a></Button>
+                    <Button variant='outline' asChild><a href='https://ghost.org/docs/content-api/' rel='noopener noreferrer' target='_blank'>Open docs <LucideIcon.ExternalLink className='size-3' /></a></Button>
                     <Button type='button' onClick={() => {
                         updateRoute('integrations');
                         modal.remove();
@@ -36,7 +37,7 @@ const ContentApiModal = NiceModal.create(() => {
         >
             <IntegrationHeader
                 detail='Access your content programmatically'
-                icon={<Icon name='angle-brackets' size={56} />}
+                icon={<LucideIcon.Code className='size-14' />}
                 title='Content API'
             />
             <div className='mt-7'>
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/first-promoter-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/first-promoter-modal.tsx
index 3d8c30290d0..42a151ae244 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/first-promoter-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/first-promoter-modal.tsx
@@ -1,7 +1,8 @@
+import BrandIcon from '../../../icons/brand-icon';
 import IntegrationHeader from './integration-header';
 import NiceModal from '@ebay/nice-modal-react';
 import {Field, FieldContent, FieldDescription, FieldLabel, Switch} from '@tryghost/shade/components';
-import {Form, Icon, Modal, TextField} from '@tryghost/admin-x-design-system';
+import {Form, Modal, TextField} from '@tryghost/admin-x-design-system';
 import {type Setting, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
 import {useEffect, useState} from 'react';
 import {useGlobalData} from '../../../providers/global-data-provider';
@@ -76,7 +77,7 @@ const FirstPromoterModal = NiceModal.create(() => {
         >
             <IntegrationHeader
                 detail='Launch your own member referral program'
-                icon={<Icon className='-mt-2' name='firstpromoter' size={56} />}
+                icon={<BrandIcon className='-mt-2' name='firstpromoter' size={56} />}
                 title='FirstPromoter'
             />
             <div className='mt-7'>
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/pintura-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/pintura-modal.tsx
index 91cc79138a9..66f528937de 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/pintura-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/pintura-modal.tsx
@@ -1,8 +1,9 @@
+import BrandIcon from '../../../icons/brand-icon';
 import IntegrationHeader from './integration-header';
 import NiceModal from '@ebay/nice-modal-react';
 import pinturaScreenshot from '../../../../assets/images/pintura-screenshot.png';
 import {Dropzone, Field, FieldContent, FieldDescription, FieldLabel, Switch} from '@tryghost/shade/components';
-import {Form, Icon, Modal} from '@tryghost/admin-x-design-system';
+import {Form, Modal} from '@tryghost/admin-x-design-system';
 import {type Setting, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
 import {toast} from 'sonner';
 import {useEffect, useState} from 'react';
@@ -88,7 +89,7 @@ const PinturaModal = NiceModal.create(() => {
         >
             <IntegrationHeader
                 detail='Advanced image editing'
-                icon={<Icon name='pintura' size={48} />}
+                icon={<BrandIcon name='pintura' size={48} />}
                 title='Pintura'
             />
             <div className='mt-7'>
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/slack-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/slack-modal.tsx
index 4a65f750fd0..e4828967b2f 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/slack-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/slack-modal.tsx
@@ -1,9 +1,10 @@
+import BrandIcon from '../../../icons/brand-icon';
 import IntegrationHeader from './integration-header';
 import NiceModal from '@ebay/nice-modal-react';
 import useSettingGroup from '../../../../hooks/use-setting-group';
 import validator from 'validator';
 import {Button} from '@tryghost/shade/components';
-import {Form, Icon, Modal, TextField} from '@tryghost/admin-x-design-system';
+import {Form, Modal, TextField} from '@tryghost/admin-x-design-system';
 import {getSettingValues, useTestSlack} from '@tryghost/admin-x-framework/api/settings';
 import {toast} from 'sonner';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -55,7 +56,7 @@ const SlackModal = NiceModal.create(() => {
         >
             <IntegrationHeader
                 detail='A messaging app for teams'
-                icon={<Icon name='slack' size={56} />}
+                icon={<BrandIcon name='slack' size={56} />}
                 title='Slack'
             />
             <div className='mt-7'>
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/transistor-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/transistor-modal.tsx
index 7b5313a0c64..56b45fef021 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/transistor-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/transistor-modal.tsx
@@ -1,8 +1,9 @@
 import APIKeys from './api-keys';
 import BookmarkThumb from '../../../../assets/images/integrations/ghost-transistor.png';
+import BrandIcon from '../../../icons/brand-icon';
 import IntegrationHeader from './integration-header';
 import NiceModal from '@ebay/nice-modal-react';
-import {ConfirmationModal, Form, Icon, Modal} from '@tryghost/admin-x-design-system';
+import {ConfirmationModal, Form, Modal} from '@tryghost/admin-x-design-system';
 import {Field, FieldContent, FieldDescription, FieldLabel, Switch} from '@tryghost/shade/components';
 import {type Setting, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
@@ -102,7 +103,7 @@ const TransistorModal = NiceModal.create(() => {
         >
             <IntegrationHeader
                 detail='Give your members access to private podcasts'
-                icon={<Icon name='transistor' size={56} />}
+                icon={<BrandIcon name='transistor' size={56} />}
                 title='Transistor.fm'
             />
             <div className='mt-7'>
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/unsplash-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/unsplash-modal.tsx
index 580151b28e7..484a1032272 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/unsplash-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/unsplash-modal.tsx
@@ -1,7 +1,8 @@
+import BrandIcon from '../../../icons/brand-icon';
 import IntegrationHeader from './integration-header';
 import NiceModal from '@ebay/nice-modal-react';
 import {Field, FieldContent, FieldDescription, FieldLabel, Switch} from '@tryghost/shade/components';
-import {Form, Icon, Modal} from '@tryghost/admin-x-design-system';
+import {Form, Modal} from '@tryghost/admin-x-design-system';
 import {type Setting, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
 import {useEffect, useState} from 'react';
 import {useGlobalData} from '../../../providers/global-data-provider';
@@ -58,7 +59,7 @@ const UnsplashModal = NiceModal.create(() => {
         >
             <IntegrationHeader
                 detail='Beautiful, free photos'
-                icon={<Icon name='unsplash' size={48} />}
+                icon={<BrandIcon name='unsplash' size={48} />}
                 title='Unsplash'
             />
             <div className='mt-7'>
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx
index 7a180ce0c65..65887af14f0 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx
@@ -1,9 +1,9 @@
 import NiceModal from '@ebay/nice-modal-react';
 import WebhookModal from './webhook-modal';
 import {Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from '@tryghost/shade/components';
-import {ConfirmationModal, Icon} from '@tryghost/admin-x-design-system';
+import {ConfirmationModal} from '@tryghost/admin-x-design-system';
 import {type Integration} from '@tryghost/admin-x-framework/api/integrations';
-import {formatNumber} from '@tryghost/shade/utils';
+import {LucideIcon, formatNumber} from '@tryghost/shade/utils';
 import {getWebhookEventLabel} from './webhook-event-options';
 import {toast} from 'sonner';
 import {useDeleteWebhook} from '@tryghost/admin-x-framework/api/webhooks';
@@ -90,7 +90,7 @@ const WebhooksTable: React.FC<{integration: Integration}> = ({integration}) => {
                     NiceModal.show(WebhookModal, {
                         integrationId: integration.id
                     });
-                }}><Icon name='add' size='xs' />Add webhook</Button>
+                }}><LucideIcon.Plus />Add webhook</Button>
         </div>
     </div>);
 };
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/zapier-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/zapier-modal.tsx
index 68004f6a791..7303a48d8fc 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/zapier-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/zapier-modal.tsx
@@ -1,9 +1,11 @@
 import APIKeys from './api-keys';
+import BrandIcon from '../../../icons/brand-icon';
 import IntegrationHeader from './integration-header';
 import NiceModal from '@ebay/nice-modal-react';
 import ZapierLogo from '../../../../assets/images/zapier-logo.svg';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button} from '@tryghost/shade/components';
-import {ConfirmationModal, Icon, Modal} from '@tryghost/admin-x-design-system';
+import {ConfirmationModal, Modal} from '@tryghost/admin-x-design-system';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
 import {useBrowseIntegrations} from '@tryghost/admin-x-framework/api/integrations';
 import {useEffect, useState} from 'react';
@@ -106,7 +108,7 @@ const ZapierModal = NiceModal.create(() => {
                     },
                     {id: 'api-url', label: 'API URL', text: window.location.origin + getGhostPaths().subdir}
                 ]} /></div>}
-                icon={<Icon name='zapier' size={56} />}
+                icon={<BrandIcon name='zapier' size={56} />}
                 title='Zapier'
             />
 
@@ -117,7 +119,7 @@ const ZapierModal = NiceModal.create(() => {
                             <div className='flex flex-col gap-4 md:flex-row md:items-center'>
                                 <div className='flex shrink-0 flex-nowrap items-center gap-2'>
                                     <img className='size-8 object-contain dark:invert' role='presentation' src={template.ghostImage} />
-                                    <Icon name="arrow-right" size="xs" />
+                                    <LucideIcon.ArrowRight className='size-3' />
                                     <img className='size-8 object-contain' role='presentation' src={template.appImage} />
                                 </div>
                                 <span>{template.title}</span>
diff --git a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-export.tsx b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-export.tsx
index d101fe2f0ff..1b5ed1726a0 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-export.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-export.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Button, LoadingIndicator} from '@tryghost/shade/components';
-import {Icon} from '@tryghost/admin-x-design-system';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {blobDownloadFromEndpoint} from '@tryghost/admin-x-framework/helpers';
 import {downloadAllContent} from '@tryghost/admin-x-framework/api/db';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -27,8 +27,8 @@ const MigrationToolsExport: React.FC = () => {
 
     return (
         <div className='grid grid-cols-1 gap-4 pt-4 md:grid-cols-2 lg:grid-cols-3'>
-            <Button className='h-9 font-semibold' type='button' variant='secondary' onClick={() => downloadAllContent()}><Icon name='export' size='sm' />Content &amp; settings</Button>
-            <Button className='h-9 font-semibold' data-testid='post-analytics-export-button' disabled={isExportingPosts} type='button' variant='secondary' onClick={exportPosts}>{isExportingPosts ? <><LoadingIndicator size='sm' /><span className='sr-only'>Loading...</span></> : <><Icon name='baseline-chart' size='sm' />Post analytics</>}</Button>
+            <Button className='h-9 font-semibold' type='button' variant='secondary' onClick={() => downloadAllContent()}><LucideIcon.Download />Content &amp; settings</Button>
+            <Button className='h-9 font-semibold' data-testid='post-analytics-export-button' disabled={isExportingPosts} type='button' variant='secondary' onClick={exportPosts}>{isExportingPosts ? <><LoadingIndicator size='sm' /><span className='sr-only'>Loading...</span></> : <><LucideIcon.TrendingUp />Post analytics</>}</Button>
         </div>
     );
 };
diff --git a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-import.tsx b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-import.tsx
index d28c48befd3..670f0e3699f 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-import.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-import.tsx
@@ -1,8 +1,9 @@
+import BrandIcon from '../../../icons/brand-icon';
 import NiceModal from '@ebay/nice-modal-react';
 import React from 'react';
 import UniversalImportModal from './universal-import-modal';
 import {Button} from '@tryghost/shade/components';
-import {Icon} from '@tryghost/admin-x-design-system';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 
 const MigrationToolsImport: React.FC = () => {
@@ -13,13 +14,13 @@ const MigrationToolsImport: React.FC = () => {
     };
 
     const importers = [
-        {icon: <Icon className='w-auto' name='substack' size={18} />, title: 'Substack', onClick: () => updateRoute({isExternal: true, route: '/migrate/substack'})},
-        {icon: <Icon className='w-auto' name='beehiiv' size={18} />, title: 'beehiiv', onClick: () => updateRoute({isExternal: true, route: '/migrate/beehiiv'})},
-        {icon: <Icon className='w-auto' name='wordpress' size={18} />, title: 'WordPress', onClick: () => updateRoute({isExternal: true, route: '/migrate/wordpress'})},
-        {icon: <Icon className='w-auto' name='squarespace' size={18} />, title: 'Squarespace', onClick: () => updateRoute({isExternal: true, route: '/migrate/squarespace'})},
-        {icon: <Icon className='w-auto dark:invert' name='medium' size={18} />, title: 'Medium', onClick: () => updateRoute({isExternal: true, route: '/migrate/medium'})},
-        {icon: <Icon className='w-auto' name='mailchimp' size={20} />, title: 'Mailchimp', onClick: () => updateRoute({isExternal: true, route: '/migrate/mailchimp'})},
-        {icon: <Icon className='w-auto' name='import' size={16} />, title: 'Universal import', onClick: handleImportContent}
+        {icon: <BrandIcon className='w-auto' name='substack' size={18} />, title: 'Substack', onClick: () => updateRoute({isExternal: true, route: '/migrate/substack'})},
+        {icon: <BrandIcon className='w-auto' name='beehiiv' size={18} />, title: 'beehiiv', onClick: () => updateRoute({isExternal: true, route: '/migrate/beehiiv'})},
+        {icon: <BrandIcon className='w-auto' name='wordpress' size={18} />, title: 'WordPress', onClick: () => updateRoute({isExternal: true, route: '/migrate/wordpress'})},
+        {icon: <BrandIcon className='w-auto' name='squarespace' size={18} />, title: 'Squarespace', onClick: () => updateRoute({isExternal: true, route: '/migrate/squarespace'})},
+        {icon: <BrandIcon className='w-auto dark:invert' name='medium' size={18} />, title: 'Medium', onClick: () => updateRoute({isExternal: true, route: '/migrate/medium'})},
+        {icon: <BrandIcon className='w-auto' name='mailchimp' size={20} />, title: 'Mailchimp', onClick: () => updateRoute({isExternal: true, route: '/migrate/mailchimp'})},
+        {icon: <LucideIcon.Import className='size-4' />, title: 'Universal import', onClick: handleImportContent}
     ];
 
     return (
diff --git a/apps/admin-x-settings/src/components/settings/email/emails.tsx b/apps/admin-x-settings/src/components/settings/email/emails.tsx
index d151a58fc91..d87a83012d9 100644
--- a/apps/admin-x-settings/src/components/settings/email/emails.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/emails.tsx
@@ -10,7 +10,8 @@ import WelcomeEmailCustomizeModal from '../membership/member-emails/welcome-emai
 import useQueryParams from '../../../hooks/use-query-params';
 import {APIError} from '@tryghost/admin-x-framework/errors';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
-import {ConfirmationModal, Icon} from '@tryghost/admin-x-design-system';
+import {ConfirmationModal} from '@tryghost/admin-x-design-system';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
 import {useGlobalData} from '../../providers/global-data-provider';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -39,7 +40,7 @@ const TransactionalTabContent: React.FC = () => {
                     onClick={openCustomizeModal}
                 >
                     <span className='flex size-10 shrink-0 items-center justify-center rounded-full bg-muted'>
-                        <Icon colorClass='text-muted-foreground' name='mailplus' size='md' />
+                        <LucideIcon.MailPlus className='size-5 text-muted-foreground' />
                     </span>
                     <span className='min-w-0 grow'>
                         <span className='block leading-tight font-medium'>Email design</span>
diff --git a/apps/admin-x-settings/src/components/settings/email/enable-newsletters.tsx b/apps/admin-x-settings/src/components/settings/email/enable-newsletters.tsx
index 50359a35817..c0422c451d7 100644
--- a/apps/admin-x-settings/src/components/settings/email/enable-newsletters.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/enable-newsletters.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import TopLevelGroup from '../../top-level-group';
 import {Banner, Switch} from '@tryghost/shade/components';
-import {Icon, SettingGroupContent} from '@tryghost/admin-x-design-system';
 import {Inline} from '@tryghost/shade/primitives';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {type Setting, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
+import {SettingGroupContent} from '@tryghost/admin-x-design-system';
 import {useGlobalData} from '../../providers/global-data-provider';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -61,13 +62,13 @@ const EnableNewsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
                     key: 'private',
                     value: (newslettersEnabled !== 'disabled' && !isDisabled) ? (<div className='w-full'>
                         <Inline align='center' gap='sm'>
-                            <Icon colorClass='text-state-success' name='check' size='sm' />
+                            <LucideIcon.Check className='size-4 text-state-success' />
                             <span>Enabled</span>
                         </Inline>
                     </div>) :
                         <div className='w-full'>
                             <Inline align='center' className='text-foreground' gap='sm'>
-                                <Icon colorClass='text-muted-foreground' name='mail-block' size='sm' />
+                                <LucideIcon.MailX className='size-4 text-muted-foreground' />
                                 <span>Disabled</span>
                             </Inline>
                             {isDisabled &&
diff --git a/apps/admin-x-settings/src/components/settings/email/mailgun.tsx b/apps/admin-x-settings/src/components/settings/email/mailgun.tsx
index a0e2f4792c6..92805d01fbf 100644
--- a/apps/admin-x-settings/src/components/settings/email/mailgun.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/mailgun.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import TopLevelGroup from '../../top-level-group';
 import useSettingGroup from '../../../hooks/use-setting-group';
-import {CheckCircle} from 'lucide-react';
 import {Field, FieldDescription, FieldLabel, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@tryghost/shade/components';
 import {Inline} from '@tryghost/shade/primitives';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {SettingGroupContent} from '@tryghost/admin-x-design-system';
 import {getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -38,7 +38,7 @@ const MailGun: React.FC<{ keywords: string[] }> = ({keywords}) => {
             key: 'status',
             value: (
                 <Inline align='center' gap='sm'>
-                    <CheckCircle className='size-4 text-green' strokeWidth={1.5} />
+                    <LucideIcon.Check className='size-4 text-state-success' />
                     Mailgun is set up
                 </Inline>
             )
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx
index ad059f45252..3e79cec9263 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx
@@ -7,15 +7,15 @@ import useFeatureFlag from '../../../../hooks/use-feature-flag';
 import useSettingGroup from '../../../../hooks/use-setting-group';
 import validator from 'validator';
 import {Button, Field, FieldContent, FieldDescription, FieldLabel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipTrigger} from '@tryghost/shade/components';
-import {ConfirmationModal, Form, Icon, LimitModal, PreviewModalContent, TextField} from '@tryghost/admin-x-design-system';
+import {ConfirmationModal, Form, LimitModal, PreviewModalContent, TextField} from '@tryghost/admin-x-design-system';
 import {type ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {HostLimitError, useLimiter} from '../../../../hooks/use-limiter';
 import {ImageUpload, ImageUploadAction, ImageUploadActions, ImageUploadDropzone, ImageUploadImage, ImageUploadPreview} from '@tryghost/shade/patterns';
+import {LucideIcon, formatNumber} from '@tryghost/shade/utils';
 import {type Newsletter, useBrowseNewsletters, useEditNewsletter} from '@tryghost/admin-x-framework/api/newsletters';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
 import {Stack, Text} from '@tryghost/shade/primitives';
 import {Trash2} from 'lucide-react';
-import {formatNumber} from '@tryghost/shade/utils';
 import {getImageUrl, useUploadImage} from '@tryghost/admin-x-framework/api/images';
 import {getSettingValue, getSettingValues} from '@tryghost/admin-x-framework/api/settings';
 import {hasSendingDomain, isManagedEmail, sendingDomain} from '@tryghost/admin-x-framework/api/config';
@@ -27,7 +27,7 @@ import {useGlobalData} from '../../../providers/global-data-provider';
 interface IconToggleOption {
     value: string;
     label: string;
-    icon: string;
+    icon: React.ReactNode;
     disabled?: boolean;
 }
 
@@ -42,7 +42,7 @@ const IconToggleGroup: React.FC<{
             <Tooltip key={option.value}>
                 <TooltipTrigger asChild>
                     <ToggleGroupItem aria-label={option.label} disabled={option.disabled} value={option.value}>
-                        <Icon name={option.icon} size='sm' />
+                        {option.icon}
                     </ToggleGroupItem>
                 </TooltipTrigger>
                 <TooltipContent>{option.label}</TooltipContent>
@@ -340,7 +340,7 @@ const Sidebar: React.FC<{
                                             handleError(e);
                                         }
                                     }}>
-                                        <Icon colorClass='text-grey-700 dark:text-grey-300' name='picture' />
+                                        <LucideIcon.Image className='size-5 text-grey-700 dark:text-grey-300' />
                                     </ImageUploadDropzone>
                                 )}
                             </ImageUpload>
@@ -415,7 +415,7 @@ const Sidebar: React.FC<{
                 <Separator />
                 <div className='my-5 flex w-full items-start'>
                     <span>
-                        <Icon className='mt-[-1px] mr-2' colorClass='text-red' name='heart'/>
+                        <LucideIcon.Heart className='mt-[-1px] mr-2 size-5 text-red'/>
                     </span>
                     <Form marginBottom={false}>
                         <Field orientation='horizontal'>
@@ -531,8 +531,8 @@ const Sidebar: React.FC<{
                         <IconToggleGroup
                             label='Title alignment'
                             options={[
-                                {value: 'left', label: 'Left', icon: 'align-left', disabled: !newsletter.show_post_title_section},
-                                {value: 'center', label: 'Center', icon: 'align-center', disabled: !newsletter.show_post_title_section}
+                                {value: 'left', label: 'Left', icon: <LucideIcon.AlignLeft className='size-3.5!' />, disabled: !newsletter.show_post_title_section},
+                                {value: 'center', label: 'Center', icon: <LucideIcon.AlignCenter className='size-3.5!' />, disabled: !newsletter.show_post_title_section}
                             ]}
                             value={newsletter.title_alignment}
                             onValueChange={titleAlignment => updateNewsletter({title_alignment: titleAlignment})}
@@ -588,8 +588,8 @@ const Sidebar: React.FC<{
                         <IconToggleGroup
                             label='Button style'
                             options={[
-                                {value: 'fill', label: 'Fill', icon: 'squircle-fill'},
-                                {value: 'outline', label: 'Outline', icon: 'squircle'}
+                                {value: 'fill', label: 'Fill', icon: <LucideIcon.Squircle className='size-3.5!' fill='currentColor' />},
+                                {value: 'outline', label: 'Outline', icon: <LucideIcon.Squircle className='size-3.5!' />}
                             ]}
                             value={newsletter.button_style || 'fill'}
                             onValueChange={buttonStyle => updateNewsletter({button_style: buttonStyle})}
@@ -600,9 +600,9 @@ const Sidebar: React.FC<{
                         <IconToggleGroup
                             label='Button corners'
                             options={[
-                                {value: 'square', label: 'Squared', icon: 'square'},
-                                {value: 'rounded', label: 'Rounded', icon: 'squircle'},
-                                {value: 'pill', label: 'Pill', icon: 'circle'}
+                                {value: 'square', label: 'Squared', icon: <LucideIcon.Square className='size-3.5!' />},
+                                {value: 'rounded', label: 'Rounded', icon: <LucideIcon.Squircle className='size-3.5!' />},
+                                {value: 'pill', label: 'Pill', icon: <LucideIcon.Circle className='size-3.5!' />}
                             ]}
                             value={newsletter.button_corners || 'rounded'}
                             onValueChange={buttonCorners => updateNewsletter({button_corners: buttonCorners})}
@@ -634,9 +634,9 @@ const Sidebar: React.FC<{
                         <IconToggleGroup
                             label='Link style'
                             options={[
-                                {value: 'underline', label: 'Underline', icon: 'text-underline'},
-                                {value: 'regular', label: 'Regular', icon: 'text-regular'},
-                                {value: 'bold', label: 'Bold', icon: 'text-bold'}
+                                {value: 'underline', label: 'Underline', icon: <LucideIcon.Underline className='size-3.5!' />},
+                                {value: 'regular', label: 'Regular', icon: <LucideIcon.Type className='size-3.5!' />},
+                                {value: 'bold', label: 'Bold', icon: <LucideIcon.Bold className='size-3.5!' />}
                             ]}
                             value={newsletter.link_style || 'underline'}
                             onValueChange={linkStyle => updateNewsletter({link_style: linkStyle})}
@@ -647,8 +647,8 @@ const Sidebar: React.FC<{
                         <IconToggleGroup
                             label='Image corners'
                             options={[
-                                {value: 'square', label: 'Squared', icon: 'square'},
-                                {value: 'rounded', label: 'Rounded', icon: 'squircle'}
+                                {value: 'square', label: 'Squared', icon: <LucideIcon.Square className='size-3.5!' />},
+                                {value: 'rounded', label: 'Rounded', icon: <LucideIcon.Squircle className='size-3.5!' />}
                             ]}
                             value={newsletter.image_corners || 'square'}
                             onValueChange={imageCorners => updateNewsletter({image_corners: imageCorners})}
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-preview-content.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-preview-content.tsx
index 0103957b96e..eaf7cb5b264 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-preview-content.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-preview-content.tsx
@@ -4,7 +4,7 @@ import LatestPosts2 from '../../../../assets/images/latest-posts-2.jpg';
 import LatestPosts3 from '../../../../assets/images/latest-posts-3.jpg';
 import clsx from 'clsx';
 import {GhostOrb} from '@tryghost/shade/components';
-import {Icon} from '@tryghost/admin-x-design-system';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {isManagedEmail} from '@tryghost/admin-x-framework/api/config';
 import {useGlobalData} from '../../../providers/global-data-provider';
 
@@ -276,13 +276,13 @@ const NewsletterPreviewContent: React.FC<{
                                             <>
                                                 <div className="pointer-events-none flex min-w-[120px] cursor-default flex-col items-center gap-[11px] text-center">
                                                     <span className="inline-flex size-[54px] items-center justify-center rounded-full border" style={{borderColor: dividerColor, color: textColor}}>
-                                                        <Icon colorClass='' name="thumbs-up" size="md" />
+                                                        <LucideIcon.ThumbsUp className='size-5' />
                                                     </span>
                                                     <span className="font-sans text-[1.3rem] leading-[1.4] font-medium" style={{color: textColor}}>More like this</span>
                                                 </div>
                                                 <div className="pointer-events-none flex min-w-[120px] cursor-default flex-col items-center gap-[11px] text-center">
                                                     <span className="inline-flex size-[54px] items-center justify-center rounded-full border" style={{borderColor: dividerColor, color: textColor}}>
-                                                        <Icon colorClass='' name="thumbs-down" size="md" />
+                                                        <LucideIcon.ThumbsDown className='size-5' />
                                                     </span>
                                                     <span className="font-sans text-[1.3rem] leading-[1.4] font-medium" style={{color: textColor}}>Less like this</span>
                                                 </div>
@@ -291,7 +291,7 @@ const NewsletterPreviewContent: React.FC<{
                                         {showCommentCta && (
                                             <div className="pointer-events-none flex min-w-[120px] cursor-default flex-col items-center gap-[11px] text-center">
                                                 <span className="inline-flex size-[54px] items-center justify-center rounded-full border" style={{borderColor: dividerColor, color: textColor}}>
-                                                    <Icon colorClass='' name="comment" size="md" />
+                                                    <LucideIcon.MessageCircle className='size-5' />
                                                 </span>
                                                 <span className="font-sans text-[1.3rem] leading-[1.4] font-medium" style={{color: textColor}}>Comment</span>
                                             </div>
@@ -299,7 +299,7 @@ const NewsletterPreviewContent: React.FC<{
                                         {showShareButton && (
                                             <div className="pointer-events-none flex min-w-[120px] cursor-default flex-col items-center gap-[11px] text-center">
                                                 <span className="inline-flex size-[54px] items-center justify-center rounded-full border" style={{borderColor: dividerColor, color: textColor}}>
-                                                    <Icon colorClass='' name="share" size="md" />
+                                                    <LucideIcon.Share2 className='size-5' />
                                                 </span>
                                                 <span className="font-sans text-[1.3rem] leading-[1.4] font-medium" style={{color: textColor}}>Share</span>
                                             </div>
diff --git a/apps/admin-x-settings/src/components/settings/general/about.tsx b/apps/admin-x-settings/src/components/settings/general/about.tsx
index 07344784281..ee2216380f6 100644
--- a/apps/admin-x-settings/src/components/settings/general/about.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/about.tsx
@@ -1,6 +1,7 @@
 import NiceModal from '@ebay/nice-modal-react';
 import {GhostLogo, Separator} from '@tryghost/shade/components';
-import {Icon, Modal} from '@tryghost/admin-x-design-system';
+import {LucideIcon} from '@tryghost/shade/utils';
+import {Modal} from '@tryghost/admin-x-design-system';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
 import {linkToGitHubReleases} from '../../../utils/link-to-github-releases';
 import {showDatabaseWarning} from '../../../utils/show-database-warning';
@@ -103,9 +104,9 @@ const AboutModal = NiceModal.create<RoutingModalProps>(() => {
                 </div>
                 <Separator />
                 <div className='flex flex-col gap-1.5'>
-                    <a className='flex items-center gap-2 hover:text-grey-900 dark:hover:text-grey-400' href="https://ghost.org/docs/" rel="noopener noreferrer" target="_blank"><Icon name='book-open' size='sm' /> User documentation</a>
-                    <a className='flex items-center gap-2 hover:text-grey-900 dark:hover:text-grey-400' href="https://forum.ghost.org/" rel="noopener noreferrer" target="_blank"><Icon name='question-circle' size='sm' /> Get help with Ghost</a>
-                    <a className='flex items-center gap-2 hover:text-grey-900 dark:hover:text-grey-400' href="https://ghost.org/docs/contributing/" rel="noopener noreferrer" target="_blank"><Icon name='angle-brackets' size='sm' /> Get involved</a>
+                    <a className='flex items-center gap-2 hover:text-grey-900 dark:hover:text-grey-400' href="https://ghost.org/docs/" rel="noopener noreferrer" target="_blank"><LucideIcon.BookOpen className='size-4' /> User documentation</a>
+                    <a className='flex items-center gap-2 hover:text-grey-900 dark:hover:text-grey-400' href="https://forum.ghost.org/" rel="noopener noreferrer" target="_blank"><LucideIcon.CircleHelp className='size-4' /> Get help with Ghost</a>
+                    <a className='flex items-center gap-2 hover:text-grey-900 dark:hover:text-grey-400' href="https://ghost.org/docs/contributing/" rel="noopener noreferrer" target="_blank"><LucideIcon.Code className='size-4' /> Get involved</a>
                 </div>
                 <Separator />
                 <p className='max-w-[460px] text-sm'>
diff --git a/apps/admin-x-settings/src/components/settings/general/seo-meta.tsx b/apps/admin-x-settings/src/components/settings/general/seo-meta.tsx
index 8d6cb684dcc..b6c10975a2d 100644
--- a/apps/admin-x-settings/src/components/settings/general/seo-meta.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/seo-meta.tsx
@@ -4,9 +4,10 @@ import useFeatureFlag from '../../../hooks/use-feature-flag';
 import usePinturaEditor from '../../../hooks/use-pintura-editor';
 import useSettingGroup from '../../../hooks/use-setting-group';
 import {APIError} from '@tryghost/admin-x-framework/errors';
-import {FacebookLogo, GoogleLogo, Icon, SettingGroupContent, TextField, XLogo} from '@tryghost/admin-x-design-system';
+import {FacebookLogo, GoogleLogo, SettingGroupContent, TextField, XLogo} from '@tryghost/admin-x-design-system';
 import {Field, FieldLabel, Switch, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
 import {ImageUpload, ImageUploadAction, ImageUploadActions, ImageUploadDropzone, ImageUploadImage, ImageUploadPreview} from '@tryghost/shade/patterns';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {Pencil, Trash2} from 'lucide-react';
 import {getImageUrl, useUploadImage} from '@tryghost/admin-x-framework/api/images';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
@@ -40,7 +41,7 @@ const SearchEnginePreview: React.FC<SearchEnginePreviewProps> = ({
                         </div>
                         <div className='grow'>
                             <div className='flex w-full items-center justify-end rounded-full bg-white p-3 px-4 shadow dark:bg-grey-900'>
-                                <Icon className='stroke-[2px] text-blue-600' name='magnifying-glass' size='sm' />
+                                <LucideIcon.Search className='size-4 stroke-2 text-blue-600' />
                             </div>
                         </div>
                     </div>
diff --git a/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx b/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx
index 0c64079d440..32ae51f93cd 100644
--- a/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx
@@ -9,10 +9,11 @@ import useStaffUsers from '../../../hooks/use-staff-users';
 import validator from 'validator';
 import {APIError} from '@tryghost/admin-x-framework/errors';
 import {Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Dropzone, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
-import {ConfirmationModal, Icon, LimitModal, Modal} from '@tryghost/admin-x-design-system';
+import {ConfirmationModal, LimitModal, Modal} from '@tryghost/admin-x-design-system';
 import {type ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {HostLimitError, useLimiter} from '../../../hooks/use-limiter';
 import {ImageUpload, ImageUploadAction, ImageUploadActions, ImageUploadDropzone, ImageUploadImage, ImageUploadPreview} from '@tryghost/shade/patterns';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {Pencil, Trash2} from 'lucide-react';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
 import {SOCIAL_PLATFORM_CONFIGS, SOCIAL_PLATFORM_KEYS, getSocialValidationError} from '../../../utils/social-urls/index';
@@ -361,7 +362,7 @@ const UserDetailModalContent: React.FC<{user: User; onDeletingUserChange: (isDel
                                             </ImageUploadPreview>
                                         ) : (
                                             <ImageUploadDropzone className='rounded-full bg-surface-inverse text-surface-inverse-foreground opacity-80 hover:opacity-100' inputId='avatar' inputTestId='profile-image-upload' onDropAccepted={files => handleImageUpload('profile_image', files[0])}>
-                                                <Icon colorClass='text-surface-inverse-foreground' name='user-add' size='lg' />
+                                                <LucideIcon.UserPlus className='size-8 text-surface-inverse-foreground' />
                                             </ImageUploadDropzone>
                                         )}
                                     </ImageUpload>
@@ -388,11 +389,7 @@ const UserDetailModalContent: React.FC<{user: User; onDeletingUserChange: (isDel
                                                     type='button'
                                                 >
                                                     <span className='sr-only'>Actions</span>
-                                                    <Icon
-                                                        colorClass={formState.cover_image ? 'text-white' : undefined}
-                                                        name='ellipsis'
-                                                        size='md'
-                                                    />
+                                                    <LucideIcon.Ellipsis className={clsx('size-5', formState.cover_image && 'text-white')} />
                                                 </button>
                                             </DropdownMenuTrigger>
                                             {/* legacy Modal overlay is z-[1000]; keep the portalled menu above it */}
diff --git a/apps/admin-x-settings/src/components/settings/growth/explore.tsx b/apps/admin-x-settings/src/components/settings/growth/explore.tsx
index 5422eb39c61..d80239bd576 100644
--- a/apps/admin-x-settings/src/components/settings/growth/explore.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/explore.tsx
@@ -5,9 +5,9 @@ import TopLevelGroup from '../../top-level-group';
 import useSettingGroup from '../../../hooks/use-setting-group';
 import {Button} from '@tryghost/shade/components';
 import {Field, FieldContent, FieldDescription, FieldLabel, Separator, Switch} from '@tryghost/shade/components';
-import {Icon, SettingGroupContent} from '@tryghost/admin-x-design-system';
+import {LucideIcon, abbreviateNumber} from '@tryghost/shade/utils';
 import {type Setting, getSettingValue, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
-import {abbreviateNumber} from '@tryghost/shade/utils';
+import {SettingGroupContent} from '@tryghost/admin-x-design-system';
 import {useBrowseMembers} from '@tryghost/admin-x-framework/api/members';
 import {useGlobalData} from '../../providers/global-data-provider';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -115,7 +115,7 @@ const Explore: React.FC<{ keywords: string[] }> = ({keywords}) => {
                                 </span>
                                 :
                                 <span className='flex size-5 items-center justify-center rounded-full border border-black text-black group-hover:bg-black group-hover:text-white'>
-                                    <Icon name='arrow-right' size={10} />
+                                    <LucideIcon.ArrowRight className='size-2.5' />
                                 </span>
                             }
                         </a>
@@ -129,7 +129,7 @@ const Explore: React.FC<{ keywords: string[] }> = ({keywords}) => {
                     <Button className='border border-purple bg-transparent text-purple hover:bg-purple/5 hover:text-purple' type='button' variant='outline' onClick={() => {
                         updateRoute('explore/testimonial');
                     }}>
-                        <Icon name='send' size='sm' />
+                        <LucideIcon.Send />
                         Send testimonial
                     </Button>
                 </div>
diff --git a/apps/admin-x-settings/src/components/settings/growth/network.tsx b/apps/admin-x-settings/src/components/settings/growth/network.tsx
index 3441ee8eaf2..7c17a9c0711 100644
--- a/apps/admin-x-settings/src/components/settings/growth/network.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/network.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import SettingImg from '../../../assets/images/network.png';
 import TopLevelGroup from '../../top-level-group';
 import validator from 'validator';
-import {Icon, SettingGroupContent} from '@tryghost/admin-x-design-system';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {type Setting, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
+import {SettingGroupContent} from '@tryghost/admin-x-design-system';
 import {Switch} from '@tryghost/shade/components';
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
 import {useGlobalData} from '../../providers/global-data-provider';
@@ -79,7 +80,7 @@ const Network: React.FC<{ keywords: string[] }> = ({keywords}) => {
                         value:
                         isDisabled &&
                             <div className='flex w-full gap-1.5 rounded-md border border-grey-200 bg-grey-50 p-3 dark:border-grey-900 dark:bg-grey-900'>
-                                <Icon name='info' size={16} />
+                                <LucideIcon.Info className='size-4' />
                                 <div className='-mt-0.5'>
                                     {isDisabledByPrivateMode
                                         ? <>Network is automatically disabled while your site is in <span className='cursor-pointer text-green' onClick={() => updateRoute('members')}>private mode</span></>
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/offer-success.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/offer-success.tsx
index ea70d30e7b9..b6653113721 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/offer-success.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/offer-success.tsx
@@ -1,6 +1,7 @@
+import BrandIcon from '../../../icons/brand-icon';
 import SettingsBreadcrumbs from '../../settings-breadcrumbs';
 import {Button} from '@tryghost/shade/components';
-import {Icon} from '@tryghost/admin-x-design-system';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {Modal} from '@tryghost/admin-x-design-system';
 import {type Offer, useBrowseOffersById} from '@tryghost/admin-x-framework/api/offers';
 import {TextField} from '@tryghost/admin-x-design-system';
@@ -89,7 +90,7 @@ const OfferSuccess: React.FC<{id: string}> = ({id}) => {
                 label='Offers'
                 onBack={() => updateRoute('offers/edit')}
             />
-            <Icon colorClass='text-grey-700 -mt-4' name='tags-check' size='xl' />
+            <LucideIcon.BadgeCheck className='-mt-4 size-10 text-grey-700' />
             <h1 className='mt-6 text-4xl'>Your new offer is live!</h1>
             <p className='mt-3 max-w-[510px] text-[1.6rem]'>You can share the link anywhere. In your newsletter, social media, a podcast, or in-person. It all just works.</p>
             <div className='mt-8 flex w-full max-w-md flex-col gap-8'>
@@ -99,9 +100,9 @@ const OfferSuccess: React.FC<{id: string}> = ({id}) => {
                 </div>
                 <div className='flex items-center gap-4 text-sm font-medium before:h-px before:grow before:bg-grey-300 before:content-[""] after:h-px after:grow after:bg-grey-300 after:content-[""] dark:before:bg-grey-800 dark:after:bg-grey-800'>OR</div>
                 <div className='flex gap-2'>
-                    <Button aria-label='Share on X' className='h-8 flex-1' size='sm' type='button' variant='outline' onClick={handleTwitter}><Icon className='size-3.5!' name='twitter-x' /></Button>
-                    <Button aria-label='Share on Facebook' className='h-8 flex-1' size='sm' type='button' variant='outline' onClick={handleFacebook}><Icon name='facebook' size='sm' /></Button>
-                    <Button aria-label='Share on LinkedIn' className='h-8 flex-1' size='sm' type='button' variant='outline' onClick={handleLinkedIn}><Icon name='linkedin' size='sm' /></Button>
+                    <Button aria-label='Share on X' className='h-8 flex-1' size='sm' type='button' variant='outline' onClick={handleTwitter}><BrandIcon className='size-3.5!' name='twitter-x' /></Button>
+                    <Button aria-label='Share on Facebook' className='h-8 flex-1' size='sm' type='button' variant='outline' onClick={handleFacebook}><BrandIcon className='size-3.5!' name='facebook' /></Button>
+                    <Button aria-label='Share on LinkedIn' className='h-8 flex-1' size='sm' type='button' variant='outline' onClick={handleLinkedIn}><BrandIcon className='size-3.5!' name='linkedin' /></Button>
                 </div>
             </div>
         </div>
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/offers-index.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/offers-index.tsx
index 5cb792eab0d..58e2813ab79 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/offers-index.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/offers-index.tsx
@@ -1,5 +1,4 @@
 import {Badge, Button, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from '@tryghost/shade/components';
-import {Icon} from '@tryghost/admin-x-design-system';
 import {Inline, Stack} from '@tryghost/shade/primitives';
 import {LucideIcon, formatNumber} from '@tryghost/shade/utils';
 import {Modal} from '@tryghost/admin-x-design-system';
@@ -86,7 +85,7 @@ const OffersFilterMenu: React.FC<{
                     <DropdownMenuRadioItem value='redemptions'>Redemptions</DropdownMenuRadioItem>
                 </DropdownMenuRadioGroup>
                 <DropdownMenuItem onSelect={onDirectionChange}>
-                    <Icon name={sortDirection === 'asc' ? 'arrow-up' : 'arrow-down'} size='xs' />
+                    {sortDirection === 'asc' ? <LucideIcon.ArrowUp className='size-3' /> : <LucideIcon.ArrowDown className='size-3' />}
                     {sortDirection === 'asc' ? 'Ascending' : 'Descending'}
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
diff --git a/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal-confirm.tsx b/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal-confirm.tsx
index 1858b497962..ae76b536c08 100644
--- a/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal-confirm.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/recommendations/add-recommendation-modal-confirm.tsx
@@ -5,7 +5,8 @@ import RecommendationDescriptionForm, {validateDescriptionForm} from './recommen
 import trackEvent from '../../../../utils/analytics';
 import {Button} from '@tryghost/shade/components';
 import {type EditOrAddRecommendation, useAddRecommendation} from '@tryghost/admin-x-framework/api/recommendations';
-import {Icon, Modal} from '@tryghost/admin-x-design-system';
+import {LucideIcon} from '@tryghost/shade/utils';
+import {Modal} from '@tryghost/admin-x-design-system';
 import {toast} from 'sonner';
 import {useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -67,7 +68,7 @@ const AddRecommendationModalConfirm: React.FC<AddRecommendationModalProps> = ({r
                 }
             });
         }}>
-            <Icon name='arrow-left' size='sm' />
+            <LucideIcon.ArrowLeft />
             Back
         </Button>
     );
diff --git a/apps/admin-x-settings/src/components/settings/growth/recommendations/recommendation-list.tsx b/apps/admin-x-settings/src/components/settings/growth/recommendations/recommendation-list.tsx
index f289913180b..33505efd021 100644
--- a/apps/admin-x-settings/src/components/settings/growth/recommendations/recommendation-list.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/recommendations/recommendation-list.tsx
@@ -4,10 +4,9 @@ import React, {useState} from 'react';
 import RecommendationIcon from './recommendation-icon';
 import useSettingGroup from '../../../../hooks/use-setting-group';
 import {ActionList, ActionListItem, ActionListItemContent, Button, LoadingIndicator, NoValueLabel, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from '@tryghost/shade/components';
-import {Icon} from '@tryghost/admin-x-design-system';
 import {Inline} from '@tryghost/shade/primitives';
+import {LucideIcon, formatNumber} from '@tryghost/shade/utils';
 import {type Recommendation} from '@tryghost/admin-x-framework/api/recommendations';
-import {formatNumber} from '@tryghost/shade/utils';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 
 interface RecommendationListProps {
@@ -108,7 +107,7 @@ const RecommendationList: React.FC<RecommendationListProps> = ({recommendations,
                                     type='button'
                                     variant='ghost'
                                     onClick={copyRecommendationsUrl}
-                                ><Icon className={copied ? 'size-3.5! text-green' : 'size-3.5! text-muted-foreground'} name={copied ? 'check-circle' : 'duplicate'} /></Button>
+                                >{copied ? <LucideIcon.CircleCheck className='size-3.5! text-green' /> : <LucideIcon.Copy className='size-3.5! text-muted-foreground' />}</Button>
                             </TooltipTrigger>
                             <TooltipContent>{copied ? 'Copied' : 'Copy link'}</TooltipContent>
                         </Tooltip>
diff --git a/apps/admin-x-settings/src/components/settings/membership/custom-fields.tsx b/apps/admin-x-settings/src/components/settings/membership/custom-fields.tsx
index 463eeb479eb..a370a59206a 100644
--- a/apps/admin-x-settings/src/components/settings/membership/custom-fields.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/custom-fields.tsx
@@ -1,10 +1,10 @@
+import CustomFieldIcon from './custom-fields/custom-field-icon';
 import CustomFieldModal from './custom-fields/custom-field-modal';
 import NiceModal from '@ebay/nice-modal-react';
 import React, {useEffect, useRef, useState} from 'react';
 import TopLevelGroup from '../../top-level-group';
 import useFeatureFlag from '../../../hooks/use-feature-flag';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button, NoValueLabel, NoValueLabelIcon, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
-import {Icon} from '@tryghost/admin-x-design-system';
 import {TextCursorInput} from 'lucide-react';
 import {useBrowseMemberCustomFieldsIncludingArchived, userTypeForField} from '@tryghost/admin-x-framework/api/member-custom-fields';
 import {withErrorBoundary} from '../../error-boundary';
@@ -47,7 +47,7 @@ const FieldList: React.FC<{
                             <ActionListItemContent asChild>
                                 <button className='flex w-full items-center gap-3 py-3 text-left' type='button' onClick={() => openModal(field)}>
                                     <span className='flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted'>
-                                    <Icon name={userType.icon} size={18} />
+                                        <CustomFieldIcon className='size-[18px]' type={userType.id} />
                                     </span>
                                     <span className='min-w-0 grow'>
                                         <span className='block font-semibold'>{field.name}</span>
diff --git a/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-icon.tsx b/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-icon.tsx
new file mode 100644
index 00000000000..e07aa00e768
--- /dev/null
+++ b/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-icon.tsx
@@ -0,0 +1,15 @@
+import {LucideIcon} from '@tryghost/shade/utils';
+import type {MemberCustomField} from '@tryghost/admin-x-framework/api/member-custom-fields';
+
+const icons: Record<MemberCustomField['type'], typeof LucideIcon.Type> = {
+    short_text: LucideIcon.Type,
+    long_text: LucideIcon.AlignLeft,
+    address: LucideIcon.MapPin
+};
+
+const CustomFieldIcon: React.FC<{type: MemberCustomField['type']; className?: string}> = ({type, className}) => {
+    const Icon = icons[type] || LucideIcon.Type;
+    return <Icon className={className} />;
+};
+
+export default CustomFieldIcon;
diff --git a/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-modal.tsx b/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-modal.tsx
index afd2861124c..170bae9d193 100644
--- a/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-modal.tsx
@@ -1,7 +1,9 @@
+import CustomFieldIcon from './custom-field-icon';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React from 'react';
 import {Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Field, FieldDescription, FieldLabel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@tryghost/shade/components';
-import {ConfirmationModal, Form, Icon, Modal, TextField} from '@tryghost/admin-x-design-system';
+import {ConfirmationModal, Form, Modal, TextField} from '@tryghost/admin-x-design-system';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {ValidationError, getErrorMessage} from '@tryghost/admin-x-framework/errors';
 import {memberCustomFieldUserTypes, useCreateMemberCustomField, useDeleteMemberCustomField, useEditMemberCustomField, userTypeForField} from '@tryghost/admin-x-framework/api/member-custom-fields';
 import {toast} from 'sonner';
@@ -15,7 +17,7 @@ const userTypeById = (id: string) => memberCustomFieldUserTypes.find(userType =>
 // Fixed-width so option labels align in a column regardless of icon shape.
 const TypeTile: React.FC<{userTypeId: string}> = ({userTypeId}) => (
     <span className='flex w-5 shrink-0 items-center justify-center'>
-        <Icon name={userTypeById(userTypeId).icon} size='sm' />
+        <CustomFieldIcon className='size-4' type={userTypeById(userTypeId).id} />
     </span>
 );
 
@@ -164,12 +166,12 @@ const CustomFieldModal = NiceModal.create<{field?: MemberCustomField}>(({field})
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
                 <Button aria-label='Menu' size='icon' type='button' variant='ghost'>
-                    <Icon name='ellipsis' size='sm' />
+                    <LucideIcon.Ellipsis />
                 </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align='end' className='z-[9999]'>
                 <DropdownMenuItem className='text-destructive focus:text-destructive' onSelect={confirmDeleteField}>
-                    <Icon name='trash' size='sm' />
+                    <LucideIcon.Trash2 className='size-4' />
                     Delete custom field
                 </DropdownMenuItem>
             </DropdownMenuContent>
diff --git a/apps/admin-x-settings/src/components/settings/membership/member-emails.tsx b/apps/admin-x-settings/src/components/settings/membership/member-emails.tsx
index 1b3e103e454..ef79057903f 100644
--- a/apps/admin-x-settings/src/components/settings/membership/member-emails.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/member-emails.tsx
@@ -7,7 +7,8 @@ import useQueryParams from '../../../hooks/use-query-params';
 import {APIError} from '@tryghost/admin-x-framework/errors';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Switch} from '@tryghost/shade/components';
 import {Button} from '@tryghost/shade/components';
-import {ConfirmationModal, Icon} from '@tryghost/admin-x-design-system';
+import {ConfirmationModal} from '@tryghost/admin-x-design-system';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {WELCOME_EMAIL_SLUGS, type WelcomeEmailType, getDefaultWelcomeEmailRecord, getDefaultWelcomeEmailValues} from './member-emails/default-welcome-email-values';
 import {checkStripeEnabled, getSettingValues} from '@tryghost/admin-x-framework/api/settings';
 import {toast} from 'sonner';
@@ -20,7 +21,7 @@ import type {AutomatedEmail} from '@tryghost/admin-x-framework/api/automated-ema
 const EmailPreviewRow: React.FC<{
     automatedEmail: AutomatedEmail,
     emailType: 'free' | 'paid',
-    icon: 'user-add' | 'bills',
+    icon: React.ReactNode,
     title: string,
     enabled: boolean,
     isBusy: boolean,
@@ -48,7 +49,7 @@ const EmailPreviewRow: React.FC<{
                     onClick={onEdit}
                 >
                     <span className='flex size-10 shrink-0 items-center justify-center rounded-full bg-muted'>
-                        <Icon colorClass='text-muted-foreground' name={icon} size='md' />
+                        <span className='text-muted-foreground [&>svg]:size-5'>{icon}</span>
                     </span>
                     <span className='min-w-0 grow'>
                         <span className='block leading-tight font-medium' data-testid={`${emailType}-welcome-email-title`}>{title}</span>
@@ -110,7 +111,7 @@ const MemberEmailsTable: React.FC<{
                 automatedEmail={freeEmailForDisplay}
                 emailType='free'
                 enabled={freeWelcomeEmailEnabled}
-                icon='user-add'
+                icon={<LucideIcon.UserPlus />}
                 isBusy={isBusy}
                 isInitialLoading={isLoading}
                 title='Free members welcome email'
@@ -122,7 +123,7 @@ const MemberEmailsTable: React.FC<{
                     automatedEmail={paidEmailForDisplay}
                     emailType='paid'
                     enabled={paidWelcomeEmailEnabled}
-                    icon='bills'
+                    icon={<LucideIcon.Banknote />}
                     isBusy={isBusy}
                     isInitialLoading={isLoading}
                     title='Paid members welcome email'
diff --git a/apps/admin-x-settings/src/components/settings/membership/member-emails/welcome-email-modal.tsx b/apps/admin-x-settings/src/components/settings/membership/member-emails/welcome-email-modal.tsx
index ec5958f8613..b7577be9e76 100644
--- a/apps/admin-x-settings/src/components/settings/membership/member-emails/welcome-email-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/member-emails/welcome-email-modal.tsx
@@ -6,7 +6,7 @@ import MemberEmailEditor from './member-email-editor';
 import WelcomeEmailPreviewFrame from './welcome-email-preview-frame';
 import {DirtyConfirmDialog, useDirtyConfirmation} from '@tryghost/shade/patterns';
 import {FieldError} from '@tryghost/shade/components';
-import {Icon, Modal, TextField} from '@tryghost/admin-x-design-system';
+import {Modal, TextField} from '@tryghost/admin-x-design-system';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
 import {getWelcomeEmailValidationErrors} from './welcome-email-validation';
 import {useBrowseAutomatedEmails, useEditAutomatedEmail, usePreviewWelcomeEmail} from '@tryghost/admin-x-framework/api/automated-emails';
@@ -20,7 +20,7 @@ import TestEmailDropdown from './test-email-dropdown';
 import type {AutomatedEmail} from '@tryghost/admin-x-framework/api/automated-emails';
 
 import {Button, Popover, PopoverTrigger, Tabs, TabsList, TabsTrigger} from '@tryghost/shade/components';
-import {cn} from '@tryghost/shade/utils';
+import {LucideIcon, cn} from '@tryghost/shade/utils';
 
 interface EmailPreviewModalContentProps {
     title: string;
@@ -261,7 +261,7 @@ const WelcomeEmailModal = NiceModal.create<WelcomeEmailModalProps>(({emailType =
                                     </div>
                                     <Popover open={showTestDropdown} onOpenChange={setShowTestDropdown}>
                                         <PopoverTrigger asChild>
-                                            <Button type='button' variant='outline'><Icon name='send' size='sm' />Test</Button>
+                                            <Button type='button' variant='outline'><LucideIcon.Send />Test</Button>
                                         </PopoverTrigger>
                                         {showTestDropdown && (
                                             <TestEmailDropdown automatedEmailId={automatedEmail.id} lexical={formState.lexical} subject={formState.subject} validateForm={validate} />
diff --git a/apps/admin-x-settings/src/components/settings/membership/portal/look-and-feel.tsx b/apps/admin-x-settings/src/components/settings/membership/portal/look-and-feel.tsx
index e18368b318b..63ff2333376 100644
--- a/apps/admin-x-settings/src/components/settings/membership/portal/look-and-feel.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/portal/look-and-feel.tsx
@@ -1,7 +1,8 @@
+import BrandIcon, {type BrandIconName} from '../../../icons/brand-icon';
 import React, {useState} from 'react';
 import {APIError} from '@tryghost/admin-x-framework/errors';
 import {Button, Field, FieldLabel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, ToggleGroup, ToggleGroupItem} from '@tryghost/shade/components';
-import {Form, Icon, TextField} from '@tryghost/admin-x-design-system';
+import {Form, TextField} from '@tryghost/admin-x-design-system';
 import {ImageUpload, ImageUploadAction, ImageUploadActions, ImageUploadDropzone, ImageUploadImage, ImageUploadPreview} from '@tryghost/shade/patterns';
 import {Inline, Text} from '@tryghost/shade/primitives';
 import {type Setting, type SettingValue, getSettingValues} from '@tryghost/admin-x-framework/api/settings';
@@ -9,7 +10,7 @@ import {Trash2, Upload} from 'lucide-react';
 import {getImageUrl, useUploadImage} from '@tryghost/admin-x-framework/api/images';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
 
-const defaultButtonIcons = [
+const defaultButtonIcons: Array<{icon: BrandIconName; label: string; value: string}> = [
     {
         icon: 'portal-icon-1',
         label: 'Portal icon 1',
@@ -108,7 +109,7 @@ const LookAndFeel: React.FC<{
                             >
                                 {defaultButtonIcons.map(iconConfig => (
                                     <ToggleGroupItem key={iconConfig.value} aria-label={iconConfig.label} className='size-[46px] p-3' value={iconConfig.value}>
-                                        <Icon className='size-5 opacity-70 transition-all hover:opacity-100' name={iconConfig.icon} />
+                                        <BrandIcon className='size-5 opacity-70 transition-all hover:opacity-100' name={iconConfig.icon} />
                                     </ToggleGroupItem>
                                 ))}
                             </ToggleGroup>
diff --git a/apps/admin-x-settings/src/components/settings/membership/stripe/stripe-connect-modal.tsx b/apps/admin-x-settings/src/components/settings/membership/stripe/stripe-connect-modal.tsx
index 71d113078f6..2cf7e44dd02 100644
--- a/apps/admin-x-settings/src/components/settings/membership/stripe/stripe-connect-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/stripe/stripe-connect-modal.tsx
@@ -8,9 +8,10 @@ import StripeLogo from '../../../../assets/images/stripe-emblem.svg';
 import StripeVerifiedBadge from '../../../../assets/images/stripe-verified.svg';
 import useSettingGroup from '../../../../hooks/use-setting-group';
 import {Button, Field, FieldError, FieldLabel, Switch, Textarea} from '@tryghost/shade/components';
-import {ConfirmationModal, Form, Icon, LimitModal, Modal, TextField} from '@tryghost/admin-x-design-system';
+import {ConfirmationModal, Form, LimitModal, Modal, TextField} from '@tryghost/admin-x-design-system';
 import {HostLimitError, useLimiter} from '../../../../hooks/use-limiter';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {Text} from '@tryghost/shade/primitives';
 import {checkStripeEnabled, getSettingValue, getSettingValues, useDeleteStripeSettings, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
@@ -185,11 +186,11 @@ const Connected: React.FC<{onClose?: () => void}> = ({onClose}) => {
         <section>
             <div className='flex items-center justify-between'>
                 <Button className='text-destructive hover:text-destructive' disabled={isFetchingMembers} type='button' variant='ghost' onClick={openDisconnectStripeModal}>
-                    <Icon name='link-broken' size='sm' />
+                    <LucideIcon.Unlink />
                     Disconnect
                 </Button>
                 <Button aria-label='Close' size='icon' type='button' variant='ghost' onClick={onClose}>
-                    <Icon name='close' size='sm' />
+                    <LucideIcon.X />
                 </Button>
             </div>
             <div className='my-20 flex flex-col items-center'>
diff --git a/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-modal.tsx b/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-modal.tsx
index a3f0f970cc1..fe44bee1687 100644
--- a/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-modal.tsx
@@ -6,8 +6,9 @@ import useSettingGroup from '../../../../hooks/use-setting-group';
 import useSortableIndexedList from '../../../../hooks/use-sortable-indexed-list';
 import useUrlInput from '../../../../hooks/use-url-input';
 import {Button, Combobox, ComboboxContent, ComboboxTrigger, ComboboxValue, Field, FieldDescription, FieldError, FieldLabel, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, MultiSelectCombobox, SortableList, Switch} from '@tryghost/shade/components';
-import {ConfirmationModal, Form, Icon, Modal, TextField} from '@tryghost/admin-x-design-system';
+import {ConfirmationModal, Form, Modal, TextField} from '@tryghost/admin-x-design-system';
 import {type ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
 import {Text} from '@tryghost/shade/primitives';
 import {type Tier, useAddTier, useBrowseTiers, useEditTier} from '@tryghost/admin-x-framework/api/tiers';
@@ -346,7 +347,7 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
                             items={benefits.items}
                             itemSeparator={false}
                             renderItem={({id, item}) => <div className='relative flex w-full items-center gap-5'>
-                                <div className='absolute top-1/2 left-[-32px] flex size-6 -translate-y-1/2 items-center justify-center bg-background group-hover:hidden'><Icon name='check' size='sm' /></div>
+                                <div className='absolute top-1/2 left-[-32px] flex size-6 -translate-y-1/2 items-center justify-center bg-background group-hover:hidden'><LucideIcon.Check className='size-4' /></div>
                                 <TextField
                                     // className='grow border-b border-grey-500 py-2 focus:border-grey-800 group-hover:border-grey-600'
                                     maxLength={191}
@@ -354,14 +355,14 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
                                     onChange={e => benefits.updateItem(id, e.target.value)}
                                 />
                                 <Button aria-label='Delete benefit' className='absolute top-1/2 right-1 z-10 size-5! -translate-y-1/2 p-0! opacity-0 group-hover:opacity-100' size='icon' type='button' variant='secondary' onClick={() => benefits.removeItem(id)}>
-                                    <Icon name='trash' size='sm' />
+                                    <LucideIcon.Trash2 />
                                 </Button>
                             </div>}
                             onMove={benefits.moveItem}
                         />
                     </div>
                     <div className="relative mt-1 flex items-center gap-3">
-                        <Icon name='check' size='sm' />
+                        <LucideIcon.Check className='size-4' />
                         <TextField
                             className='grow'
                             containerClassName='w-100'
@@ -384,7 +385,7 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
                             type='button'
                             onClick={() => benefits.addItem()}
                         >
-                            <Icon name='add' size='sm' />
+                            <LucideIcon.Plus />
                         </Button>
                     </div>
                 </Form>
diff --git a/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-preview.tsx b/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-preview.tsx
index e94deff8aa9..9c12c698c4e 100644
--- a/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-preview.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-preview.tsx
@@ -1,11 +1,10 @@
 import React, {useState} from 'react';
 import clsx from 'clsx';
 import {Button} from '@tryghost/shade/components';
-import {Icon} from '@tryghost/admin-x-design-system';
+import {LucideIcon, formatNumber} from '@tryghost/shade/utils';
 import {Text} from '@tryghost/shade/primitives';
 import {type TierFormState} from './tier-detail-modal';
 import {currencyToDecimal, getSymbol} from '../../../../utils/currency';
-import {formatNumber} from '@tryghost/shade/utils';
 
 interface TierDetailPreviewProps {
     tier: TierFormState;
@@ -35,7 +34,7 @@ const TierBenefits: React.FC<{benefits: string[]}> = ({benefits}) => {
         return (
             <div className="mt-4 w-full text-md leading-snug text-grey-900 opacity-30">
                 <div className="mb-2.5 flex items-start">
-                    <Icon className="mt-[3px] mr-[10px] size-3.5! min-w-[14px] overflow-visible stroke-[3px]!" name='check' />
+                    <LucideIcon.Check className="mt-[3px] mr-[10px] size-3.5! min-w-[14px] overflow-visible stroke-[3px]!" />
                     <div>Expert analysis</div>
                 </div>
             </div>
@@ -53,7 +52,7 @@ const TierBenefits: React.FC<{benefits: string[]}> = ({benefits}) => {
                     return (
                         <div key={`${benefit}:${occurrence}`} className="mt-4 w-full text-md leading-snug text-grey-900">
                             <div className="mb-2.5 flex items-start">
-                                <Icon className="mt-[3px] mr-[10px] size-3.5! min-w-[14px] overflow-visible stroke-[3px]!" name='check' />
+                                <LucideIcon.Check className="mt-[3px] mr-[10px] size-3.5! min-w-[14px] overflow-visible stroke-[3px]!" />
                                 <div>{benefit}</div>
                             </div>
                         </div>
diff --git a/apps/admin-x-settings/src/components/settings/membership/tiers/tiers-list.tsx b/apps/admin-x-settings/src/components/settings/membership/tiers/tiers-list.tsx
index 49ef6477e7d..c693de51e48 100644
--- a/apps/admin-x-settings/src/components/settings/membership/tiers/tiers-list.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/tiers/tiers-list.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import {BadgeDollarSign} from 'lucide-react';
-import {Icon} from '@tryghost/admin-x-design-system';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {NoValueLabel, NoValueLabelIcon} from '@tryghost/shade/components';
 import {type Tier} from '@tryghost/admin-x-framework/api/tiers';
 import {TrialDaysLabel} from './tier-detail-preview';
@@ -81,7 +81,7 @@ const TiersList: React.FC<TiersListProps> = ({
                 }}>
                     <div className='flex size-full flex-col items-center justify-center'>
                         <div className='flex flex-col items-center justify-center'>
-                            <div className='translate-y-[15px] transition-all group-hover:translate-y-0'><Icon colorClass='text-green' name='add' /></div>
+                            <div className='translate-y-[15px] transition-all group-hover:translate-y-0'><LucideIcon.Plus className='size-5 text-green' /></div>
                             <div className='mt-2 translate-y-[-10px] font-semibold text-green opacity-0 transition-all group-hover:translate-y-0 group-hover:opacity-100'>Add tier</div>
                         </div>
                     </div>
diff --git a/apps/admin-x-settings/src/components/settings/site/change-theme.tsx b/apps/admin-x-settings/src/components/settings/site/change-theme.tsx
index 493d79a779b..e537b1fc923 100644
--- a/apps/admin-x-settings/src/components/settings/site/change-theme.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/change-theme.tsx
@@ -2,7 +2,8 @@ import NiceModal from '@ebay/nice-modal-react';
 import React, {useEffect, useState} from 'react';
 import TopLevelGroup from '../../top-level-group';
 import {Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from '@tryghost/shade/components';
-import {Icon, LimitModal, SettingGroupContent} from '@tryghost/admin-x-design-system';
+import {LimitModal, SettingGroupContent} from '@tryghost/admin-x-design-system';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {Text} from '@tryghost/shade/primitives';
 import {type Theme, useBrowseThemes} from '@tryghost/admin-x-framework/api/themes';
 import {downloadFile, getGhostPaths} from '@tryghost/admin-x-framework/helpers';
@@ -81,7 +82,7 @@ const ChangeTheme: React.FC<{ keywords: string[] }> = ({keywords}) => {
                     <div className='-mr-3'>
                         <DropdownMenu>
                             <DropdownMenuTrigger asChild>
-                                <Button aria-label='Menu' disabled={!activeTheme} size='icon' type='button' variant='ghost'><Icon name='ellipsis' size='sm' /></Button>
+                                <Button aria-label='Menu' disabled={!activeTheme} size='icon' type='button' variant='ghost'><LucideIcon.Ellipsis /></Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align='end'>
                                 <DropdownMenuItem onSelect={openThemeEditor}>Edit code</DropdownMenuItem>
diff --git a/apps/admin-x-settings/src/components/settings/site/navigation/navigation-edit-form.tsx b/apps/admin-x-settings/src/components/settings/site/navigation/navigation-edit-form.tsx
index ede7351aa48..283c2345349 100644
--- a/apps/admin-x-settings/src/components/settings/site/navigation/navigation-edit-form.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/navigation/navigation-edit-form.tsx
@@ -1,8 +1,8 @@
 import NavigationItemEditor from './navigation-item-editor';
 import React from 'react';
 import {Button, SortableList} from '@tryghost/shade/components';
-import {Icon} from '@tryghost/admin-x-design-system';
 import {Inline} from '@tryghost/shade/primitives';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {type NavigationEditor} from '../../../../hooks/site/use-navigation-editor';
 
 const NavigationEditForm: React.FC<{
@@ -17,7 +17,7 @@ const NavigationEditForm: React.FC<{
             itemSeparator={false}
             renderItem={item => (
                 <NavigationItemEditor
-                    action={<Button aria-label='Delete navigation item' size='icon' type='button' variant='ghost' onClick={() => navigation.removeItem(item.id)}><Icon name='trash' size='sm' /></Button>}
+                    action={<Button aria-label='Delete navigation item' size='icon' type='button' variant='ghost' onClick={() => navigation.removeItem(item.id)}><LucideIcon.Trash2 /></Button>}
                     baseUrl={baseUrl}
                     clearError={key => navigation.clearError(item.id, key)}
                     item={item}
@@ -28,10 +28,10 @@ const NavigationEditForm: React.FC<{
         />
         <Inline align='start' gap='md'>
             <Inline align='center' className='h-[calc(var(--control-height)+0.5rem)] shrink-0 translate-y-0.5 pt-2'>
-                <Icon colorClass='text-grey-300 dark:text-grey-900' name='add' size='sm' />
+                <LucideIcon.Plus className='size-4 text-muted-foreground' />
             </Inline>
             <NavigationItemEditor
-                action={<Button aria-label='Add navigation item' className='mx-2' data-testid="add-button" size='icon' type='button' variant='ghost' onClick={navigation.addItem}><Icon name='add' size='sm' /></Button>}
+                action={<Button aria-label='Add navigation item' className='mx-2' data-testid="add-button" size='icon' type='button' variant='ghost' onClick={navigation.addItem}><LucideIcon.Plus /></Button>}
                 addItem={navigation.addItem}
                 baseUrl={baseUrl}
                 className="mt-1"
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsx b/apps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsx
index aa235e82002..3fc7bd4d461 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsx
@@ -3,8 +3,9 @@ import NiceModal from '@ebay/nice-modal-react';
 import React from 'react';
 import useCustomFonts from '../../../../hooks/use-custom-fonts';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from '@tryghost/shade/components';
-import {ConfirmationModal, Icon, LimitModal, ModalPage} from '@tryghost/admin-x-design-system';
+import {ConfirmationModal, LimitModal, ModalPage} from '@tryghost/admin-x-design-system';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {type Theme, isActiveTheme, isDefaultTheme, isDeletableTheme, isLegacyTheme, useActivateTheme, useDeleteTheme} from '@tryghost/admin-x-framework/api/themes';
 import {downloadFile, getGhostPaths} from '@tryghost/admin-x-framework/helpers';
 import {toast} from 'sonner';
@@ -158,7 +159,7 @@ const ThemeActions: React.FC<ThemeActionProps> = ({
             {actions}
             <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                    <Button aria-label='Menu' size='icon' type='button' variant='ghost'><Icon name='ellipsis' size='sm' /></Button>
+                    <Button aria-label='Menu' size='icon' type='button' variant='ghost'><LucideIcon.Ellipsis /></Button>
                 </DropdownMenuTrigger>
                 {/* legacy ModalPage overlay is z-[1000]; keep the portalled menu above it */}
                 <DropdownMenuContent align='end' className='z-[9999]'>
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/theme-preview.tsx b/apps/admin-x-settings/src/components/settings/site/theme/theme-preview.tsx
index 5504bd0748e..a3a3701aca5 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/theme-preview.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/theme-preview.tsx
@@ -1,8 +1,9 @@
 import React, {useState} from 'react';
 import SettingsBreadcrumbs from '../../settings-breadcrumbs';
 import {Button, Field, FieldLabel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@tryghost/shade/components';
-import {DesktopChrome, Icon, MobileChrome, PageHeader} from '@tryghost/admin-x-design-system';
+import {DesktopChrome, MobileChrome, PageHeader} from '@tryghost/admin-x-design-system';
 import {Inline} from '@tryghost/shade/primitives';
+import {LucideIcon} from '@tryghost/shade/utils';
 import {type OfficialTheme, type ThemeVariant} from '../../../providers/settings-app-provider';
 import {type Theme, isDefaultOrLegacyTheme} from '@tryghost/admin-x-framework/api/themes';
 
@@ -104,10 +105,10 @@ const ThemePreview: React.FC<{
         <div className='flex justify-end gap-8'>
             <Inline gap='sm'>
                 <Button aria-label='Desktop preview' size='icon' type='button' variant='ghost' onClick={() => setPreviewMode('desktop')}>
-                    <Icon colorClass={previewMode === 'desktop' ? 'text-foreground' : 'text-muted-foreground'} name='laptop' size='sm' />
+                    <LucideIcon.Laptop className={previewMode === 'desktop' ? 'text-foreground' : 'text-muted-foreground'} />
                 </Button>
                 <Button aria-label='Mobile preview' size='icon' type='button' variant='ghost' onClick={() => setPreviewMode('mobile')}>
-                    <Icon colorClass={previewMode === 'mobile' ? 'text-foreground' : 'text-muted-foreground'} name='mobile' size='sm' />
+                    <LucideIcon.Smartphone className={previewMode === 'mobile' ? 'text-foreground' : 'text-muted-foreground'} />
                 </Button>
             </Inline>
             <Button
diff --git a/apps/admin-x-settings/src/components/sidebar.tsx b/apps/admin-x-settings/src/components/sidebar.tsx
index 007b7c326b6..e1a7fa7b646 100644
--- a/apps/admin-x-settings/src/components/sidebar.tsx
+++ b/apps/admin-x-settings/src/components/sidebar.tsx
@@ -212,27 +212,27 @@ const Sidebar: React.FC = () => {
 
                 {/* General settings */}
                 <SettingNavSection isVisible={checkVisible(Object.values(generalSearchKeywords).flat())} title="General settings">
-                    <NavItem icon='textfield' keywords={generalSearchKeywords.titleAndDescription} navid='general' title="Title & description" onClick={handleSectionClick} />
-                    <NavItem icon='world-clock' keywords={generalSearchKeywords.timeZone} navid='timezone' title="Timezone" onClick={handleSectionClick} />
-                    <NavItem icon='language' keywords={generalSearchKeywords.publicationLanguage} navid='publication-language' title="Publication language" onClick={handleSectionClick} />
-                    <NavItem icon='user-pen' keywords={generalSearchKeywords.users} navid='staff' title="Staff" onClick={handleSectionClick} />
-                    <NavItem icon='layer' keywords={generalSearchKeywords.metadata} navid='metadata' title="Meta data" onClick={handleSectionClick} />
-                    <NavItem icon='like' keywords={generalSearchKeywords.socialAccounts} navid='social-accounts' title="Social accounts" onClick={handleSectionClick} />
-                    <NavItem icon='baseline-chart' keywords={generalSearchKeywords.analytics} navid='analytics' title="Analytics" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.TextCursorInput />} keywords={generalSearchKeywords.titleAndDescription} navid='general' title="Title & description" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.Clock4 />} keywords={generalSearchKeywords.timeZone} navid='timezone' title="Timezone" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.Languages />} keywords={generalSearchKeywords.publicationLanguage} navid='publication-language' title="Publication language" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.UserPen />} keywords={generalSearchKeywords.users} navid='staff' title="Staff" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.Layers />} keywords={generalSearchKeywords.metadata} navid='metadata' title="Meta data" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.ThumbsUp />} keywords={generalSearchKeywords.socialAccounts} navid='social-accounts' title="Social accounts" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.TrendingUp />} keywords={generalSearchKeywords.analytics} navid='analytics' title="Analytics" onClick={handleSectionClick} />
                 </SettingNavSection>
 
                 {/* Site settings */}
                 <SettingNavSection isVisible={checkVisible(Object.values(siteSearchKeywords).flat())} title="Site">
-                    <NavItem icon='palette' keywords={siteSearchKeywords.design} navid='design' title="Design & branding" onClick={handleSectionClick} />
-                    <NavItem icon='layout-2-col' keywords={siteSearchKeywords.theme} navid='theme' title="Theme" onClick={handleSectionClick} />
-                    <NavItem icon='navigation' keywords={siteSearchKeywords.navigation} navid='navigation' title="Navigation" onClick={handleSectionClick} />
-                    <NavItem icon='megaphone' keywords={siteSearchKeywords.announcementBar} navid='announcement-bar' title="Announcement bar" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.SwatchBook />} keywords={siteSearchKeywords.design} navid='design' title="Design & branding" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.PanelsTopLeft />} keywords={siteSearchKeywords.theme} navid='theme' title="Theme" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.SquareMenu />} keywords={siteSearchKeywords.navigation} navid='navigation' title="Navigation" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.Megaphone />} keywords={siteSearchKeywords.announcementBar} navid='announcement-bar' title="Announcement bar" onClick={handleSectionClick} />
                 </SettingNavSection>
 
                 {/* Membership settings */}
                 <SettingNavSection isVisible={checkVisible([...visibleMembershipSearchKeywords, ...visibleEmailSearchKeywords])} title="Membership">
                     <NavItem
-                        icon='key'
+                        icon={<LucideIcon.KeyRound />}
                         keywords={membershipSearchKeywords.access}
                         navid={['members', 'spam-filters']}
                         title={(
@@ -243,34 +243,34 @@ const Sidebar: React.FC = () => {
                         )}
                         onClick={handleSectionClick}
                     />
-                    <NavItem icon='bills' keywords={membershipSearchKeywords.tiers} navid='tiers' title="Tiers" onClick={handleSectionClick} />
-                    <NavItem icon='portal' keywords={membershipSearchKeywords.portal} navid='portal' title="Signup portal" onClick={handleSectionClick} />
-                    {paidMembersEnabled && <NavItem icon='gift' keywords={membershipSearchKeywords.giftSubscriptions} navid='gift-subscriptions' title="Gift subscriptions" onClick={handleSectionClick} />}
-                    {!hasAutomations && <NavItem icon='mailplus' keywords={membershipSearchKeywords.memberEmails} navid='memberemails' title="Welcome emails" onClick={handleSectionClick} />}
-                    {hasTipsAndDonations && hasStripeEnabled && <NavItem icon='piggybank' keywords={membershipSearchKeywords.tips} navid='tips-and-donations' title="Tips & donations" onClick={handleSectionClick} />}
-                    {hasCustomFields && <NavItem icon='textfield' keywords={membershipSearchKeywords.customFields} navid='custom-fields' title="Custom fields" onClick={handleSectionClick} />}
+                    <NavItem icon={<LucideIcon.Banknote />} keywords={membershipSearchKeywords.tiers} navid='tiers' title="Tiers" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.SquareUserRound />} keywords={membershipSearchKeywords.portal} navid='portal' title="Signup portal" onClick={handleSectionClick} />
+                    {paidMembersEnabled && <NavItem icon={<LucideIcon.Gift />} keywords={membershipSearchKeywords.giftSubscriptions} navid='gift-subscriptions' title="Gift subscriptions" onClick={handleSectionClick} />}
+                    {!hasAutomations && <NavItem icon={<LucideIcon.MailPlus />} keywords={membershipSearchKeywords.memberEmails} navid='memberemails' title="Welcome emails" onClick={handleSectionClick} />}
+                    {hasTipsAndDonations && hasStripeEnabled && <NavItem icon={<LucideIcon.PiggyBank />} keywords={membershipSearchKeywords.tips} navid='tips-and-donations' title="Tips & donations" onClick={handleSectionClick} />}
+                    {hasCustomFields && <NavItem icon={<LucideIcon.TextCursorInput />} keywords={membershipSearchKeywords.customFields} navid='custom-fields' title="Custom fields" onClick={handleSectionClick} />}
                     {hasAutomations
-                        ? <NavItem icon='email' keywords={visibleEmailSearchKeywords} navid={['enable-newsletters', 'default-recipients', 'emails', 'mailgun']} title="Email" onClick={handleSectionClick} />
-                        : <NavItem icon='email' keywords={visibleEmailSearchKeywords} navid={['enable-newsletters', 'default-recipients', 'newsletters', 'mailgun']} title="Newsletters" onClick={handleSectionClick} />
+                        ? <NavItem icon={<LucideIcon.Mail />} keywords={visibleEmailSearchKeywords} navid={['enable-newsletters', 'default-recipients', 'emails', 'mailgun']} title="Email" onClick={handleSectionClick} />
+                        : <NavItem icon={<LucideIcon.Mail />} keywords={visibleEmailSearchKeywords} navid={['enable-newsletters', 'default-recipients', 'newsletters', 'mailgun']} title="Newsletters" onClick={handleSectionClick} />
                     }
                 </SettingNavSection>
 
                 {/* Growth */}
                 <SettingNavSection isVisible={checkVisible(visibleGrowthSearchKeywords)} title="Growth">
-                    <NavItem icon='ap-network' keywords={growthSearchKeywords.network} navid='network' title="Network" onClick={handleSectionClick} />
-                    <NavItem icon='globe-simple' keywords={growthSearchKeywords.explore} navid='explore' title="Ghost Explore" onClick={handleSectionClick} />
-                    <NavItem icon='heart' keywords={growthSearchKeywords.recommendations} navid='recommendations' title="Recommendations" onClick={handleSectionClick} />
-                    <NavItem icon='emailfield' keywords={growthSearchKeywords.embedSignupForm} navid='embed-signup-form' title="Signup forms" onClick={handleSectionClick} />
-                    {hasStripeEnabled && <NavItem icon='discount' keywords={growthSearchKeywords.offers} navid='offers' title="Offers" onClick={handleSectionClick} />}
+                    <NavItem icon={<LucideIcon.Waypoints />} keywords={growthSearchKeywords.network} navid='network' title="Network" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.Globe />} keywords={growthSearchKeywords.explore} navid='explore' title="Ghost Explore" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.Heart />} keywords={growthSearchKeywords.recommendations} navid='recommendations' title="Recommendations" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.ClipboardType />} keywords={growthSearchKeywords.embedSignupForm} navid='embed-signup-form' title="Signup forms" onClick={handleSectionClick} />
+                    {hasStripeEnabled && <NavItem icon={<LucideIcon.Tag />} keywords={growthSearchKeywords.offers} navid='offers' title="Offers" onClick={handleSectionClick} />}
                 </SettingNavSection>
 
                 <SettingNavSection isVisible={checkVisible(Object.values(advancedSearchKeywords).flat())} title="Advanced">
-                    <NavItem icon='modules-3' keywords={advancedSearchKeywords.integrations} navid='integrations' title="Integrations" onClick={handleSectionClick} />
-                    <NavItem icon='download' keywords={advancedSearchKeywords.migrationtools} navid='migration' title="Import/Export" onClick={handleSectionClick} />
-                    <NavItem icon='brackets' keywords={advancedSearchKeywords.codeInjection} navid='code-injection' title="Code injection" onClick={handleSectionClick} />
-                    <NavItem icon='labs-flask' keywords={advancedSearchKeywords.labs} navid='labs' title="Labs" onClick={handleSectionClick} />
-                    <NavItem icon='time-back' keywords={advancedSearchKeywords.history} navid='history' title="History" onClick={handleSectionClick} />
-                    <NavItem icon='warning' keywords={advancedSearchKeywords.dangerzone} navid='dangerzone' title="Danger zone" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.Blocks />} keywords={advancedSearchKeywords.integrations} navid='integrations' title="Integrations" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.Download />} keywords={advancedSearchKeywords.migrationtools} navid='migration' title="Import/Export" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.Code />} keywords={advancedSearchKeywords.codeInjection} navid='code-injection' title="Code injection" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.FlaskConical />} keywords={advancedSearchKeywords.labs} navid='labs' title="Labs" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.History />} keywords={advancedSearchKeywords.history} navid='history' title="History" onClick={handleSectionClick} />
+                    <NavItem icon={<LucideIcon.TriangleAlert />} keywords={advancedSearchKeywords.dangerzone} navid='dangerzone' title="Danger zone" onClick={handleSectionClick} />
                 </SettingNavSection>
 
                 {!filter &&
diff --git a/apps/admin/src/settings/membership/custom-fields.acceptance.test.tsx b/apps/admin/src/settings/membership/custom-fields.acceptance.test.tsx
index 71844bdcf63..9b55efda1f1 100644
--- a/apps/admin/src/settings/membership/custom-fields.acceptance.test.tsx
+++ b/apps/admin/src/settings/membership/custom-fields.acceptance.test.tsx
@@ -58,7 +58,6 @@ describe("Custom fields", () => {
         await expect(row).toHaveCount(1);
         await expect.element(row).toHaveTextContent("Company");
         await expect.element(row).toHaveTextContent("Short text");
-        await expect.element(row).toHaveTextContent("Aa");
     });
 
     it("validates and creates a short-text field without sending a key", async () => {

From 93a42617be46d5184f723a3ce1aa964954c52143 Mon Sep 17 00:00:00 2001
From: Fabien O'Carroll <fabien@allou.is>
Date: Tue, 21 Jul 2026 13:00:49 +0900
Subject: [PATCH 5/6] Fixed lazy URL primary_tag on tied tag sort_order
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref https://linear.app/ghost/issue/HKG-1822

primary_tag is a post's first tag if it is public, so it depends on the
order the tags relation returns. The lazy URL path loads tags through the
model's tags() relation, which orders by sort_order with no tie-breaker.
When several of a post's tags share a sort_order — the state bulk and import
operations leave behind — MySQL is free to return them in different orders
per query, so the lazy path could resolve a different primary_tag than the
eager service and build a different URL for the same post under a
{primary_tag} permalink (seen in production as eager serving
/disaster-preparedness/ while the serializer produced /claremont-elmwood/).

Order tags()/authors() by posts_tags.id / posts_authors.id (attach order)
after sort_order. That is the tag the eager service already serves, so the
lazy path now matches it without touching eager's own raw-knex query. The
pivot id is added to withPivot because the relation query uses DISTINCT,
which requires ORDER BY columns to appear in the SELECT list.
---
 ghost/core/core/server/models/post.js         | 22 +++++++++---
 .../integration/url-serializer-parity.test.js | 36 +++++++++++++++++++
 2 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/ghost/core/core/server/models/post.js b/ghost/core/core/server/models/post.js
index b3210cd182a..0239a6566dd 100644
--- a/ghost/core/core/server/models/post.js
+++ b/ghost/core/core/server/models/post.js
@@ -950,15 +950,29 @@ Post = ghostBookshelf.Model.extend({
     },
 
     authors: function authors() {
+        // posts_authors.id breaks sort_order ties deterministically (by attach
+        // order); without it MySQL can order tied rows differently per query,
+        // which changes the computed primary_author. See tags() below.
+        // `id` is pivoted in so it is in the SELECT list — the query uses
+        // DISTINCT, which requires ORDER BY columns to be selected.
         return this.belongsToMany('User', 'posts_authors', 'post_id', 'author_id')
-            .withPivot('sort_order')
-            .query('orderBy', 'sort_order', 'ASC');
+            .withPivot(['sort_order', 'id'])
+            .query('orderBy', 'sort_order', 'ASC')
+            .query('orderBy', 'posts_authors.id', 'ASC');
     },
 
     tags: function tags() {
+        // posts_tags.id breaks sort_order ties deterministically (by attach
+        // order). primary_tag is tags[0]-if-public, so a non-deterministic tie
+        // order (which MySQL produces for tags sharing a sort_order) makes the
+        // primary tag — and the post's URL under a {primary_tag} permalink —
+        // depend on the query shape.
+        // `id` is pivoted in so it is in the SELECT list — the query uses
+        // DISTINCT, which requires ORDER BY columns to be selected.
         return this.belongsToMany('Tag', 'posts_tags', 'post_id', 'tag_id')
-            .withPivot('sort_order')
-            .query('orderBy', 'sort_order', 'ASC');
+            .withPivot(['sort_order', 'id'])
+            .query('orderBy', 'sort_order', 'ASC')
+            .query('orderBy', 'posts_tags.id', 'ASC');
     },
 
     mobiledoc_revisions() {
diff --git a/ghost/core/test/integration/url-serializer-parity.test.js b/ghost/core/test/integration/url-serializer-parity.test.js
index 721d0d11471..c7f7b7ee052 100644
--- a/ghost/core/test/integration/url-serializer-parity.test.js
+++ b/ghost/core/test/integration/url-serializer-parity.test.js
@@ -11,6 +11,7 @@ const {createFindResource} = require('../../core/server/services/url/lazy-find-r
 const inputSerializer = require('../../core/server/api/endpoints/utils/serializers/input/posts');
 const postsMapper = require('../../core/server/api/endpoints/utils/serializers/output/mappers/posts');
 const memberAttribution = require('../../core/server/services/member-attribution');
+const db = require('../../core/server/data/db');
 
 // Drives the real Content API serializer pipeline (input serializer → model
 // fetch → output mapper → facade) against a lazy backend and compares URLs
@@ -257,4 +258,39 @@ describe('Integration: Content API serializer → lazy URL parity (primary_tag p
             });
         });
     });
+
+    // Regression for the production divergence where a post's tags share a
+    // sort_order (left behind by bulk/import ops). primary_tag is the first
+    // tag if public, so without a tie-break the lazy path's tag load could
+    // order the tied tags differently per query on MySQL, changing the post's
+    // URL under a {primary_tag} permalink (seen as /disaster-preparedness/ vs
+    // /claremont-elmwood/). The posts_tags.id tie-break pins the lazy path to
+    // the first-attached public tag — the tag eager already serves. Only
+    // diverges on MySQL; on sqlite this pins the expected ordering.
+    describe('tied tag sort_order', function () {
+        beforeAll(async function () {
+            // Two public tags with an internal one between them, all sharing
+            // sort_order 0.
+            const tiedPost = await models.Post.add({
+                title: 'Tied Tags', slug: 'tied-tags', status: 'published', lexical: EMPTY_LEXICAL,
+                tags: [
+                    {name: 'First Public', slug: 'first-public'},
+                    {name: '#internal', slug: 'hash-tied-internal'},
+                    {name: 'Second Public', slug: 'second-public'}
+                ]
+            }, {context: {internal: true}, withRelated: ['tags']});
+            await db.knex('posts_tags').where('post_id', tiedPost.id).update({sort_order: 0});
+        });
+
+        it('resolves the lazy tie to the first-attached public tag', async function () {
+            // The suite's facade routes getUrlForResource through the lazy
+            // backend, so this is the lazy path's primary_tag.
+            const mapped = await browsePipeline({slug: 'tied-tags'});
+            assert.match(
+                mapped.url,
+                /\/first-public\//,
+                `expected the first attached public tag as primary_tag, got ${mapped.url}`
+            );
+        });
+    });
 });

From 0f42d69438632a922455a6fe0845a68fcadf1458 Mon Sep 17 00:00:00 2001
From: "tryghost-renovate[bot]"
 <269725441+tryghost-renovate[bot]@users.noreply.github.com>
Date: Thu, 23 Jul 2026 03:27:06 +0000
Subject: [PATCH 6/6] Update dependency @codemirror/lang-markdown to v6.5.1
 (#29479)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR contains the following updates:

| Package | Change |
[Age](https://docs.renovatebot.com/merge-confidence/) |
[Confidence](https://docs.renovatebot.com/merge-confidence/) |
|---|---|---|---|
| @&#8203;codemirror/lang-markdown | [`6.5.0` →
`6.5.1`](https://renovatebot.com/diffs/npm/@codemirror%2flang-markdown/6.5.0/6.5.1)
|
![age](https://developer.mend.io/api/mc/badges/age/npm/@codemirror%2flang-markdown/6.5.1?slim=true)
|
![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@codemirror%2flang-markdown/6.5.0/6.5.1?slim=true)
|

---

### Configuration

📅 **Schedule**: (in timezone Etc/UTC)

- Branch creation
  - Only on Sunday and Saturday (`* * * * 0,6`)
- Between 11:00 PM and 11:59 PM, Monday through Friday (`* 23 * * 1-5`)
- Between 12:00 AM and 04:59 AM, Monday through Saturday (`* 0-4 * *
1-6`)
- Automerge
  - Only on Sunday and Saturday (`* * * * 0,6`)
- Between 11:00 PM and 11:59 PM, Monday through Friday (`* 23 * * 1-5`)
- Between 12:00 AM and 04:59 AM, Monday through Saturday (`* 0-4 * *
1-6`)

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR is behind base branch, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://redirect.github.com/renovatebot/renovate).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0My4yNzIuNiIsInVwZGF0ZWRJblZlciI6IjQzLjI3Mi42IiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119-->

Co-authored-by: tryghost-renovate[bot] <269725441+tryghost-renovate[bot]@users.noreply.github.com>
---
 pnpm-lock.yaml      | 12 ++++++------
 pnpm-workspace.yaml |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1c64fe6c643..ce69b05bec4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,8 +25,8 @@ catalogs:
       specifier: 6.0.2
       version: 6.0.2
     '@codemirror/lang-markdown':
-      specifier: 6.5.0
-      version: 6.5.0
+      specifier: 6.5.1
+      version: 6.5.1
     '@codemirror/lang-yaml':
       specifier: 6.1.3
       version: 6.1.3
@@ -1067,7 +1067,7 @@ importers:
         version: 6.0.2
       '@codemirror/lang-markdown':
         specifier: 'catalog:'
-        version: 6.5.0
+        version: 6.5.1
       '@codemirror/lang-yaml':
         specifier: 'catalog:'
         version: 6.1.3
@@ -5084,8 +5084,8 @@ packages:
   '@codemirror/lang-json@6.0.2':
     resolution: {integrity: sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==}
 
-  '@codemirror/lang-markdown@6.5.0':
-    resolution: {integrity: sha512-0K40bZ35jpHya6FriukbgaleaqzBLZfOh7HuzqbMxBXkbYMJDxfF39c23xOgxFezR+3G+tR2/Mup+Xk865OMvw==}
+  '@codemirror/lang-markdown@6.5.1':
+    resolution: {integrity: sha512-6re5avCNfyRMIoi3XNjbEfQM1vTeVD3JS3g/Fyegyso/eoANFM71Cyvbb66LDyYtQLMEcRFlzioywCqDo9SlLA==}
 
   '@codemirror/lang-yaml@6.1.3':
     resolution: {integrity: sha512-AZ8DJBuXGVHybpBQhmZtgew5//4hv3tdkXnr3vDmOUMJRuB6vn/uuwtmTOTlqEaQFg3hQSVeA90NmvIQyUV6FQ==}
@@ -23983,7 +23983,7 @@ snapshots:
       '@codemirror/language': 6.12.4
       '@lezer/json': 1.0.3
 
-  '@codemirror/lang-markdown@6.5.0':
+  '@codemirror/lang-markdown@6.5.1':
     dependencies:
       '@codemirror/autocomplete': 6.20.3
       '@codemirror/lang-html': 6.4.11
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 381b90715f6..f9fbc4197ac 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -41,7 +41,7 @@ catalog:
   '@codemirror/lang-html': 6.4.11
   '@codemirror/lang-javascript': 6.2.5
   '@codemirror/lang-json': 6.0.2
-  '@codemirror/lang-markdown': 6.5.0
+  '@codemirror/lang-markdown': 6.5.1
   '@codemirror/lang-yaml': 6.1.3
   '@codemirror/language': 6.12.4
   '@codemirror/search': 6.7.1