diff --git a/src/app/pages/ui-features/typography/typography.component.html b/src/app/pages/ui-features/typography/typography.component.html
index ee4177f0..84bb8b4a 100644
--- a/src/app/pages/ui-features/typography/typography.component.html
+++ b/src/app/pages/ui-features/typography/typography.component.html
@@ -1,7 +1,7 @@
 <div class="row">
-  <div class="col-md-9">
+  <div class="col-lg-12 col-xl-8">
     <div class="row">
-      <div class="col-md-7">
+      <div class="col-sm-12 col-md-6 col-xxl-7">
         <nb-card size="medium">
           <nb-card-header>
             Used Fonts
@@ -43,7 +43,7 @@
           </nb-card-body>
         </nb-card>
       </div>
-      <div class="col-md-5">
+      <div class="col-sm-12 col-md-6 col-xxl-5">
         <nb-card size="medium">
           <nb-card-header>
             Headings
@@ -107,7 +107,7 @@
         </nb-card>
       </div>
 
-      <div class="col-md-7">
+      <div class="col-sm-12 col-md-6 col-xxl-7">
         <nb-card size="small">
           <nb-card-header>
             Article Example
@@ -132,7 +132,7 @@
           </nb-card-body>
         </nb-card>
       </div>
-      <div class="col-md-5">
+      <div class="col-sm-12 col-md-6 col-xxl-5">
         <nb-card size="small">
           <nb-card-header>
             Blockquotes
@@ -154,7 +154,7 @@
       </div>
     </div>
   </div>
-  <div class="col-md-3">
+  <div class="col-lg-12 col-xl-4">
     <nb-card size="xxlarge">
       <nb-card-header>
         Font Colors
@@ -225,9 +225,9 @@
 
 
 <div class="row">
-  <div class="col-md-9">
+  <div class="col-lg-12 col-xl-8">
     <div class="row">
-      <div class="col-md-7">
+      <div class="col-sm-12 col-md-6 col-xxl-7">
         <nb-card size="large">
           <nb-card-header>
             Alerts
@@ -254,7 +254,7 @@
           </nb-card-body>
         </nb-card>
       </div>
-      <div class="col-md-5">
+      <div class="col-sm-12 col-md-6 col-xxl-5">
         <nb-card size="large">
           <nb-card-header>
             Text Types
@@ -280,7 +280,7 @@
       </div>
     </div>
   </div>
-  <div class="col-md-3">
+  <div class="col-lg-12 col-xl-4">
     <nb-card size="large">
       <nb-card-header>
         Lists
diff --git a/src/app/pages/ui-features/typography/typography.component.scss b/src/app/pages/ui-features/typography/typography.component.scss
index d3f8133b..82bd8138 100644
--- a/src/app/pages/ui-features/typography/typography.component.scss
+++ b/src/app/pages/ui-features/typography/typography.component.scss
@@ -29,6 +29,7 @@
 
   .header {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     padding-bottom: 1rem;
     margin-bottom: 1rem;
@@ -42,7 +43,7 @@
     }
 
     div:first-child {
-      flex-basis: 50%;
+      flex: 2;
       line-height: 1;
       align-items: flex-end;