diff --git a/app/javascript/components/book.vue b/app/javascript/components/book.vue
index d81673dc862..3c8c4b5852c 100644
--- a/app/javascript/components/book.vue
+++ b/app/javascript/components/book.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-.col-xxl-3.col-xl-4.col-lg-4.col-md-6.col-xs-12
+.col-xxxl-2.col-xxl-3.col-xl-4.col-lg-4.col-md-6.col-xs-12
   .card-books-item.a-card
     .card-books-item__body
       .card-books-item__inner
diff --git a/app/javascript/components/user.vue b/app/javascript/components/user.vue
index 7afde02a6ec..229a70d8774 100644
--- a/app/javascript/components/user.vue
+++ b/app/javascript/components/user.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-.col-xxl-3.col-xl-4.col-lg-4.col-md-6.col-xs-12
+.col-xxxl-2.col-xxl-3.col-xl-4.col-lg-4.col-md-6.col-xs-12
   .users-item
     .users-item__inner.a-card
       .users-item__inactive-message-container.is-only-mentor(
diff --git a/app/javascript/stylesheets/config/variables/_layout.sass b/app/javascript/stylesheets/config/variables/_layout.sass
index 77716b5896a..5d0ae83f18a 100644
--- a/app/javascript/stylesheets/config/variables/_layout.sass
+++ b/app/javascript/stylesheets/config/variables/_layout.sass
@@ -14,7 +14,7 @@ $container-class-name: container !default
     $prev-key: $key
     $prev-num: $num
 
-$grid-breakpoints: (xs: 0, sm: 40em, md: 48em, lg: 64em, xl: 80em, xxl: 96em)
+$grid-breakpoints: (xs: 0, sm: 40em, md: 48em, lg: 64em, xl: 80em, xxl: 96em, xxxl: 120em)
 +_assert-ascending($grid-breakpoints, "$grid-breakpoints")
 $container-max-width: 72.25rem !default
 
diff --git a/app/views/companies/_company.html.slim b/app/views/companies/_company.html.slim
index d0cdc1901cb..f04814ea96a 100644
--- a/app/views/companies/_company.html.slim
+++ b/app/views/companies/_company.html.slim
@@ -1,4 +1,4 @@
-.col-xxl-3.col-xl-4.col-lg-4.col-md-6.col-xs-12
+.col-xxxl-2.col-xxl-3.col-xl-4.col-lg-4.col-md-6.col-xs-12
   .companies-item
     .companies-item__inner.a-card
       header.companies-item__header
diff --git a/app/views/companies/show.html.slim b/app/views/companies/show.html.slim
index c1a61c90dea..ff619d1a10d 100644
--- a/app/views/companies/show.html.slim
+++ b/app/views/companies/show.html.slim
@@ -20,5 +20,5 @@ header.page-header
   .container.is-xl
     .columns
       .row
-        .col-xs-12.col-lg-5.col-xxl-6
+        .col-xxl-6.col-lg-5.col-xs-12
           = render 'companies/profile', company: @company
diff --git a/app/views/courses/_course.html.slim b/app/views/courses/_course.html.slim
index 59a7e18789f..1c9edc56ec1 100644
--- a/app/views/courses/_course.html.slim
+++ b/app/views/courses/_course.html.slim
@@ -1,4 +1,4 @@
-.col-xxl-3.col-xl-4.col-lg-4.col-md-6.col-xs-12
+.col-xxxl-2.col-xxl-3.col-xl-4.col-lg-4.col-md-6.col-xs-12
   .courses-item(id="course_#{course.id}" class="#{course.published ? 'is-published' : 'is-closed'}")
     .courses-item__inner.a-card
       header.courses-item__header
diff --git a/app/views/works/_work.html.slim b/app/views/works/_work.html.slim
index 9cb470c40de..54c654d2524 100644
--- a/app/views/works/_work.html.slim
+++ b/app/views/works/_work.html.slim
@@ -1,4 +1,4 @@
-.col-xxl-2.col-xl-3.col-lg-4.col-md-6.col-xs-12
+.col-xxxl-2.col-xxl-3.col-xl-3.col-lg-4.col-md-6.col-xs-12
   .thumbnail-card.a-card
     .thumbnail-card__inner
       .thumbnail-card__row