diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
index b368bcf9b..aedaee57e 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
@@ -35,6 +35,7 @@ import SpeedIndexByLocationExample
   from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SpeedIndexByLocationExample';
 import HeatmapsExample from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/HeatmapsExample';
 import ByReferrer from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByRferrer';
+import ByFetch from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByFecth';
 
 export const CARD_CATEGORY = {
   PRODUCT_ANALYTICS: 'product-analytics',
@@ -427,6 +428,15 @@ export const CARD_LIST: CardType[] = [
     example: ByReferrer
   },
 
+  {
+    title: 'Sessions by Fetch',
+    key: FilterKey.FETCH,
+    cardType: TABLE,
+    metricOf: FilterKey.FETCH,
+    category: CARD_CATEGORIES[2].key,
+    example: ByFetch
+  },
+
   // Errors Tracking
   {
     title: 'Sessions Impacted by JS Errors',
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByFecth.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByFecth.tsx
new file mode 100644
index 000000000..e46378bd9
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByFecth.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import ByComponent from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/Component';
+import { Icon } from 'UI';
+
+function ByFetch(props: any) {
+  const rows = [
+    {
+      label: 'https://www.google.com',
+      ptitle: 'Dresses',
+      value: '500',
+      progress: 75,
+      icon: <Icon name='link-45deg' size={24} />
+    },
+    {
+      label: 'https://www.reddit.com',
+      ptitle: 'Search: summer dresses',
+      value: '306',
+      progress: 60,
+      icon: <Icon name='link-45deg' size={24} />
+    },
+    {
+      label: 'https://www.company.com/account/orders',
+      ptitle: 'Account: Orders',
+      value: '198',
+      progress: 30,
+      icon: <Icon name='link-45deg' size={24} />
+    },
+    {
+      label: 'android-app://com.slack/',
+      ptitle: 'Checkout: Confirmation',
+      value: '47',
+      progress: 15,
+      icon: <Icon name='link-45deg' size={24} />
+    }
+  ];
+
+  const lineWidth = 240;
+  return (
+    <ByComponent
+      {...props}
+      rows={rows}
+      lineWidth={lineWidth}
+    />
+  );
+}
+
+export default ByFetch;
diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts
index b8929ac43..1d0583c4b 100644
--- a/frontend/app/mstore/types/widget.ts
+++ b/frontend/app/mstore/types/widget.ts
@@ -310,8 +310,9 @@ x                .map(
         } else if (this.metricType === FUNNEL) {
             _data.funnel = new Funnel().fromJSON(_data);
         } else if (this.metricType === TABLE) {
+            const total = data[0]['total'];
             const count = data[0]['count'];
-            _data[0]['values'] = data[0]['values'].map((s: any) => new SessionsByRow().fromJson(s, count, this.metricOf));
+            _data[0]['values'] = data[0]['values'].map((s: any) => new SessionsByRow().fromJson(s, total, this.metricOf));
         } else {
             if (data.hasOwnProperty('chart')) {
                 _data['value'] = data.value;