diff --git a/apps/admin-x-settings/src/components/settings/site/theme/OfficialThemes.tsx b/apps/admin-x-settings/src/components/settings/site/theme/OfficialThemes.tsx
index 34a024e8e9..35cee6fa25 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/OfficialThemes.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/OfficialThemes.tsx
@@ -60,6 +60,7 @@ const OfficialThemes: React.FC<{
                 {officialThemes.map((theme) => {
                     const showVariants = hasVariants(theme);
                     const variants = getAllVariants(theme);
+                    const isVariantLooping = variantLoopTheme === theme;
 
                     return (
                         <button key={theme.name} className='flex cursor-pointer flex-col gap-3 text-left' type='button' onClick={() => {
@@ -72,9 +73,8 @@ const OfficialThemes: React.FC<{
                                             <img
                                                 key={`theme-variant-${variant.category.toLowerCase()}`}
                                                 alt={`${theme.name} Theme - ${variant.category}`}
-                                                className={clsx('h-full w-full object-contain transition-opacity duration-500', {
-                                                    'opacity-100': idx === visibleVariantIdx,
-                                                    'opacity-0': idx !== visibleVariantIdx,
+                                                className={clsx('h-full w-full object-contain opacity-0 transition-opacity duration-500', {
+                                                    'opacity-100': idx === visibleVariantIdx && isVariantLooping || !isVariantLooping && idx === 0,
                                                     relative: idx === visibleVariantIdx,
                                                     absolute: idx !== visibleVariantIdx,
                                                     'left-0': idx !== visibleVariantIdx,
@@ -95,9 +95,8 @@ const OfficialThemes: React.FC<{
                                 <Heading level={4}>{theme.name}</Heading>
                                 {showVariants ?
                                     variants.map((variant, idx) => (
-                                        <span className={clsx('absolute left-0 translate-y-px text-sm text-grey-700', {
-                                            'opacity-100': idx === visibleVariantIdx,
-                                            'opacity-0': idx !== visibleVariantIdx
+                                        <span className={clsx('absolute left-0 translate-y-px text-sm text-grey-700 opacity-0', {
+                                            'opacity-100': idx === visibleVariantIdx && isVariantLooping || !isVariantLooping && idx === 0
                                         })}>{variant.category}</span>
                                     )) :
                                     <span className='text-sm text-grey-700'>{theme.category}</span>