diff --git a/lib/plugins/crux/index.js b/lib/plugins/crux/index.js
index ab494b6a3..e7e0e5463 100644
--- a/lib/plugins/crux/index.js
+++ b/lib/plugins/crux/index.js
@@ -14,13 +14,17 @@ const DEFAULT_METRICS_PAGESUMMARY = [
   'loadingExperience.*.FIRST_CONTENTFUL_PAINT_MS.*',
   'loadingExperience.*.FIRST_INPUT_DELAY_MS.*',
   'loadingExperience.*.LARGEST_CONTENTFUL_PAINT_MS.*',
-  'loadingExperience.*.CUMULATIVE_LAYOUT_SHIFT_SCORE.*'
+  'loadingExperience.*.CUMULATIVE_LAYOUT_SHIFT_SCORE.*',
+  'loadingExperience.*.TIME_TO_FIRST_BYTE_MS.*',
+  'loadingExperience.*.INTERACTION_TO_NEXT_PAINT_MS.*'
 ];
 const DEFAULT_METRICS_SUMMARY = [
   'originLoadingExperience.*.FIRST_CONTENTFUL_PAINT_MS.*',
   'originLoadingExperience.*.FIRST_INPUT_DELAY_MS.*',
   'originLoadingExperience.*.LARGEST_CONTENTFUL_PAINT_MS.*',
-  'originLoadingExperience.*.CUMULATIVE_LAYOUT_SHIFT_SCORE.*'
+  'originLoadingExperience.*.CUMULATIVE_LAYOUT_SHIFT_SCORE.*',
+  'originLoadingExperience.*.TIME_TO_FIRST_BYTE_MS.*',
+  'originLoadingExperience.*.INTERACTION_TO_NEXT_PAINT_MS.*'
 ];
 
 function wait(ms) {
diff --git a/lib/plugins/crux/pug/index.pug b/lib/plugins/crux/pug/index.pug
index 86dc935b5..9a9682802 100644
--- a/lib/plugins/crux/pug/index.pug
+++ b/lib/plugins/crux/pug/index.pug
@@ -11,7 +11,7 @@ mixin sizeCell(title, size)
   td.number(data-title=title, data-value= size)= h.size.format(size)
 
 - const crux = pageInfo.data.crux.pageSummary;
-- const metrics = {first_contentful_paint:'First Contentful Paint (FCP)', largest_contentful_paint: 'Largest Contentful Paint (LCP)', first_input_delay:'First Input Delay (FID)', cumulative_layout_shift: 'Cumulative Layout Shift (CLS)'}; 
+- const metrics = {first_contentful_paint:'First Contentful Paint (FCP)', largest_contentful_paint: 'Largest Contentful Paint (LCP)', first_input_delay:'First Input Delay (FID)', cumulative_layout_shift: 'Cumulative Layout Shift (CLS)',experimental_interaction_to_next_paint: 'Interaction to next paint (INP)', experimental_time_to_first_byte: 'Time to first byte (TTFB)'}; 
 - const experiences = ['loadingExperience','originLoadingExperience'];
 
 small 
@@ -63,6 +63,10 @@ each experience in experiences
 
         - let CLSs = [Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[2].density`, 0)*100).toFixed(2)];
 
+        - let TTFBs = [Number(get(crux, `${cruxus}.experimental_time_to_first_byte.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_time_to_first_byte.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_time_to_first_byte.histogram[2].density`, 0)*100).toFixed(2)];
+
+        - let ITNPs = [Number(get(crux, `${cruxus}.experimental_interaction_to_next_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_interaction_to_next_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_interaction_to_next_paint.histogram[2].density`, 0)*100).toFixed(2)];
+
         script(type='text/javascript').
           document.addEventListener("DOMContentLoaded", function() {   
 
@@ -86,6 +90,8 @@ each experience in experiences
                 drawPie('#chartLCP#{experience + formFactor}', [#{LCPs}], ['Fast: #{LCPs[0]}%', 'Moderate #{LCPs[1]}%', 'Slow: #{LCPs[2]}%']);
                 drawPie('#chartFID#{experience + formFactor}', [#{FIDs}], ['Fast: #{FIDs[0]}%', 'Moderate #{FIDs[1]}%', 'Slow: #{FIDs[2]}%']);
                 drawPie('#chartCLS#{experience + formFactor}', [#{CLSs}], ['Good: #{CLSs[0]}%', 'Need improvement: #{CLSs[1]}%', 'Poor: #{CLSs[2]}%']);
+                drawPie('#chartTTFB#{experience + formFactor}', [#{TTFBs}], ['Good: #{TTFBs[0]}%', 'Need improvement: #{TTFBs[1]}%', 'Poor: #{TTFBs[2]}%']);
+                drawPie('#chartITNP#{experience + formFactor}', [#{ITNPs}], ['Good: #{ITNPs[0]}%', 'Need improvement: #{ITNPs[1]}%', 'Poor: #{ITNPs[2]}%']);
 
 
           });
@@ -95,7 +101,6 @@ each experience in experiences
               th #{metrics['first_contentful_paint']}
               th #{metrics['largest_contentful_paint']}
               th #{metrics['first_input_delay']} 
-              th #{metrics['cumulative_layout_shift']}
             tr 
               td(data-title=metrics['first_contentful_paint'])  
                 .ct-chart(id='chartFCP' + experience + formFactor)
@@ -103,5 +108,14 @@ each experience in experiences
                 .ct-chart(id='chartLCP' + experience + formFactor)
               td(data-title=metrics['first_input_delay']) 
                 .ct-chart(id='chartFID' + experience + formFactor)
+            tr
+              th #{metrics['cumulative_layout_shift']}
+              th #{metrics['experimental_interaction_to_next_paint']}
+              th #{metrics['experimental_time_to_first_byte']}
+            tr 
               td(data-title=metrics['cumulative_layout_shift']) 
-                .ct-chart(id='chartCLS' + experience + formFactor) 
\ No newline at end of file
+                .ct-chart(id='chartCLS' + experience + formFactor)
+              td(data-title=metrics['experimental_interaction_to_next_paint']) 
+                .ct-chart(id='chartITNP' + experience + formFactor) 
+              td(data-title=metrics['experimental_time_to_first_byte']) 
+                .ct-chart(id='chartTTFB' + experience + formFactor) 
\ No newline at end of file
diff --git a/lib/plugins/crux/repackage.js b/lib/plugins/crux/repackage.js
index 92b8e4b4f..01b94aa67 100644
--- a/lib/plugins/crux/repackage.js
+++ b/lib/plugins/crux/repackage.js
@@ -46,6 +46,35 @@ module.exports = function (cruxResult) {
         .density
     };
   }
+
+  if (cruxResult.record.metrics.experimental_interaction_to_next_paint) {
+    result.INTERACTION_TO_NEXT_PAINT_MS = {
+      p75: cruxResult.record.metrics.experimental_interaction_to_next_paint
+        .percentiles.p75,
+      fast: cruxResult.record.metrics.experimental_interaction_to_next_paint
+        .histogram[0].density,
+      moderate:
+        cruxResult.record.metrics.experimental_interaction_to_next_paint
+          .histogram[1].density,
+      slow: cruxResult.record.metrics.experimental_interaction_to_next_paint
+        .histogram[2].density
+    };
+  }
+
+  if (cruxResult.record.metrics.experimental_time_to_first_byte) {
+    result.TIME_TO_FIRST_BYTE_MS = {
+      p75: cruxResult.record.metrics.experimental_time_to_first_byte.percentiles
+        .p75,
+      fast: cruxResult.record.metrics.experimental_time_to_first_byte
+        .histogram[0].density,
+      moderate:
+        cruxResult.record.metrics.experimental_time_to_first_byte.histogram[1]
+          .density,
+      slow: cruxResult.record.metrics.experimental_time_to_first_byte
+        .histogram[2].density
+    };
+  }
+
   result.data = cruxResult;
   return result;
 };