diff --git a/CHANGELOG.md b/CHANGELOG.md
index e0942478ed..e4bcc9ca93 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 ### 📈 Features/Enhancements
 
 ### 🐛 Bug Fixes
+- Update components to respect new breakpoints
 
 ### 🚞 Infrastructure
 
diff --git a/src-docs/src/views/guidelines/colors/_color_section.scss b/src-docs/src/views/guidelines/colors/_color_section.scss
index a77993b4df..3c0d3b73cb 100644
--- a/src-docs/src/views/guidelines/colors/_color_section.scss
+++ b/src-docs/src/views/guidelines/colors/_color_section.scss
@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-@include ouiBreakpoint('m', 'l', 'xl') {
+@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
   .guideColorsPage__stickySlider {
     position: sticky;
     top: $ouiHeaderHeightCompensation;
diff --git a/src/components/header/header_links/header_links.test.tsx b/src/components/header/header_links/header_links.test.tsx
index d3762dd469..f3e7c079b0 100644
--- a/src/components/header/header_links/header_links.test.tsx
+++ b/src/components/header/header_links/header_links.test.tsx
@@ -55,7 +55,7 @@ describe('OuiHeaderLinks', () => {
     test('is rendered', () => {
       const component = render(
         <OuiHeaderLinks
-          popoverBreakpoints={['xs', 's', 'm', 'l', 'xl']}
+          popoverBreakpoints={['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl']}
           popoverButtonProps={{
             iconType: 'bolt',
             className: 'customButtonClass',
diff --git a/src/components/page/page_header/_page_header_content.scss b/src/components/page/page_header/_page_header_content.scss
index 2b7f286daa..5711f6012e 100644
--- a/src/components/page/page_header/_page_header_content.scss
+++ b/src/components/page/page_header/_page_header_content.scss
@@ -19,7 +19,7 @@
   margin-right: $ouiSize;
 }
 
-@include ouiBreakpoint('m', 'l', 'xl') {
+@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
   .ouiPageHeaderContent__rightSideItems {
     flex-direction: row-reverse;
   }
diff --git a/src/components/page/page_side_bar/_page_side_bar.scss b/src/components/page/page_side_bar/_page_side_bar.scss
index 4870839c2b..27d024f1ba 100644
--- a/src/components/page/page_side_bar/_page_side_bar.scss
+++ b/src/components/page/page_side_bar/_page_side_bar.scss
@@ -30,7 +30,7 @@
   }
 }
 
-@include ouiBreakpoint('m', 'l', 'xl') {
+@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
   .ouiPageSideBar--sticky {
     @include ouiScrollBar;
     overflow-y: auto;
diff --git a/src/components/page/page_template.tsx b/src/components/page/page_template.tsx
index 56d567cdc6..d5364bb1d8 100644
--- a/src/components/page/page_template.tsx
+++ b/src/components/page/page_template.tsx
@@ -135,7 +135,7 @@ export const OuiPageTemplate: FunctionComponent<OuiPageTemplateProps> = ({
    * Full height ~madness~ logic
    */
   const canFullHeight =
-    useIsWithinBreakpoints(['m', 'l', 'xl']) &&
+    useIsWithinBreakpoints(['m', 'l', 'xl', 'xxl', 'xxxl']) &&
     (template === 'default' || template === 'empty');
   const fullHeightClass = { 'oui-fullHeight': fullHeight && canFullHeight };
   const yScrollClass = { 'oui-yScroll': fullHeight && canFullHeight };
diff --git a/src/components/search_bar/_search_bar.scss b/src/components/search_bar/_search_bar.scss
index f20d8d5b93..4926750bba 100644
--- a/src/components/search_bar/_search_bar.scss
+++ b/src/components/search_bar/_search_bar.scss
@@ -13,7 +13,7 @@
   min-width: calc($ouiFormMaxWidth / 2);
 }
 
-@include ouiBreakpoint('m', 'l', 'xl') {
+@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
   .ouiSearchBar__filtersHolder {
     // Helps with flex-wrapping
     max-width: calc(100% - #{$ouiSize});
diff --git a/src/components/table/_responsive.scss b/src/components/table/_responsive.scss
index 2c2aa02a88..5ce87e10e1 100644
--- a/src/components/table/_responsive.scss
+++ b/src/components/table/_responsive.scss
@@ -21,7 +21,7 @@
   }
 }
 
-@include ouiBreakpoint('m', 'l', 'xl') {
+@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
   .ouiTableRowCell--hideForDesktop { // must come last to override any special cases
     // sass-lint:disable-block no-important
     display: none !important;
diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
index e8dd67a6e6..70497c1b51 100644
--- a/src/components/table/_table.scss
+++ b/src/components/table/_table.scss
@@ -33,7 +33,7 @@
 }
 
 // Compressed styles not for mobile
-@include ouiBreakpoint('m', 'l', 'xl') {
+@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
   .ouiTable--compressed {
     .ouiTableCellContent {
       @include ouiFontSizeXS;
diff --git a/src/global_styling/mixins/_header.scss b/src/global_styling/mixins/_header.scss
index 2dd794c2c8..25e48cb363 100644
--- a/src/global_styling/mixins/_header.scss
+++ b/src/global_styling/mixins/_header.scss
@@ -22,7 +22,7 @@
       height: calc(100% - #{$headerHeight});
     }
 
-    @include ouiBreakpoint('m', 'l', 'xl') {
+    @include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
       .ouiPageSideBar--sticky {
         max-height: calc(100vh - #{$headerHeight});
         top: #{$headerHeight};
@@ -47,7 +47,7 @@
       height: calc(100% - #{$headerHeight});
     }
 
-    @include euiBreakpoint('m', 'l', 'xl') {
+    @include euiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
       .euiPageSideBar--sticky {
         max-height: calc(100vh - #{$headerHeight});
         top: #{$headerHeight};
diff --git a/src/themes/oui-next/global_styling/mixins/_header.scss b/src/themes/oui-next/global_styling/mixins/_header.scss
index 2dd794c2c8..25e48cb363 100644
--- a/src/themes/oui-next/global_styling/mixins/_header.scss
+++ b/src/themes/oui-next/global_styling/mixins/_header.scss
@@ -22,7 +22,7 @@
       height: calc(100% - #{$headerHeight});
     }
 
-    @include ouiBreakpoint('m', 'l', 'xl') {
+    @include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
       .ouiPageSideBar--sticky {
         max-height: calc(100vh - #{$headerHeight});
         top: #{$headerHeight};
@@ -47,7 +47,7 @@
       height: calc(100% - #{$headerHeight});
     }
 
-    @include euiBreakpoint('m', 'l', 'xl') {
+    @include euiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
       .euiPageSideBar--sticky {
         max-height: calc(100vh - #{$headerHeight});
         top: #{$headerHeight};
diff --git a/src/themes/v9/global_styling/mixins/_header.scss b/src/themes/v9/global_styling/mixins/_header.scss
index 2dd794c2c8..25e48cb363 100644
--- a/src/themes/v9/global_styling/mixins/_header.scss
+++ b/src/themes/v9/global_styling/mixins/_header.scss
@@ -22,7 +22,7 @@
       height: calc(100% - #{$headerHeight});
     }
 
-    @include ouiBreakpoint('m', 'l', 'xl') {
+    @include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
       .ouiPageSideBar--sticky {
         max-height: calc(100vh - #{$headerHeight});
         top: #{$headerHeight};
@@ -47,7 +47,7 @@
       height: calc(100% - #{$headerHeight});
     }
 
-    @include euiBreakpoint('m', 'l', 'xl') {
+    @include euiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
       .euiPageSideBar--sticky {
         max-height: calc(100vh - #{$headerHeight});
         top: #{$headerHeight};