diff --git a/apps/web/components/apps/App.tsx b/apps/web/components/apps/App.tsx
index 529836ea8d..faa13acbf3 100644
--- a/apps/web/components/apps/App.tsx
+++ b/apps/web/components/apps/App.tsx
@@ -303,6 +303,11 @@ const Component = ({
   );
 };
 
+const ShellHeading = () => {
+  const { t } = useLocale();
+  return <span className="block py-2">{t("app_store")}</span>;
+};
+
 export default function App(props: {
   name: string;
   description: AppType["description"];
@@ -328,10 +333,8 @@ export default function App(props: {
   images?: string[];
   isTemplate?: boolean;
 }) {
-  const { t } = useLocale();
-
   return (
-    <Shell smallHeading isPublic heading={t("app_store")} backPath="/apps" withoutSeo>
+    <Shell smallHeading isPublic heading={<ShellHeading />} backPath="/apps" withoutSeo>
       <HeadSeo
         title={props.name}
         description={props.description}
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index d77507738b..8c0bb43702 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -780,7 +780,11 @@ export function ShellMain(props: LayoutProps) {
 
   return (
     <>
-      <div className={classNames("mb-4 flex sm:mt-0 md:mb-6", props.smallHeading ? "lg:mb-7" : "lg:mb-8")}>
+      <div
+        className={classNames(
+          "my-4 flex items-center md:mt-0 md:mb-6",
+          props.smallHeading ? "lg:mb-7" : "lg:mb-8"
+        )}>
         {!!props.backPath && (
           <Button
             variant="icon"
@@ -791,7 +795,7 @@ export function ShellMain(props: LayoutProps) {
             }
             StartIcon={FiArrowLeft}
             aria-label="Go Back"
-            className="mt-2 rounded-md ltr:mr-2 rtl:ml-2"
+            className="rounded-md ltr:mr-2 rtl:ml-2"
           />
         )}
         {props.heading && (