diff --git a/apps/web/app/home/[account]/_components/dashboard-demo.tsx b/apps/web/app/home/[account]/_components/dashboard-demo.tsx
index bab130053..63528f4c2 100644
--- a/apps/web/app/home/[account]/_components/dashboard-demo.tsx
+++ b/apps/web/app/home/[account]/_components/dashboard-demo.tsx
@@ -3,15 +3,13 @@
 import dynamic from 'next/dynamic';
 
 import { LoadingOverlay } from '@kit/ui/loading-overlay';
-import { Trans } from '@kit/ui/trans';
 
 export const DashboardDemo = dynamic(() => import('./dashboard-demo-charts'), {
   ssr: false,
   loading: () => (
-    <LoadingOverlay>
-      <span className={'text-muted-foreground'}>
-        <Trans i18nKey={'common:loading'} />
-      </span>
-    </LoadingOverlay>
+    <LoadingOverlay
+      fullPage={false}
+      className={'flex flex-1 flex-col items-center justify-center'}
+    />
   ),
 });
diff --git a/apps/web/app/home/[account]/_components/team-account-layout-mobile-navigation.tsx b/apps/web/app/home/[account]/_components/team-account-layout-mobile-navigation.tsx
index a86019025..3c34b7fdd 100644
--- a/apps/web/app/home/[account]/_components/team-account-layout-mobile-navigation.tsx
+++ b/apps/web/app/home/[account]/_components/team-account-layout-mobile-navigation.tsx
@@ -162,7 +162,7 @@ function TeamAccountsModal(props: {
           </DialogTitle>
         </DialogHeader>
 
-        <div className={'py-16'}>
+        <div className={'py-6'}>
           <AccountSelector
             className={'w-full max-w-full'}
             collisionPadding={0}
diff --git a/apps/web/styles/markdoc.css b/apps/web/styles/markdoc.css
index 7a55dcd88..84ed925bf 100644
--- a/apps/web/styles/markdoc.css
+++ b/apps/web/styles/markdoc.css
@@ -10,23 +10,23 @@
 }
 
 .markdoc h1 {
-    @apply mt-14 text-4xl font-semibold font-heading tracking-tight dark:text-white text-foreground;
+    @apply mt-8 lg:mt-14 text-4xl font-semibold font-heading tracking-tight dark:text-white text-foreground;
 }
 
 .markdoc h2 {
-    @apply mb-6 mt-12 font-semibold text-2xl font-heading tracking-tight dark:text-white text-foreground;
+    @apply mb-3 lg:mb-6 mt-6 lg:mt-12 font-semibold text-2xl font-heading tracking-tight dark:text-white text-foreground;
 }
 
 .markdoc h3 {
-    @apply mt-12 text-xl font-semibold font-heading tracking-tight dark:text-white text-foreground;
+    @apply mt-6 lg:mt-12 text-xl font-semibold font-heading tracking-tight dark:text-white text-foreground;
 }
 
 .markdoc h4 {
-    @apply mt-8 text-lg font-medium tracking-tight dark:text-white text-foreground;
+    @apply mt-4 lg:mt-8 text-lg font-medium tracking-tight dark:text-white text-foreground;
 }
 
 .markdoc h5 {
-    @apply mt-6 text-base font-medium tracking-tight dark:text-white text-foreground;
+    @apply mt-3 lg:mt-6 text-base font-medium tracking-tight dark:text-white text-foreground;
 }
 
 .markdoc h6 {
@@ -34,7 +34,7 @@
 }
 
 .markdoc p {
-    @apply mb-6 mt-4 text-base leading-7 text-muted-foreground;
+    @apply mb-3 lg:mb-6 mt-2 lg:mt-4 text-base leading-7 text-muted-foreground;
 }
 
 .markdoc li {
diff --git a/apps/web/styles/theme.utilities.css b/apps/web/styles/theme.utilities.css
index 344b62741..580f1fb8a 100644
--- a/apps/web/styles/theme.utilities.css
+++ b/apps/web/styles/theme.utilities.css
@@ -1,5 +1,5 @@
 @utility container {
   margin-inline: auto;
 
-  @apply xl:max-w-[80rem] px-8;
+  @apply xl:max-w-[80rem] px-4 lg:px-8;
 }
diff --git a/packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx b/packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx
index fde6559d5..b8ef8418a 100644
--- a/packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx
+++ b/packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx
@@ -172,7 +172,7 @@ function DeleteTeamConfirmationForm({
         email={user.email}
         onSuccess={(otp) => form.setValue('otp', otp, { shouldValidate: true })}
         CancelButton={
-          <AlertDialogCancel>
+          <AlertDialogCancel className={'m-0'}>
             <Trans i18nKey={'common:cancel'} />
           </AlertDialogCancel>
         }
diff --git a/packages/ui/src/shadcn/card.tsx b/packages/ui/src/shadcn/card.tsx
index d107cb0b5..a6488820e 100644
--- a/packages/ui/src/shadcn/card.tsx
+++ b/packages/ui/src/shadcn/card.tsx
@@ -17,7 +17,7 @@ const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...props
 }) => (
-  <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  <div className={cn('flex flex-col space-y-1.5 p-4 lg:p-6', className)} {...props} />
 );
 CardHeader.displayName = 'CardHeader';
 
@@ -43,7 +43,7 @@ CardDescription.displayName = 'CardDescription';
 const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...props
-}) => <div className={cn('p-6 pt-0', className)} {...props} />;
+}) => <div className={cn('p-4 pt-0 lg:p-6 lg:pt-0', className)} {...props} />;
 CardContent.displayName = 'CardContent';
 
 const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
diff --git a/packages/ui/src/shadcn/dialog.tsx b/packages/ui/src/shadcn/dialog.tsx
index 801281046..815fc8eaa 100644
--- a/packages/ui/src/shadcn/dialog.tsx
+++ b/packages/ui/src/shadcn/dialog.tsx
@@ -56,7 +56,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col space-y-1.5 text-center sm:text-left',
+      'flex flex-col space-y-1.5 text-left',
       className,
     )}
     {...props}