diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx
index c9936bdb83..cc9c5bb3c9 100644
--- a/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx
+++ b/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx
@@ -19,18 +19,22 @@ export function ShellMainAppDir(props: LayoutProps) {
             <header
               className={classNames(props.large && "py-8", "flex w-full max-w-full items-center truncate")}>
               {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
-              <div className={classNames("w-full truncate ltr:mr-4 rtl:ml-4", props.headerClassName)}>
+              <div
+                className={classNames(
+                  "hidden w-full truncate ltr:mr-4 rtl:ml-4 md:block",
+                  props.headerClassName
+                )}>
                 {props.heading && (
                   <h3
                     className={classNames(
-                      "font-cal text-emphasis max-w-28 sm:max-w-72 md:max-w-80 truncate text-lg font-semibold tracking-wide sm:text-xl xl:max-w-full",
+                      "font-cal text-emphasis max-w-28 sm:max-w-72 md:max-w-80 inline truncate text-lg font-semibold tracking-wide sm:text-xl md:block xl:max-w-full",
                       props.smallHeading ? "text-base" : "text-xl"
                     )}>
                     {props.heading}
                   </h3>
                 )}
                 {props.subtitle && (
-                  <p className="text-default text-sm" data-testid="subtitle">
+                  <p className="text-default hidden text-sm md:block" data-testid="subtitle">
                     {props.subtitle}
                   </p>
                 )}
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index b9efaf5014..8f966c03ad 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -158,7 +158,7 @@ export function ShellMain(props: LayoutProps) {
                 {props.heading && (
                   <h3
                     className={classNames(
-                      "font-cal text-emphasis max-w-28 sm:max-w-72 md:max-w-80 truncate text-lg font-semibold tracking-wide sm:text-xl xl:max-w-full",
+                      "font-cal text-emphasis max-w-28 sm:max-w-72 md:max-w-80 hidden truncate text-lg font-semibold tracking-wide sm:text-xl md:block xl:max-w-full",
                       props.smallHeading ? "text-base" : "text-xl"
                     )}>
                     {!isLocaleReady ? <SkeletonText invisible /> : props.heading}