diff --git a/package-lock.json b/package-lock.json
index df00ef4bd..2b3955d1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -83,8 +83,7 @@
         "slugify": "^1.4.6",
         "tslib": "^2.4.1",
         "url-join": "^4.0.1",
-        "use-react-router": "^1.0.7",
-        "usehooks-ts": "^2.9.1"
+        "use-react-router": "^1.0.7"
       },
       "devDependencies": {
         "@babel/cli": "^7.5.5",
@@ -32978,19 +32977,6 @@
       "version": "2.4.1",
       "license": "0BSD"
     },
-    "node_modules/usehooks-ts": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz",
-      "integrity": "sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==",
-      "engines": {
-        "node": ">=16.15.0",
-        "npm": ">=8"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/utf8-byte-length": {
       "version": "1.0.4",
       "dev": true,
@@ -57362,11 +57348,6 @@
         }
       }
     },
-    "usehooks-ts": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz",
-      "integrity": "sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA=="
-    },
     "utf8-byte-length": {
       "version": "1.0.4",
       "dev": true
diff --git a/package.json b/package.json
index bf32366a1..c2494a75d 100644
--- a/package.json
+++ b/package.json
@@ -90,8 +90,7 @@
     "slugify": "^1.4.6",
     "tslib": "^2.4.1",
     "url-join": "^4.0.1",
-    "use-react-router": "^1.0.7",
-    "usehooks-ts": "^2.9.1"
+    "use-react-router": "^1.0.7"
   },
   "devDependencies": {
     "@babel/cli": "^7.5.5",
diff --git a/src/apps/components/AppInstallPage/AppInstallPage.tsx b/src/apps/components/AppInstallPage/AppInstallPage.tsx
index 53a6209cc..bf84ec617 100644
--- a/src/apps/components/AppInstallPage/AppInstallPage.tsx
+++ b/src/apps/components/AppInstallPage/AppInstallPage.tsx
@@ -1,10 +1,9 @@
 import saleorDarkLogoSmall from "@assets/images/logo-dark-small.svg";
 import plusIcon from "@assets/images/plus-icon.svg";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import CardTitle from "@dashboard/components/CardTitle";
 import Hr from "@dashboard/components/Hr";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Skeleton from "@dashboard/components/Skeleton";
 import { AppFetchMutation, AppInstallMutation } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
@@ -43,122 +42,124 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
   const name = data?.name || "";
 
   return (
-    <DetailedContent useSingleColumn constHeight>
-      <Content>
-        <CardSpacer />
-        <Card>
-          <CardTitle
-            title={
-              loading ? (
+    <DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
+      <DetailPageLayout.Content>
+        <Box paddingY={9}>
+          <CardSpacer />
+          <Card>
+            <CardTitle
+              title={
+                loading ? (
+                  <Skeleton />
+                ) : (
+                  intl.formatMessage(
+                    {
+                      id: "Id7C0X",
+                      defaultMessage: `You are about to install {name}`,
+                      description: "section header",
+                    },
+                    { name },
+                  )
+                )
+              }
+            />
+            <CardContent className={classes.installCard}>
+              {loading ? (
+                <CircularProgress />
+              ) : (
+                <div className={classes.installAppContainer}>
+                  <div
+                    className={clsx(
+                      classes.installIcon,
+                      classes.installSaleorIcon,
+                    )}
+                  >
+                    <img src={saleorDarkLogoSmall} alt="" />
+                  </div>
+                  <img src={plusIcon} alt="" />
+                  <div className={classes.installIcon}>
+                    <GenericAppIcon />
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+          <CardSpacer />
+          <Card>
+            {!loading && (
+              <CardTitle
+                title={intl.formatMessage({
+                  id: "VsGcdP",
+                  defaultMessage: "App permissions",
+                  description: "section header",
+                })}
+              />
+            )}
+            <CardContent>
+              {loading ? (
                 <Skeleton />
               ) : (
-                intl.formatMessage(
-                  {
-                    id: "Id7C0X",
-                    defaultMessage: `You are about to install {name}`,
-                    description: "section header",
-                  },
-                  { name },
-                )
-              )
-            }
-          />
-          <CardContent className={classes.installCard}>
-            {loading ? (
-              <CircularProgress />
-            ) : (
-              <div className={classes.installAppContainer}>
-                <div
-                  className={clsx(
-                    classes.installIcon,
-                    classes.installSaleorIcon,
+                <>
+                  <Typography className={classes.installPermissionTitle}>
+                    <FormattedMessage
+                      id="BL/Lbk"
+                      defaultMessage="Installing this app will give it following permissions:"
+                      description="install app permissions"
+                    />
+                  </Typography>
+                  {!!data?.permissions?.length && (
+                    <ul className={classes.permissionsContainer}>
+                      {data?.permissions?.map(perm => (
+                        <li key={perm.code}>{perm.name}</li>
+                      ))}
+                    </ul>
                   )}
-                >
-                  <img src={saleorDarkLogoSmall} alt="" />
-                </div>
-                <img src={plusIcon} alt="" />
-                <div className={classes.installIcon}>
-                  <GenericAppIcon />
-                </div>
-              </div>
-            )}
-          </CardContent>
-        </Card>
-        <CardSpacer />
-        <Card>
-          {!loading && (
-            <CardTitle
-              title={intl.formatMessage({
-                id: "VsGcdP",
-                defaultMessage: "App permissions",
-                description: "section header",
-              })}
-            />
-          )}
-          <CardContent>
-            {loading ? (
-              <Skeleton />
-            ) : (
-              <>
-                <Typography className={classes.installPermissionTitle}>
-                  <FormattedMessage
-                    id="BL/Lbk"
-                    defaultMessage="Installing this app will give it following permissions:"
-                    description="install app permissions"
-                  />
-                </Typography>
-                {!!data?.permissions?.length && (
-                  <ul className={classes.permissionsContainer}>
-                    {data?.permissions?.map(perm => (
-                      <li key={perm.code}>{perm.name}</li>
-                    ))}
-                  </ul>
-                )}
-                <Hr className={classes.installSpacer} />
+                  <Hr className={classes.installSpacer} />
 
-                <Typography
-                  variant="body2"
-                  className={classes.installPrivacyText}
-                >
-                  <FormattedMessage
-                    id="t1UYU6"
-                    defaultMessage="Uninstalling the app will remove all your customer’s personal data stored by {name}. "
-                    description="install app privacy"
-                    values={{ name }}
-                  />
-                  {!!data?.dataPrivacyUrl && (
-                    <a
-                      href={data?.dataPrivacyUrl}
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
-                      <FormattedMessage
-                        id="k5lHFp"
-                        defaultMessage="Learn more about data privacy"
-                        description="app data privacy link"
-                      />
-                    </a>
-                  )}
-                </Typography>
-              </>
-            )}
-          </CardContent>
-        </Card>
-        <CardSpacer />
-        <Box display="flex" justifyContent="space-between" paddingX={9}>
-          <Button variant="secondary" onClick={navigateToAppsList}>
-            <FormattedMessage {...buttonMessages.cancel} />
-          </Button>
-          <Button variant="primary" onClick={onSubmit}>
-            <FormattedMessage
-              id="PkCmGU"
-              defaultMessage="Install App"
-              description="install button"
-            />
-          </Button>
+                  <Typography
+                    variant="body2"
+                    className={classes.installPrivacyText}
+                  >
+                    <FormattedMessage
+                      id="t1UYU6"
+                      defaultMessage="Uninstalling the app will remove all your customer’s personal data stored by {name}. "
+                      description="install app privacy"
+                      values={{ name }}
+                    />
+                    {!!data?.dataPrivacyUrl && (
+                      <a
+                        href={data?.dataPrivacyUrl}
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        <FormattedMessage
+                          id="k5lHFp"
+                          defaultMessage="Learn more about data privacy"
+                          description="app data privacy link"
+                        />
+                      </a>
+                    )}
+                  </Typography>
+                </>
+              )}
+            </CardContent>
+          </Card>
+          <CardSpacer />
+          <Box display="flex" justifyContent="space-between" padding={9}>
+            <Button variant="secondary" onClick={navigateToAppsList}>
+              <FormattedMessage {...buttonMessages.cancel} />
+            </Button>
+            <Button variant="primary" onClick={onSubmit}>
+              <FormattedMessage
+                id="PkCmGU"
+                defaultMessage="Install App"
+                description="install button"
+              />
+            </Button>
+          </Box>
         </Box>
-      </Content>
-    </DetailedContent>
+      </DetailPageLayout.Content>
+    </DetailPageLayout>
   );
 };
 
diff --git a/src/attributes/components/AttributePage/AttributePage.tsx b/src/attributes/components/AttributePage/AttributePage.tsx
index 3b0d95bc1..442c25d31 100644
--- a/src/attributes/components/AttributePage/AttributePage.tsx
+++ b/src/attributes/components/AttributePage/AttributePage.tsx
@@ -1,11 +1,9 @@
 import { attributeListUrl } from "@dashboard/attributes/urls";
 import { ATTRIBUTE_TYPES_WITH_DEDICATED_VALUES } from "@dashboard/attributes/utils/data";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata from "@dashboard/components/Metadata/Metadata";
 import { MetadataFormData } from "@dashboard/components/Metadata/types";
 import Savebar from "@dashboard/components/Savebar";
@@ -173,7 +171,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
 
         return (
           <>
-            <DetailedContent>
+            <DetailPageLayout>
               <TopNav
                 href={attributeListUrl()}
                 title={
@@ -185,8 +183,8 @@ const AttributePage: React.FC<AttributePageProps> = ({
                       })
                     : maybe(() => attribute.name)
                 }
-              ></TopNav>
-              <Content>
+              />
+              <DetailPageLayout.Content>
                 <AttributeDetails
                   canChangeType={attribute === null}
                   data={data}
@@ -221,8 +219,8 @@ const AttributePage: React.FC<AttributePageProps> = ({
                 )}
                 <CardSpacer />
                 <Metadata data={data} onChange={changeMetadata} />
-              </Content>
-              <RightSidebar>
+              </DetailPageLayout.Content>
+              <DetailPageLayout.RightSidebar>
                 <AttributeOrganization
                   canChangeType={attribute === null}
                   data={data}
@@ -236,7 +234,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
                   disabled={disabled}
                   onChange={change}
                 />
-              </RightSidebar>
+              </DetailPageLayout.RightSidebar>
               <Savebar
                 disabled={!!isSaveDisabled}
                 state={saveButtonBarState}
@@ -244,7 +242,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
                 onSubmit={submit}
                 onDelete={attribute === null ? undefined : onDelete}
               />
-            </DetailedContent>
+            </DetailPageLayout>
             {children(data)}
           </>
         );
diff --git a/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx b/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx
index 3d6aef91a..c69c453be 100644
--- a/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx
+++ b/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx
@@ -1,7 +1,6 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata from "@dashboard/components/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import SeoForm from "@dashboard/components/SeoForm";
@@ -36,7 +35,7 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
   return (
     <CategoryCreateForm onSubmit={onSubmit} disabled={disabled}>
       {({ data, change, handlers, submit, isSaveDisabled }) => (
-        <DetailedContent useSingleColumn>
+        <DetailPageLayout gridTemplateColumns={1}>
           <TopNav
             href={backUrl}
             title={intl.formatMessage({
@@ -45,7 +44,7 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
               description: "page header",
             })}
           />
-          <Content>
+          <DetailPageLayout.Content>
             <Box height="100vh" __marginBottom="auto">
               <CategoryDetailsForm
                 data={data}
@@ -74,14 +73,14 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
               <CardSpacer />
               <Metadata data={data} onChange={handlers.changeMetadata} />
             </Box>
-          </Content>
+          </DetailPageLayout.Content>
           <Savebar
             onCancel={() => navigate(backUrl)}
             onSubmit={submit}
             state={saveButtonBarState}
             disabled={isSaveDisabled}
           />
-        </DetailedContent>
+        </DetailPageLayout>
       )}
     </CategoryCreateForm>
   );
diff --git a/src/categories/components/CategoryListPage/CategoryListPage.tsx b/src/categories/components/CategoryListPage/CategoryListPage.tsx
index 7ce92f0b1..2c592f4e8 100644
--- a/src/categories/components/CategoryListPage/CategoryListPage.tsx
+++ b/src/categories/components/CategoryListPage/CategoryListPage.tsx
@@ -4,6 +4,7 @@ import {
 } from "@dashboard/categories/urls";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Button } from "@dashboard/components/Button";
+import { ListPageLayout } from "@dashboard/components/Layouts";
 import SearchBar from "@dashboard/components/SearchBar";
 import { CategoryFragment } from "@dashboard/graphql";
 import { sectionNames } from "@dashboard/intl";
@@ -52,7 +53,7 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
   const intl = useIntl();
 
   return (
-    <>
+    <ListPageLayout>
       <TopNav title={intl.formatMessage(sectionNames.categories)}>
         <Button
           variant="primary"
@@ -100,7 +101,7 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
           {...listProps}
         />
       </Card>
-    </>
+    </ListPageLayout>
   );
 };
 CategoryListPage.displayName = "CategoryListPage";
diff --git a/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx b/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx
index 714b6c16d..9a78243ee 100644
--- a/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx
+++ b/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx
@@ -3,12 +3,11 @@ import {
   categoryListUrl,
   categoryUrl,
 } from "@dashboard/categories/urls";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Button } from "@dashboard/components/Button";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
 import CardTitle from "@dashboard/components/CardTitle";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata from "@dashboard/components/Metadata/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import SeoForm from "@dashboard/components/SeoForm";
@@ -91,9 +90,9 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
       disabled={disabled}
     >
       {({ data, change, handlers, submit, isSaveDisabled }) => (
-        <DetailedContent useSingleColumn>
+        <DetailPageLayout gridTemplateColumns={1}>
           <TopNav href={backHref} title={category?.name} />
-          <Content>
+          <DetailPageLayout.Content>
             <CategoryDetailsForm
               data={data}
               disabled={disabled}
@@ -209,8 +208,8 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
               state={saveButtonBarState}
               disabled={isSaveDisabled}
             />
-          </Content>
-        </DetailedContent>
+          </DetailPageLayout.Content>
+        </DetailPageLayout>
       )}
     </CategoryUpdateForm>
   );
diff --git a/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx b/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx
index 221563fd7..6b32ae66d 100644
--- a/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx
+++ b/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx
@@ -3,12 +3,10 @@ import ShippingZones from "@dashboard/channels/components/ShippingZones";
 import Warehouses from "@dashboard/channels/components/Warehouses";
 import { channelsListUrl } from "@dashboard/channels/urls";
 import { validateChannelFormData } from "@dashboard/channels/validation";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import RequirePermissions from "@dashboard/components/RequirePermissions";
 import Savebar from "@dashboard/components/Savebar";
 import { SingleAutocompleteChoiceType } from "@dashboard/components/SingleAutocompleteSelectField";
@@ -198,7 +196,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
         const allErrors = [...errors, ...validationErrors];
 
         return (
-          <DetailedContent>
+          <DetailPageLayout>
             <TopNav
               href={channelsListUrl()}
               title={
@@ -210,7 +208,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
                 })
               }
             />
-            <Content>
+            <DetailPageLayout.Content>
               <ChannelForm
                 data={data}
                 disabled={disabled}
@@ -223,8 +221,8 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
                 onDefaultCountryChange={handleDefaultCountrySelect}
                 errors={allErrors}
               />
-            </Content>
-            <RightSidebar>
+            </DetailPageLayout.Content>
+            <DetailPageLayout.RightSidebar>
               {!!updateChannelStatus && (
                 <>
                   <ChannelStatus
@@ -279,7 +277,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
                 disabled={disabled}
                 onChange={change}
               />
-            </RightSidebar>
+            </DetailPageLayout.RightSidebar>
             <Savebar
               onCancel={() => navigate(channelsListUrl())}
               onSubmit={submit}
@@ -287,7 +285,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
               state={saveButtonBarState}
               disabled={disabled}
             />
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/channels/pages/ChannelsListPage/ChannelsListPage.tsx b/src/channels/pages/ChannelsListPage/ChannelsListPage.tsx
index ced09ccae..bb0bb59ef 100644
--- a/src/channels/pages/ChannelsListPage/ChannelsListPage.tsx
+++ b/src/channels/pages/ChannelsListPage/ChannelsListPage.tsx
@@ -2,6 +2,7 @@ import { channelAddUrl, channelUrl } from "@dashboard/channels/urls";
 import { LimitsInfo } from "@dashboard/components/AppLayout/LimitsInfo";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Button } from "@dashboard/components/Button";
+import { ListPageLayout } from "@dashboard/components/Layouts";
 import LimitReachedAlert from "@dashboard/components/LimitReachedAlert";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import Skeleton from "@dashboard/components/Skeleton";
@@ -39,7 +40,7 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
   const limitReached = isLimitReached(limits, "channels");
 
   return (
-    <>
+    <ListPageLayout>
       <TopNav
         href={configurationMenuUrl}
         title={intl.formatMessage(sectionNames.channels)}
@@ -154,7 +155,7 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
           </TableBody>
         </ResponsiveTable>
       </Card>
-    </>
+    </ListPageLayout>
   );
 };
 
diff --git a/src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx b/src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx
index 16dc4f02b..d85ff5fc9 100644
--- a/src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx
+++ b/src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx
@@ -1,11 +1,9 @@
 import { ChannelCollectionData } from "@dashboard/channels/utils";
 import { collectionListUrl } from "@dashboard/collections/urls";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata from "@dashboard/components/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import SeoForm from "@dashboard/components/SeoForm";
@@ -58,7 +56,7 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
       disabled={disabled}
     >
       {({ change, data, handlers, submit, isSaveDisabled }) => (
-        <DetailedContent>
+        <DetailPageLayout>
           <TopNav
             href={collectionListUrl()}
             title={intl.formatMessage({
@@ -67,7 +65,7 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
               description: "page header",
             })}
           />
-          <Content>
+          <DetailPageLayout.Content>
             <CollectionDetails
               data={data}
               disabled={disabled}
@@ -129,8 +127,8 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
             />
             <CardSpacer />
             <Metadata data={data} onChange={handlers.changeMetadata} />
-          </Content>
-          <RightSidebar>
+          </DetailPageLayout.Content>
+          <DetailPageLayout.RightSidebar>
             <ChannelsAvailabilityCard
               messages={{
                 hiddenLabel: intl.formatMessage({
@@ -153,14 +151,14 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
               onChange={handlers.changeChannels}
               openModal={openChannelsModal}
             />
-          </RightSidebar>
+          </DetailPageLayout.RightSidebar>
           <Savebar
             state={saveButtonBarState}
             disabled={isSaveDisabled}
             onCancel={() => navigate(collectionListUrl())}
             onSubmit={submit}
           />
-        </DetailedContent>
+        </DetailPageLayout>
       )}
     </CollectionCreateForm>
   );
diff --git a/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx b/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
index 6ab48e246..9ee705a5a 100644
--- a/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
+++ b/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
@@ -1,11 +1,9 @@
 import { ChannelCollectionData } from "@dashboard/channels/utils";
 import { collectionListUrl } from "@dashboard/collections/urls";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata from "@dashboard/components/Metadata/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import SeoForm from "@dashboard/components/SeoForm";
@@ -75,9 +73,9 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
       disabled={disabled}
     >
       {({ change, data, handlers, submit, isSaveDisabled }) => (
-        <DetailedContent>
+        <DetailPageLayout>
           <TopNav href={collectionListUrl()} title={collection?.name} />
-          <Content>
+          <DetailPageLayout.Content>
             <CollectionDetails
               data={data}
               disabled={disabled}
@@ -117,8 +115,8 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
               titlePlaceholder={collection?.name}
               onChange={change}
             />
-          </Content>
-          <RightSidebar>
+          </DetailPageLayout.Content>
+          <DetailPageLayout.RightSidebar>
             <div>
               <ChannelsAvailabilityCard
                 managePermissions={[PermissionEnum.MANAGE_PRODUCTS]}
@@ -143,7 +141,7 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
                 openModal={openChannelsModal}
               />
             </div>
-          </RightSidebar>
+          </DetailPageLayout.RightSidebar>
           <Savebar
             state={saveButtonBarState}
             disabled={isSaveDisabled}
@@ -151,7 +149,7 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
             onDelete={onCollectionRemove}
             onSubmit={submit}
           />
-        </DetailedContent>
+        </DetailPageLayout>
       )}
     </CollectionUpdateForm>
   );
diff --git a/src/collections/components/CollectionListPage/CollectionListPage.tsx b/src/collections/components/CollectionListPage/CollectionListPage.tsx
index c921d7114..5df47b0c5 100644
--- a/src/collections/components/CollectionListPage/CollectionListPage.tsx
+++ b/src/collections/components/CollectionListPage/CollectionListPage.tsx
@@ -3,6 +3,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Button } from "@dashboard/components/Button";
 import { getByName } from "@dashboard/components/Filter/utils";
 import FilterBar from "@dashboard/components/FilterBar";
+import { ListPageLayout } from "@dashboard/components/Layouts";
 import { sectionNames } from "@dashboard/intl";
 import {
   FilterPageProps,
@@ -51,7 +52,7 @@ const CollectionListPage: React.FC<CollectionListPageProps> = ({
   const filterDependency = filterStructure.find(getByName("channel"));
 
   return (
-    <>
+    <ListPageLayout>
       <TopNav title={intl.formatMessage(sectionNames.collections)}>
         <Button
           disabled={disabled}
@@ -96,7 +97,7 @@ const CollectionListPage: React.FC<CollectionListPageProps> = ({
           {...listProps}
         />
       </Card>
-    </>
+    </ListPageLayout>
   );
 };
 CollectionListPage.displayName = "CollectionListPage";
diff --git a/src/components/AppLayout/Content.tsx b/src/components/AppLayout/Content.tsx
deleted file mode 100644
index 1b3dcd59b..000000000
--- a/src/components/AppLayout/Content.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Box } from "@saleor/macaw-ui/next";
-import React from "react";
-
-import { useContentHeight } from "./useContentHeight";
-
-interface ContentProps {
-  [key: `data-${string}`]: string;
-  children: React.ReactNode;
-  noSavebar?: boolean;
-  noTopNav?: boolean;
-}
-
-export const Content: React.FC<ContentProps> = ({
-  children,
-  noSavebar = false,
-  noTopNav = false,
-  ...rest
-}) => {
-  const { withoutSaveBar, withSaveBar } = useContentHeight();
-
-  return (
-    <Box
-      __gridArea="content"
-      __height={noSavebar ? withoutSaveBar() : withSaveBar({ noTopNav })}
-      overflowY="auto"
-      className="hide-scrollbar"
-      {...rest}
-    >
-      {children}
-    </Box>
-  );
-};
diff --git a/src/components/AppLayout/DetailedContent.tsx b/src/components/AppLayout/DetailedContent.tsx
deleted file mode 100644
index e0dc448d4..000000000
--- a/src/components/AppLayout/DetailedContent.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Box, tabletMediaQuery } from "@saleor/macaw-ui/next";
-import React from "react";
-import { useMediaQuery } from "usehooks-ts";
-
-import { contentMaxWidth } from "./consts";
-
-interface DetailedContentProps {
-  children: React.ReactNode;
-  useSingleColumn?: boolean;
-  constHeight?: boolean;
-}
-
-const getLayoutAreas = (useSingleColumn: boolean, isTablet: boolean) => {
-  if (useSingleColumn) {
-    return '"nav" "content"';
-  }
-
-  return isTablet ? '"nav right" "content right"' : '"nav" "content" "right"';
-};
-
-export const DetailedContent: React.FC<DetailedContentProps> = ({
-  children,
-  useSingleColumn = false,
-  constHeight = false,
-}) => {
-  const isTablet = useMediaQuery(tabletMediaQuery);
-
-  return (
-    <Box
-      as="div"
-      display="grid"
-      height={constHeight ? "100vh" : "100%"}
-      margin="auto"
-      __maxWidth={contentMaxWidth}
-      __gridTemplateColumns={useSingleColumn ? "1fr" : "9fr 4fr"}
-      __gridTemplateRows="auto 1fr"
-      __gridTemplateAreas={getLayoutAreas(useSingleColumn, isTablet)}
-    >
-      {children}
-    </Box>
-  );
-};
diff --git a/src/components/AppLayout/RightSidebar.tsx b/src/components/AppLayout/RightSidebar.tsx
deleted file mode 100644
index ad7dbe30d..000000000
--- a/src/components/AppLayout/RightSidebar.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Box } from "@saleor/macaw-ui/next";
-import clsx from "clsx";
-import React from "react";
-
-import { borderHeight, savebarHeight } from "./consts";
-
-interface RightSidebarProps {
-  children: React.ReactNode;
-  className?: string;
-  noSavebar?: boolean;
-}
-
-export const RightSidebar: React.FC<RightSidebarProps> = ({
-  children,
-  noSavebar = false,
-  className,
-}) => (
-  <Box
-    borderStyle="solid"
-    borderColor="neutralPlain"
-    borderLeftWidth={1}
-    __height={
-      noSavebar ? "100%" : `calc(100vh - ${savebarHeight} - ${borderHeight})`
-    }
-    position="sticky"
-    top={0}
-    overflowY="auto"
-    borderYWidth={0}
-    borderTopWidth={0}
-    borderBottomWidth={0}
-    borderRightWidth={0}
-    __gridArea="right"
-    className={clsx("hide-scrollbar", className)}
-  >
-    {children}
-  </Box>
-);
diff --git a/src/components/AppLayout/TopNav.tsx b/src/components/AppLayout/TopNav.tsx
index 8fb54f542..1c54fa6a6 100644
--- a/src/components/AppLayout/TopNav.tsx
+++ b/src/components/AppLayout/TopNav.tsx
@@ -30,9 +30,11 @@ export const TopNav: React.FC<PropsWithChildren<TopNavProps>> = ({
       borderBottomStyle="solid"
       borderColor="neutralPlain"
       position="relative"
-      __gridArea="nav"
       data-test-id="page-header"
       __height={topBarHeight}
+      gridColumn="8"
+      gridRowStart="1"
+      backgroundColor="plain"
     >
       {href && (
         <Link
diff --git a/src/components/AppLayout/useContentHeight.test.ts b/src/components/AppLayout/useContentHeight.test.ts
deleted file mode 100644
index 5fe86b5ed..000000000
--- a/src/components/AppLayout/useContentHeight.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useContentHeight } from "./useContentHeight";
-
-describe("useContentHeight", () => {
-  it("should return the correct height without savebar", () => {
-    const { withoutSaveBar } = useContentHeight();
-    const height = withoutSaveBar();
-
-    expect(height).toEqual("calc(100vh - 77px - 1px)");
-  });
-
-  it("should return the correct height with savebar", () => {
-    const { withSaveBar } = useContentHeight();
-    const height = withSaveBar({ noTopNav: false });
-
-    expect(height).toEqual("calc(100vh - 77px - 64px - 1px)");
-  });
-
-  it("should return the correct height with savebar and no top nav", () => {
-    const { withSaveBar } = useContentHeight();
-    const height = withSaveBar({ noTopNav: true });
-
-    expect(height).toEqual("calc(100vh - 0px - 64px - 1px)");
-  });
-});
diff --git a/src/components/AppLayout/useContentHeight.ts b/src/components/AppLayout/useContentHeight.ts
deleted file mode 100644
index 76fb4cc46..000000000
--- a/src/components/AppLayout/useContentHeight.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { borderHeight, savebarHeight, topBarHeight } from "./consts";
-
-export const useContentHeight = () => {
-  const withoutSaveBar = () =>
-    `calc(100vh - ${topBarHeight} - ${borderHeight})`;
-
-  const withSaveBar = ({ noTopNav }) => {
-    const topHeight = noTopNav ? "0px" : topBarHeight;
-
-    return `calc(100vh - ${topHeight} - ${savebarHeight} - ${borderHeight})`;
-  };
-
-  return { withoutSaveBar, withSaveBar };
-};
diff --git a/src/components/Attributes/styles.ts b/src/components/Attributes/styles.ts
index 06e64957b..f3d4ff2a6 100644
--- a/src/components/Attributes/styles.ts
+++ b/src/components/Attributes/styles.ts
@@ -57,7 +57,6 @@ export const useBasicAttributeStyles = makeStyles(
       "&:hover": {
         fillOpacity: 1,
       },
-      position: "absolute",
       padding: theme.spacing(0.25),
       marginLeft: theme.spacing(0.75),
     },
diff --git a/src/components/Layouts/Detail/Content.tsx b/src/components/Layouts/Detail/Content.tsx
new file mode 100644
index 000000000..c68e153b2
--- /dev/null
+++ b/src/components/Layouts/Detail/Content.tsx
@@ -0,0 +1,23 @@
+import { Box } from "@saleor/macaw-ui/next";
+import React from "react";
+
+interface DetailPageLayoutContentProps {
+  [key: `data-${string}`]: string;
+  children: React.ReactNode;
+}
+
+export const Content: React.FC<DetailPageLayoutContentProps> = ({
+  children,
+  ...rest
+}) => (
+  <Box
+    height="100%"
+    overflowY="auto"
+    className="hide-scrollbar"
+    gridColumn="8"
+    gridRow={{ mobile: "6", tablet: "12", desktop: "12" }}
+    {...rest}
+  >
+    {children}
+  </Box>
+);
diff --git a/src/components/Layouts/Detail/RightSidebar.tsx b/src/components/Layouts/Detail/RightSidebar.tsx
new file mode 100644
index 000000000..7d813b2a4
--- /dev/null
+++ b/src/components/Layouts/Detail/RightSidebar.tsx
@@ -0,0 +1,22 @@
+import { Box } from "@saleor/macaw-ui/next";
+import React from "react";
+
+interface DetailPageLayoutRightSidebarProps {
+  children: React.ReactNode;
+}
+
+export const RightSidebar: React.FC<DetailPageLayoutRightSidebarProps> = ({
+  children,
+}) => (
+  <Box
+    borderLeftStyle="solid"
+    borderColor="neutralPlain"
+    height="100%"
+    overflowY="auto"
+    className="hide-scrollbar"
+    gridColumn={"8"}
+    gridRow={{ mobile: "6", tablet: "full", desktop: "full" }}
+  >
+    {children}
+  </Box>
+);
diff --git a/src/components/Layouts/Detail/Root.tsx b/src/components/Layouts/Detail/Root.tsx
new file mode 100644
index 000000000..5fc73b622
--- /dev/null
+++ b/src/components/Layouts/Detail/Root.tsx
@@ -0,0 +1,35 @@
+import {
+  borderHeight,
+  contentMaxWidth,
+  savebarHeight,
+} from "@dashboard/components/AppLayout/consts";
+import { Box, Sprinkles } from "@saleor/macaw-ui/next";
+import React from "react";
+
+interface DetailPageLayoutProps {
+  children: React.ReactNode;
+  gridTemplateColumns?: Sprinkles["gridTemplateColumns"];
+  withSavebar?: boolean;
+}
+
+const contentWithSidebarHeight = `calc(100vh - ${savebarHeight} - ${borderHeight})`;
+const contentWithoutSidebarHeight = `calc(100vh - ${borderHeight}`;
+
+export const RootLayout: React.FC<DetailPageLayoutProps> = ({
+  children,
+  gridTemplateColumns = 12,
+  withSavebar = true,
+}) => (
+  <Box
+    display="grid"
+    margin="auto"
+    gridTemplateColumns={gridTemplateColumns}
+    __gridTemplateRows="auto 1fr"
+    __maxWidth={contentMaxWidth}
+    __height={
+      withSavebar ? contentWithSidebarHeight : contentWithoutSidebarHeight
+    }
+  >
+    {children}
+  </Box>
+);
diff --git a/src/components/Layouts/Detail/index.ts b/src/components/Layouts/Detail/index.ts
new file mode 100644
index 000000000..eb6a609b2
--- /dev/null
+++ b/src/components/Layouts/Detail/index.ts
@@ -0,0 +1,8 @@
+import { Content } from "./Content";
+import { RightSidebar } from "./RightSidebar";
+import { RootLayout } from "./Root";
+
+export const DetailPageLayout = Object.assign(RootLayout, {
+  Content,
+  RightSidebar,
+});
diff --git a/src/components/Layouts/List/Root.tsx b/src/components/Layouts/List/Root.tsx
new file mode 100644
index 000000000..b7176e73c
--- /dev/null
+++ b/src/components/Layouts/List/Root.tsx
@@ -0,0 +1,21 @@
+import { contentMaxWidth } from "@dashboard/components/AppLayout/consts";
+import { Box } from "@saleor/macaw-ui/next";
+import React from "react";
+
+interface ListPageLayoutProps {
+  children: React.ReactNode;
+  hasSaveBar?: boolean;
+  hasTopNav?: boolean;
+}
+
+export const ListPageLayout: React.FC<ListPageLayoutProps> = ({ children }) => (
+  <Box
+    display="grid"
+    margin="auto"
+    gridTemplateColumns={1}
+    height="100%"
+    __maxWidth={contentMaxWidth}
+  >
+    {children}
+  </Box>
+);
diff --git a/src/components/Layouts/List/index.ts b/src/components/Layouts/List/index.ts
new file mode 100644
index 000000000..467d41e42
--- /dev/null
+++ b/src/components/Layouts/List/index.ts
@@ -0,0 +1 @@
+export * from "./Root";
diff --git a/src/components/Layouts/index.ts b/src/components/Layouts/index.ts
new file mode 100644
index 000000000..f860be784
--- /dev/null
+++ b/src/components/Layouts/index.ts
@@ -0,0 +1,2 @@
+export * from "./Detail";
+export * from "./List";
diff --git a/src/configuration/ConfigurationPage.stories.tsx b/src/configuration/ConfigurationPage.stories.tsx
index 766f5f1c1..13a4a57e1 100644
--- a/src/configuration/ConfigurationPage.stories.tsx
+++ b/src/configuration/ConfigurationPage.stories.tsx
@@ -6,7 +6,7 @@ import { storiesOf } from "@storybook/react";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import ConfigurationPage from "./ConfigurationPage";
+import { ConfigurationPage } from "./ConfigurationPage";
 
 const user = {
   __typename: staffMember.__typename,
diff --git a/src/configuration/ConfigurationPage.tsx b/src/configuration/ConfigurationPage.tsx
index c6ffa6ce0..ff464c144 100644
--- a/src/configuration/ConfigurationPage.tsx
+++ b/src/configuration/ConfigurationPage.tsx
@@ -1,6 +1,5 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { UserFragment } from "@dashboard/graphql";
 import { sectionNames } from "@dashboard/intl";
 import { Typography } from "@material-ui/core";
@@ -95,11 +94,11 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
   const intl = useIntl();
 
   return (
-    <DetailedContent useSingleColumn>
+    <DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
       <TopNav title={intl.formatMessage(sectionNames.configuration)}>
         {isSmUp && renderVersionInfo}
       </TopNav>
-      <Content noSavebar>
+      <DetailPageLayout.Content>
         <Box paddingX={9} __maxWidth={"1024px"} margin="auto">
           {menus
             .filter(menu =>
@@ -137,9 +136,9 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
               </div>
             ))}
         </Box>
-      </Content>
-    </DetailedContent>
+      </DetailPageLayout.Content>
+    </DetailPageLayout>
   );
 };
+
 ConfigurationPage.displayName = "ConfigurationPage";
-export default ConfigurationPage;
diff --git a/src/configuration/index.tsx b/src/configuration/index.tsx
index 63a835cfd..7a0306c80 100644
--- a/src/configuration/index.tsx
+++ b/src/configuration/index.tsx
@@ -34,7 +34,7 @@ import { warehouseSection } from "@dashboard/warehouses/urls";
 import React from "react";
 import { IntlShape, useIntl } from "react-intl";
 
-import ConfigurationPage from "./ConfigurationPage";
+import { ConfigurationPage } from "./ConfigurationPage";
 import { MenuSection } from "./types";
 
 export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
diff --git a/src/custom-apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx b/src/custom-apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx
index 20d65b7d9..f78aadfd7 100644
--- a/src/custom-apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx
+++ b/src/custom-apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx
@@ -1,9 +1,7 @@
 import AccountPermissions from "@dashboard/components/AccountPermissions";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import { CustomAppUrls } from "@dashboard/custom-apps/urls";
 import {
@@ -58,7 +56,7 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
       disabled={disabled}
     >
       {({ data, change, submit, isSaveDisabled }) => (
-        <DetailedContent>
+        <DetailPageLayout>
           <TopNav
             href={CustomAppUrls.resolveAppListUrl()}
             title={intl.formatMessage({
@@ -66,16 +64,16 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
               defaultMessage: "Create New App",
               description: "header",
             })}
-          ></TopNav>
-          <Content>
+          />
+          <DetailPageLayout.Content>
             <CustomAppInformation
               data={data}
               disabled={disabled}
               errors={errors}
               onChange={change}
             />
-          </Content>
-          <RightSidebar>
+          </DetailPageLayout.Content>
+          <DetailPageLayout.RightSidebar>
             <AccountPermissions
               data={data}
               errorMessage={permissionsError}
@@ -95,14 +93,14 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
                 description: "card description",
               })}
             />
-          </RightSidebar>
+          </DetailPageLayout.RightSidebar>
           <Savebar
             disabled={isSaveDisabled}
             state={saveButtonBarState}
             onCancel={() => navigate(CustomAppUrls.resolveAppListUrl())}
             onSubmit={submit}
           />
-        </DetailedContent>
+        </DetailPageLayout>
       )}
     </Form>
   );
diff --git a/src/custom-apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx b/src/custom-apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx
index f26bf3e10..56a4fdfc2 100644
--- a/src/custom-apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx
+++ b/src/custom-apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx
@@ -1,10 +1,8 @@
 import AccountPermissions from "@dashboard/components/AccountPermissions";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import WebhooksList from "@dashboard/custom-apps/components/WebhooksList";
 import { CustomAppUrls } from "@dashboard/custom-apps/urls";
@@ -104,7 +102,7 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
       disabled={disabled}
     >
       {({ data, change, submit, isSaveDisabled }) => (
-        <DetailedContent>
+        <DetailPageLayout>
           <TopNav href={CustomAppUrls.resolveAppListUrl()} title={app?.name}>
             <Button
               variant="secondary"
@@ -128,7 +126,7 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
               )}
             </Button>
           </TopNav>
-          <Content>
+          <DetailPageLayout.Content>
             {token && (
               <>
                 <CustomAppDefaultToken
@@ -158,8 +156,8 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
               onRemove={onWebhookRemove}
               createHref={app?.isActive && webhookCreateHref}
             />
-          </Content>
-          <RightSidebar>
+          </DetailPageLayout.Content>
+          <DetailPageLayout.RightSidebar>
             <AccountPermissions
               data={data}
               errorMessage={permissionsError}
@@ -179,14 +177,14 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
                 description: "card description",
               })}
             />
-          </RightSidebar>
+          </DetailPageLayout.RightSidebar>
           <Savebar
             disabled={isSaveDisabled}
             state={saveButtonBarState}
             onCancel={() => navigate(CustomAppUrls.resolveAppListUrl())}
             onSubmit={submit}
           />
-        </DetailedContent>
+        </DetailPageLayout>
       )}
     </Form>
   );
diff --git a/src/custom-apps/components/CustomAppListPage/CustomAppListPage.tsx b/src/custom-apps/components/CustomAppListPage/CustomAppListPage.tsx
index 30112141a..7c63d0f54 100644
--- a/src/custom-apps/components/CustomAppListPage/CustomAppListPage.tsx
+++ b/src/custom-apps/components/CustomAppListPage/CustomAppListPage.tsx
@@ -1,9 +1,6 @@
-import {
-  borderHeight,
-  topBarHeight,
-} from "@dashboard/components/AppLayout/consts";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Button } from "@dashboard/components/Button";
+import { ListPageLayout } from "@dashboard/components/Layouts";
 import { TableButtonWrapper } from "@dashboard/components/TableButtonWrapper/TableButtonWrapper";
 import TableRowLink from "@dashboard/components/TableRowLink";
 import { CustomAppUrls } from "@dashboard/custom-apps/urls";
@@ -35,7 +32,7 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
   const classes = useStyles({});
 
   return (
-    <>
+    <ListPageLayout>
       <TopNav title={intl.formatMessage(sectionNames.webhooksAndEvents)}>
         <Button
           variant="secondary"
@@ -49,10 +46,7 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
           />
         </Button>
       </TopNav>
-      <Box
-        padding={9}
-        __height={`calc(100vh - ${topBarHeight} - ${borderHeight})`}
-      >
+      <Box padding={9}>
         <Box marginBottom={4}>
           <Text as="p">
             <FormattedMessage
@@ -116,7 +110,7 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
           </TableBody>
         </ResponsiveTable>
       </Box>
-    </>
+    </ListPageLayout>
   );
 };
 
diff --git a/src/custom-apps/components/WebhookDetailsPage/WebhookDetailsPage.tsx b/src/custom-apps/components/WebhookDetailsPage/WebhookDetailsPage.tsx
index 6402ab265..ae893b2f3 100644
--- a/src/custom-apps/components/WebhookDetailsPage/WebhookDetailsPage.tsx
+++ b/src/custom-apps/components/WebhookDetailsPage/WebhookDetailsPage.tsx
@@ -1,8 +1,7 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import WebhookEvents from "@dashboard/custom-apps/components/WebhookEvents";
 import WebhookInfo from "@dashboard/custom-apps/components/WebhookInfo";
@@ -110,10 +109,10 @@ const WebhookDetailsPage: React.FC<WebhookDetailsPageProps> = ({
         });
 
         return (
-          <DetailedContent useSingleColumn>
+          <DetailPageLayout gridTemplateColumns={1}>
             <TopNav href={backUrl} title={getHeaderTitle(intl, webhook)} />
-            <Content>
-              <Box paddingX={9}>
+            <DetailPageLayout.Content>
+              <Box padding={9}>
                 <WebhookStatus
                   data={data.isActive}
                   disabled={disabled}
@@ -142,14 +141,14 @@ const WebhookDetailsPage: React.FC<WebhookDetailsPageProps> = ({
                 <FormSpacer />
                 <WebhookHeaders data={data} onChange={change} />
               </Box>
-            </Content>
+            </DetailPageLayout.Content>
             <Savebar
               disabled={disabled}
               state={saveButtonBarState}
               onCancel={() => navigate(backUrl)}
               onSubmit={submit}
             />
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
index 5217749ca..76ad51389 100644
--- a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
+++ b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
@@ -1,6 +1,6 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Button } from "@dashboard/components/Button";
+import { ListPageLayout } from "@dashboard/components/Layouts";
 import { customerUrl } from "@dashboard/customers/urls";
 import { AddressTypeEnum, CustomerAddressesFragment } from "@dashboard/graphql";
 import { getStringOrPlaceholder, renderCollection } from "@dashboard/misc";
@@ -96,7 +96,7 @@ const CustomerAddressListPage: React.FC<
   );
 
   return (
-    <>
+    <ListPageLayout>
       <TopNav
         href={customerUrl(customer?.id)}
         title={
@@ -111,52 +111,50 @@ const CustomerAddressListPage: React.FC<
           </Button>
         )}
       </TopNav>
-      <Content>
-        {isEmpty ? (
-          <Box
-            display="flex"
-            justifyContent="center"
-            alignItems="center"
-            padding={9}
-            flexDirection="column"
+      {isEmpty ? (
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          padding={9}
+          flexDirection="column"
+        >
+          <Typography variant="h5">
+            {intl.formatMessage(messages.noAddressToShow)}
+          </Typography>
+          <Typography className={classes.description}>
+            {intl.formatMessage(messages.doesntHaveAddresses)}
+          </Typography>
+          <Button
+            className={classes.addButton}
+            variant="primary"
+            onClick={onAdd}
           >
-            <Typography variant="h5">
-              {intl.formatMessage(messages.noAddressToShow)}
-            </Typography>
-            <Typography className={classes.description}>
-              {intl.formatMessage(messages.doesntHaveAddresses)}
-            </Typography>
-            <Button
-              className={classes.addButton}
-              variant="primary"
-              onClick={onAdd}
-            >
-              {intl.formatMessage(messages.addAddress)}
-            </Button>
-          </Box>
-        ) : (
-          <div className={classes.root}>
-            {renderCollection(customer?.addresses, (address, addressNumber) => (
-              <CustomerAddress
-                address={address}
-                addressNumber={addressNumber + 1}
-                disabled={disabled}
-                isDefaultBillingAddress={
-                  customer?.defaultBillingAddress?.id === address?.id
-                }
-                isDefaultShippingAddress={
-                  customer?.defaultShippingAddress?.id === address?.id
-                }
-                onEdit={() => onEdit(address.id)}
-                onRemove={() => onRemove(address.id)}
-                onSetAsDefault={type => onSetAsDefault(address.id, type)}
-                key={address?.id || "skeleton"}
-              />
-            ))}
-          </div>
-        )}
-      </Content>
-    </>
+            {intl.formatMessage(messages.addAddress)}
+          </Button>
+        </Box>
+      ) : (
+        <div className={classes.root}>
+          {renderCollection(customer?.addresses, (address, addressNumber) => (
+            <CustomerAddress
+              address={address}
+              addressNumber={addressNumber + 1}
+              disabled={disabled}
+              isDefaultBillingAddress={
+                customer?.defaultBillingAddress?.id === address?.id
+              }
+              isDefaultShippingAddress={
+                customer?.defaultShippingAddress?.id === address?.id
+              }
+              onEdit={() => onEdit(address.id)}
+              onRemove={() => onRemove(address.id)}
+              onSetAsDefault={type => onSetAsDefault(address.id, type)}
+              key={address?.id || "skeleton"}
+            />
+          ))}
+        </div>
+      )}
+    </ListPageLayout>
   );
 };
 CustomerAddressListPage.displayName = "CustomerAddressListPage";
diff --git a/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx b/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx
index 5c2d0dd6e..79a679518 100644
--- a/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx
+++ b/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx
@@ -1,9 +1,8 @@
 import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import { customerListUrl } from "@dashboard/customers/urls";
 import {
@@ -152,7 +151,7 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
         const handleCountrySelect = createCountryHandler(countrySelect, set);
 
         return (
-          <DetailedContent useSingleColumn>
+          <DetailPageLayout gridTemplateColumns={1}>
             <TopNav
               href={customerListUrl()}
               title={intl.formatMessage({
@@ -161,7 +160,7 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
                 description: "page header",
               })}
             />
-            <Content>
+            <DetailPageLayout.Content>
               <div>
                 <CustomerCreateDetails
                   data={data}
@@ -193,8 +192,8 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
                 onSubmit={submit}
                 onCancel={() => navigate(customerListUrl())}
               />
-            </Content>
-          </DetailedContent>
+            </DetailPageLayout.Content>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
index 0b2ea8d13..6d034ea24 100644
--- a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
+++ b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
@@ -3,14 +3,12 @@ import {
   mapToMenuItemsForCustomerDetails,
   useExtensions,
 } from "@dashboard/apps/useExtensions";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Backlink } from "@dashboard/components/Backlink";
 import CardMenu from "@dashboard/components/CardMenu/CardMenu";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata from "@dashboard/components/Metadata/Metadata";
 import { MetadataFormData } from "@dashboard/components/Metadata/types";
 import RequirePermissions from "@dashboard/components/RequirePermissions";
@@ -107,7 +105,7 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
         const changeMetadata = makeMetadataChangeHandler(change);
 
         return (
-          <DetailedContent>
+          <DetailPageLayout>
             <TopNav
               href={customerListUrl()}
               title={getUserName(customer, true)}
@@ -116,7 +114,7 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
                 <CardMenu menuItems={extensionMenuItems} />
               )}
             </TopNav>
-            <Content>
+            <DetailPageLayout.Content>
               <Backlink href={customerListUrl()}>
                 {intl.formatMessage(sectionNames.customers)}
               </Backlink>
@@ -147,8 +145,8 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
                 <CardSpacer />
               </RequirePermissions>
               <Metadata data={data} onChange={changeMetadata} />
-            </Content>
-            <RightSidebar>
+            </DetailPageLayout.Content>
+            <DetailPageLayout.RightSidebar>
               <CustomerAddresses
                 customer={customer}
                 disabled={disabled}
@@ -162,7 +160,7 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
               >
                 <CustomerGiftCardsCard />
               </RequirePermissions>
-            </RightSidebar>
+            </DetailPageLayout.RightSidebar>
             <Savebar
               disabled={isSaveDisabled}
               state={saveButtonBar}
@@ -170,7 +168,7 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
               onCancel={() => navigate(customerListUrl())}
               onDelete={onDelete}
             />
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx b/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx
index ec0b82b1b..92ab19550 100644
--- a/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx
+++ b/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx
@@ -1,11 +1,9 @@
 import { validateSalePrice } from "@dashboard/channels/utils";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import { createSaleChannelsChangeHandler } from "@dashboard/discounts/handlers";
@@ -102,7 +100,7 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
         const changeMetadata = makeMetadataChangeHandler(change);
 
         return (
-          <DetailedContent>
+          <DetailPageLayout>
             <TopNav
               title={intl.formatMessage({
                 id: "2E1xZ0",
@@ -110,7 +108,7 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
                 description: "page header",
               })}
             />
-            <Content>
+            <DetailPageLayout.Content>
               <SaleInfo
                 data={data}
                 disabled={disabled}
@@ -133,8 +131,9 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
                 errors={errors}
                 onChange={change}
               />
-            </Content>
-            <RightSidebar>
+              <Metadata data={data} onChange={changeMetadata} />
+            </DetailPageLayout.Content>
+            <DetailPageLayout.RightSidebar>
               <ChannelsAvailabilityCard
                 managePermissions={[PermissionEnum.MANAGE_DISCOUNTS]}
                 allChannelsCount={allChannelsCount}
@@ -145,15 +144,14 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
                 disabled={disabled}
                 openModal={openChannelsModal}
               />
-            </RightSidebar>
-            <Metadata data={data} onChange={changeMetadata} />
+            </DetailPageLayout.RightSidebar>
             <Savebar
               disabled={disabled}
               onCancel={onBack}
               onSubmit={submit}
               state={saveButtonBarState}
             />
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
index ba54e0a9c..2a6cdd744 100644
--- a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
+++ b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
@@ -1,11 +1,9 @@
 import { ChannelSaleData, validateSalePrice } from "@dashboard/channels/utils";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import { Tab, TabContainer } from "@dashboard/components/Tab";
@@ -184,9 +182,9 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
         const allErrors = [...localErrors, ...errors];
 
         return (
-          <DetailedContent>
+          <DetailPageLayout>
             <TopNav href={saleListUrl()} title={sale?.name} />
-            <Content>
+            <DetailPageLayout.Content>
               <SaleInfo
                 data={data}
                 disabled={disabled}
@@ -298,8 +296,9 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
                 errors={errors}
                 onChange={change}
               />
-            </Content>
-            <RightSidebar>
+              <Metadata data={data} onChange={changeMetadata} />
+            </DetailPageLayout.Content>
+            <DetailPageLayout.RightSidebar>
               <SaleSummary selectedChannelId={selectedChannelId} sale={sale} />
               <CardSpacer />
               <ChannelsAvailabilityCard
@@ -312,8 +311,7 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
                 disabled={disabled}
                 openModal={openChannelsModal}
               />
-            </RightSidebar>
-            <Metadata data={data} onChange={changeMetadata} />
+            </DetailPageLayout.RightSidebar>
             <Savebar
               disabled={disabled}
               onCancel={() => navigate(saleListUrl())}
@@ -321,7 +319,7 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
               onSubmit={() => handleSubmit(data)}
               state={saveButtonBarState}
             />
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/discounts/components/SaleListPage/SaleListPage.tsx b/src/discounts/components/SaleListPage/SaleListPage.tsx
index 7e18d121a..e2a972b90 100644
--- a/src/discounts/components/SaleListPage/SaleListPage.tsx
+++ b/src/discounts/components/SaleListPage/SaleListPage.tsx
@@ -2,6 +2,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Button } from "@dashboard/components/Button";
 import { getByName } from "@dashboard/components/Filter/utils";
 import FilterBar from "@dashboard/components/FilterBar";
+import { ListPageLayout } from "@dashboard/components/Layouts";
 import { saleAddUrl, SaleListUrlSortField } from "@dashboard/discounts/urls";
 import { SaleFragment } from "@dashboard/graphql";
 import { sectionNames } from "@dashboard/intl";
@@ -53,7 +54,7 @@ const SaleListPage: React.FC<SaleListPageProps> = ({
   const filterDependency = structure.find(getByName("channel"));
 
   return (
-    <>
+    <ListPageLayout>
       <TopNav title={intl.formatMessage(sectionNames.sales)}>
         <Button
           href={saleAddUrl()}
@@ -91,7 +92,7 @@ const SaleListPage: React.FC<SaleListPageProps> = ({
         />
         <SaleList filterDependency={filterDependency} {...listProps} />
       </Card>
-    </>
+    </ListPageLayout>
   );
 };
 SaleListPage.displayName = "SaleListPage";
diff --git a/src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx b/src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx
index 4c8da6880..affa73ea7 100644
--- a/src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx
+++ b/src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx
@@ -1,11 +1,9 @@
 import { ChannelVoucherData } from "@dashboard/channels/utils";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata from "@dashboard/components/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import {
@@ -119,7 +117,7 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
         const changeMetadata = makeMetadataChangeHandler(change);
 
         return (
-          <DetailedContent>
+          <DetailPageLayout>
             <TopNav
               href={voucherListUrl()}
               title={intl.formatMessage({
@@ -128,7 +126,7 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
                 description: "page header",
               })}
             />
-            <Content>
+            <DetailPageLayout.Content>
               <VoucherInfo
                 data={data}
                 errors={errors}
@@ -181,8 +179,9 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
                 errors={errors}
                 onChange={change}
               />
-            </Content>
-            <RightSidebar>
+              <Metadata data={data} onChange={changeMetadata} />
+            </DetailPageLayout.Content>
+            <DetailPageLayout.RightSidebar>
               <ChannelsAvailabilityCard
                 managePermissions={[PermissionEnum.MANAGE_DISCOUNTS]}
                 allChannelsCount={allChannelsCount}
@@ -193,15 +192,14 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
                 disabled={disabled}
                 openModal={openChannelsModal}
               />
-            </RightSidebar>
-            <Metadata data={data} onChange={changeMetadata} />
+            </DetailPageLayout.RightSidebar>
             <Savebar
               disabled={disabled}
               onCancel={() => navigate(voucherListUrl())}
               onSubmit={submit}
               state={saveButtonBarState}
             />
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
index 25d7169bc..cfde98290 100644
--- a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
+++ b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
@@ -1,12 +1,10 @@
 import { ChannelVoucherData } from "@dashboard/channels/utils";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
 import CountryList from "@dashboard/components/CountryList";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import { Tab, TabContainer } from "@dashboard/components/Tab";
@@ -210,9 +208,9 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
         const allErrors = [...localErrors, ...errors];
 
         return (
-          <DetailedContent>
+          <DetailPageLayout>
             <TopNav href={voucherListUrl()} title={voucher?.code} />
-            <Content>
+            <DetailPageLayout.Content>
               <VoucherInfo
                 data={data}
                 disabled={disabled}
@@ -362,8 +360,8 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
                 onChange={change}
               />
               <Metadata data={data} onChange={changeMetadata} />
-            </Content>
-            <RightSidebar>
+            </DetailPageLayout.Content>
+            <DetailPageLayout.RightSidebar>
               <VoucherSummary
                 voucher={voucher}
                 selectedChannelId={selectedChannelId}
@@ -379,7 +377,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
                 disabled={disabled}
                 openModal={openChannelsModal}
               />
-            </RightSidebar>
+            </DetailPageLayout.RightSidebar>
             <Savebar
               onCancel={() => navigate(voucherListUrl())}
               disabled={disabled}
@@ -387,7 +385,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
               onSubmit={() => handleSubmit(data)}
               state={saveButtonBarState}
             />
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/discounts/components/VoucherListPage/VoucherListPage.tsx b/src/discounts/components/VoucherListPage/VoucherListPage.tsx
index 8b9e7eb56..c3932eef2 100644
--- a/src/discounts/components/VoucherListPage/VoucherListPage.tsx
+++ b/src/discounts/components/VoucherListPage/VoucherListPage.tsx
@@ -2,6 +2,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Button } from "@dashboard/components/Button";
 import { getByName } from "@dashboard/components/Filter/utils";
 import FilterBar from "@dashboard/components/FilterBar";
+import { ListPageLayout } from "@dashboard/components/Layouts";
 import {
   voucherAddUrl,
   VoucherListUrlSortField,
@@ -55,7 +56,7 @@ const VoucherListPage: React.FC<VoucherListPageProps> = ({
   const filterDependency = structure.find(getByName("channel"));
 
   return (
-    <>
+    <ListPageLayout>
       <TopNav title={intl.formatMessage(sectionNames.vouchers)}>
         <Button
           href={voucherAddUrl()}
@@ -93,7 +94,7 @@ const VoucherListPage: React.FC<VoucherListPageProps> = ({
         />
         <VoucherList filterDependency={filterDependency} {...listProps} />
       </Card>
-    </>
+    </ListPageLayout>
   );
 };
 VoucherListPage.displayName = "VoucherListPage";
diff --git a/src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx b/src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx
index 9380bb617..ec48c153b 100644
--- a/src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx
+++ b/src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx
@@ -1,8 +1,7 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import Form from "@dashboard/components/Form";
 import { Grid } from "@dashboard/components/Grid";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import {
   GiftCardSettingsExpiryTypeEnum,
@@ -60,15 +59,15 @@ const GiftCardSettingsPage: React.FC = () => {
   const formErrors = getFormErrors(["expiryPeriod"], apiErrors);
 
   return (
-    <DetailedContent useSingleColumn>
+    <DetailPageLayout gridTemplateColumns={1}>
       <TopNav
         href={giftCardsListPath}
         title={intl.formatMessage(messages.title)}
       />
-      <Form initial={initialData} onSubmit={handleSubmit}>
-        {({ data: formData, submit, change }) => (
-          <>
-            <Content>
+      <DetailPageLayout.Content>
+        <Form initial={initialData} onSubmit={handleSubmit}>
+          {({ data: formData, submit, change }) => (
+            <>
               <Box padding={9} margin="auto" height="100vh">
                 <Grid variant="inverted">
                   <div>
@@ -86,17 +85,17 @@ const GiftCardSettingsPage: React.FC = () => {
                   />
                 </Grid>
               </Box>
-            </Content>
-            <Savebar
-              onCancel={() => navigate(giftCardsListPath)}
-              onSubmit={submit}
-              disabled={formLoading}
-              state={updateGiftCardSettingsOpts?.status}
-            />
-          </>
-        )}
-      </Form>
-    </DetailedContent>
+              <Savebar
+                onCancel={() => navigate(giftCardsListPath)}
+                onSubmit={submit}
+                disabled={formLoading}
+                state={updateGiftCardSettingsOpts?.status}
+              />
+            </>
+          )}
+        </Form>
+      </DetailPageLayout.Content>
+    </DetailPageLayout>
   );
 };
 
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdatePage.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdatePage.tsx
index 0db25fc59..affde193f 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdatePage.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdatePage.tsx
@@ -1,7 +1,5 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import CardSpacer from "@dashboard/components/CardSpacer";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata from "@dashboard/components/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import useNavigator from "@dashboard/hooks/useNavigator";
@@ -31,17 +29,17 @@ const GiftCardUpdatePage: React.FC = () => {
   } = useGiftCardUpdate();
 
   return (
-    <DetailedContent>
+    <DetailPageLayout>
       <GiftCardUpdatePageHeader />
-      <Content>
+      <DetailPageLayout.Content>
         <GiftCardUpdateDetailsCard />
         <CardSpacer />
         <Metadata data={data} onChange={changeMetadata} />
         <GiftCardHistory />
-      </Content>
-      <RightSidebar>
+      </DetailPageLayout.Content>
+      <DetailPageLayout.RightSidebar>
         <GiftCardUpdateInfoCard />
-      </RightSidebar>
+      </DetailPageLayout.RightSidebar>
 
       <Savebar
         state={status}
@@ -50,7 +48,7 @@ const GiftCardUpdatePage: React.FC = () => {
         onSubmit={submit}
         onDelete={openDeleteDialog}
       />
-    </DetailedContent>
+    </DetailPageLayout>
   );
 };
 
diff --git a/src/home/components/HomePage/HomePage.tsx b/src/home/components/HomePage/HomePage.tsx
index 8d0ffa56b..d9b9f5905 100644
--- a/src/home/components/HomePage/HomePage.tsx
+++ b/src/home/components/HomePage/HomePage.tsx
@@ -1,8 +1,6 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Money from "@dashboard/components/Money";
 import RequirePermissions from "@dashboard/components/RequirePermissions";
 import Skeleton from "@dashboard/components/Skeleton";
@@ -78,9 +76,9 @@ const HomePage: React.FC<HomePageProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <DetailedContent>
+    <DetailPageLayout withSavebar={false}>
       <TopNav title={<HomeHeader userName={userName} />} />
-      <Content noSavebar>
+      <DetailPageLayout.Content>
         <Box paddingLeft={9} paddingRight={11}>
           <CardSpacer />
           <RequirePermissions
@@ -153,17 +151,17 @@ const HomePage: React.FC<HomePageProps> = props => {
             </RequirePermissions>
           )}
         </Box>
-      </Content>
+      </DetailPageLayout.Content>
       {activities && (
-        <RightSidebar noSavebar>
+        <DetailPageLayout.RightSidebar>
           <RequirePermissions
             requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
           >
             <HomeActivityCard activities={activities} testId="activity-card" />
           </RequirePermissions>
-        </RightSidebar>
+        </DetailPageLayout.RightSidebar>
       )}
-    </DetailedContent>
+    </DetailPageLayout>
   );
 };
 HomePage.displayName = "HomePage";
diff --git a/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx b/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx
index 49d99e0c8..2c8a15dcd 100644
--- a/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx
+++ b/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx
@@ -1,9 +1,8 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { Backlink } from "@dashboard/components/Backlink";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import Form from "@dashboard/components/Form";
 import Grid from "@dashboard/components/Grid";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import { MenuDetailsFragment, MenuErrorFragment } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
@@ -86,8 +85,8 @@ const MenuDetailsPage: React.FC<MenuDetailsPageProps> = ({
   return (
     <Form confirmLeave initial={initialForm} onSubmit={handleSubmit}>
       {({ change, data, submit }) => (
-        <DetailedContent useSingleColumn>
-          <Content noTopNav>
+        <DetailPageLayout gridTemplateColumns={1}>
+          <DetailPageLayout.Content>
             <Box padding={9} margin="auto" height="100vh">
               <Backlink href={menuListUrl()}>
                 {intl.formatMessage(sectionNames.navigation)}
@@ -145,8 +144,8 @@ const MenuDetailsPage: React.FC<MenuDetailsPageProps> = ({
                 state={saveButtonState}
               />
             </Box>
-          </Content>
-        </DetailedContent>
+          </DetailPageLayout.Content>
+        </DetailPageLayout>
       )}
     </Form>
   );
diff --git a/src/navigation/components/MenuListPage/MenuListPage.tsx b/src/navigation/components/MenuListPage/MenuListPage.tsx
index eaa0344a0..179b38a48 100644
--- a/src/navigation/components/MenuListPage/MenuListPage.tsx
+++ b/src/navigation/components/MenuListPage/MenuListPage.tsx
@@ -1,15 +1,11 @@
-import {
-  borderHeight,
-  topBarHeight,
-} from "@dashboard/components/AppLayout/consts";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Button } from "@dashboard/components/Button";
+import { ListPageLayout } from "@dashboard/components/Layouts";
 import { configurationMenuUrl } from "@dashboard/configuration";
 import { MenuFragment } from "@dashboard/graphql";
 import { sectionNames } from "@dashboard/intl";
 import { menuListUrl, MenuListUrlSortField } from "@dashboard/navigation/urls";
 import { ListActions, PageListProps, SortPage } from "@dashboard/types";
-import { Box } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -30,7 +26,7 @@ const MenuListPage: React.FC<MenuListPageProps> = ({ ...listProps }) => {
   });
 
   return (
-    <>
+    <ListPageLayout>
       <TopNav
         href={configurationMenuUrl}
         title={intl.formatMessage(sectionNames.navigation)}
@@ -43,10 +39,8 @@ const MenuListPage: React.FC<MenuListPageProps> = ({ ...listProps }) => {
           />
         </Button>
       </TopNav>
-      <Box __height={`calc(100vh - ${topBarHeight} - ${borderHeight})`}>
-        <MenuList {...listProps} />
-      </Box>
-    </>
+      <MenuList {...listProps} />
+    </ListPageLayout>
   );
 };
 MenuListPage.displayName = "MenuListPage";
diff --git a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
index 1c5ab0926..7fb63696e 100644
--- a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
+++ b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
@@ -3,13 +3,11 @@ import {
   mapToMenuItemsForOrderDetails,
   useExtensions,
 } from "@dashboard/apps/useExtensions";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardMenu from "@dashboard/components/CardMenu";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import {
@@ -205,7 +203,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
         const changeMetadata = makeMetadataChangeHandler(change);
 
         return (
-          <DetailedContent>
+          <DetailPageLayout>
             <TopNav href={orderListUrl()} title={<Title order={order} />}>
               <CardMenu
                 menuItems={[
@@ -220,7 +218,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
               />
             </TopNav>
 
-            <Content data-test-id="order-fulfillment">
+            <DetailPageLayout.Content data-test-id="order-fulfillment">
               {!isOrderUnconfirmed ? (
                 <OrderUnfulfilledProductsCard
                   showFulfillmentAction={canFulfill}
@@ -274,8 +272,8 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
                 orderCurrency={order?.total?.gross.currency}
                 onNoteAdd={onNoteAdd}
               />
-            </Content>
-            <RightSidebar>
+            </DetailPageLayout.Content>
+            <DetailPageLayout.RightSidebar>
               <OrderCustomer
                 canEditAddresses={canEditAddresses}
                 canEditCustomer={false}
@@ -300,7 +298,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
                 </>
               )}
               <OrderCustomerNote note={maybe(() => order.customerNote)} />
-            </RightSidebar>
+            </DetailPageLayout.RightSidebar>
             <Savebar
               labels={saveLabel}
               onCancel={() => navigate(orderListUrl())}
@@ -308,7 +306,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
               state={saveButtonBarState}
               disabled={allowSave()}
             />
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
index 56f49ab53..fc71ef81c 100644
--- a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
+++ b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
@@ -1,10 +1,8 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardMenu from "@dashboard/components/CardMenu";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import { DateTime } from "@dashboard/components/Date";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import Skeleton from "@dashboard/components/Skeleton";
 import {
@@ -82,7 +80,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
   const intl = useIntl();
 
   return (
-    <DetailedContent>
+    <DetailPageLayout>
       <TopNav
         href={orderDraftListUrl()}
         title={
@@ -113,7 +111,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
           ]}
         />
       </TopNav>
-      <Content>
+      <DetailPageLayout.Content>
         <OrderDraftAlert
           order={order}
           channelUsabilityData={channelUsabilityData}
@@ -132,8 +130,8 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
           orderCurrency={order?.total?.gross.currency}
           onNoteAdd={onNoteAdd}
         />
-      </Content>
-      <RightSidebar>
+      </DetailPageLayout.Content>
+      <DetailPageLayout.RightSidebar>
         <OrderChannelSectionCard channel={order?.channel} />
         <CardSpacer />
         <OrderCustomer
@@ -151,7 +149,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
           onProfileView={onProfileView}
           onShippingAddressEdit={onShippingAddressEdit}
         />
-      </RightSidebar>
+      </DetailPageLayout.RightSidebar>
       <Savebar
         state={saveButtonBarState}
         disabled={disabled}
@@ -165,7 +163,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
           }),
         }}
       />
-    </DetailedContent>
+    </DetailPageLayout>
   );
 };
 OrderDraftPage.displayName = "OrderDraftPage";
diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx
index 261be617e..72b79c215 100644
--- a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx
+++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx
@@ -3,6 +3,7 @@ import CardSpacer from "@dashboard/components/CardSpacer";
 import CardTitle from "@dashboard/components/CardTitle";
 import ControlledCheckbox from "@dashboard/components/ControlledCheckbox";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import Savebar from "@dashboard/components/Savebar";
 import Skeleton from "@dashboard/components/Skeleton";
@@ -99,9 +100,8 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
   >(
     (getToFulfillOrderLines(order?.lines) as OrderFulfillLineFragment[]).map(
       line => {
-        const highestQuantityAllocation = getLineAllocationWithHighestQuantity(
-          line,
-        );
+        const highestQuantityAllocation =
+          getLineAllocationWithHighestQuantity(line);
 
         return {
           data: null,
@@ -120,10 +120,8 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
     ),
   );
 
-  const [
-    displayStockExceededDialog,
-    setDisplayStockExceededDialog,
-  ] = React.useState(false);
+  const [displayStockExceededDialog, setDisplayStockExceededDialog] =
+    React.useState(false);
 
   const handleSubmit = ({
     formData,
@@ -192,149 +190,153 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
   };
 
   return (
-    <>
+    <DetailPageLayout gridTemplateColumns={1}>
       <TopNav
         href={orderUrl(order?.id)}
         title={intl.formatMessage(messages.headerOrderNumberAddFulfillment, {
           orderNumber: order?.number,
         })}
-      ></TopNav>
-      <Form
-        confirmLeave
-        initial={initialFormData}
-        onSubmit={formData =>
-          handleSubmit({
-            formData,
-            allowStockToBeExceeded: displayStockExceededDialog,
-          })
-        }
-      >
-        {({ change, data, submit }) => (
-          <>
-            <Card>
-              <CardTitle
-                title={intl.formatMessage(messages.itemsReadyToShip)}
-              />
-              {order ? (
-                <ResponsiveTable className={classes.table}>
-                  <TableHead>
-                    <TableRowLink>
-                      <TableCell className={classes.colName}>
-                        <FormattedMessage {...messages.productName} />
-                      </TableCell>
-                      <TableCell className={classes.colSku}>
-                        <FormattedMessage {...messages.sku} />
-                      </TableCell>
-                      <TableCell
-                        className={clsx(
-                          classes.colQuantity,
-                          classes.colQuantityHeader,
-                        )}
-                      >
-                        <FormattedMessage {...messages.quantity} />
-                      </TableCell>
-                      <TableCell className={classes.colStock}>
-                        <FormattedMessage {...messages.stock} />
-                      </TableCell>
-                      <TableCell className={classes.colWarehouse}>
-                        <FormattedMessage {...messages.warehouse} />
-                      </TableCell>
-                    </TableRowLink>
-                  </TableHead>
-                  <TableBody>
-                    {renderCollection(
-                      getToFulfillOrderLines(order.lines),
-                      (line: OrderFulfillLineFragment, lineIndex) => (
-                        <OrderFulfillLine
-                          key={line.id}
-                          line={line}
-                          lineIndex={lineIndex}
-                          formsetData={formsetData}
-                          formsetChange={formsetChange}
-                          onWarehouseChange={() =>
-                            openModal("change-warehouse", {
-                              lineId: line.id,
-                              warehouseId:
-                                formsetData[lineIndex]?.value?.[0]?.warehouse
-                                  ?.id,
-                            })
-                          }
-                        />
-                      ),
-                    )}
-                  </TableBody>
-                </ResponsiveTable>
-              ) : (
-                <CardContent>
-                  <Skeleton />
-                </CardContent>
-              )}
-            </Card>
-
-            <CardSpacer />
-
-            {shopSettings?.fulfillmentAutoApprove && (
+      />
+      <DetailPageLayout.Content>
+        <Form
+          confirmLeave
+          initial={initialFormData}
+          onSubmit={formData =>
+            handleSubmit({
+              formData,
+              allowStockToBeExceeded: displayStockExceededDialog,
+            })
+          }
+        >
+          {({ change, data, submit }) => (
+            <>
               <Card>
                 <CardTitle
-                  title={intl.formatMessage(messages.shipmentInformation)}
+                  title={intl.formatMessage(messages.itemsReadyToShip)}
                 />
-                <CardContent>
-                  <ControlledCheckbox
-                    checked={data.sendInfo}
-                    label={intl.formatMessage(messages.sentShipmentDetails)}
-                    name="sendInfo"
-                    onChange={change}
-                  />
-                </CardContent>
+                {order ? (
+                  <ResponsiveTable className={classes.table}>
+                    <TableHead>
+                      <TableRowLink>
+                        <TableCell className={classes.colName}>
+                          <FormattedMessage {...messages.productName} />
+                        </TableCell>
+                        <TableCell className={classes.colSku}>
+                          <FormattedMessage {...messages.sku} />
+                        </TableCell>
+                        <TableCell
+                          className={clsx(
+                            classes.colQuantity,
+                            classes.colQuantityHeader,
+                          )}
+                        >
+                          <FormattedMessage {...messages.quantity} />
+                        </TableCell>
+                        <TableCell className={classes.colStock}>
+                          <FormattedMessage {...messages.stock} />
+                        </TableCell>
+                        <TableCell className={classes.colWarehouse}>
+                          <FormattedMessage {...messages.warehouse} />
+                        </TableCell>
+                      </TableRowLink>
+                    </TableHead>
+                    <TableBody>
+                      {renderCollection(
+                        getToFulfillOrderLines(order.lines),
+                        (line: OrderFulfillLineFragment, lineIndex) => (
+                          <OrderFulfillLine
+                            key={line.id}
+                            line={line}
+                            lineIndex={lineIndex}
+                            formsetData={formsetData}
+                            formsetChange={formsetChange}
+                            onWarehouseChange={() =>
+                              openModal("change-warehouse", {
+                                lineId: line.id,
+                                warehouseId:
+                                  formsetData[lineIndex]?.value?.[0]?.warehouse
+                                    ?.id,
+                              })
+                            }
+                          />
+                        ),
+                      )}
+                    </TableBody>
+                  </ResponsiveTable>
+                ) : (
+                  <CardContent>
+                    <Skeleton />
+                  </CardContent>
+                )}
               </Card>
-            )}
 
-            <Savebar
-              disabled={!shouldEnableSave()}
-              labels={{
-                confirm: shopSettings?.fulfillmentAutoApprove
-                  ? intl.formatMessage(messages.submitFulfillment)
-                  : intl.formatMessage(messages.submitPrepareFulfillment),
-              }}
-              state={saveButtonBar}
-              tooltips={{
-                confirm:
-                  notAllowedToFulfillUnpaid &&
-                  intl.formatMessage(commonMessages.cannotFullfillUnpaidOrder),
-              }}
-              onSubmit={submit}
-              onCancel={() => navigate(orderUrl(order?.id))}
-            />
-            <OrderFulfillStockExceededDialog
-              open={displayStockExceededDialog}
-              lines={order?.lines}
-              formsetData={formsetData}
-              confirmButtonState={saveButtonBar}
-              onSubmit={submit}
-              onClose={() => setDisplayStockExceededDialog(false)}
-            />
-          </>
-        )}
-      </Form>
-      <OrderChangeWarehouseDialog
-        open={params.action === "change-warehouse"}
-        line={order?.lines.find(line => line.id === params.lineId)}
-        currentWarehouseId={params.warehouseId}
-        onConfirm={warehouse => {
-          const lineFormQuantity = formsetData.find(
-            item => item.id === params.lineId,
-          )?.value?.[0]?.quantity;
+              <CardSpacer />
 
-          formsetChange(params.lineId, [
-            {
-              quantity: lineFormQuantity,
-              warehouse,
-            },
-          ]);
-        }}
-        onClose={closeModal}
-      />
-    </>
+              {shopSettings?.fulfillmentAutoApprove && (
+                <Card>
+                  <CardTitle
+                    title={intl.formatMessage(messages.shipmentInformation)}
+                  />
+                  <CardContent>
+                    <ControlledCheckbox
+                      checked={data.sendInfo}
+                      label={intl.formatMessage(messages.sentShipmentDetails)}
+                      name="sendInfo"
+                      onChange={change}
+                    />
+                  </CardContent>
+                </Card>
+              )}
+
+              <Savebar
+                disabled={!shouldEnableSave()}
+                labels={{
+                  confirm: shopSettings?.fulfillmentAutoApprove
+                    ? intl.formatMessage(messages.submitFulfillment)
+                    : intl.formatMessage(messages.submitPrepareFulfillment),
+                }}
+                state={saveButtonBar}
+                tooltips={{
+                  confirm:
+                    notAllowedToFulfillUnpaid &&
+                    intl.formatMessage(
+                      commonMessages.cannotFullfillUnpaidOrder,
+                    ),
+                }}
+                onSubmit={submit}
+                onCancel={() => navigate(orderUrl(order?.id))}
+              />
+              <OrderFulfillStockExceededDialog
+                open={displayStockExceededDialog}
+                lines={order?.lines}
+                formsetData={formsetData}
+                confirmButtonState={saveButtonBar}
+                onSubmit={submit}
+                onClose={() => setDisplayStockExceededDialog(false)}
+              />
+            </>
+          )}
+        </Form>
+        <OrderChangeWarehouseDialog
+          open={params.action === "change-warehouse"}
+          line={order?.lines.find(line => line.id === params.lineId)}
+          currentWarehouseId={params.warehouseId}
+          onConfirm={warehouse => {
+            const lineFormQuantity = formsetData.find(
+              item => item.id === params.lineId,
+            )?.value?.[0]?.quantity;
+
+            formsetChange(params.lineId, [
+              {
+                quantity: lineFormQuantity,
+                warehouse,
+              },
+            ]);
+          }}
+          onClose={closeModal}
+        />
+      </DetailPageLayout.Content>
+    </DetailPageLayout>
   );
 };
 
diff --git a/src/orders/components/OrderListPage/OrderListPage.tsx b/src/orders/components/OrderListPage/OrderListPage.tsx
index e1cde23ce..c728dd7fa 100644
--- a/src/orders/components/OrderListPage/OrderListPage.tsx
+++ b/src/orders/components/OrderListPage/OrderListPage.tsx
@@ -8,6 +8,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { ButtonWithSelect } from "@dashboard/components/ButtonWithSelect";
 import CardMenu from "@dashboard/components/CardMenu";
 import FilterBar from "@dashboard/components/FilterBar";
+import { ListPageLayout } from "@dashboard/components/Layouts";
 import { OrderListQuery, RefreshLimitsQuery } from "@dashboard/graphql";
 import { sectionNames } from "@dashboard/intl";
 import { OrderListUrlSortField } from "@dashboard/orders/urls";
@@ -78,7 +79,7 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
   const extensionCreateButtonItems = mapToMenuItems(ORDER_OVERVIEW_CREATE);
 
   return (
-    <>
+    <ListPageLayout>
       <TopNav title={intl.formatMessage(sectionNames.orders)}>
         {!!onSettingsOpen && (
           <CardMenu
@@ -149,7 +150,7 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
         />
         <OrderList {...listProps} />
       </Card>
-    </>
+    </ListPageLayout>
   );
 };
 OrderListPage.displayName = "OrderListPage";
diff --git a/src/orders/components/OrderRefundPage/OrderRefundPage.tsx b/src/orders/components/OrderRefundPage/OrderRefundPage.tsx
index 81c1afde2..e57a22bd7 100644
--- a/src/orders/components/OrderRefundPage/OrderRefundPage.tsx
+++ b/src/orders/components/OrderRefundPage/OrderRefundPage.tsx
@@ -1,8 +1,6 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import {
   FulfillmentStatus,
   OrderErrorFragment,
@@ -72,7 +70,7 @@ const OrderRefundPage: React.FC<OrderRefundPageProps> = props => {
         const isProductRefund = data.type === OrderRefundType.PRODUCTS;
 
         return (
-          <DetailedContent>
+          <DetailPageLayout>
             <TopNav
               href={orderUrl(order?.id)}
               title={intl.formatMessage(
@@ -85,8 +83,8 @@ const OrderRefundPage: React.FC<OrderRefundPageProps> = props => {
                   orderNumber: order?.number,
                 },
               )}
-            ></TopNav>
-            <Content>
+            />
+            <DetailPageLayout.Content>
               <OrderRefund data={data} disabled={disabled} onChange={change} />
               {isProductRefund && (
                 <>
@@ -127,8 +125,8 @@ const OrderRefundPage: React.FC<OrderRefundPageProps> = props => {
                   ))}
                 </>
               )}
-            </Content>
-            <RightSidebar>
+            </DetailPageLayout.Content>
+            <DetailPageLayout.RightSidebar>
               <OrderRefundAmount
                 amountData={
                   isProductRefund
@@ -142,8 +140,8 @@ const OrderRefundPage: React.FC<OrderRefundPageProps> = props => {
                 onChange={change}
                 onRefund={submit}
               />
-            </RightSidebar>
-          </DetailedContent>
+            </DetailPageLayout.RightSidebar>
+          </DetailPageLayout>
         );
       }}
     </OrderRefundForm>
diff --git a/src/orders/components/OrderReturnPage/OrderReturnPage.tsx b/src/orders/components/OrderReturnPage/OrderReturnPage.tsx
index 3403f5252..3fb993004 100644
--- a/src/orders/components/OrderReturnPage/OrderReturnPage.tsx
+++ b/src/orders/components/OrderReturnPage/OrderReturnPage.tsx
@@ -1,8 +1,6 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { OrderDetailsFragment, OrderErrorFragment } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import { renderCollection } from "@dashboard/misc";
@@ -48,14 +46,14 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
   return (
     <OrderRefundForm order={order} onSubmit={onSubmit}>
       {({ data, handlers, change, submit, isSaveDisabled }) => (
-        <DetailedContent>
+        <DetailPageLayout>
           <TopNav
             href={orderUrl(order?.id)}
             title={intl.formatMessage(messages.pageTitle, {
               orderNumber: order?.number,
             })}
           />
-          <Content>
+          <DetailPageLayout.Content>
             {!!data.unfulfilledItemsQuantities.length && (
               <>
                 <ItemsCard
@@ -115,8 +113,8 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
                 </React.Fragment>
               ),
             )}
-          </Content>
-          <RightSidebar>
+          </DetailPageLayout.Content>
+          <DetailPageLayout.RightSidebar>
             <OrderAmount
               allowNoRefund
               isReturn
@@ -129,8 +127,8 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
               onChange={change}
               onRefund={submit}
             />
-          </RightSidebar>
-        </DetailedContent>
+          </DetailPageLayout.RightSidebar>
+        </DetailPageLayout>
       )}
     </OrderRefundForm>
   );
diff --git a/src/orders/components/OrderSettingsPage/OrderSettingsPage.tsx b/src/orders/components/OrderSettingsPage/OrderSettingsPage.tsx
index 0d016e1a8..b5bd53ff5 100644
--- a/src/orders/components/OrderSettingsPage/OrderSettingsPage.tsx
+++ b/src/orders/components/OrderSettingsPage/OrderSettingsPage.tsx
@@ -1,7 +1,6 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import Grid from "@dashboard/components/Grid";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import {
   OrderSettingsFragment,
@@ -42,7 +41,7 @@ const OrderSettingsPage: React.FC<OrderSettingsPageProps> = props => {
       disabled={disabled}
     >
       {({ data, submit, change, isSaveDisabled }) => (
-        <DetailedContent>
+        <DetailPageLayout>
           <TopNav
             href={orderListUrl()}
             title={intl.formatMessage({
@@ -51,7 +50,7 @@ const OrderSettingsPage: React.FC<OrderSettingsPageProps> = props => {
               description: "header",
             })}
           />
-          <Content>
+          <DetailPageLayout.Content>
             <Box padding={9} margin="auto" height="100vh">
               <Grid variant="inverted">
                 <div>
@@ -75,14 +74,14 @@ const OrderSettingsPage: React.FC<OrderSettingsPageProps> = props => {
                 />
               </Grid>
             </Box>
-          </Content>
+          </DetailPageLayout.Content>
           <Savebar
             onCancel={() => navigate(orderListUrl())}
             onSubmit={submit}
             disabled={isSaveDisabled}
             state={saveButtonBarState}
           />
-        </DetailedContent>
+        </DetailPageLayout>
       )}
     </OrderSettingsForm>
   );
diff --git a/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.tsx b/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.tsx
index 1fa72a69b..281fddcbd 100644
--- a/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.tsx
+++ b/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.tsx
@@ -1,9 +1,8 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import Form from "@dashboard/components/Form";
 import Grid from "@dashboard/components/Grid";
 import Hr from "@dashboard/components/Hr";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import { PageErrorFragment } from "@dashboard/graphql";
@@ -68,7 +67,7 @@ const PageTypeCreatePage: React.FC<PageTypeCreatePageProps> = props => {
         const changeMetadata = makeMetadataChangeHandler(change);
 
         return (
-          <DetailedContent>
+          <DetailPageLayout gridTemplateColumns={1}>
             <TopNav
               href={pageTypeListUrl()}
               title={intl.formatMessage({
@@ -77,7 +76,7 @@ const PageTypeCreatePage: React.FC<PageTypeCreatePageProps> = props => {
                 description: "header",
               })}
             />
-            <Content>
+            <DetailPageLayout.Content>
               <Grid
                 variant="inverted"
                 className={sprinkles({
@@ -115,14 +114,14 @@ const PageTypeCreatePage: React.FC<PageTypeCreatePageProps> = props => {
                 </div>
                 <Metadata data={data} onChange={changeMetadata} />
               </Grid>
-            </Content>
+            </DetailPageLayout.Content>
             <Savebar
               onCancel={() => navigate(pageTypeListUrl())}
               onSubmit={submit}
               disabled={isSaveDisabled}
               state={saveButtonBarState}
             />
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx b/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx
index 50906bf8b..b5de5f726 100644
--- a/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx
+++ b/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx
@@ -1,9 +1,8 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import Form from "@dashboard/components/Form";
 import Grid from "@dashboard/components/Grid";
 import Hr from "@dashboard/components/Hr";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata from "@dashboard/components/Metadata/Metadata";
 import { MetadataFormData } from "@dashboard/components/Metadata/types";
 import Savebar from "@dashboard/components/Savebar";
@@ -118,9 +117,9 @@ const PageTypeDetailsPage: React.FC<PageTypeDetailsPageProps> = props => {
         const changeMetadata = makeMetadataChangeHandler(change);
 
         return (
-          <DetailedContent useSingleColumn>
+          <DetailPageLayout gridTemplateColumns={1}>
             <TopNav href={pageTypeListUrl()} title={pageTitle} />
-            <Content>
+            <DetailPageLayout.Content>
               <Grid
                 variant="inverted"
                 className={sprinkles({
@@ -185,7 +184,7 @@ const PageTypeDetailsPage: React.FC<PageTypeDetailsPageProps> = props => {
                 </div>
                 <Metadata data={data} onChange={changeMetadata} />
               </Grid>
-            </Content>
+            </DetailPageLayout.Content>
             <Savebar
               onCancel={() => navigate(pageTypeListUrl())}
               onDelete={onDelete}
@@ -193,7 +192,7 @@ const PageTypeDetailsPage: React.FC<PageTypeDetailsPageProps> = props => {
               disabled={isSaveDisabled}
               state={saveButtonBarState}
             />
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx b/src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx
index 320ad428c..46afc2abb 100644
--- a/src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx
+++ b/src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx
@@ -1,5 +1,6 @@
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Button } from "@dashboard/components/Button";
+import { ListPageLayout } from "@dashboard/components/Layouts";
 import SearchBar from "@dashboard/components/SearchBar";
 import { configurationMenuUrl } from "@dashboard/configuration";
 import { PageTypeFragment } from "@dashboard/graphql";
@@ -43,7 +44,7 @@ const PageTypeListPage: React.FC<PageTypeListPageProps> = ({
 }) => {
   const intl = useIntl();
   return (
-    <>
+    <ListPageLayout>
       <TopNav
         href={configurationMenuUrl}
         title={intl.formatMessage(sectionNames.pageTypes)}
@@ -82,7 +83,7 @@ const PageTypeListPage: React.FC<PageTypeListPageProps> = ({
         />
         <PageTypeList {...listProps} />
       </Card>
-    </>
+    </ListPageLayout>
   );
 };
 PageTypeListPage.displayName = "PageTypeListPage";
diff --git a/src/pages/components/PageDetailsPage/PageDetailsPage.tsx b/src/pages/components/PageDetailsPage/PageDetailsPage.tsx
index 60a9a42d1..51c9c99d8 100644
--- a/src/pages/components/PageDetailsPage/PageDetailsPage.tsx
+++ b/src/pages/components/PageDetailsPage/PageDetailsPage.tsx
@@ -2,13 +2,11 @@ import {
   getReferenceAttributeEntityTypeFromAttribute,
   mergeAttributeValues,
 } from "@dashboard/attributes/utils/data";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
 import Attributes, { AttributeInput } from "@dashboard/components/Attributes";
 import CardSpacer from "@dashboard/components/CardSpacer";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata from "@dashboard/components/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import SeoForm from "@dashboard/components/SeoForm";
@@ -150,14 +148,14 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
         const errors = [...apiErrors, ...validationErrors];
 
         return (
-          <DetailedContent>
+          <DetailPageLayout>
             <TopNav
               href={pageListUrl()}
               title={
                 !pageExists ? intl.formatMessage(messages.title) : page?.title
               }
             />
-            <Content>
+            <DetailPageLayout.Content>
               <PageInfo
                 data={data}
                 disabled={loading}
@@ -200,8 +198,8 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
               )}
               <CardSpacer />
               <Metadata data={data} onChange={handlers.changeMetadata} />
-            </Content>
-            <RightSidebar>
+            </DetailPageLayout.Content>
+            <DetailPageLayout.RightSidebar>
               <VisibilityCard
                 data={data}
                 errors={errors}
@@ -231,7 +229,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
                 fetchMorePageTypes={fetchMorePageTypes}
                 canChangeType={!page?.pageType}
               />
-            </RightSidebar>
+            </DetailPageLayout.RightSidebar>
             <Savebar
               disabled={loading}
               state={saveButtonBarState}
@@ -263,7 +261,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
                 }
               />
             )}
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </PageForm>
diff --git a/src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.tsx b/src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.tsx
index 6b989961f..ef04d2c33 100644
--- a/src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.tsx
+++ b/src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.tsx
@@ -1,9 +1,8 @@
 import AccountPermissions from "@dashboard/components/AccountPermissions";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
+import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Backlink } from "@dashboard/components/Backlink";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import {
   PermissionEnum,
@@ -68,8 +67,9 @@ const PermissionGroupCreatePage: React.FC<PermissionGroupCreatePageProps> = ({
       disabled={disabled}
     >
       {({ data, change, submit, isSaveDisabled }) => (
-        <DetailedContent>
-          <Content>
+        <DetailPageLayout>
+          <TopNav title="New Permission Group" />
+          <DetailPageLayout.Content>
             <Backlink href={permissionGroupListUrl()}>
               {intl.formatMessage(sectionNames.permissionGroups)}
             </Backlink>
@@ -79,8 +79,8 @@ const PermissionGroupCreatePage: React.FC<PermissionGroupCreatePageProps> = ({
               onChange={change}
               disabled={disabled}
             />
-          </Content>
-          <RightSidebar>
+          </DetailPageLayout.Content>
+          <DetailPageLayout.RightSidebar>
             <AccountPermissions
               permissionsExceeded={false}
               data={data}
@@ -100,16 +100,14 @@ const PermissionGroupCreatePage: React.FC<PermissionGroupCreatePageProps> = ({
                 description: "card description",
               })}
             />
-          </RightSidebar>
-          <div>
-            <Savebar
-              onCancel={() => navigate(permissionGroupListUrl())}
-              onSubmit={submit}
-              state={saveButtonBarState}
-              disabled={isSaveDisabled}
-            />
-          </div>
-        </DetailedContent>
+          </DetailPageLayout.RightSidebar>
+          <Savebar
+            onCancel={() => navigate(permissionGroupListUrl())}
+            onSubmit={submit}
+            state={saveButtonBarState}
+            disabled={isSaveDisabled}
+          />
+        </DetailPageLayout>
       )}
     </Form>
   );
diff --git a/src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.tsx b/src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.tsx
index 908de6292..e87451871 100644
--- a/src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.tsx
+++ b/src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.tsx
@@ -1,10 +1,8 @@
 import AccountPermissions from "@dashboard/components/AccountPermissions";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import {
   PermissionEnum,
@@ -92,12 +90,12 @@ const PermissionGroupDetailsPage: React.FC<PermissionGroupDetailsPageProps> = ({
   return (
     <Form confirmLeave initial={initialForm} onSubmit={onSubmit}>
       {({ data, change, submit }) => (
-        <DetailedContent>
+        <DetailPageLayout>
           <TopNav
             href={permissionGroupListUrl()}
             title={permissionGroup?.name}
           />
-          <Content>
+          <DetailPageLayout.Content>
             <PermissionGroupInfo
               data={data}
               disabled={disabled}
@@ -110,8 +108,8 @@ const PermissionGroupDetailsPage: React.FC<PermissionGroupDetailsPageProps> = ({
               {...listProps}
               users={data?.users || []}
             />
-          </Content>
-          <RightSidebar>
+          </DetailPageLayout.Content>
+          <DetailPageLayout.RightSidebar>
             <AccountPermissions
               permissionsExceeded={permissionsExceeded}
               data={data}
@@ -131,7 +129,7 @@ const PermissionGroupDetailsPage: React.FC<PermissionGroupDetailsPageProps> = ({
                 description: "card description",
               })}
             />
-          </RightSidebar>
+          </DetailPageLayout.RightSidebar>
           <div>
             <Savebar
               onCancel={() => navigate(permissionGroupListUrl())}
@@ -140,7 +138,7 @@ const PermissionGroupDetailsPage: React.FC<PermissionGroupDetailsPageProps> = ({
               disabled={disabled}
             />
           </div>
-        </DetailedContent>
+        </DetailPageLayout>
       )}
     </Form>
   );
diff --git a/src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.tsx b/src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.tsx
index 77123d888..b61845d41 100644
--- a/src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.tsx
+++ b/src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.tsx
@@ -1,5 +1,6 @@
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Button } from "@dashboard/components/Button";
+import { ListPageLayout } from "@dashboard/components/Layouts";
 import { configurationMenuUrl } from "@dashboard/configuration";
 import { PermissionGroupFragment } from "@dashboard/graphql";
 import { sectionNames } from "@dashboard/intl";
@@ -21,11 +22,13 @@ export interface PermissionGroupListPageProps
   onDelete: (id: string) => void;
 }
 
-const PermissionGroupListPage: React.FC<PermissionGroupListPageProps> = listProps => {
+const PermissionGroupListPage: React.FC<
+  PermissionGroupListPageProps
+> = listProps => {
   const intl = useIntl();
 
   return (
-    <>
+    <ListPageLayout>
       <TopNav
         href={configurationMenuUrl}
         title={intl.formatMessage(sectionNames.permissionGroups)}
@@ -45,7 +48,7 @@ const PermissionGroupListPage: React.FC<PermissionGroupListPageProps> = listProp
       <Card>
         <PermissionGroupList {...listProps} />
       </Card>
-    </>
+    </ListPageLayout>
   );
 };
 PermissionGroupListPage.displayName = "PermissionGroupListPage";
diff --git a/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx b/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx
index 6ab74e1fe..b15733bb9 100644
--- a/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx
+++ b/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx
@@ -1,9 +1,8 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import Form from "@dashboard/components/Form";
 import Grid from "@dashboard/components/Grid";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import {
   ConfigurationItemInput,
@@ -97,7 +96,7 @@ const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = ({
           set(newData);
         };
         return (
-          <DetailedContent useSingleColumn>
+          <DetailPageLayout gridTemplateColumns={1}>
             <TopNav
               href={pluginListUrl()}
               title={intl.formatMessage(
@@ -111,7 +110,7 @@ const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = ({
                 },
               )}
             />
-            <Content>
+            <DetailPageLayout.Content>
               <Grid variant="inverted">
                 <div>
                   <PluginDetailsChannelsCard
@@ -163,8 +162,8 @@ const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = ({
                 onCancel={() => navigate(pluginListUrl())}
                 onSubmit={submit}
               />
-            </Content>
-          </DetailedContent>
+            </DetailPageLayout.Content>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/plugins/components/PluginsListPage/PluginsListPage.tsx b/src/plugins/components/PluginsListPage/PluginsListPage.tsx
index 02b1413ba..2322bc477 100644
--- a/src/plugins/components/PluginsListPage/PluginsListPage.tsx
+++ b/src/plugins/components/PluginsListPage/PluginsListPage.tsx
@@ -1,5 +1,6 @@
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import FilterBar from "@dashboard/components/FilterBar";
+import { ListPageLayout } from "@dashboard/components/Layouts";
 import { configurationMenuUrl } from "@dashboard/configuration";
 import { PluginBaseFragment } from "@dashboard/graphql";
 import { sectionNames } from "@dashboard/intl";
@@ -48,7 +49,7 @@ const PluginsListPage: React.FC<PluginsListPageProps> = ({
   const filterStructure = createFilterStructure(intl, filterOpts);
 
   return (
-    <>
+    <ListPageLayout>
       <TopNav
         href={configurationMenuUrl}
         title={intl.formatMessage(sectionNames.plugins)}
@@ -78,7 +79,7 @@ const PluginsListPage: React.FC<PluginsListPageProps> = ({
         />
         <PluginsList {...listProps} />
       </Card>
-    </>
+    </ListPageLayout>
   );
 };
 PluginsListPage.displayName = "PluginsListPage";
diff --git a/src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.tsx b/src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.tsx
index 5331df52b..4386d6c90 100644
--- a/src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.tsx
+++ b/src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.tsx
@@ -1,9 +1,7 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import {
@@ -74,9 +72,8 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
   const navigate = useNavigator();
 
   const [taxClassDisplayName, setTaxClassDisplayName] = useStateFromProps("");
-  const {
-    makeChangeHandler: makeMetadataChangeHandler,
-  } = useMetadataChangeTrigger();
+  const { makeChangeHandler: makeMetadataChangeHandler } =
+    useMetadataChangeTrigger();
 
   const initialData = {
     ...formInitialData,
@@ -99,9 +96,9 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
         );
 
         return (
-          <DetailedContent>
+          <DetailPageLayout>
             <TopNav href={productTypeListUrl()} title={pageTitle} />
-            <Content>
+            <DetailPageLayout.Content>
               <ProductTypeDetails
                 data={data}
                 disabled={disabled}
@@ -127,22 +124,22 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
               />
               <CardSpacer />
               <Metadata data={data} onChange={changeMetadata} />
-            </Content>
-            <RightSidebar>
+            </DetailPageLayout.Content>
+            <DetailPageLayout.RightSidebar>
               <ProductTypeShipping
                 disabled={disabled}
                 data={data}
                 weightUnit={defaultWeightUnit}
                 onChange={change}
               />
-            </RightSidebar>
+            </DetailPageLayout.RightSidebar>
             <Savebar
               onCancel={() => navigate(productTypeListUrl())}
               onSubmit={submit}
               disabled={isSaveDisabled}
               state={saveButtonBarState}
             />
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx b/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx
index e036a5db1..a722e8658 100644
--- a/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx
+++ b/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx
@@ -1,10 +1,8 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import ControlledSwitch from "@dashboard/components/ControlledSwitch";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata from "@dashboard/components/Metadata/Metadata";
 import { MetadataFormData } from "@dashboard/components/Metadata/types";
 import Savebar from "@dashboard/components/Savebar";
@@ -164,9 +162,9 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
         const changeMetadata = makeMetadataChangeHandler(change);
 
         return (
-          <DetailedContent>
+          <DetailPageLayout>
             <TopNav href={productTypeListUrl()} title={pageTitle} />
-            <Content>
+            <DetailPageLayout.Content>
               <ProductTypeDetails
                 data={data}
                 disabled={disabled}
@@ -239,15 +237,15 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
               )}
               <CardSpacer />
               <Metadata data={data} onChange={changeMetadata} />
-            </Content>
-            <RightSidebar>
+            </DetailPageLayout.Content>
+            <DetailPageLayout.RightSidebar>
               <ProductTypeShipping
                 disabled={disabled}
                 data={data}
                 weightUnit={productType?.weight?.unit || defaultWeightUnit}
                 onChange={change}
               />
-            </RightSidebar>
+            </DetailPageLayout.RightSidebar>
             <Savebar
               onCancel={() => navigate(productTypeListUrl())}
               onDelete={onDelete}
@@ -255,7 +253,7 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
               disabled={isSaveDisabled}
               state={saveButtonBarState}
             />
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/products/components/ProductCreatePage/ProductCreatePage.tsx b/src/products/components/ProductCreatePage/ProductCreatePage.tsx
index 0b3cd1fc8..88d1c1a04 100644
--- a/src/products/components/ProductCreatePage/ProductCreatePage.tsx
+++ b/src/products/components/ProductCreatePage/ProductCreatePage.tsx
@@ -4,14 +4,12 @@ import {
 } from "@dashboard/attributes/utils/data";
 import CannotDefineChannelsAvailabilityCard from "@dashboard/channels/components/CannotDefineChannelsAvailabilityCard/CannotDefineChannelsAvailabilityCard";
 import { ChannelData } from "@dashboard/channels/utils";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
 import Attributes, { AttributeInput } from "@dashboard/components/Attributes";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata from "@dashboard/components/Metadata";
 import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
 import Savebar from "@dashboard/components/Savebar";
@@ -236,9 +234,9 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
         );
 
         return (
-          <DetailedContent>
+          <DetailPageLayout>
             <TopNav href={productListUrl()} title={header} />
-            <Content>
+            <DetailPageLayout.Content>
               <ProductDetailsForm
                 data={data}
                 disabled={loading}
@@ -319,8 +317,8 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
               />
               <CardSpacer />
               <Metadata data={data} onChange={handlers.changeMetadata} />
-            </Content>
-            <RightSidebar>
+            </DetailPageLayout.Content>
+            <DetailPageLayout.RightSidebar>
               <ProductOrganization
                 canChangeType={true}
                 categories={categories}
@@ -379,7 +377,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                 taxClasses={taxClasses}
                 onFetchMore={fetchMoreTaxClasses}
               />
-            </RightSidebar>
+            </DetailPageLayout.RightSidebar>
             <Savebar
               onCancel={() => navigate(productListUrl())}
               onSubmit={submit}
@@ -407,7 +405,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                 }
               />
             )}
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </ProductCreateForm>
diff --git a/src/products/components/ProductListPage/ProductListPage.tsx b/src/products/components/ProductListPage/ProductListPage.tsx
index 346480a86..dcd733ff7 100644
--- a/src/products/components/ProductListPage/ProductListPage.tsx
+++ b/src/products/components/ProductListPage/ProductListPage.tsx
@@ -11,6 +11,7 @@ import CardMenu from "@dashboard/components/CardMenu";
 import ColumnPicker from "@dashboard/components/ColumnPicker";
 import { getByName } from "@dashboard/components/Filter/utils";
 import FilterBar from "@dashboard/components/FilterBar";
+import { ListPageLayout } from "@dashboard/components/Layouts";
 import LimitReachedAlert from "@dashboard/components/LimitReachedAlert";
 import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
 import { ProductListColumns } from "@dashboard/config";
@@ -171,10 +172,8 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
   ];
 
   const limitReached = isLimitReached(limits, "productVariants");
-  const {
-    PRODUCT_OVERVIEW_CREATE,
-    PRODUCT_OVERVIEW_MORE_ACTIONS,
-  } = useExtensions(extensionMountPoints.PRODUCT_LIST);
+  const { PRODUCT_OVERVIEW_CREATE, PRODUCT_OVERVIEW_MORE_ACTIONS } =
+    useExtensions(extensionMountPoints.PRODUCT_LIST);
 
   const extensionMenuItems = mapToMenuItemsForProductOverviewActions(
     PRODUCT_OVERVIEW_MORE_ACTIONS,
@@ -183,7 +182,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
   const extensionCreateButtonItems = mapToMenuItems(PRODUCT_OVERVIEW_CREATE);
 
   return (
-    <>
+    <ListPageLayout>
       <TopNav title={intl.formatMessage(sectionNames.products)}>
         <CardMenu
           className={classes.settings}
@@ -289,7 +288,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
           filterDependency={filterDependency}
         />
       </Card>
-    </>
+    </ListPageLayout>
   );
 };
 ProductListPage.displayName = "ProductListPage";
diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
index d63b3e0c3..a4587d368 100644
--- a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
+++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
@@ -8,15 +8,13 @@ import {
   mergeAttributeValues,
 } from "@dashboard/attributes/utils/data";
 import { ChannelData } from "@dashboard/channels/utils";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
 import Attributes, { AttributeInput } from "@dashboard/components/Attributes";
 import CardMenu from "@dashboard/components/CardMenu";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata from "@dashboard/components/Metadata/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import SeoForm from "@dashboard/components/SeoForm";
@@ -325,173 +323,169 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
         );
 
         return (
-          <>
-            <DetailedContent>
-              <TopNav href={productListUrl()} title={header}>
-                <CardMenu
-                  menuItems={[
-                    ...extensionMenuItems,
-                    {
-                      label: intl.formatMessage(messages.openGraphiQL),
-                      onSelect: openPlaygroundURL,
-                      testId: "graphiql-redirect",
-                    },
-                  ]}
-                  data-test-id="menu"
-                />
-              </TopNav>
-
-              <Content>
-                <ProductDetailsForm
-                  data={data}
-                  disabled={disabled}
-                  errors={productErrors}
-                  onChange={change}
-                />
-                <CardSpacer />
-                <ProductMedia
-                  media={media}
-                  placeholderImage={placeholderImage}
-                  onImageDelete={onImageDelete}
-                  onImageReorder={onImageReorder}
-                  onImageUpload={onImageUpload}
-                  openMediaUrlModal={() => setMediaUrlModalStatus(true)}
-                  getImageEditUrl={imageId =>
-                    productImageUrl(productId, imageId)
-                  }
-                />
-                <CardSpacer />
-                {data.attributes.length > 0 && (
-                  <Attributes
-                    attributes={data.attributes}
-                    attributeValues={attributeValues}
-                    errors={productErrors}
-                    loading={disabled}
-                    disabled={disabled}
-                    onChange={handlers.selectAttribute}
-                    onMultiChange={handlers.selectAttributeMultiple}
-                    onFileChange={handlers.selectAttributeFile}
-                    onReferencesRemove={handlers.selectAttributeReference}
-                    onReferencesAddClick={onAssignReferencesClick}
-                    onReferencesReorder={handlers.reorderAttributeValue}
-                    fetchAttributeValues={fetchAttributeValues}
-                    fetchMoreAttributeValues={fetchMoreAttributeValues}
-                    onAttributeSelectBlur={onAttributeSelectBlur}
-                    richTextGetters={attributeRichTextGetters}
-                  />
-                )}
-                <CardSpacer />
-                <ProductVariants
-                  productName={product?.name}
-                  errors={variantListErrors}
-                  channels={listings}
-                  limits={limits}
-                  variants={variants}
-                  variantAttributes={product?.productType.variantAttributes}
-                  warehouses={warehouses}
-                  onAttributeValuesSearch={onAttributeValuesSearch}
-                  onChange={handlers.changeVariants}
-                  onRowClick={onVariantShow}
-                />
-                <CardSpacer />
-                <SeoForm
-                  errors={productErrors}
-                  title={data.seoTitle}
-                  titlePlaceholder={data.name}
-                  description={data.seoDescription}
-                  descriptionPlaceholder={""} // TODO: cast description to string
-                  slug={data.slug}
-                  slugPlaceholder={data.name}
-                  loading={disabled}
-                  onClick={onSeoClick}
-                  onChange={change}
-                  helperText={intl.formatMessage({
-                    id: "LKoIB1",
-                    defaultMessage:
-                      "Add search engine title and description to make this product easier to find",
-                  })}
-                />
-                <CardSpacer />
-                <Metadata data={data} onChange={handlers.changeMetadata} />
-              </Content>
-              <RightSidebar>
-                <ProductOrganization
-                  canChangeType={false}
-                  categories={categories}
-                  categoryInputDisplayValue={selectedCategory}
-                  collections={collections}
-                  collectionsInputDisplayValue={selectedCollections}
-                  data={data}
-                  disabled={disabled}
-                  errors={productOrganizationErrors}
-                  fetchCategories={fetchCategories}
-                  fetchCollections={fetchCollections}
-                  fetchMoreCategories={fetchMoreCategories}
-                  fetchMoreCollections={fetchMoreCollections}
-                  productType={product?.productType}
-                  onCategoryChange={handlers.selectCategory}
-                  onCollectionChange={handlers.selectCollection}
-                />
-                <CardSpacer />
-                <ChannelsAvailabilityCard
-                  {...availabilityCommonProps}
-                  channels={listings}
-                />
-                <CardSpacer />
-                <ProductTaxes
-                  value={data.taxClassId}
-                  disabled={disabled}
-                  onChange={handlers.selectTaxClass}
-                  taxClassDisplayName={selectedTaxClass}
-                  taxClasses={taxClasses}
-                  onFetchMore={fetchMoreTaxClasses}
-                />
-              </RightSidebar>
-
-              <Savebar
-                onCancel={() => navigate(productListUrl())}
-                onDelete={onDelete}
-                onSubmit={submit}
-                state={saveButtonBarState}
-                disabled={isSaveDisabled}
+          <DetailPageLayout>
+            <TopNav href={productListUrl()} title={header}>
+              <CardMenu
+                menuItems={[
+                  ...extensionMenuItems,
+                  {
+                    label: intl.formatMessage(messages.openGraphiQL),
+                    onSelect: openPlaygroundURL,
+                    testId: "graphiql-redirect",
+                  },
+                ]}
+                data-test-id="menu"
               />
-              {canOpenAssignReferencesAttributeDialog && entityType && (
-                <AssignAttributeValueDialog
-                  entityType={entityType}
-                  confirmButtonState={"default"}
-                  products={referenceProducts}
-                  pages={referencePages}
-                  hasMore={handlers.fetchMoreReferences?.hasMore}
-                  open={canOpenAssignReferencesAttributeDialog}
-                  onFetch={handlers.fetchReferences}
-                  onFetchMore={handlers.fetchMoreReferences?.onFetchMore}
-                  loading={handlers.fetchMoreReferences?.loading}
-                  onClose={onCloseDialog}
-                  onSubmit={attributeValues =>
-                    handleAssignReferenceAttribute(
-                      attributeValues,
-                      data,
-                      handlers,
-                    )
-                  }
+            </TopNav>
+
+            <DetailPageLayout.Content>
+              <ProductDetailsForm
+                data={data}
+                disabled={disabled}
+                errors={productErrors}
+                onChange={change}
+              />
+              <CardSpacer />
+              <ProductMedia
+                media={media}
+                placeholderImage={placeholderImage}
+                onImageDelete={onImageDelete}
+                onImageReorder={onImageReorder}
+                onImageUpload={onImageUpload}
+                openMediaUrlModal={() => setMediaUrlModalStatus(true)}
+                getImageEditUrl={imageId => productImageUrl(productId, imageId)}
+              />
+              <CardSpacer />
+              {data.attributes.length > 0 && (
+                <Attributes
+                  attributes={data.attributes}
+                  attributeValues={attributeValues}
+                  errors={productErrors}
+                  loading={disabled}
+                  disabled={disabled}
+                  onChange={handlers.selectAttribute}
+                  onMultiChange={handlers.selectAttributeMultiple}
+                  onFileChange={handlers.selectAttributeFile}
+                  onReferencesRemove={handlers.selectAttributeReference}
+                  onReferencesAddClick={onAssignReferencesClick}
+                  onReferencesReorder={handlers.reorderAttributeValue}
+                  fetchAttributeValues={fetchAttributeValues}
+                  fetchMoreAttributeValues={fetchMoreAttributeValues}
+                  onAttributeSelectBlur={onAttributeSelectBlur}
+                  richTextGetters={attributeRichTextGetters}
                 />
               )}
-
-              <ProductExternalMediaDialog
-                product={product}
-                onClose={() => setMediaUrlModalStatus(false)}
-                open={mediaUrlModalStatus}
-                onSubmit={onMediaUrlUpload}
+              <CardSpacer />
+              <ProductVariants
+                productName={product?.name}
+                errors={variantListErrors}
+                channels={listings}
+                limits={limits}
+                variants={variants}
+                variantAttributes={product?.productType.variantAttributes}
+                warehouses={warehouses}
+                onAttributeValuesSearch={onAttributeValuesSearch}
+                onChange={handlers.changeVariants}
+                onRowClick={onVariantShow}
               />
-              <ProductChannelsListingsDialog
-                channels={channels}
+              <CardSpacer />
+              <SeoForm
+                errors={productErrors}
+                title={data.seoTitle}
+                titlePlaceholder={data.name}
+                description={data.seoDescription}
+                descriptionPlaceholder={""} // TODO: cast description to string
+                slug={data.slug}
+                slugPlaceholder={data.name}
+                loading={disabled}
+                onClick={onSeoClick}
+                onChange={change}
+                helperText={intl.formatMessage({
+                  id: "LKoIB1",
+                  defaultMessage:
+                    "Add search engine title and description to make this product easier to find",
+                })}
+              />
+              <CardSpacer />
+              <Metadata data={data} onChange={handlers.changeMetadata} />
+            </DetailPageLayout.Content>
+            <DetailPageLayout.RightSidebar>
+              <ProductOrganization
+                canChangeType={false}
+                categories={categories}
+                categoryInputDisplayValue={selectedCategory}
+                collections={collections}
+                collectionsInputDisplayValue={selectedCollections}
                 data={data}
-                onClose={() => setChannelPickerOpen(false)}
-                open={channelPickerOpen}
-                onConfirm={handlers.updateChannelList}
+                disabled={disabled}
+                errors={productOrganizationErrors}
+                fetchCategories={fetchCategories}
+                fetchCollections={fetchCollections}
+                fetchMoreCategories={fetchMoreCategories}
+                fetchMoreCollections={fetchMoreCollections}
+                productType={product?.productType}
+                onCategoryChange={handlers.selectCategory}
+                onCollectionChange={handlers.selectCollection}
               />
-            </DetailedContent>
-          </>
+              <CardSpacer />
+              <ChannelsAvailabilityCard
+                {...availabilityCommonProps}
+                channels={listings}
+              />
+              <CardSpacer />
+              <ProductTaxes
+                value={data.taxClassId}
+                disabled={disabled}
+                onChange={handlers.selectTaxClass}
+                taxClassDisplayName={selectedTaxClass}
+                taxClasses={taxClasses}
+                onFetchMore={fetchMoreTaxClasses}
+              />
+            </DetailPageLayout.RightSidebar>
+
+            <Savebar
+              onCancel={() => navigate(productListUrl())}
+              onDelete={onDelete}
+              onSubmit={submit}
+              state={saveButtonBarState}
+              disabled={isSaveDisabled}
+            />
+            {canOpenAssignReferencesAttributeDialog && entityType && (
+              <AssignAttributeValueDialog
+                entityType={entityType}
+                confirmButtonState={"default"}
+                products={referenceProducts}
+                pages={referencePages}
+                hasMore={handlers.fetchMoreReferences?.hasMore}
+                open={canOpenAssignReferencesAttributeDialog}
+                onFetch={handlers.fetchReferences}
+                onFetchMore={handlers.fetchMoreReferences?.onFetchMore}
+                loading={handlers.fetchMoreReferences?.loading}
+                onClose={onCloseDialog}
+                onSubmit={attributeValues =>
+                  handleAssignReferenceAttribute(
+                    attributeValues,
+                    data,
+                    handlers,
+                  )
+                }
+              />
+            )}
+
+            <ProductExternalMediaDialog
+              product={product}
+              onClose={() => setMediaUrlModalStatus(false)}
+              open={mediaUrlModalStatus}
+              onSubmit={onMediaUrlUpload}
+            />
+            <ProductChannelsListingsDialog
+              channels={channels}
+              data={data}
+              onClose={() => setChannelPickerOpen(false)}
+              open={channelPickerOpen}
+              onConfirm={handlers.updateChannelList}
+            />
+          </DetailPageLayout>
         );
       }}
     </ProductUpdateForm>
diff --git a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
index 48ae94478..418a7057b 100644
--- a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
+++ b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
@@ -2,8 +2,6 @@ import {
   getReferenceAttributeEntityTypeFromAttribute,
   mergeAttributeValues,
 } from "@dashboard/attributes/utils/data";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
 import Attributes, {
@@ -12,6 +10,7 @@ import Attributes, {
 } from "@dashboard/components/Attributes";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import Grid from "@dashboard/components/Grid";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata from "@dashboard/components/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import {
@@ -180,9 +179,9 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
         const errors = [...apiErrors, ...validationErrors];
 
         return (
-          <DetailedContent>
+          <DetailPageLayout>
             <TopNav href={productUrl(productId)} title={header} />
-            <Content>
+            <DetailPageLayout.Content>
               <Grid variant="inverted">
                 <div>
                   <ProductVariantNavigation
@@ -343,8 +342,8 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                   onConfirm={handlers.updateChannels}
                 />
               )}
-            </Content>
-          </DetailedContent>
+            </DetailPageLayout.Content>
+          </DetailPageLayout>
         );
       }}
     </ProductVariantCreateForm>
diff --git a/src/products/components/ProductVariantPage/ProductVariantPage.tsx b/src/products/components/ProductVariantPage/ProductVariantPage.tsx
index c8c0d306c..66f339d49 100644
--- a/src/products/components/ProductVariantPage/ProductVariantPage.tsx
+++ b/src/products/components/ProductVariantPage/ProductVariantPage.tsx
@@ -3,8 +3,6 @@ import {
   mergeAttributeValues,
 } from "@dashboard/attributes/utils/data";
 import { ChannelPriceData } from "@dashboard/channels/utils";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
 import Attributes, {
@@ -13,6 +11,7 @@ import Attributes, {
 } from "@dashboard/components/Attributes";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import Grid from "@dashboard/components/Grid";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { MetadataFormData } from "@dashboard/components/Metadata";
 import Metadata from "@dashboard/components/Metadata/Metadata";
 import Savebar from "@dashboard/components/Savebar";
@@ -195,13 +194,13 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
   };
 
   return (
-    <DetailedContent useSingleColumn>
+    <DetailPageLayout gridTemplateColumns={1}>
       <TopNav href={productUrl(productId)} title={header}>
         {variant?.product?.defaultVariant?.id !== variant?.id && (
           <ProductVariantSetDefault onSetDefaultVariant={onSetDefaultVariant} />
         )}
       </TopNav>
-      <Content>
+      <DetailPageLayout.Content>
         <ProductVariantUpdateForm
           variant={variant}
           onSubmit={onSubmit}
@@ -431,7 +430,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
             );
           }}
         </ProductVariantUpdateForm>
-      </Content>
+      </DetailPageLayout.Content>
       {!!variant?.preorder && (
         <ProductVariantEndPreorderDialog
           confirmButtonState={variantDeactivatePreoderButtonState}
@@ -441,7 +440,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
           variantGlobalSoldUnits={variant?.preorder?.globalSoldUnits}
         />
       )}
-    </DetailedContent>
+    </DetailPageLayout>
   );
 };
 ProductVariantPage.displayName = "ProductVariantPage";
diff --git a/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx b/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx
index c61644ac3..8fde2ae64 100644
--- a/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx
+++ b/src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx
@@ -1,9 +1,8 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import CountryList from "@dashboard/components/CountryList";
 import Form from "@dashboard/components/Form";
-import Grid from "@dashboard/components/Grid";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import { CountryFragment, ShippingErrorFragment } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
@@ -77,67 +76,66 @@ const ShippingZoneCreatePage: React.FC<ShippingZoneCreatePageProps> = ({
       disabled={disabled}
     >
       {({ change, data, isSaveDisabled, submit }) => (
-        <>
+        <DetailPageLayout gridTemplateColumns={1}>
           <TopNav
             href={shippingZonesListUrl()}
             title={intl.formatMessage(messages.createZone)}
           />
-          <Content>
-            <Grid>
-              <div>
-                <ShippingZoneInfo
-                  data={data}
-                  disabled={disabled}
-                  errors={errors}
-                  onChange={change}
-                />
-                <CardSpacer />
-                <CountryList
-                  countries={data.countries.map(selectedCountry =>
-                    countries.find(country => country.code === selectedCountry),
-                  )}
-                  disabled={disabled}
-                  emptyText={intl.formatMessage(messages.noCountriesAssigned)}
-                  onCountryAssign={toggleModal}
-                  onCountryUnassign={countryCode =>
-                    change({
-                      target: {
-                        name: "countries",
-                        value: data.countries.filter(
-                          country => country !== countryCode,
-                        ),
-                      },
-                    } as any)
-                  }
-                  title={intl.formatMessage(messages.countries)}
-                />
-              </div>
-            </Grid>
-            <Savebar
-              disabled={isSaveDisabled}
-              onCancel={() => navigate(shippingZonesListUrl())}
-              onSubmit={submit}
-              state={saveButtonBarState}
+          <DetailPageLayout.Content>
+            <div>
+              <ShippingZoneInfo
+                data={data}
+                disabled={disabled}
+                errors={errors}
+                onChange={change}
+              />
+              <CardSpacer />
+              <CountryList
+                countries={data.countries.map(selectedCountry =>
+                  countries.find(country => country.code === selectedCountry),
+                )}
+                disabled={disabled}
+                emptyText={intl.formatMessage(messages.noCountriesAssigned)}
+                onCountryAssign={toggleModal}
+                onCountryUnassign={countryCode =>
+                  change({
+                    target: {
+                      name: "countries",
+                      value: data.countries.filter(
+                        country => country !== countryCode,
+                      ),
+                    },
+                  } as any)
+                }
+                title={intl.formatMessage(messages.countries)}
+              />
+            </div>
+
+            <ShippingZoneCountriesAssignDialog
+              open={isModalOpened}
+              onConfirm={formData => {
+                change({
+                  target: {
+                    name: "countries",
+                    value: formData.countries,
+                  },
+                } as any);
+                toggleModal();
+              }}
+              confirmButtonState="default"
+              countries={countries}
+              restWorldCountries={restWorldCountries}
+              initial={data.countries}
+              onClose={toggleModal}
             />
-          </Content>
-          <ShippingZoneCountriesAssignDialog
-            open={isModalOpened}
-            onConfirm={formData => {
-              change({
-                target: {
-                  name: "countries",
-                  value: formData.countries,
-                },
-              } as any);
-              toggleModal();
-            }}
-            confirmButtonState="default"
-            countries={countries}
-            restWorldCountries={restWorldCountries}
-            initial={data.countries}
-            onClose={toggleModal}
+          </DetailPageLayout.Content>
+          <Savebar
+            disabled={isSaveDisabled}
+            onCancel={() => navigate(shippingZonesListUrl())}
+            onSubmit={submit}
+            state={saveButtonBarState}
           />
-        </>
+        </DetailPageLayout>
       )}
     </Form>
   );
diff --git a/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx b/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx
index 968ba448b..0ec066328 100644
--- a/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx
+++ b/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx
@@ -1,10 +1,8 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import CountryList from "@dashboard/components/CountryList";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata from "@dashboard/components/Metadata/Metadata";
 import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
 import Savebar from "@dashboard/components/Savebar";
@@ -152,9 +150,9 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
         const changeMetadata = makeMetadataChangeHandler(change);
 
         return (
-          <DetailedContent>
+          <DetailPageLayout>
             <TopNav href={shippingZonesListUrl()} title={shippingZone?.name} />
-            <Content>
+            <DetailPageLayout.Content>
               <ShippingZoneInfo
                 data={data}
                 disabled={disabled}
@@ -201,8 +199,8 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
               />
               <CardSpacer />
               <Metadata data={data} onChange={changeMetadata} />
-            </Content>
-            <RightSidebar>
+            </DetailPageLayout.Content>
+            <DetailPageLayout.RightSidebar>
               <ShippingZoneSettingsCard
                 formData={data}
                 warehousesDisplayValues={warehouseDisplayValues}
@@ -217,7 +215,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
                 channelsDisplayValues={channelsDisplayValues}
                 onChannelChange={handleChannelChange}
               />
-            </RightSidebar>
+            </DetailPageLayout.RightSidebar>
             <Savebar
               disabled={isSaveDisabled}
               onCancel={() => navigate(shippingZonesListUrl())}
@@ -225,7 +223,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
               onSubmit={submit}
               state={saveButtonBarState}
             />
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx b/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx
index 21329e3d1..dad4ca37e 100644
--- a/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx
+++ b/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx
@@ -1,11 +1,9 @@
 import { ChannelShippingData } from "@dashboard/channels/utils";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
 import { WithFormId } from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import {
   PermissionEnum,
@@ -60,7 +58,9 @@ export interface ShippingZoneRatesCreatePageProps extends WithFormId {
   fetchMoreTaxClasses: FetchMoreProps;
 }
 
-export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePageProps> = ({
+export const ShippingZoneRatesCreatePage: React.FC<
+  ShippingZoneRatesCreatePageProps
+> = ({
   allChannelsCount,
   shippingChannels,
   channelErrors,
@@ -148,7 +148,7 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
   return (
     <RichTextContext.Provider value={richText}>
       <form onSubmit={handleFormElementSubmit}>
-        <DetailedContent>
+        <DetailPageLayout>
           <TopNav
             href={backUrl}
             title={
@@ -165,7 +165,7 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
                   })
             }
           />
-          <Content>
+          <DetailPageLayout.Content>
             <ShippingRateInfo
               data={data}
               disabled={disabled}
@@ -207,8 +207,8 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
               onPostalCodeRangeAdd={onPostalCodeAssign}
               postalCodes={postalCodes}
             />
-          </Content>
-          <RightSidebar>
+          </DetailPageLayout.Content>
+          <DetailPageLayout.RightSidebar>
             <ChannelsAvailabilityCard
               managePermissions={[PermissionEnum.MANAGE_SHIPPING]}
               allChannelsCount={allChannelsCount}
@@ -231,7 +231,7 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
               }
               onFetchMore={fetchMoreTaxClasses}
             />
-          </RightSidebar>
+          </DetailPageLayout.RightSidebar>
           <Savebar
             disabled={isSaveDisabled}
             onCancel={() => navigate(backUrl)}
@@ -239,7 +239,7 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
             onSubmit={handleSubmit}
             state={saveButtonBarState}
           />
-        </DetailedContent>
+        </DetailPageLayout>
       </form>
     </RichTextContext.Provider>
   );
diff --git a/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx b/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx
index 8de10b9ce..7f6a90446 100644
--- a/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx
+++ b/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx
@@ -1,11 +1,9 @@
 import { ChannelShippingData } from "@dashboard/channels/utils";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
 import { WithFormId } from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata from "@dashboard/components/Metadata/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import {
@@ -102,25 +100,23 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
 
   const isPriceVariant = variant === ShippingMethodTypeEnum.PRICE;
 
-  const initialForm: Omit<
-    ShippingZoneRateUpdateFormData,
-    "description"
-  > = React.useMemo(
-    () => ({
-      channelListings: shippingChannels,
-      maxDays: rate?.maximumDeliveryDays?.toString() || "",
-      maxValue: rate?.maximumOrderWeight?.value.toString() || "",
-      metadata: rate?.metadata.map(mapMetadataItemToInput),
-      minDays: rate?.minimumDeliveryDays?.toString() || "",
-      minValue: rate?.minimumOrderWeight?.value.toString() || "",
-      name: rate?.name || "",
-      orderValueRestricted: !!rate?.channelListings.length,
-      privateMetadata: rate?.privateMetadata.map(mapMetadataItemToInput),
-      type: rate?.type || null,
-      taxClassId: rate?.taxClass?.id || "",
-    }),
-    [shippingChannels, rate],
-  );
+  const initialForm: Omit<ShippingZoneRateUpdateFormData, "description"> =
+    React.useMemo(
+      () => ({
+        channelListings: shippingChannels,
+        maxDays: rate?.maximumDeliveryDays?.toString() || "",
+        maxValue: rate?.maximumOrderWeight?.value.toString() || "",
+        metadata: rate?.metadata.map(mapMetadataItemToInput),
+        minDays: rate?.minimumDeliveryDays?.toString() || "",
+        minValue: rate?.minimumOrderWeight?.value.toString() || "",
+        name: rate?.name || "",
+        orderValueRestricted: !!rate?.channelListings.length,
+        privateMetadata: rate?.privateMetadata.map(mapMetadataItemToInput),
+        type: rate?.type || null,
+        taxClassId: rate?.taxClass?.id || "",
+      }),
+      [shippingChannels, rate],
+    );
 
   const {
     change,
@@ -144,9 +140,8 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
     triggerChange,
   });
 
-  const {
-    makeChangeHandler: makeMetadataChangeHandler,
-  } = useMetadataChangeTrigger();
+  const { makeChangeHandler: makeMetadataChangeHandler } =
+    useMetadataChangeTrigger();
 
   const data: ShippingZoneRateUpdateFormData = {
     ...formData,
@@ -182,9 +177,9 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
   return (
     <RichTextContext.Provider value={richText}>
       <form onSubmit={handleFormElementSubmit}>
-        <DetailedContent>
+        <DetailPageLayout>
           <TopNav href={backHref} title={rate?.name} />
-          <Content>
+          <DetailPageLayout.Content>
             <ShippingRateInfo
               data={data}
               disabled={disabled}
@@ -236,8 +231,8 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
             />
             <CardSpacer />
             <Metadata data={data} onChange={changeMetadata} />
-          </Content>
-          <RightSidebar>
+          </DetailPageLayout.Content>
+          <DetailPageLayout.RightSidebar>
             <ChannelsAvailabilityCard
               managePermissions={[PermissionEnum.MANAGE_SHIPPING]}
               allChannelsCount={allChannelsCount}
@@ -263,7 +258,7 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
               }
               onFetchMore={fetchMoreTaxClasses}
             />
-          </RightSidebar>
+          </DetailPageLayout.RightSidebar>
           <Savebar
             disabled={isSaveDisabled}
             onCancel={() => navigate(backHref)}
@@ -271,7 +266,7 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
             onSubmit={handleSubmit}
             state={saveButtonBarState}
           />
-        </DetailedContent>
+        </DetailPageLayout>
       </form>
     </RichTextContext.Provider>
   );
diff --git a/src/shipping/components/ShippingZonesListPage/ShippingZonesListPage.tsx b/src/shipping/components/ShippingZonesListPage/ShippingZonesListPage.tsx
index 1e7e80c8a..f61a6aeb3 100644
--- a/src/shipping/components/ShippingZonesListPage/ShippingZonesListPage.tsx
+++ b/src/shipping/components/ShippingZonesListPage/ShippingZonesListPage.tsx
@@ -1,7 +1,5 @@
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import RequirePermissions from "@dashboard/components/RequirePermissions";
 import { configurationMenuUrl } from "@dashboard/configuration";
 import {
@@ -40,7 +38,7 @@ const ShippingZonesListPage: React.FC<ShippingZonesListPageProps> = ({
   const intl = useIntl();
 
   return (
-    <DetailedContent>
+    <DetailPageLayout withSavebar={false}>
       <TopNav
         href={configurationMenuUrl}
         title={intl.formatMessage({
@@ -49,10 +47,10 @@ const ShippingZonesListPage: React.FC<ShippingZonesListPageProps> = ({
           description: "header",
         })}
       />
-      <Content noSavebar>
+      <DetailPageLayout.Content>
         <ShippingZonesList disabled={disabled} {...listProps} />
-      </Content>
-      <RightSidebar noSavebar>
+      </DetailPageLayout.Content>
+      <DetailPageLayout.RightSidebar>
         <RequirePermissions
           requiredPermissions={[PermissionEnum.MANAGE_SETTINGS]}
         >
@@ -62,8 +60,8 @@ const ShippingZonesListPage: React.FC<ShippingZonesListPageProps> = ({
             onSubmit={onSubmit}
           />
         </RequirePermissions>
-      </RightSidebar>
-    </DetailedContent>
+      </DetailPageLayout.RightSidebar>
+    </DetailPageLayout>
   );
 };
 ShippingZonesListPage.displayName = "ShippingZonesListPage";
diff --git a/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx b/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx
index ee2f8958d..34daa981a 100644
--- a/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx
+++ b/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx
@@ -1,11 +1,10 @@
 import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CompanyAddressInput from "@dashboard/components/CompanyAddressInput";
 import Form from "@dashboard/components/Form";
 import Grid from "@dashboard/components/Grid";
 import Hr from "@dashboard/components/Hr";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import PageSectionHeader from "@dashboard/components/PageSectionHeader";
 import Savebar from "@dashboard/components/Savebar";
 import { configurationMenuUrl } from "@dashboard/configuration";
@@ -139,12 +138,12 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
         const handleCountrySelect = createCountryHandler(countrySelect, set);
 
         return (
-          <DetailedContent useSingleColumn>
+          <DetailPageLayout gridTemplateColumns={1}>
             <TopNav
               href={configurationMenuUrl}
               title={intl.formatMessage(commonMessages.generalInformations)}
             />
-            <Content>
+            <DetailPageLayout.Content>
               <Grid
                 variant="inverted"
                 className={sprinkles({ paddingLeft: 9 })}
@@ -189,8 +188,8 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
                 onCancel={() => navigate(configurationMenuUrl)}
                 onSubmit={submit}
               />
-            </Content>
-          </DetailedContent>
+            </DetailPageLayout.Content>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx b/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx
index ba92ddd66..9770fc220 100644
--- a/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx
+++ b/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx
@@ -1,11 +1,9 @@
 import AccountPermissionGroups from "@dashboard/components/AccountPermissionGroups";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import CardTitle from "@dashboard/components/CardTitle";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
 import Savebar from "@dashboard/components/Savebar";
 import {
@@ -36,7 +34,6 @@ import StaffPassword from "../StaffPassword/StaffPassword";
 import StaffPreferences from "../StaffPreferences";
 import StaffProperties from "../StaffProperties/StaffProperties";
 import { staffDetailsPageMessages as messages } from "./messages";
-import useStyles from "./styles";
 
 export interface StaffDetailsFormData {
   email: string;
@@ -84,7 +81,6 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
   staffMember,
 }: StaffDetailsPageProps) => {
   const intl = useIntl();
-  const classes = useStyles();
   const navigate = useNavigator();
 
   const { locale, setLocale } = useLocale();
@@ -128,9 +124,9 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
         );
 
         return (
-          <DetailedContent>
+          <DetailPageLayout>
             <TopNav href={staffListUrl()} title={getUserName(staffMember)} />
-            <Content>
+            <DetailPageLayout.Content>
               <StaffProperties
                 errors={errors}
                 data={formData}
@@ -147,9 +143,9 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
                   <StaffPassword onChangePassword={onChangePassword} />
                 </>
               )}
-            </Content>
+            </DetailPageLayout.Content>
 
-            <RightSidebar className={classes.noOverflow}>
+            <DetailPageLayout.RightSidebar>
               {canEditPreferences && (
                 <StaffPreferences locale={locale} onLocaleChange={setLocale} />
               )}
@@ -194,7 +190,7 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
                   </Card>
                 </>
               )}
-            </RightSidebar>
+            </DetailPageLayout.RightSidebar>
             <Savebar
               disabled={isSaveDisabled}
               state={saveButtonBarState}
@@ -202,7 +198,7 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
               onSubmit={submit}
               onDelete={canRemove ? onDelete : undefined}
             />
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/staff/components/StaffListPage/StaffListPage.tsx b/src/staff/components/StaffListPage/StaffListPage.tsx
index 1f555f9d4..6dca40fcc 100644
--- a/src/staff/components/StaffListPage/StaffListPage.tsx
+++ b/src/staff/components/StaffListPage/StaffListPage.tsx
@@ -2,6 +2,7 @@ import { LimitsInfo } from "@dashboard/components/AppLayout/LimitsInfo";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Button } from "@dashboard/components/Button";
 import FilterBar from "@dashboard/components/FilterBar";
+import { ListPageLayout } from "@dashboard/components/Layouts";
 import LimitReachedAlert from "@dashboard/components/LimitReachedAlert";
 import { configurationMenuUrl } from "@dashboard/configuration";
 import { RefreshLimitsQuery, StaffListQuery } from "@dashboard/graphql";
@@ -57,7 +58,7 @@ const StaffListPage: React.FC<StaffListPageProps> = ({
   const reachedLimit = isLimitReached(limits, "staffUsers");
 
   return (
-    <>
+    <ListPageLayout>
       <TopNav
         href={configurationMenuUrl}
         title={intl.formatMessage(sectionNames.staff)}
@@ -128,7 +129,7 @@ const StaffListPage: React.FC<StaffListPageProps> = ({
         />
         <StaffList {...listProps} />
       </Card>
-    </>
+    </ListPageLayout>
   );
 };
 StaffListPage.displayName = "StaffListPage";
diff --git a/src/taxes/pages/TaxChannelsPage/TaxChannelsPage.tsx b/src/taxes/pages/TaxChannelsPage/TaxChannelsPage.tsx
index 683c96c7c..071a15e0e 100644
--- a/src/taxes/pages/TaxChannelsPage/TaxChannelsPage.tsx
+++ b/src/taxes/pages/TaxChannelsPage/TaxChannelsPage.tsx
@@ -1,10 +1,9 @@
 import VerticalSpacer from "@dashboard/apps/components/VerticalSpacer";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardTitle from "@dashboard/components/CardTitle";
 import Form from "@dashboard/components/Form";
 import Grid from "@dashboard/components/Grid";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import Skeleton from "@dashboard/components/Skeleton";
 import { configurationMenuUrl } from "@dashboard/configuration";
@@ -161,9 +160,9 @@ export const TaxChannelsPage: React.FC<TaxChannelsPageProps> = props => {
         };
 
         return (
-          <DetailedContent>
+          <DetailPageLayout gridTemplateColumns={1}>
             <TopNav title={<TaxPageTitle />} />
-            <Content>
+            <DetailPageLayout.Content>
               <Box padding={9}>
                 <PageTabs value="channels" onChange={handleTabChange}>
                   <PageTab
@@ -298,14 +297,14 @@ export const TaxChannelsPage: React.FC<TaxChannelsPageProps> = props => {
                   />
                 )}
               </Box>
-            </Content>
+            </DetailPageLayout.Content>
             <Savebar
               state={savebarState}
               disabled={disabled}
               onSubmit={submit}
               onCancel={() => navigate(configurationMenuUrl)}
             />
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/taxes/pages/TaxClassesPage/TaxClassesPage.tsx b/src/taxes/pages/TaxClassesPage/TaxClassesPage.tsx
index 0005d4b79..76b0efe5e 100644
--- a/src/taxes/pages/TaxClassesPage/TaxClassesPage.tsx
+++ b/src/taxes/pages/TaxClassesPage/TaxClassesPage.tsx
@@ -1,9 +1,8 @@
 import VerticalSpacer from "@dashboard/apps/components/VerticalSpacer";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardTitle from "@dashboard/components/CardTitle";
 import Grid from "@dashboard/components/Grid";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata from "@dashboard/components/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import Skeleton from "@dashboard/components/Skeleton";
@@ -120,9 +119,9 @@ export const TaxClassesPage: React.FC<TaxClassesPageProps> = props => {
         const formErrors = getFormErrors(["name"], validationErrors);
 
         return (
-          <DetailedContent>
+          <DetailPageLayout gridTemplateColumns={1}>
             <TopNav title={<TaxPageTitle />} />
-            <Content>
+            <DetailPageLayout.Content>
               <Box padding={9}>
                 <PageTabs value="tax-classes" onChange={handleTabChange}>
                   <PageTab
@@ -297,8 +296,8 @@ export const TaxClassesPage: React.FC<TaxClassesPageProps> = props => {
                 onSubmit={submit}
                 onCancel={() => navigate(configurationMenuUrl)}
               />
-            </Content>
-          </DetailedContent>
+            </DetailPageLayout.Content>
+          </DetailPageLayout>
         );
       }}
     </TaxClassesForm>
diff --git a/src/taxes/pages/TaxCountriesPage/TaxCountriesPage.tsx b/src/taxes/pages/TaxCountriesPage/TaxCountriesPage.tsx
index 79c98ea96..5ff4479de 100644
--- a/src/taxes/pages/TaxCountriesPage/TaxCountriesPage.tsx
+++ b/src/taxes/pages/TaxCountriesPage/TaxCountriesPage.tsx
@@ -1,9 +1,8 @@
 import VerticalSpacer from "@dashboard/apps/components/VerticalSpacer";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardTitle from "@dashboard/components/CardTitle";
 import Grid from "@dashboard/components/Grid";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import Skeleton from "@dashboard/components/Skeleton";
 import { configurationMenuUrl } from "@dashboard/configuration";
@@ -92,9 +91,9 @@ export const TaxCountriesPage: React.FC<TaxCountriesPageProps> = props => {
         );
 
         return (
-          <DetailedContent>
+          <DetailPageLayout gridTemplateColumns={1}>
             <TopNav title={<TaxPageTitle />} />
-            <Content>
+            <DetailPageLayout.Content>
               <Box padding={9}>
                 <PageTabs value="countries" onChange={handleTabChange}>
                   <PageTab
@@ -213,8 +212,8 @@ export const TaxCountriesPage: React.FC<TaxCountriesPageProps> = props => {
                 onSubmit={submit}
                 onCancel={() => navigate(configurationMenuUrl)}
               />
-            </Content>
-          </DetailedContent>
+            </DetailPageLayout.Content>
+          </DetailPageLayout>
         );
       }}
     </TaxCountriesForm>
diff --git a/src/translations/components/TranslationsAttributesPage/TranslationsAttributesPage.tsx b/src/translations/components/TranslationsAttributesPage/TranslationsAttributesPage.tsx
index 0b252526f..a6fdca7cb 100644
--- a/src/translations/components/TranslationsAttributesPage/TranslationsAttributesPage.tsx
+++ b/src/translations/components/TranslationsAttributesPage/TranslationsAttributesPage.tsx
@@ -1,7 +1,7 @@
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import LanguageSwitch from "@dashboard/components/LanguageSwitch";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { ListSettingsUpdate } from "@dashboard/components/TablePagination";
 import {
   AttributeTranslationDetailsFragment,
@@ -55,7 +55,7 @@ const TranslationsAttributesPage: React.FC<TranslationsAttributesPageProps> = ({
   const withChoices = data?.attribute?.withChoices;
 
   return (
-    <DetailedContent useSingleColumn>
+    <DetailPageLayout gridTemplateColumns={1}>
       <TopNav
         href={languageEntitiesUrl(languageCode, {
           tab: TranslatableEntities.attributes,
@@ -127,7 +127,7 @@ const TranslationsAttributesPage: React.FC<TranslationsAttributesPageProps> = ({
           onSubmit={onSubmit}
         />
       )}
-    </DetailedContent>
+    </DetailPageLayout>
   );
 };
 TranslationsAttributesPage.displayName = "TranslationsAttributesPage";
diff --git a/src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx b/src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx
index 5142af5cf..a1a9f2d98 100644
--- a/src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx
+++ b/src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx
@@ -1,7 +1,7 @@
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import LanguageSwitch from "@dashboard/components/LanguageSwitch";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import {
   CategoryTranslationFragment,
   LanguageCodeEnum,
@@ -42,7 +42,7 @@ const TranslationsCategoriesPage: React.FC<TranslationsCategoriesPageProps> = ({
   const intl = useIntl();
 
   return (
-    <DetailedContent useSingleColumn>
+    <DetailPageLayout gridTemplateColumns={1}>
       <TopNav
         href={languageEntitiesUrl(languageCode, {
           tab: TranslatableEntities.categories,
@@ -138,7 +138,7 @@ const TranslationsCategoriesPage: React.FC<TranslationsCategoriesPageProps> = ({
         onDiscard={onDiscard}
         onSubmit={onSubmit}
       />
-    </DetailedContent>
+    </DetailPageLayout>
   );
 };
 TranslationsCategoriesPage.displayName = "TranslationsCategoriesPage";
diff --git a/src/translations/components/TranslationsCollectionsPage/TranslationsCollectionsPage.tsx b/src/translations/components/TranslationsCollectionsPage/TranslationsCollectionsPage.tsx
index 301adc926..e0ba805b6 100644
--- a/src/translations/components/TranslationsCollectionsPage/TranslationsCollectionsPage.tsx
+++ b/src/translations/components/TranslationsCollectionsPage/TranslationsCollectionsPage.tsx
@@ -1,7 +1,7 @@
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import LanguageSwitch from "@dashboard/components/LanguageSwitch";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import {
   CollectionTranslationFragment,
   LanguageCodeEnum,
@@ -44,7 +44,7 @@ const TranslationsCollectionsPage: React.FC<
   const intl = useIntl();
 
   return (
-    <DetailedContent useSingleColumn>
+    <DetailPageLayout gridTemplateColumns={1}>
       <TopNav
         href={languageEntitiesUrl(languageCode, {
           tab: TranslatableEntities.collections,
@@ -141,7 +141,7 @@ const TranslationsCollectionsPage: React.FC<
         onDiscard={onDiscard}
         onSubmit={onSubmit}
       />
-    </DetailedContent>
+    </DetailPageLayout>
   );
 };
 TranslationsCollectionsPage.displayName = "TranslationsCollectionsPage";
diff --git a/src/translations/components/TranslationsMenuItemPage/TranslationsMenuItemPage.tsx b/src/translations/components/TranslationsMenuItemPage/TranslationsMenuItemPage.tsx
index d2dcbc2fe..7c456954d 100644
--- a/src/translations/components/TranslationsMenuItemPage/TranslationsMenuItemPage.tsx
+++ b/src/translations/components/TranslationsMenuItemPage/TranslationsMenuItemPage.tsx
@@ -1,6 +1,6 @@
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import LanguageSwitch from "@dashboard/components/LanguageSwitch";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import {
   LanguageCodeEnum,
   MenuItemTranslationFragment,
@@ -41,7 +41,7 @@ const TranslationsMenuItemPage: React.FC<TranslationsMenuItemPageProps> = ({
   const intl = useIntl();
 
   return (
-    <DetailedContent useSingleColumn>
+    <DetailPageLayout gridTemplateColumns={1}>
       <TopNav
         href={languageEntitiesUrl(languageCode, {
           tab: TranslatableEntities.menuItems,
@@ -95,7 +95,7 @@ const TranslationsMenuItemPage: React.FC<TranslationsMenuItemPageProps> = ({
         onDiscard={onDiscard}
         onSubmit={onSubmit}
       />
-    </DetailedContent>
+    </DetailPageLayout>
   );
 };
 TranslationsMenuItemPage.displayName = "TranslationsMenuItemPage";
diff --git a/src/translations/components/TranslationsPagesPage/TranslationsPagesPage.tsx b/src/translations/components/TranslationsPagesPage/TranslationsPagesPage.tsx
index f35da3112..70b36230a 100644
--- a/src/translations/components/TranslationsPagesPage/TranslationsPagesPage.tsx
+++ b/src/translations/components/TranslationsPagesPage/TranslationsPagesPage.tsx
@@ -1,7 +1,7 @@
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import LanguageSwitch from "@dashboard/components/LanguageSwitch";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { LanguageCodeEnum, PageTranslationFragment } from "@dashboard/graphql";
 import { commonMessages } from "@dashboard/intl";
 import { getStringOrPlaceholder } from "@dashboard/misc";
@@ -42,7 +42,7 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
   const intl = useIntl();
 
   return (
-    <DetailedContent useSingleColumn>
+    <DetailPageLayout gridTemplateColumns={1}>
       <TopNav
         href={languageEntitiesUrl(languageCode, {
           tab: TranslatableEntities.pages,
@@ -160,7 +160,7 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
           <CardSpacer />
         </>
       )}
-    </DetailedContent>
+    </DetailPageLayout>
   );
 };
 TranslationsPagesPage.displayName = "TranslationsPagesPage";
diff --git a/src/translations/components/TranslationsProductsPage/TranslationsProductsPage.tsx b/src/translations/components/TranslationsProductsPage/TranslationsProductsPage.tsx
index 9424e521c..4f8399219 100644
--- a/src/translations/components/TranslationsProductsPage/TranslationsProductsPage.tsx
+++ b/src/translations/components/TranslationsProductsPage/TranslationsProductsPage.tsx
@@ -1,7 +1,7 @@
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import LanguageSwitch from "@dashboard/components/LanguageSwitch";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import {
   LanguageCodeEnum,
   ProductTranslationFragment,
@@ -48,7 +48,7 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
   const intl = useIntl();
 
   return (
-    <DetailedContent useSingleColumn>
+    <DetailPageLayout gridTemplateColumns={1}>
       <TopNav
         href={languageEntitiesUrl(languageCode, {
           tab: TranslatableEntities.products,
@@ -83,98 +83,100 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
           }
         />
       </TopNav>
-      <TranslationFields
-        activeField={activeField}
-        disabled={disabled}
-        initialState={true}
-        title={intl.formatMessage(commonMessages.generalInformations)}
-        fields={[
-          {
-            displayName: intl.formatMessage({
-              id: "ZIc5lM",
-              defaultMessage: "Product Name",
-            }),
-            name: TranslationInputFieldName.name,
-            translation: data?.translation?.name || null,
-            type: "short",
-            value: data?.product?.name,
-          },
-          {
-            displayName: intl.formatMessage({
-              id: "Q8Qw5B",
-              defaultMessage: "Description",
-            }),
-            name: TranslationInputFieldName.description,
-            translation: data?.translation?.description || null,
-            type: "rich",
-            value: data?.product?.description,
-          },
-        ]}
-        saveButtonState={saveButtonState}
-        richTextResetKey={languageCode}
-        onEdit={onEdit}
-        onDiscard={onDiscard}
-        onSubmit={onSubmit}
-      />
-      <CardSpacer />
-      <TranslationFields
-        activeField={activeField}
-        disabled={disabled}
-        initialState={true}
-        title={intl.formatMessage({
-          id: "TGX4T1",
-          defaultMessage: "Search Engine Preview",
-        })}
-        fields={[
-          {
-            displayName: intl.formatMessage({
-              id: "HlEpii",
-              defaultMessage: "Search Engine Title",
-            }),
-            name: TranslationInputFieldName.seoTitle,
-            translation: data?.translation?.seoTitle || null,
-            type: "short",
-            value: data?.product?.seoTitle,
-          },
-          {
-            displayName: intl.formatMessage({
-              id: "US3IPU",
-              defaultMessage: "Search Engine Description",
-            }),
-            name: TranslationInputFieldName.seoDescription,
-            translation: data?.translation?.seoDescription || null,
-            type: "long",
-            value: data?.product?.seoDescription,
-          },
-        ]}
-        saveButtonState={saveButtonState}
-        richTextResetKey={languageCode}
-        onEdit={onEdit}
-        onDiscard={onDiscard}
-        onSubmit={onSubmit}
-      />
-      <CardSpacer />
-      {data?.attributeValues?.length > 0 && (
-        <>
-          <TranslationFields
-            activeField={activeField}
-            disabled={disabled}
-            initialState={true}
-            title={intl.formatMessage(commonMessages.translationAttributes)}
-            fields={mapAttributeValuesToTranslationFields(
-              data.attributeValues,
-              intl,
-            )}
-            saveButtonState={saveButtonState}
-            richTextResetKey={languageCode}
-            onEdit={onEdit}
-            onDiscard={onDiscard}
-            onSubmit={onAttributeValueSubmit}
-          />
-          <CardSpacer />
-        </>
-      )}
-    </DetailedContent>
+      <DetailPageLayout.Content>
+        <TranslationFields
+          activeField={activeField}
+          disabled={disabled}
+          initialState={true}
+          title={intl.formatMessage(commonMessages.generalInformations)}
+          fields={[
+            {
+              displayName: intl.formatMessage({
+                id: "ZIc5lM",
+                defaultMessage: "Product Name",
+              }),
+              name: TranslationInputFieldName.name,
+              translation: data?.translation?.name || null,
+              type: "short",
+              value: data?.product?.name,
+            },
+            {
+              displayName: intl.formatMessage({
+                id: "Q8Qw5B",
+                defaultMessage: "Description",
+              }),
+              name: TranslationInputFieldName.description,
+              translation: data?.translation?.description || null,
+              type: "rich",
+              value: data?.product?.description,
+            },
+          ]}
+          saveButtonState={saveButtonState}
+          richTextResetKey={languageCode}
+          onEdit={onEdit}
+          onDiscard={onDiscard}
+          onSubmit={onSubmit}
+        />
+        <CardSpacer />
+        <TranslationFields
+          activeField={activeField}
+          disabled={disabled}
+          initialState={true}
+          title={intl.formatMessage({
+            id: "TGX4T1",
+            defaultMessage: "Search Engine Preview",
+          })}
+          fields={[
+            {
+              displayName: intl.formatMessage({
+                id: "HlEpii",
+                defaultMessage: "Search Engine Title",
+              }),
+              name: TranslationInputFieldName.seoTitle,
+              translation: data?.translation?.seoTitle || null,
+              type: "short",
+              value: data?.product?.seoTitle,
+            },
+            {
+              displayName: intl.formatMessage({
+                id: "US3IPU",
+                defaultMessage: "Search Engine Description",
+              }),
+              name: TranslationInputFieldName.seoDescription,
+              translation: data?.translation?.seoDescription || null,
+              type: "long",
+              value: data?.product?.seoDescription,
+            },
+          ]}
+          saveButtonState={saveButtonState}
+          richTextResetKey={languageCode}
+          onEdit={onEdit}
+          onDiscard={onDiscard}
+          onSubmit={onSubmit}
+        />
+        <CardSpacer />
+        {data?.attributeValues?.length > 0 && (
+          <>
+            <TranslationFields
+              activeField={activeField}
+              disabled={disabled}
+              initialState={true}
+              title={intl.formatMessage(commonMessages.translationAttributes)}
+              fields={mapAttributeValuesToTranslationFields(
+                data.attributeValues,
+                intl,
+              )}
+              saveButtonState={saveButtonState}
+              richTextResetKey={languageCode}
+              onEdit={onEdit}
+              onDiscard={onDiscard}
+              onSubmit={onAttributeValueSubmit}
+            />
+            <CardSpacer />
+          </>
+        )}
+      </DetailPageLayout.Content>
+    </DetailPageLayout>
   );
 };
 TranslationsProductsPage.displayName = "TranslationsProductsPage";
diff --git a/src/translations/components/TranslationsSalesPage/TranslationsSalesPage.tsx b/src/translations/components/TranslationsSalesPage/TranslationsSalesPage.tsx
index d6fdaadcc..0e6e0ff3f 100644
--- a/src/translations/components/TranslationsSalesPage/TranslationsSalesPage.tsx
+++ b/src/translations/components/TranslationsSalesPage/TranslationsSalesPage.tsx
@@ -1,6 +1,6 @@
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import LanguageSwitch from "@dashboard/components/LanguageSwitch";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { LanguageCodeEnum, SaleTranslationFragment } from "@dashboard/graphql";
 import { commonMessages } from "@dashboard/intl";
 import { getStringOrPlaceholder } from "@dashboard/misc";
@@ -39,7 +39,7 @@ const TranslationsSalesPage: React.FC<TranslationsSalesPageProps> = ({
   const intl = useIntl();
 
   return (
-    <DetailedContent useSingleColumn>
+    <DetailPageLayout gridTemplateColumns={1}>
       <TopNav
         href={languageEntitiesUrl(languageCode, {
           tab: TranslatableEntities.sales,
@@ -64,30 +64,32 @@ const TranslationsSalesPage: React.FC<TranslationsSalesPageProps> = ({
           }
         />
       </TopNav>
-      <TranslationFields
-        activeField={activeField}
-        disabled={disabled}
-        initialState={true}
-        title={intl.formatMessage(commonMessages.generalInformations)}
-        fields={[
-          {
-            displayName: intl.formatMessage({
-              id: "s40PZt",
-              defaultMessage: "Sale Name",
-            }),
-            name: fieldNames.name,
-            translation: data?.translation?.name || null,
-            type: "short" as "short",
-            value: data?.sale?.name,
-          },
-        ]}
-        saveButtonState={saveButtonState}
-        richTextResetKey={languageCode}
-        onEdit={onEdit}
-        onDiscard={onDiscard}
-        onSubmit={onSubmit}
-      />
-    </DetailedContent>
+      <DetailPageLayout.Content>
+        <TranslationFields
+          activeField={activeField}
+          disabled={disabled}
+          initialState={true}
+          title={intl.formatMessage(commonMessages.generalInformations)}
+          fields={[
+            {
+              displayName: intl.formatMessage({
+                id: "s40PZt",
+                defaultMessage: "Sale Name",
+              }),
+              name: fieldNames.name,
+              translation: data?.translation?.name || null,
+              type: "short" as "short",
+              value: data?.sale?.name,
+            },
+          ]}
+          saveButtonState={saveButtonState}
+          richTextResetKey={languageCode}
+          onEdit={onEdit}
+          onDiscard={onDiscard}
+          onSubmit={onSubmit}
+        />
+      </DetailPageLayout.Content>
+    </DetailPageLayout>
   );
 };
 TranslationsSalesPage.displayName = "TranslationsSalesPage";
diff --git a/src/translations/components/TranslationsShippingMethodPage/TranslationsShippingMethodPage.tsx b/src/translations/components/TranslationsShippingMethodPage/TranslationsShippingMethodPage.tsx
index 8a82d3099..0f16f779a 100644
--- a/src/translations/components/TranslationsShippingMethodPage/TranslationsShippingMethodPage.tsx
+++ b/src/translations/components/TranslationsShippingMethodPage/TranslationsShippingMethodPage.tsx
@@ -1,6 +1,6 @@
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import LanguageSwitch from "@dashboard/components/LanguageSwitch";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import {
   LanguageCodeEnum,
   ShippingMethodTranslationFragment,
@@ -43,7 +43,7 @@ const TranslationsShippingMethodPage: React.FC<
   const intl = useIntl();
 
   return (
-    <DetailedContent useSingleColumn>
+    <DetailPageLayout gridTemplateColumns={1}>
       <TopNav
         href={languageEntitiesUrl(languageCode, {
           tab: TranslatableEntities.shippingMethods,
@@ -73,42 +73,44 @@ const TranslationsShippingMethodPage: React.FC<
           }
         />
       </TopNav>
-      <TranslationFields
-        activeField={activeField}
-        disabled={disabled}
-        initialState={true}
-        title={intl.formatMessage(commonMessages.generalInformations)}
-        fields={[
-          {
-            displayName: intl.formatMessage({
-              id: "aPCrsp",
-              defaultMessage: "Name",
-              description: "shipping method name",
-            }),
-            name: TranslationInputFieldName.name,
-            translation: data?.translation?.name || null,
-            type: "short" as "short",
-            value: data?.name,
-          },
-          {
-            displayName: intl.formatMessage({
-              id: "GpqEl5",
-              defaultMessage: "Description",
-              description: "shipping method description",
-            }),
-            name: TranslationInputFieldName.description,
-            translation: data?.translation?.description || null,
-            type: "rich",
-            value: data?.description,
-          },
-        ]}
-        saveButtonState={saveButtonState}
-        richTextResetKey={languageCode}
-        onEdit={onEdit}
-        onDiscard={onDiscard}
-        onSubmit={onSubmit}
-      />
-    </DetailedContent>
+      <DetailPageLayout.Content>
+        <TranslationFields
+          activeField={activeField}
+          disabled={disabled}
+          initialState={true}
+          title={intl.formatMessage(commonMessages.generalInformations)}
+          fields={[
+            {
+              displayName: intl.formatMessage({
+                id: "aPCrsp",
+                defaultMessage: "Name",
+                description: "shipping method name",
+              }),
+              name: TranslationInputFieldName.name,
+              translation: data?.translation?.name || null,
+              type: "short" as "short",
+              value: data?.name,
+            },
+            {
+              displayName: intl.formatMessage({
+                id: "GpqEl5",
+                defaultMessage: "Description",
+                description: "shipping method description",
+              }),
+              name: TranslationInputFieldName.description,
+              translation: data?.translation?.description || null,
+              type: "rich",
+              value: data?.description,
+            },
+          ]}
+          saveButtonState={saveButtonState}
+          richTextResetKey={languageCode}
+          onEdit={onEdit}
+          onDiscard={onDiscard}
+          onSubmit={onSubmit}
+        />
+      </DetailPageLayout.Content>
+    </DetailPageLayout>
   );
 };
 TranslationsShippingMethodPage.displayName = "TranslationsShippingMethodPage";
diff --git a/src/translations/components/TranslationsVouchersPage/TranslationsVouchersPage.tsx b/src/translations/components/TranslationsVouchersPage/TranslationsVouchersPage.tsx
index 164fddcde..cd774a54d 100644
--- a/src/translations/components/TranslationsVouchersPage/TranslationsVouchersPage.tsx
+++ b/src/translations/components/TranslationsVouchersPage/TranslationsVouchersPage.tsx
@@ -1,6 +1,6 @@
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import LanguageSwitch from "@dashboard/components/LanguageSwitch";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import {
   LanguageCodeEnum,
   VoucherTranslationFragment,
@@ -42,7 +42,7 @@ const TranslationsVouchersPage: React.FC<TranslationsVouchersPageProps> = ({
   const intl = useIntl();
 
   return (
-    <DetailedContent useSingleColumn>
+    <DetailPageLayout gridTemplateColumns={1}>
       <TopNav
         href={languageEntitiesUrl(languageCode, {
           tab: TranslatableEntities.vouchers,
@@ -72,30 +72,32 @@ const TranslationsVouchersPage: React.FC<TranslationsVouchersPageProps> = ({
           }
         />
       </TopNav>
-      <TranslationFields
-        activeField={activeField}
-        disabled={disabled}
-        initialState={true}
-        title={intl.formatMessage(commonMessages.generalInformations)}
-        fields={[
-          {
-            displayName: intl.formatMessage({
-              id: "sfErC+",
-              defaultMessage: "Voucher Name",
-            }),
-            name: fieldNames.name,
-            translation: data?.translation?.name || null,
-            type: "short" as "short",
-            value: data?.voucher?.name,
-          },
-        ]}
-        saveButtonState={saveButtonState}
-        richTextResetKey={languageCode}
-        onEdit={onEdit}
-        onDiscard={onDiscard}
-        onSubmit={onSubmit}
-      />
-    </DetailedContent>
+      <DetailPageLayout.Content>
+        <TranslationFields
+          activeField={activeField}
+          disabled={disabled}
+          initialState={true}
+          title={intl.formatMessage(commonMessages.generalInformations)}
+          fields={[
+            {
+              displayName: intl.formatMessage({
+                id: "sfErC+",
+                defaultMessage: "Voucher Name",
+              }),
+              name: fieldNames.name,
+              translation: data?.translation?.name || null,
+              type: "short" as "short",
+              value: data?.voucher?.name,
+            },
+          ]}
+          saveButtonState={saveButtonState}
+          richTextResetKey={languageCode}
+          onEdit={onEdit}
+          onDiscard={onDiscard}
+          onSubmit={onSubmit}
+        />
+      </DetailPageLayout.Content>
+    </DetailPageLayout>
   );
 };
 TranslationsVouchersPage.displayName = "TranslationsVouchersPage";
diff --git a/src/warehouses/components/WarehouseCreatePage/WarehouseCreatePage.tsx b/src/warehouses/components/WarehouseCreatePage/WarehouseCreatePage.tsx
index cc37caba7..93a36d316 100644
--- a/src/warehouses/components/WarehouseCreatePage/WarehouseCreatePage.tsx
+++ b/src/warehouses/components/WarehouseCreatePage/WarehouseCreatePage.tsx
@@ -1,10 +1,9 @@
 import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler";
-import { Content } from "@dashboard/components/AppLayout/Content";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import CompanyAddressInput from "@dashboard/components/CompanyAddressInput";
 import Form from "@dashboard/components/Form";
-import Grid from "@dashboard/components/Grid";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import { AddressTypeInput } from "@dashboard/customers/types";
 import {
@@ -75,7 +74,7 @@ const WarehouseCreatePage: React.FC<WarehouseCreatePageProps> = ({
         const handleCountrySelect = createCountryHandler(countrySelect, set);
 
         return (
-          <>
+          <DetailPageLayout gridTemplateColumns={1}>
             <TopNav
               href={warehouseListUrl()}
               title={intl.formatMessage({
@@ -84,40 +83,38 @@ const WarehouseCreatePage: React.FC<WarehouseCreatePageProps> = ({
                 description: "header",
               })}
             />
-            <Content>
-              <Grid>
-                <div>
-                  <WarehouseInfo
-                    data={data}
-                    disabled={disabled}
-                    errors={errors}
-                    onChange={change}
-                  />
-                  <CardSpacer />
-                  <CompanyAddressInput
-                    countries={countryChoices}
-                    data={data}
-                    disabled={disabled}
-                    displayCountry={displayCountry}
-                    errors={[...errors, ...validationErrors]}
-                    header={intl.formatMessage({
-                      id: "43Nlay",
-                      defaultMessage: "Address Information",
-                      description: "warehouse",
-                    })}
-                    onChange={change}
-                    onCountryChange={handleCountrySelect}
-                  />
-                </div>
-              </Grid>
+            <DetailPageLayout.Content>
+              <div>
+                <WarehouseInfo
+                  data={data}
+                  disabled={disabled}
+                  errors={errors}
+                  onChange={change}
+                />
+                <CardSpacer />
+                <CompanyAddressInput
+                  countries={countryChoices}
+                  data={data}
+                  disabled={disabled}
+                  displayCountry={displayCountry}
+                  errors={[...errors, ...validationErrors]}
+                  header={intl.formatMessage({
+                    id: "43Nlay",
+                    defaultMessage: "Address Information",
+                    description: "warehouse",
+                  })}
+                  onChange={change}
+                  onCountryChange={handleCountrySelect}
+                />
+              </div>
               <Savebar
                 disabled={disabled}
                 onCancel={() => navigate(warehouseListUrl())}
                 onSubmit={submit}
                 state={saveButtonBarState}
               />
-            </Content>
-          </>
+            </DetailPageLayout.Content>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx b/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx
index 8f1b0653f..33c5f8e75 100644
--- a/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx
+++ b/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx
@@ -1,11 +1,9 @@
 import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler";
-import { Content } from "@dashboard/components/AppLayout/Content";
-import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
-import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import CompanyAddressInput from "@dashboard/components/CompanyAddressInput";
 import Form from "@dashboard/components/Form";
+import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import { AddressTypeInput } from "@dashboard/customers/types";
 import {
@@ -95,9 +93,9 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
         const handleCountrySelect = createCountryHandler(countrySelect, set);
 
         return (
-          <DetailedContent>
+          <DetailPageLayout>
             <TopNav href={warehouseListUrl()} title={warehouse?.name} />
-            <Content>
+            <DetailPageLayout.Content>
               <WarehouseInfo
                 data={data}
                 disabled={disabled}
@@ -119,8 +117,8 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
                 onChange={change}
                 onCountryChange={handleCountrySelect}
               />
-            </Content>
-            <RightSidebar>
+            </DetailPageLayout.Content>
+            <DetailPageLayout.RightSidebar>
               <WarehouseSettings
                 zones={mapEdgesToItems(warehouse?.shippingZones) ?? []}
                 data={data}
@@ -128,7 +126,7 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
                 onChange={change}
                 setData={set}
               />
-            </RightSidebar>
+            </DetailPageLayout.RightSidebar>
             <Savebar
               disabled={!!isSaveDisabled}
               onCancel={() => navigate(warehouseListUrl())}
@@ -136,7 +134,7 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
               onSubmit={submit}
               state={saveButtonBarState}
             />
-          </DetailedContent>
+          </DetailPageLayout>
         );
       }}
     </Form>
diff --git a/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx b/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx
index 90b8c882d..90c66ab3c 100644
--- a/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx
+++ b/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx
@@ -2,6 +2,7 @@ import { LimitsInfo } from "@dashboard/components/AppLayout/LimitsInfo";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Backlink } from "@dashboard/components/Backlink";
 import { Button } from "@dashboard/components/Button";
+import { ListPageLayout } from "@dashboard/components/Layouts";
 import LimitReachedAlert from "@dashboard/components/LimitReachedAlert";
 import SearchBar from "@dashboard/components/SearchBar";
 import { configurationMenuUrl } from "@dashboard/configuration";
@@ -59,7 +60,7 @@ export const WarehouseListPage: React.FC<WarehouseListPageProps> = ({
   const limitReached = isLimitReached(limits, "warehouses");
 
   return (
-    <>
+    <ListPageLayout>
       <Backlink href={configurationMenuUrl}>
         <FormattedMessage {...sectionNames.configuration} />
       </Backlink>
@@ -138,7 +139,7 @@ export const WarehouseListPage: React.FC<WarehouseListPageProps> = ({
           {...listProps}
         />
       </Card>
-    </>
+    </ListPageLayout>
   );
 };
 WarehouseListPage.displayName = "WarehouseListPage";