diff --git a/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx b/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx
index 4c68a4fa40..f1fa63d411 100644
--- a/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx
+++ b/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx
@@ -272,11 +272,11 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
             hideXOnMobile
         >
             <div className='flex h-full grow'>
-                <div className={`hidden grow flex-col md:!visible md:!flex ${previewBgColor === 'grey' ? 'bg-grey-50' : 'bg-white'}`}>
+                <div className={`hidden grow flex-col [@media(min-width:801px)]:!visible [@media(min-width:801px)]:!flex ${previewBgColor === 'grey' ? 'bg-grey-50' : 'bg-white'}`}>
                     {preview}
                 </div>
                 {sidebar &&
-                    <div className='relative flex h-full w-full flex-col border-l border-grey-100 dark:border-grey-900 md:w-auto md:basis-[400px]'>
+                    <div className='relative flex h-full w-full flex-col border-l border-grey-100 dark:border-grey-900 [@media(min-width:801px)]:w-auto [@media(min-width:801px)]:basis-[400px]'>
                         {sidebarHeader ? sidebarHeader : (
                             <div className='flex max-h-[74px] items-center justify-between gap-3 px-7 py-5'>
                                 <Heading level={titleHeadingLevel}>{title}</Heading>