diff --git a/playwright/utils/config.ts b/playwright/utils/config.ts
index 32a234a605..3e85475096 100644
--- a/playwright/utils/config.ts
+++ b/playwright/utils/config.ts
@@ -4,6 +4,7 @@ export const viewport = {
   mobile: devices['iPhone 13 Pro'].viewport,
   md: { width: 1001, height: 800 },
   xl: { width: 1600, height: 1000 },
+  xxl: { width: 1920, height: 1200 },
 };
 
 export const maskColor = '#4299E1'; // blue.400
diff --git a/theme/foundations/breakpoints.ts b/theme/foundations/breakpoints.ts
index aa60d95011..ece6201c12 100644
--- a/theme/foundations/breakpoints.ts
+++ b/theme/foundations/breakpoints.ts
@@ -4,8 +4,9 @@ const breakpoints = {
   //   md: '768px',
   lg: '1000px',
   xl: '1440px',
+  '2xl': '1920px',
   // these breakpoint are needed just to make others work
-  '2xl': '3000px',
+  '3xl': '3000px',
 };
 
 export default breakpoints;
diff --git a/ui/shared/layout/Layout.pw.tsx b/ui/shared/layout/Layout.pw.tsx
index bc2cad67d5..4f5fa38fe7 100644
--- a/ui/shared/layout/Layout.pw.tsx
+++ b/ui/shared/layout/Layout.pw.tsx
@@ -18,8 +18,8 @@ test('base view +@mobile', async({ render, mockEnvs, mockApiResponse }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test.describe('xl screen', () => {
-  test.use({ viewport: pwConfig.viewport.xl });
+test.describe('xxl screen', () => {
+  test.use({ viewport: pwConfig.viewport.xxl });
 
   test('vertical navigation', async({ render }) => {
     const component = await render(<Layout>Page Content</Layout>);
diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xl-screen-horizontal-navigation-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xl-screen-horizontal-navigation-1.png
deleted file mode 100644
index 5c45de933d..0000000000
Binary files a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xl-screen-horizontal-navigation-1.png and /dev/null differ
diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xl-screen-vertical-navigation-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xl-screen-vertical-navigation-1.png
deleted file mode 100644
index e2e51f50c2..0000000000
Binary files a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xl-screen-vertical-navigation-1.png and /dev/null differ
diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-horizontal-navigation-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-horizontal-navigation-1.png
new file mode 100644
index 0000000000..05f4bce2e4
Binary files /dev/null and b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-horizontal-navigation-1.png differ
diff --git a/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-vertical-navigation-1.png b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-vertical-navigation-1.png
new file mode 100644
index 0000000000..f4e2c356fd
Binary files /dev/null and b/ui/shared/layout/__screenshots__/Layout.pw.tsx_default_xxl-screen-vertical-navigation-1.png differ
diff --git a/ui/shared/layout/components/MainColumn.tsx b/ui/shared/layout/components/MainColumn.tsx
index 4f76325b86..75133c9651 100644
--- a/ui/shared/layout/components/MainColumn.tsx
+++ b/ui/shared/layout/components/MainColumn.tsx
@@ -16,6 +16,7 @@ const MainColumn = ({ children, className }: Props) => {
       flexGrow={ 1 }
       w={{ base: '100%', lg: config.UI.navigation.layout === 'horizontal' ? '100%' : 'auto' }}
       paddingX={{ base: 3, lg: config.UI.navigation.layout === 'horizontal' ? 6 : 12 }}
+      paddingRight={{ '2xl': 6 }}
       paddingTop={{ base: `${ 12 + 52 }px`, lg: 6 }} // 12px is top padding of content area, 52px is search bar height
       paddingBottom={ 8 }
     >
diff --git a/ui/snippets/footer/Footer.tsx b/ui/snippets/footer/Footer.tsx
index a29f4f8d2a..c205352170 100644
--- a/ui/snippets/footer/Footer.tsx
+++ b/ui/snippets/footer/Footer.tsx
@@ -162,7 +162,7 @@ const Footer = () => {
   };
 
   const contentProps: GridProps = {
-    px: { base: 4, lg: config.UI.navigation.layout === 'horizontal' ? 6 : 12 },
+    px: { base: 4, lg: config.UI.navigation.layout === 'horizontal' ? 6 : 12, '2xl': 6 },
     py: { base: 4, lg: 8 },
     gridTemplateColumns: { base: '1fr', lg: 'minmax(auto, 470px) 1fr' },
     columnGap: { lg: '32px', xl: '100px' },