diff --git a/apps/admin-x-settings/src/api/themes.ts b/apps/admin-x-settings/src/api/themes.ts
index 09e83dcb11..e315739751 100644
--- a/apps/admin-x-settings/src/api/themes.ts
+++ b/apps/admin-x-settings/src/api/themes.ts
@@ -1,3 +1,4 @@
+import {OfficialTheme} from '../components/providers/ServiceProvider';
 import {createMutation, createQuery} from '../utils/api/hooks';
 import {customThemeSettingsDataType} from './customThemeSettings';
 
@@ -132,12 +133,16 @@ export function isActiveTheme(theme: Theme): boolean {
     return theme.active;
 }
 
-export function isDefaultTheme(theme: Theme): boolean {
-    return theme.name === 'source';
+export function isDefaultTheme(theme: Theme | OfficialTheme): boolean {
+    return theme.name.toLowerCase() === 'source';
 }
 
-export function isLegacyTheme(theme: Theme): boolean {
-    return theme.name === 'casper';
+export function isLegacyTheme(theme: Theme | OfficialTheme): boolean {
+    return theme.name.toLowerCase() === 'casper';
+}
+
+export function isDefaultOrLegacyTheme(theme: Theme | OfficialTheme): boolean {
+    return isDefaultTheme(theme) || isLegacyTheme(theme);
 }
 
 export function isDeletableTheme(theme: Theme): boolean {
diff --git a/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx b/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
index 5aa7de7071..fa4f37572a 100644
--- a/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
@@ -16,7 +16,7 @@ import ThemePreview from './theme/ThemePreview';
 import useHandleError from '../../../utils/api/handleError';
 import useRouting from '../../../hooks/useRouting';
 import {HostLimitError, useLimiter} from '../../../hooks/useLimiter';
-import {InstalledTheme, Theme, ThemesInstallResponseType, useActivateTheme, useBrowseThemes, useInstallTheme, useUploadTheme} from '../../../api/themes';
+import {InstalledTheme, Theme, ThemesInstallResponseType, isDefaultOrLegacyTheme, useActivateTheme, useBrowseThemes, useInstallTheme, useUploadTheme} from '../../../api/themes';
 import {OfficialTheme} from '../../providers/ServiceProvider';
 import {showToast} from '../../../admin-x-ds/global/Toast';
 
@@ -364,7 +364,7 @@ const ChangeThemeModal: React.FC<ChangeThemeModalProps> = ({source, themeRef}) =
             let prompt = <></>;
 
             // default theme can't be installed, only activated
-            if (selectedTheme.ref === 'default') {
+            if (isDefaultOrLegacyTheme(selectedTheme)) {
                 title = 'Activate theme';
                 prompt = <>By clicking below, <strong>{selectedTheme.name}</strong> will automatically be activated as the theme for your site.</>;
             } else {
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/ThemePreview.tsx b/apps/admin-x-settings/src/components/settings/site/theme/ThemePreview.tsx
index 017d0e255b..2ee8d94298 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/ThemePreview.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/ThemePreview.tsx
@@ -9,7 +9,7 @@ import PageHeader from '../../../../admin-x-ds/global/layout/PageHeader';
 import React, {useState} from 'react';
 import Select, {SelectOption} from '../../../../admin-x-ds/global/form/Select';
 import {OfficialTheme, ThemeVariant} from '../../../providers/ServiceProvider';
-import {Theme} from '../../../../api/themes';
+import {Theme, isDefaultOrLegacyTheme} from '../../../../api/themes';
 
 const hasVariants = (theme: OfficialTheme) => theme.variants && theme.variants.length > 0;
 
@@ -72,14 +72,14 @@ const ThemePreview: React.FC<{
 
     if (isInstalling) {
         installButtonLabel = 'Installing...';
-    } else if (selectedTheme.ref === 'default' && !installedTheme?.active) {
+    } else if (isDefaultOrLegacyTheme(selectedTheme) && !installedTheme?.active) {
         installButtonLabel = `Activate ${selectedTheme.name}`;
     } else if (installedTheme) {
         installButtonLabel = `Update ${selectedTheme.name}`;
     }
 
     const handleInstall = () => {
-        if (installedTheme && selectedTheme.ref !== 'default') {
+        if (installedTheme && !isDefaultOrLegacyTheme(selectedTheme)) {
             NiceModal.show(ConfirmationModal, {
                 title: 'Overwrite theme',
                 prompt: (