diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPercentage/CustomMetricPercentage.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPercentage/CustomMetricPercentage.tsx
index ed4f3cc85..177dccf9a 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPercentage/CustomMetricPercentage.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPercentage/CustomMetricPercentage.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { numberWithCommas } from 'App/utils';
 
 interface Props {
     data: any;
@@ -10,7 +11,7 @@ function CustomMetriPercentage(props: Props) {
     const { data = {} } = props;
     return (
         <div className="flex flex-col items-center justify-center" style={{ height: '240px'}}>
-            <div className="text-6xl">{data.count}</div>
+            <div className="text-6xl">{numberWithCommas(data.count)}</div>
             <div className="text-lg mt-6">{`${data.previousCount} ( ${data.countProgress}% )`}</div>
             <div className="color-gray-medium">from previous period.</div>
         </div>
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx
index 219f4cc98..e48dd20dd 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx
@@ -4,6 +4,7 @@ import { PieChart, Pie, Cell } from 'recharts';
 import { Styles } from '../../common';
 import { NoContent } from 'UI';
 import { filtersMap } from 'Types/filter/newFilter';
+import { numberWithCommas } from 'App/utils';
 interface Props {
     metric: any,
     data: any;
@@ -107,7 +108,7 @@ function CustomMetricPieChart(props: Props) {
                                       dominantBaseline="central"
                                       fill='#666'
                                   >
-                                      {name || 'Unidentified'} {value}
+                                      {name || 'Unidentified'} {numberWithCommas(value)}
                                   </text>
                               );
                           }}
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
index 6a9481077..a43a35fc8 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
@@ -4,6 +4,7 @@ import { List } from 'immutable';
 import { filtersMap } from 'Types/filter/newFilter';
 import { NoContent } from 'UI';
 import { tableColumnName } from 'App/constants/filterOptions';
+import { numberWithCommas } from 'App/utils';
 
 const getColumns = (metric) => {
     return [
@@ -16,7 +17,7 @@ const getColumns = (metric) => {
         {
           key: 'sessionCount',
           title: 'Sessions',
-          toText: sessions => sessions,
+          toText: sessions => numberWithCommas(sessions),
           width: '30%',
         },
     ]
diff --git a/frontend/app/components/Dashboard/Widgets/common/Table.js b/frontend/app/components/Dashboard/Widgets/common/Table.js
index e1b6a503c..e3d88502f 100644
--- a/frontend/app/components/Dashboard/Widgets/common/Table.js
+++ b/frontend/app/components/Dashboard/Widgets/common/Table.js
@@ -33,7 +33,7 @@ export default class Table extends React.PureComponent {
           }
         </div>
         <div className={ cn(stl.content, "thin-scrollbar") } style={{ maxHeight: maxHeight + 'px'}}>
-          { rows.take(showAll ? 10 : (small ? 3 : 5)).map(row => (
+          { rows.take(showAll ? rows.size : (small ? 3 : 5)).map(row => (
             <div
               className={ cn(rowClass, stl.row, { [stl.small]: small, 'cursor-pointer' : !!onRowClick}) }
               key={ row.key }
diff --git a/frontend/app/utils.js b/frontend/app/utils.js
index 4c1a0c607..ca7c19b4f 100644
--- a/frontend/app/utils.js
+++ b/frontend/app/utils.js
@@ -33,7 +33,7 @@ export const getUniqueFilter = keys =>
     !list.some((item2, j) => j < i &&
       keys.every(key => item[ key ] === item2[ key ] && item[ key ] !== undefined));
 
-export const numberWithCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+export const numberWithCommas = (x) => x ? x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : 0;
 
 export const numberCompact = (x) =>  x >= 1000 ? x / 1000 + 'k': x;