diff --git a/packages/decap-cms-core/src/components/App/App.js b/packages/decap-cms-core/src/components/App/App.js
index 21994ea74ac5..1d30c97fa576 100644
--- a/packages/decap-cms-core/src/components/App/App.js
+++ b/packages/decap-cms-core/src/components/App/App.js
@@ -32,7 +32,6 @@ TopBarProgress.config({
 });
 
 const AppMainContainer = styled.div`
-  min-width: 800px;
   max-width: 1440px;
   margin: 0 auto;
 `;
diff --git a/packages/decap-cms-core/src/components/Collection/Collection.js b/packages/decap-cms-core/src/components/Collection/Collection.js
index cdc3c0c111a7..09ffcb381ea0 100644
--- a/packages/decap-cms-core/src/components/Collection/Collection.js
+++ b/packages/decap-cms-core/src/components/Collection/Collection.js
@@ -26,16 +26,23 @@ import {
 } from '../../reducers/entries';
 
 const CollectionContainer = styled.div`
-  margin: ${lengths.pageMargin};
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin: ${lengths.pageMarginMobile};
+  @media (min-width: 500px) {
+    margin: ${lengths.pageMargin};
+  }
 `;
 
 const CollectionMain = styled.main`
-  padding-left: 280px;
+  @media (min-width: 800px) {
+    padding-left: 280px;
+  }
 `;
 
 const SearchResultContainer = styled.div`
   ${components.cardTop};
-  margin-bottom: 22px;
 `;
 
 const SearchResultHeading = styled.h1`
diff --git a/packages/decap-cms-core/src/components/Collection/CollectionControls.js b/packages/decap-cms-core/src/components/Collection/CollectionControls.js
index 5b15508d609c..40d491de5479 100644
--- a/packages/decap-cms-core/src/components/Collection/CollectionControls.js
+++ b/packages/decap-cms-core/src/components/Collection/CollectionControls.js
@@ -9,14 +9,15 @@ import GroupControl from './GroupControl';
 
 const CollectionControlsContainer = styled.div`
   display: flex;
+  flex-flow: row-reverse wrap;
   align-items: center;
-  flex-direction: row-reverse;
+  gap: 6px 0;
   margin-top: 22px;
   width: ${lengths.topCardWidth};
   max-width: 100%;
 
-  & > div {
-    margin-left: 6px;
+  @media (min-width: 500px) {
+    gap: 6px;
   }
 `;
 
diff --git a/packages/decap-cms-core/src/components/Collection/CollectionTop.js b/packages/decap-cms-core/src/components/Collection/CollectionTop.js
index 47d63e956d45..30eb917ced60 100644
--- a/packages/decap-cms-core/src/components/Collection/CollectionTop.js
+++ b/packages/decap-cms-core/src/components/Collection/CollectionTop.js
@@ -8,11 +8,12 @@ import { components, buttons, shadows } from 'decap-cms-ui-default';
 
 const CollectionTopContainer = styled.div`
   ${components.cardTop};
-  margin-bottom: 22px;
 `;
 
 const CollectionTopRow = styled.div`
   display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
   align-items: center;
   justify-content: space-between;
 `;
@@ -26,13 +27,13 @@ const CollectionTopNewButton = styled(Link)`
   ${shadows.dropDeep};
   ${buttons.default};
   ${buttons.gray};
+  white-space: nowrap;
 
   padding: 0 30px;
 `;
 
 const CollectionTopDescription = styled.p`
   ${components.cardTopDescription};
-  margin-bottom: 0;
 `;
 
 function getCollectionProps(collection) {
diff --git a/packages/decap-cms-core/src/components/Collection/ControlButton.js b/packages/decap-cms-core/src/components/Collection/ControlButton.js
index a31e04834a56..c4e0c5f0f488 100644
--- a/packages/decap-cms-core/src/components/Collection/ControlButton.js
+++ b/packages/decap-cms-core/src/components/Collection/ControlButton.js
@@ -8,6 +8,7 @@ const Button = styled(StyledDropdownButton)`
   ${buttons.medium};
   ${buttons.grayText};
   font-size: 14px;
+  white-space: nowrap;
 
   &:after {
     top: 11px;
diff --git a/packages/decap-cms-core/src/components/Collection/Entries/Entries.js b/packages/decap-cms-core/src/components/Collection/Entries/Entries.js
index 0ef11da57274..50e8d15fd5f1 100644
--- a/packages/decap-cms-core/src/components/Collection/Entries/Entries.js
+++ b/packages/decap-cms-core/src/components/Collection/Entries/Entries.js
@@ -9,6 +9,7 @@ import EntryListing from './EntryListing';
 
 const PaginationMessage = styled.div`
   width: ${lengths.topCardWidth};
+  max-width: 100%;
   padding: 16px;
   text-align: center;
 `;
diff --git a/packages/decap-cms-core/src/components/Collection/Sidebar.js b/packages/decap-cms-core/src/components/Collection/Sidebar.js
index 93fe974eda96..dc8291c1e681 100644
--- a/packages/decap-cms-core/src/components/Collection/Sidebar.js
+++ b/packages/decap-cms-core/src/components/Collection/Sidebar.js
@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { translate } from 'react-polyglot';
 import { NavLink } from 'react-router-dom';
-import { Icon, components, colors } from 'decap-cms-ui-default';
+import { Icon, components, colors, lengths } from 'decap-cms-ui-default';
 
 import { searchCollections } from '../../actions/collections';
 import CollectionSearch from './CollectionSearch';
@@ -21,19 +21,20 @@ const styles = {
 
 const SidebarContainer = styled.aside`
   ${components.card};
-  width: 250px;
+  width: ${lengths.topCardWidth};
+  max-width: 100%;
   padding: 8px 0 12px;
-  position: fixed;
   max-height: calc(100vh - 112px);
   display: flex;
   flex-direction: column;
+  @media (min-width: 800px) {
+    position: fixed;
+    width: 250px;
+  }
 `;
 
 const SidebarHeading = styled.h2`
-  font-size: 22px;
-  font-weight: 600;
-  line-height: 37px;
-  padding: 0;
+  ${components.cardTopHeading};
   margin: 10px 20px;
   color: ${colors.textLead};
 `;
diff --git a/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Collection.spec.js.snap b/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Collection.spec.js.snap
index 0cb6a889449c..76185d1dde88 100644
--- a/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Collection.spec.js.snap
+++ b/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Collection.spec.js.snap
@@ -3,11 +3,27 @@
 exports[`Collection should render connected component 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  margin: 28px 18px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 20px;
+  margin: 12px 8px;
 }
 
-.emotion-2 {
-  padding-left: 280px;
+@media (min-width: 500px) {
+  .emotion-0 {
+    margin: 28px 18px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-2 {
+    padding-left: 280px;
+  }
 }
 
 <div
@@ -45,11 +61,27 @@ exports[`Collection should render connected component 1`] = `
 exports[`Collection should render with collection with create url 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  margin: 28px 18px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 20px;
+  margin: 12px 8px;
+}
+
+@media (min-width: 500px) {
+  .emotion-0 {
+    margin: 28px 18px;
+  }
 }
 
-.emotion-2 {
-  padding-left: 280px;
+@media (min-width: 800px) {
+  .emotion-2 {
+    padding-left: 280px;
+  }
 }
 
 <div
@@ -78,11 +110,27 @@ exports[`Collection should render with collection with create url 1`] = `
 exports[`Collection should render with collection with create url and path 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  margin: 28px 18px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 20px;
+  margin: 12px 8px;
 }
 
-.emotion-2 {
-  padding-left: 280px;
+@media (min-width: 500px) {
+  .emotion-0 {
+    margin: 28px 18px;
+  }
+}
+
+@media (min-width: 800px) {
+  .emotion-2 {
+    padding-left: 280px;
+  }
 }
 
 <div
@@ -113,11 +161,27 @@ exports[`Collection should render with collection with create url and path 1`] =
 exports[`Collection should render with collection without create url 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  margin: 28px 18px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 20px;
+  margin: 12px 8px;
+}
+
+@media (min-width: 500px) {
+  .emotion-0 {
+    margin: 28px 18px;
+  }
 }
 
-.emotion-2 {
-  padding-left: 280px;
+@media (min-width: 800px) {
+  .emotion-2 {
+    padding-left: 280px;
+  }
 }
 
 <div
diff --git a/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Sidebar.spec.js.snap b/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Sidebar.spec.js.snap
index accf2fd59286..9b047f9a577e 100644
--- a/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Sidebar.spec.js.snap
+++ b/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Sidebar.spec.js.snap
@@ -6,9 +6,9 @@ exports[`Sidebar should render nested collection with filterTerm 1`] = `
   box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1);
   border-radius: 5px;
   background-color: #fff;
-  width: 250px;
+  width: 682px;
+  max-width: 100%;
   padding: 8px 0 12px;
-  position: fixed;
   max-height: calc(100vh - 112px);
   display: -webkit-box;
   display: -webkit-flex;
@@ -19,15 +19,30 @@ exports[`Sidebar should render nested collection with filterTerm 1`] = `
   flex-direction: column;
 }
 
+@media (min-width: 800px) {
+  .emotion-0 {
+    position: fixed;
+    width: 250px;
+  }
+}
+
 .emotion-2 {
-  font-size: 22px;
+  font-size: 20px;
+  line-height: 24px;
   font-weight: 600;
-  line-height: 37px;
+  margin: 0;
   padding: 0;
   margin: 10px 20px;
   color: #313d3e;
 }
 
+@media (min-width: 500px) {
+  .emotion-2 {
+    font-size: 22px;
+    line-height: 26px;
+  }
+}
+
 .emotion-4 {
   margin: 12px 0 0;
   list-style: none;
@@ -67,9 +82,9 @@ exports[`Sidebar should render sidebar with a nested collection 1`] = `
   box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1);
   border-radius: 5px;
   background-color: #fff;
-  width: 250px;
+  width: 682px;
+  max-width: 100%;
   padding: 8px 0 12px;
-  position: fixed;
   max-height: calc(100vh - 112px);
   display: -webkit-box;
   display: -webkit-flex;
@@ -80,15 +95,30 @@ exports[`Sidebar should render sidebar with a nested collection 1`] = `
   flex-direction: column;
 }
 
+@media (min-width: 800px) {
+  .emotion-0 {
+    position: fixed;
+    width: 250px;
+  }
+}
+
 .emotion-2 {
-  font-size: 22px;
+  font-size: 20px;
+  line-height: 24px;
   font-weight: 600;
-  line-height: 37px;
+  margin: 0;
   padding: 0;
   margin: 10px 20px;
   color: #313d3e;
 }
 
+@media (min-width: 500px) {
+  .emotion-2 {
+    font-size: 22px;
+    line-height: 26px;
+  }
+}
+
 .emotion-4 {
   margin: 12px 0 0;
   list-style: none;
@@ -127,9 +157,9 @@ exports[`Sidebar should render sidebar with a simple collection 1`] = `
   box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1);
   border-radius: 5px;
   background-color: #fff;
-  width: 250px;
+  width: 682px;
+  max-width: 100%;
   padding: 8px 0 12px;
-  position: fixed;
   max-height: calc(100vh - 112px);
   display: -webkit-box;
   display: -webkit-flex;
@@ -140,15 +170,30 @@ exports[`Sidebar should render sidebar with a simple collection 1`] = `
   flex-direction: column;
 }
 
+@media (min-width: 800px) {
+  .emotion-0 {
+    position: fixed;
+    width: 250px;
+  }
+}
+
 .emotion-2 {
-  font-size: 22px;
+  font-size: 20px;
+  line-height: 24px;
   font-weight: 600;
-  line-height: 37px;
+  margin: 0;
   padding: 0;
   margin: 10px 20px;
   color: #313d3e;
 }
 
+@media (min-width: 500px) {
+  .emotion-2 {
+    font-size: 22px;
+    line-height: 26px;
+  }
+}
+
 .emotion-4 {
   margin: 12px 0 0;
   list-style: none;
@@ -224,9 +269,9 @@ exports[`Sidebar should render sidebar without search 1`] = `
   box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),0 1px 3px 0 rgba(68, 74, 87, 0.1);
   border-radius: 5px;
   background-color: #fff;
-  width: 250px;
+  width: 682px;
+  max-width: 100%;
   padding: 8px 0 12px;
-  position: fixed;
   max-height: calc(100vh - 112px);
   display: -webkit-box;
   display: -webkit-flex;
@@ -237,15 +282,30 @@ exports[`Sidebar should render sidebar without search 1`] = `
   flex-direction: column;
 }
 
+@media (min-width: 800px) {
+  .emotion-0 {
+    position: fixed;
+    width: 250px;
+  }
+}
+
 .emotion-2 {
-  font-size: 22px;
+  font-size: 20px;
+  line-height: 24px;
   font-weight: 600;
-  line-height: 37px;
+  margin: 0;
   padding: 0;
   margin: 10px 20px;
   color: #313d3e;
 }
 
+@media (min-width: 500px) {
+  .emotion-2 {
+    font-size: 22px;
+    line-height: 26px;
+  }
+}
+
 .emotion-4 {
   margin: 12px 0 0;
   list-style: none;
diff --git a/packages/decap-cms-core/src/components/Workflow/Workflow.js b/packages/decap-cms-core/src/components/Workflow/Workflow.js
index 61a564c58f4c..c98569b655d9 100644
--- a/packages/decap-cms-core/src/components/Workflow/Workflow.js
+++ b/packages/decap-cms-core/src/components/Workflow/Workflow.js
@@ -27,8 +27,11 @@ import { EDITORIAL_WORKFLOW, status } from '../../constants/publishModes';
 import WorkflowList from './WorkflowList';
 
 const WorkflowContainer = styled.div`
-  padding: ${lengths.pageMargin} 0;
   height: 100vh;
+  margin: ${lengths.pageMarginMobile};
+  @media (min-width: 500px) {
+    margin: ${lengths.pageMargin};
+  }
 `;
 
 const WorkflowTop = styled.div`
@@ -37,6 +40,9 @@ const WorkflowTop = styled.div`
 
 const WorkflowTopRow = styled.div`
   display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
   justify-content: space-between;
 
   span[role='button'] {
diff --git a/packages/decap-cms-core/src/components/Workflow/WorkflowCard.js b/packages/decap-cms-core/src/components/Workflow/WorkflowCard.js
index 1a7d671ed901..1c6e8a670dbb 100644
--- a/packages/decap-cms-core/src/components/Workflow/WorkflowCard.js
+++ b/packages/decap-cms-core/src/components/Workflow/WorkflowCard.js
@@ -17,30 +17,46 @@ const styles = {
     width: auto;
     flex: 1 0 0;
     font-size: 13px;
-    padding: 6px 0;
+    padding: 6px;
   `,
 };
 
 const WorkflowLink = styled(Link)`
   display: block;
-  padding: 0 18px 18px;
-  height: 200px;
+  padding: 8px;
+  height: 140px;
   overflow: hidden;
+
+  @media (min-width: 800px) {
+    height: 200px;
+    padding: 12px 18px 18px;
+  }
 `;
 
 const CardCollection = styled.div`
-  font-size: 14px;
+  font-size: 12px;
   color: ${colors.textLead};
   text-transform: uppercase;
-  margin-top: 12px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  @media (min-width: 800px) {
+    font-size: 14px;
+  }
 `;
 
 const CardTitle = styled.h2`
-  margin: 28px 0 0;
+  font-size: 14px;
+  line-height: 17px;
+  margin: 10px 0 0;
   color: ${colors.textLead};
+  word-break: break-word;
+
+  @media (min-width: 800px) {
+    font-size: 15px;
+    line-height: 18px;
+    margin-top: 28px;
+  }
 `;
 
 const CardDateContainer = styled.div`
@@ -49,11 +65,16 @@ const CardDateContainer = styled.div`
 
 const CardBody = styled.p`
   ${styles.text};
+  line-height: 17px;
   color: ${colors.text};
-  margin: 24px 0 0;
+  margin: 10px 0 0;
   overflow-wrap: break-word;
   word-break: break-word;
   hyphens: auto;
+
+  @media (min-width: 800px) {
+    margin-top: 24px;
+  }
 `;
 
 const CardButtonContainer = styled.div`
@@ -61,25 +82,38 @@ const CardButtonContainer = styled.div`
   position: absolute;
   bottom: 0;
   width: 100%;
-  padding: 12px 18px;
-  display: flex;
-  opacity: 0;
+  display: none;
+  padding: 8px;
+  flex-direction: column;
+  gap: 6px;
   transition: opacity ${transitions.main};
   cursor: pointer;
+
+  @media (min-width: 500px) {
+    display: flex;
+  }
+
+  @media (min-width: 800px) {
+    padding: 12px 18px;
+    flex-direction: row;
+    gap: 12px;
+  }
+
+  @media (hover: hover) {
+    opacity: 0;
+  }
 `;
 
 const DeleteButton = styled.button`
   ${styles.button};
   background-color: ${colorsRaw.redLight};
   color: ${colorsRaw.red};
-  margin-right: 6px;
 `;
 
 const PublishButton = styled.button`
   ${styles.button};
   background-color: ${colorsRaw.teal};
   color: ${colors.textLight};
-  margin-left: 6px;
 
   &[disabled] {
     ${buttons.disabled};
@@ -88,13 +122,17 @@ const PublishButton = styled.button`
 
 const WorkflowCardContainer = styled.div`
   ${components.card};
-  margin-bottom: 24px;
+  margin-bottom: 10px;
   position: relative;
   overflow: hidden;
 
-  &:hover ${CardButtonContainer} {
+  &:hover ${CardButtonContainer}, &:has(:focus-visible) ${CardButtonContainer} {
     opacity: 1;
   }
+
+  @media (min-width: 800px) {
+    margin-bottom: 24px;
+  }
 `;
 
 function lastChangePhraseKey(date, author) {
diff --git a/packages/decap-cms-core/src/components/Workflow/WorkflowList.js b/packages/decap-cms-core/src/components/Workflow/WorkflowList.js
index 34259320ae50..67fc7c39360e 100644
--- a/packages/decap-cms-core/src/components/Workflow/WorkflowList.js
+++ b/packages/decap-cms-core/src/components/Workflow/WorkflowList.js
@@ -15,47 +15,57 @@ import { selectEntryCollectionTitle } from '../../reducers/collections';
 const WorkflowListContainer = styled.div`
   min-height: 60%;
   display: grid;
-  grid-template-columns: 33.3% 33.3% 33.3%;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  @media (min-width: 500px) {
+    gap: 14px;
+  }
+  @media (min-width: 800px) {
+    gap: 40px;
+  }
 `;
 
 const WorkflowListContainerOpenAuthoring = styled.div`
   min-height: 60%;
   display: grid;
-  grid-template-columns: 50% 50% 0%;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  @media (min-width: 500px) {
+    gap: 14px;
+  }
+  @media (min-width: 800px) {
+    gap: 40px;
+  }
 `;
 
 const styles = {
   columnPosition: idx =>
-    (idx === 0 &&
-      css`
-        margin-left: 0;
-      `) ||
-    (idx === 2 &&
-      css`
-        margin-right: 0;
-      `) ||
+    idx > 0 &&
     css`
-      &:before,
-      &:after {
+      &:before {
         content: '';
         display: block;
         position: absolute;
         width: 2px;
         height: 80%;
-        top: 76px;
+        top: 36px;
         background-color: ${colors.textFieldBorder};
+        @media (min-width: 800px) {
+          top: 76px;
+        }
       }
 
       &:before {
-        left: -23px;
-      }
-
-      &:after {
-        right: -23px;
+        left: -7px;
+        @media (min-width: 500px) {
+          left: -10px;
+        }
+        @media (min-width: 800px) {
+          left: -23px;
+        }
       }
     `,
   column: css`
-    margin: 0 20px;
     transition: background-color 0.5s ease;
     border: 2px dashed transparent;
     border-radius: 4px;
@@ -68,21 +78,21 @@ const styles = {
   hiddenColumn: css`
     display: none;
   `,
-  hiddenRightBorder: css`
-    &:not(:first-child):not(:last-child) {
-      &:after {
-        display: none;
-      }
-    }
-  `,
 };
 
 const ColumnHeader = styled.h2`
-  font-size: 20px;
+  font-size: 16px;
   font-weight: normal;
-  padding: 4px 14px;
+  padding: 2px 6px;
   border-radius: ${lengths.borderRadius};
-  margin-bottom: 28px;
+  white-space: nowrap;
+  margin-bottom: 6px;
+
+  @media (min-width: 800px) {
+    font-size: 20px;
+    padding: 4px 12px;
+    margin-bottom: 28px;
+  }
 
   ${props =>
     props.name === 'draft' &&
@@ -107,11 +117,21 @@ const ColumnHeader = styled.h2`
 `;
 
 const ColumnCount = styled.p`
-  font-size: 13px;
+  font-size: 11px;
   font-weight: 500;
   color: ${colors.text};
   text-transform: uppercase;
   margin-bottom: 6px;
+  padding-inline: 6px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  min-width: 0;
+
+  @media (min-width: 800px) {
+    font-size: 13px;
+    padding-inline: 12px;
+  }
 `;
 
 // This is a namespace so that we can only drop these elements on a DropTarget with the same
@@ -188,7 +208,6 @@ class WorkflowList extends React.Component {
                     styles.columnPosition(idx),
                     isHovered && styles.columnHovered,
                     isOpenAuthoring && currColumn === 'pending_publish' && styles.hiddenColumn,
-                    isOpenAuthoring && currColumn === 'pending_review' && styles.hiddenRightBorder,
                   ]}
                 >
                   <ColumnHeader name={currColumn}>
diff --git a/packages/decap-cms-ui-default/src/styles.js b/packages/decap-cms-ui-default/src/styles.js
index cae4887d1f7f..704331bcf495 100644
--- a/packages/decap-cms-ui-default/src/styles.js
+++ b/packages/decap-cms-ui-default/src/styles.js
@@ -94,6 +94,7 @@ const lengths = {
   borderWidth: '2px',
   topCardWidth: '682px',
   pageMargin: '28px 18px',
+  pageMarginMobile: '12px 8px',
   objectWidgetTopBarContainerPadding: '0 14px 14px',
 };
 
@@ -313,12 +314,16 @@ const components = {
     width: ${lengths.topCardWidth};
     max-width: 100%;
     padding: 18px 20px;
-    margin-bottom: 28px;
+    margin-bottom: 22px;
   `,
   cardTopHeading: css`
-    font-size: 22px;
+    font-size: 20px;
+    line-height: 24px;
+    @media (min-width: 500px) {
+      font-size: 22px;
+      line-height: 26px;
+    }
     font-weight: 600;
-    line-height: 37px;
     margin: 0;
     padding: 0;
   `,
@@ -327,6 +332,7 @@ const components = {
     color: ${colors.text};
     font-size: 14px;
     margin-top: 8px;
+    margin-bottom: 0;
   `,
   objectWidgetTopBarContainer: css`
     padding: ${lengths.objectWidgetTopBarContainerPadding};