diff --git a/core/api.txt b/core/api.txt
index 5b4a827ab45..e910f671bc4 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -799,6 +799,10 @@ ion-col,css-prop,--ion-col-breakpoint-xs-padding-bottom
 ion-col,css-prop,--ion-col-breakpoint-xs-padding-end
 ion-col,css-prop,--ion-col-breakpoint-xs-padding-start
 ion-col,css-prop,--ion-col-breakpoint-xs-padding-top
+ion-col,css-prop,--ion-col-breakpoint-xxl-padding-bottom
+ion-col,css-prop,--ion-col-breakpoint-xxl-padding-end
+ion-col,css-prop,--ion-col-breakpoint-xxl-padding-start
+ion-col,css-prop,--ion-col-breakpoint-xxl-padding-top
 
 ion-content,shadow
 ion-content,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
@@ -1090,6 +1094,11 @@ ion-grid,css-prop,--ion-grid-breakpoint-xs-padding-end
 ion-grid,css-prop,--ion-grid-breakpoint-xs-padding-start
 ion-grid,css-prop,--ion-grid-breakpoint-xs-padding-top
 ion-grid,css-prop,--ion-grid-breakpoint-xs-width
+ion-grid,css-prop,--ion-grid-breakpoint-xxl-padding-bottom
+ion-grid,css-prop,--ion-grid-breakpoint-xxl-padding-end
+ion-grid,css-prop,--ion-grid-breakpoint-xxl-padding-start
+ion-grid,css-prop,--ion-grid-breakpoint-xxl-padding-top
+ion-grid,css-prop,--ion-grid-breakpoint-xxl-width
 ion-grid,css-prop,--ion-grid-columns
 
 ion-header,none
diff --git a/core/src/components/col/col.scss b/core/src/components/col/col.scss
index 28de29f184c..a3889df490d 100644
--- a/core/src/components/col/col.scss
+++ b/core/src/components/col/col.scss
@@ -31,6 +31,11 @@
    * @prop --ion-col-breakpoint-xl-padding-end: End padding on xl screens
    * @prop --ion-col-breakpoint-xl-padding-bottom: Bottom padding on xl screens
    * @prop --ion-col-breakpoint-xl-padding-start: Start padding on xl screens
+   *
+   * @prop --ion-col-breakpoint-xxl-padding-top: Top padding on xxl screens
+   * @prop --ion-col-breakpoint-xxl-padding-end: End padding on xxl screens
+   * @prop --ion-col-breakpoint-xxl-padding-bottom: Bottom padding on xxl screens
+   * @prop --ion-col-breakpoint-xxl-padding-start: Start padding on xxl screens
    */
   --internal-col-unit-size: calc(
     (100% - (var(--ion-grid-columns, 12) - 1) * var(--ion-row-gap, 0px)) / var(--ion-grid-columns, 12)
diff --git a/core/src/components/col/col.vars.scss b/core/src/components/col/col.vars.scss
index b6a004e29ad..6898a649c46 100644
--- a/core/src/components/col/col.vars.scss
+++ b/core/src/components/col/col.vars.scss
@@ -39,4 +39,10 @@ $grid-column-paddings: (
     bottom: var(--padding-bottom, var(--ion-col-breakpoint-xl-padding-bottom)),
     start: var(--padding-start, var(--ion-col-breakpoint-xl-padding-start)),
   ),
+  xxl: (
+    top: var(--padding-top, var(--ion-col-breakpoint-xxl-padding-top)),
+    end: var(--padding-end, var(--ion-col-breakpoint-xxl-padding-end)),
+    bottom: var(--padding-bottom, var(--ion-col-breakpoint-xxl-padding-bottom)),
+    start: var(--padding-start, var(--ion-col-breakpoint-xxl-padding-start)),
+  ),
 );
diff --git a/core/src/components/grid/grid.interface.ts b/core/src/components/grid/grid.interface.ts
index ce34a346902..1273fbaf388 100644
--- a/core/src/components/grid/grid.interface.ts
+++ b/core/src/components/grid/grid.interface.ts
@@ -12,5 +12,5 @@ export type IonGridRecipe = {
 };
 
 // TODO(FW-7285): Replace with global breakpoints
-export const ION_GRID_BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+export const ION_GRID_BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;
 export type IonGridBreakpoint = (typeof ION_GRID_BREAKPOINTS)[number];
diff --git a/core/src/components/grid/grid.scss b/core/src/components/grid/grid.scss
index 3a9d4d172b9..a4d6a02235a 100644
--- a/core/src/components/grid/grid.scss
+++ b/core/src/components/grid/grid.scss
@@ -34,11 +34,17 @@
    * @prop --ion-grid-breakpoint-xl-padding-bottom: Bottom padding on xl screens
    * @prop --ion-grid-breakpoint-xl-padding-start: Start padding on xl screens
    *
+   * @prop --ion-grid-breakpoint-xxl-padding-top: Top padding on xxl screens
+   * @prop --ion-grid-breakpoint-xxl-padding-end: End padding on xxl screens
+   * @prop --ion-grid-breakpoint-xxl-padding-bottom: Bottom padding on xxl screens
+   * @prop --ion-grid-breakpoint-xxl-padding-start: Start padding on xxl screens
+   *
    * @prop --ion-grid-breakpoint-xs-width: Width of the fixed grid on xs screens
    * @prop --ion-grid-breakpoint-sm-width: Width of the fixed grid on sm screens
    * @prop --ion-grid-breakpoint-md-width: Width of the fixed grid on md screens
    * @prop --ion-grid-breakpoint-lg-width: Width of the fixed grid on lg screens
    * @prop --ion-grid-breakpoint-xl-width: Width of the fixed grid on xl screens
+   * @prop --ion-grid-breakpoint-xxl-width: Width of the fixed grid on xxl screens
    */
 
   @include grid.make-breakpoint-padding(vars.$grid-paddings);
diff --git a/core/src/components/grid/grid.vars.scss b/core/src/components/grid/grid.vars.scss
index fd4bb710e60..fe52ae158fb 100644
--- a/core/src/components/grid/grid.vars.scss
+++ b/core/src/components/grid/grid.vars.scss
@@ -33,6 +33,12 @@ $grid-paddings: (
     bottom: var(--ion-grid-breakpoint-xl-padding-bottom),
     start: var(--ion-grid-breakpoint-xl-padding-start),
   ),
+  xxl: (
+    top: var(--ion-grid-breakpoint-xxl-padding-top),
+    end: var(--ion-grid-breakpoint-xxl-padding-end),
+    bottom: var(--ion-grid-breakpoint-xxl-padding-bottom),
+    start: var(--ion-grid-breakpoint-xxl-padding-start),
+  ),
 );
 
 /// @prop - Per-breakpoint fixed grid width values
@@ -42,4 +48,5 @@ $grid-widths: (
   md: var(--ion-grid-breakpoint-md-width),
   lg: var(--ion-grid-breakpoint-lg-width),
   xl: var(--ion-grid-breakpoint-xl-width),
+  xxl: var(--ion-grid-breakpoint-xxl-width),
 );
diff --git a/core/src/components/grid/test/fixed/grid.e2e.ts b/core/src/components/grid/test/fixed/grid.e2e.ts
index b90e7b5972c..a1b9c96ccd2 100644
--- a/core/src/components/grid/test/fixed/grid.e2e.ts
+++ b/core/src/components/grid/test/fixed/grid.e2e.ts
@@ -19,8 +19,9 @@ const minWidthFor = (bp: (typeof ION_GRID_BREAKPOINTS)[number]): number => {
 
 /**
  * Viewport width that activates each breakpoint. `max(400, minWidth)` lands
- * exactly on the threshold for sm/md/lg/xl (firing only that breakpoint's
- * rule and nothing above it) while giving xs a renderable non-zero viewport.
+ * exactly on the threshold for every breakpoint above xs (firing only that
+ * breakpoint's rule and nothing above it) while giving xs a renderable non-zero
+ * viewport.
  */
 const VIEWPORT_AT_BREAKPOINT = Object.fromEntries(
   ION_GRID_BREAKPOINTS.map((bp) => [bp, Math.max(400, minWidthFor(bp))])
diff --git a/core/src/themes/common.globals.scss b/core/src/themes/common.globals.scss
index ce5d6a47f29..02ca084f482 100644
--- a/core/src/themes/common.globals.scss
+++ b/core/src/themes/common.globals.scss
@@ -14,6 +14,7 @@ $screen-breakpoints: (
   md: 768px,
   lg: 992px,
   xl: 1200px,
+  xxl: 1400px,
 );
 
 // Z-Index
diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts
index a150554be8e..cc3521d91ad 100644
--- a/core/src/themes/ionic/default.tokens.ts
+++ b/core/src/themes/ionic/default.tokens.ts
@@ -514,6 +514,15 @@ export const defaultTheme: DefaultTheme = {
             top: '5px',
           },
         },
+
+        xxl: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
       },
     },
 
@@ -600,6 +609,17 @@ export const defaultTheme: DefaultTheme = {
 
           width: '1140px',
         },
+
+        xxl: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '1320px',
+        },
       },
 
       columns: 12,
diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts
index 6a0a32a35dc..94e95411369 100644
--- a/core/src/themes/ios/default.tokens.ts
+++ b/core/src/themes/ios/default.tokens.ts
@@ -649,6 +649,15 @@ export const defaultTheme: DefaultTheme = {
             top: '5px',
           },
         },
+
+        xxl: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
       },
     },
 
@@ -735,6 +744,17 @@ export const defaultTheme: DefaultTheme = {
 
           width: '1140px',
         },
+
+        xxl: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '1320px',
+        },
       },
 
       columns: 12,
diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts
index 9e7626e67cb..6baaae6884a 100644
--- a/core/src/themes/md/default.tokens.ts
+++ b/core/src/themes/md/default.tokens.ts
@@ -652,6 +652,15 @@ export const defaultTheme: DefaultTheme = {
             top: '5px',
           },
         },
+
+        xxl: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+        },
       },
     },
 
@@ -738,6 +747,17 @@ export const defaultTheme: DefaultTheme = {
 
           width: '1140px',
         },
+
+        xxl: {
+          padding: {
+            bottom: '5px',
+            end: '5px',
+            start: '5px',
+            top: '5px',
+          },
+
+          width: '1320px',
+        },
       },
 
       columns: 12,
diff --git a/core/src/themes/mixins.scss b/core/src/themes/mixins.scss
index 1a2afeb58e9..a9460a402b9 100644
--- a/core/src/themes/mixins.scss
+++ b/core/src/themes/mixins.scss
@@ -137,7 +137,7 @@
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
 //
-//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
 //
 // The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.
 
@@ -145,7 +145,7 @@
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
-//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $screen-breakpoints) {
   $min: map-get($breakpoints, $name);
@@ -156,9 +156,9 @@
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
 // Useful for making responsive utilities.
 //
-//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    "-sm"
 @function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {
   @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
@@ -182,9 +182,9 @@
 //
 //    >> breakpoint-next(sm)
 //    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    md
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
 //    md
 @function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
   $n: index($breakpoint-names, $name);
@@ -200,7 +200,7 @@
 // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.	// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
 // See https://bugs.webkit.org/show_bug.cgi?id=178261	// See https://bugs.webkit.org/show_bug.cgi?id=178261
 //
-//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    767.98px
 @function breakpoint-max($name, $breakpoints: $screen-breakpoints) {
   $max: map-get($breakpoints, $name);
diff --git a/core/src/themes/native/native.globals.scss b/core/src/themes/native/native.globals.scss
index f80cc0b4bbe..da620679256 100644
--- a/core/src/themes/native/native.globals.scss
+++ b/core/src/themes/native/native.globals.scss
@@ -29,6 +29,7 @@ $screen-breakpoints: (
   md: 768px,
   lg: 992px,
   xl: 1200px,
+  xxl: 1400px,
 );
 
 // Input placeholder opacity
diff --git a/core/src/utils/media.ts b/core/src/utils/media.ts
index 858dbe608fe..727e56c10ae 100644
--- a/core/src/utils/media.ts
+++ b/core/src/utils/media.ts
@@ -5,6 +5,7 @@ export const SIZE_TO_MEDIA: any = {
   md: '(min-width: 768px)',
   lg: '(min-width: 992px)',
   xl: '(min-width: 1200px)',
+  xxl: '(min-width: 1400px)',
 };
 
 // Check if the window matches the media query