diff --git a/frontend/app/components/Dashboard/DashboardHeader/DashboardHeader.js b/frontend/app/components/Dashboard/DashboardHeader/DashboardHeader.js
deleted file mode 100644
index cc8792848..000000000
--- a/frontend/app/components/Dashboard/DashboardHeader/DashboardHeader.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react'
-import { LAST_24_HOURS, LAST_30_MINUTES, LAST_7_DAYS, LAST_30_DAYS, CUSTOM_RANGE } from 'Types/app/period';
-import { ALL, DESKTOP, MOBILE } from 'Types/app/platform';
-import { connect } from 'react-redux';
-import { setPeriod, setPlatform } from 'Duck/dashboard';
-import cn from 'classnames';
-import styles from './DashboardHeader.module.css';
-import Filters from '../Filters/Filters';
-
-export const PERIOD_OPTIONS = [
-  { text: 'Past 30 Min', value: LAST_30_MINUTES },
-  { text: 'Past 24 Hours', value: LAST_24_HOURS },
-  { text: 'Past 7 Days', value: LAST_7_DAYS },
-  { text: 'Past 30 Days', value: LAST_30_DAYS },
-  { text: 'Choose Date', value: CUSTOM_RANGE },
-];
-
-const PLATFORM_OPTIONS = [
-  { text: 'All Platforms', value: ALL },
-  { text: 'Desktop', value: DESKTOP },
-  { text: 'Mobile', value: MOBILE }
-];
-
-const DashboardHeader = props => {
-  return (
-    <div className={ cn(styles.header, 'w-full') }>
-      <Filters />
-      
-      <div className="flex items-center hidden">        
-      </div>
-    </div>
-  )
-}
-
-export default connect(state => ({
-  period: state.getIn([ 'dashboard', 'period' ]),
-  platform: state.getIn([ 'dashboard', 'platform' ]),
-  currentProjectId: state.getIn([ 'site', 'siteId' ]),
-  sites: state.getIn([ 'site', 'list' ]),
-}), { setPeriod, setPlatform })(DashboardHeader)
diff --git a/frontend/app/components/Dashboard/DashboardHeader/DashboardHeader.module.css b/frontend/app/components/Dashboard/DashboardHeader/DashboardHeader.module.css
deleted file mode 100644
index bef1bd7f1..000000000
--- a/frontend/app/components/Dashboard/DashboardHeader/DashboardHeader.module.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.dropdown {
-  display: 'flex' !important;
-  align-items: 'center';
-  padding: 5px 8px;
-  border-radius: 3px;
-  transition: all 0.3s;
-  font-weight: 500;
-
-  &:hover {
-    background-color: #DDDDDD;
-    transition: all 0.2s;
-  }
-}
-
-.dateInput {  
-  display: flex;
-  align-items: center;
-  padding: 4px;
-  font-weight: 500;
-  font-size: 14px;
-  color: $gray-darkest;
-
-  &:hover {
-    background-color: lightgray;
-    border-radius: 3px;
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/DashboardHeader/index.js b/frontend/app/components/Dashboard/DashboardHeader/index.js
deleted file mode 100644
index 924f0ec2c..000000000
--- a/frontend/app/components/Dashboard/DashboardHeader/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as DashboardHeader } from './DashboardHeader';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/ApplicationActivity.js b/frontend/app/components/Dashboard/Widgets/ApplicationActivity.js
deleted file mode 100644
index d091e0a66..000000000
--- a/frontend/app/components/Dashboard/Widgets/ApplicationActivity.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { Loader } from 'UI';
-import { msToSec } from 'App/date';
-import { CountBadge, Divider, widgetHOC } from './common';
-
-@widgetHOC('applicationActivity')
-export default class ApplicationActivity extends React.PureComponent {
-  render() {
-    const { data, loading } = this.props;
-    return (
-      <div className="flex-1 flex-shrink-0  flex justify-around items-center">
-        <Loader loading={ loading } size="small">
-          <CountBadge
-            title="Avg. Page Load Time"
-            unit="s"
-            icon="window"
-            count={ msToSec(data.avgPageLoad) }
-            change={ data.avgPageLoadProgress }
-            oppositeColors
-          />
-          <Divider />
-          <CountBadge
-            title="Avg. Image Load Time"
-            unit="ms"
-            icon="eye"
-            count={ data.avgImgLoad }
-            change={ data.avgImgLoadProgress }
-            oppositeColors
-          />
-          <Divider />
-          <CountBadge
-            title="Avg. Request Load"
-            unit="ms"
-            icon="clock"
-            count={ data.avgReqLoad }
-            change={ data.avgReqLoadProgress }
-            oppositeColors
-          />
-        </Loader>
-      </div>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.js b/frontend/app/components/Dashboard/Widgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.js
deleted file mode 100644
index 99ffc931b..000000000
--- a/frontend/app/components/Dashboard/Widgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, Styles } from '../common';
-import { 
-  BarChart, Bar, CartesianGrid, Legend, ResponsiveContainer, 
-  XAxis, YAxis, Tooltip
-} from 'recharts';
-
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-
-const customParams = rangeName => {
-  const params = { density: 28 }
-
-  if (rangeName === LAST_24_HOURS) params.density = 21
-  if (rangeName === LAST_30_MINUTES) params.density = 28
-  if (rangeName === YESTERDAY) params.density = 28
-  if (rangeName === LAST_7_DAYS) params.density = 28
-  
-  return params
-}
-
-@widgetHOC('resourcesCountByType', { customParams })
-export default class BreakdownOfLoadedResources extends React.PureComponent {
-  render() {
-    const { data, loading, period, compare = false, showSync = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const params = customParams(period.rangeName)
-
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          title="No recordings found"
-          show={ data.chart.length === 0 }
-        >
-          <ResponsiveContainer height={ 240 } width="100%">
-            <BarChart
-              data={data.chart}
-              margin={Styles.chartMargins}
-              syncId={ showSync ? "resourcesCountByType" : undefined }
-            >
-              <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-              <XAxis {...Styles.xaxis} dataKey="time" interval={params.density/7} />
-              <YAxis
-                {...Styles.yaxis}
-                allowDecimals={false}
-                label={{ ...Styles.axisLabelLeft, value: "Number of Resources" }}
-              />
-              <Legend />
-              <Tooltip {...Styles.tooltip} />
-              <Bar minPointSize={1} name="CSS" dataKey="stylesheet" stackId="a" fill={colors[0]} />
-              <Bar name="Images" dataKey="img" stackId="a" fill={colors[2]} />
-              <Bar name="Scripts" dataKey="script" stackId="a" fill={colors[3]} />
-            </BarChart>
-          </ResponsiveContainer>
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/BreakdownOfLoadedResources/index.js b/frontend/app/components/Dashboard/Widgets/BreakdownOfLoadedResources/index.js
deleted file mode 100644
index 6e2e706fb..000000000
--- a/frontend/app/components/Dashboard/Widgets/BreakdownOfLoadedResources/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './BreakdownOfLoadedResources';
diff --git a/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/BusiestTimeOfTheDay.js b/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/BusiestTimeOfTheDay.js
deleted file mode 100644
index 31deb2cba..000000000
--- a/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/BusiestTimeOfTheDay.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { Table, widgetHOC, domain } from '../common';
-import { 
-  Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis,
-  PieChart, Pie, Cell, Tooltip, ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area } from 'recharts';
-
-const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
-const RADIAN = Math.PI / 180;
-
-@widgetHOC('busiestTimeOfDay', { fitContent: true })
-export default class BusiestTimeOfTheDay extends React.PureComponent {
-  renderCustomizedLabel = ({
-    cx, cy, midAngle, innerRadius, outerRadius, percent, index,
-  }) => {
-    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-    const x = cx + radius * Math.cos(-midAngle * RADIAN);
-    const y = cy + radius * Math.sin(-midAngle * RADIAN);
-  
-    return (
-      <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
-        {`${(percent * 100).toFixed(0)}%`}
-      </text>
-    );
-  };
-
-  render() {
-    const { data, loading } = this.props;
-    return (
-      <Loader loading={ loading } size="small">
-          <ResponsiveContainer height={ 140 } width="100%">
-            <RadarChart outerRadius={50} width={180} height={180} data={data.toJS()}>
-              <PolarGrid />
-              <PolarAngleAxis dataKey="hour" tick={{ fill: '#3EAAAF', fontSize: 12 }}  />
-              <PolarRadiusAxis />
-              <Radar name="count" dataKey="count" stroke="#3EAAAF" fill="#3EAAAF" fillOpacity={0.6} />
-            </RadarChart> 
-            
-          </ResponsiveContainer>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/Chart.js b/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/Chart.js
deleted file mode 100644
index a66c2801d..000000000
--- a/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/Chart.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { AreaChart, Area } from 'recharts';
-
-const Chart = ({ data }) => {
-  return (
-    <AreaChart width={ 90 } height={ 30 } data={ data.chart } >
-      <Area type="monotone" dataKey="avgDuration" stroke="#3EAAAF" fill="#A8E0DA" fillOpacity={ 0.5 } />
-    </AreaChart>
-  );
-}
-
-Chart.displayName = 'Chart';
-
-export default Chart;
diff --git a/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/ImageInfo.js b/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/ImageInfo.js
deleted file mode 100644
index 28fd52a75..000000000
--- a/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/ImageInfo.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Tooltip, Icon } from 'UI';
-import styles from './imageInfo.module.css';
-
-const ImageInfo = ({ data }) => (
-  <div className={styles.name}>
-    <Tooltip
-      className={styles.Tooltip}
-      title={
-        <img
-          src={`//${data.url}`}
-          className={styles.imagePreview}
-          alt="One of the slowest images"
-        />
-      }
-    >
-      <div className={styles.imageWrapper}>
-        <Icon name="camera-alt" size="18" color="gray-light" />
-        <div className={styles.label}>{'Preview'}</div>
-      </div>
-    </Tooltip>
-    <Tooltip title={data.url}>
-      <span>{data.name}</span>
-    </Tooltip>
-  </div>
-);
-
-ImageInfo.displayName = 'ImageInfo';
-
-export default ImageInfo;
diff --git a/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/imageInfo.module.css b/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/imageInfo.module.css
deleted file mode 100644
index 69030a582..000000000
--- a/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/imageInfo.module.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.name {
-  display: flex;
-  align-items: center;
-
-  & > span {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap; 
-    max-width: 60%;
-  }
-}
-
-.imagePreview {
-  max-width: 200px;
-  max-height: 200px;
-}
-
-.imageWrapper {
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  width: 40px;
-  text-align: center;
-  margin-right: 10px;
-  & > span {
-    height: 16px;
-  }
-  & .label {
-    font-size: 9px;
-    color: $gray-light;
-  }
-}
-
-.popup {
-  background-color: #f5f5f5 !important;
-  &:before {
-    background-color: #f5f5f5 !important;
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/index.js b/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/index.js
deleted file mode 100644
index ce82e31a0..000000000
--- a/frontend/app/components/Dashboard/Widgets/BusiestTimeOfTheDay/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './BusiestTimeOfTheDay';
diff --git a/frontend/app/components/Dashboard/Widgets/CallWithErrors/CallWithErrors.js b/frontend/app/components/Dashboard/Widgets/CallWithErrors/CallWithErrors.js
deleted file mode 100644
index 4b3cadef6..000000000
--- a/frontend/app/components/Dashboard/Widgets/CallWithErrors/CallWithErrors.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { Table, widgetHOC } from '../common';
-import { getRE } from 'App/utils';
-import ImageInfo from './ImageInfo';
-import MethodType from './MethodType';
-import cn from 'classnames';
-import stl from './callWithErrors.module.css';
-
-const cols = [
-  {
-    key: 'method',
-    title: 'Method',
-    className: 'text-left',
-    Component: MethodType,
-    cellClass: 'ml-2',
-    width: '8%',
-  },
-  {
-    key: 'urlHostpath',
-    title: 'Path',
-    Component: ImageInfo,
-    width: '40%',
-  },
-  {
-    key: 'allRequests',
-    title: 'Requests',
-    className: 'text-left',
-    width: '15%',
-  },
-  {
-    key: '4xx',
-    title: '4xx',
-    className: 'text-left',
-    width: '15%',
-  },
-  {
-    key: '5xx',
-    title: '5xx',
-    className: 'text-left',
-    width: '15%',
-  }
-];
-
-@widgetHOC('callsErrors', { fitContent: true })
-export default class CallWithErrors extends React.PureComponent {
-  state = { search: ''}
-
-  test = (value = '', serach) => getRE(serach, 'i').test(value);
-
-  write = ({ target: { name, value } }) => {
-    this.setState({ [ name ]: value })
-  };
-
-  render() {
-    const { data: images, loading } = this.props;
-    const { search } = this.state;
-    const _data = search ? images.filter(i => this.test(i.urlHostpath, search)) : images;
-
-    return (
-      <Loader loading={ loading } size="small">
-        <div className={ cn(stl.topActions, 'py-3 flex text-right')}>
-          <input disabled={images.size === 0} className={stl.searchField} name="search" placeholder="Filter by Path" onChange={this.write} />
-        </div>
-        <NoContent
-          size="small"
-          title="No recordings found"
-          show={ images.size === 0 }
-        >
-          <Table
-            cols={ cols }
-            rows={ _data }
-            isTemplate={this.props.isTemplate}
-          />
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/CallWithErrors/Chart.js b/frontend/app/components/Dashboard/Widgets/CallWithErrors/Chart.js
deleted file mode 100644
index a66c2801d..000000000
--- a/frontend/app/components/Dashboard/Widgets/CallWithErrors/Chart.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { AreaChart, Area } from 'recharts';
-
-const Chart = ({ data }) => {
-  return (
-    <AreaChart width={ 90 } height={ 30 } data={ data.chart } >
-      <Area type="monotone" dataKey="avgDuration" stroke="#3EAAAF" fill="#A8E0DA" fillOpacity={ 0.5 } />
-    </AreaChart>
-  );
-}
-
-Chart.displayName = 'Chart';
-
-export default Chart;
diff --git a/frontend/app/components/Dashboard/Widgets/CallWithErrors/ImageInfo.js b/frontend/app/components/Dashboard/Widgets/CallWithErrors/ImageInfo.js
deleted file mode 100644
index 80a2010b9..000000000
--- a/frontend/app/components/Dashboard/Widgets/CallWithErrors/ImageInfo.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { TextEllipsis } from 'UI';
-import styles from './imageInfo.module.css';
-
-const ImageInfo = ({ data }) => (
-  <div className={ styles.name }>
-    <TextEllipsis text={data.urlHostpath} />
-  </div>
-);
-
-ImageInfo.displayName = 'ImageInfo';
-
-export default ImageInfo;
diff --git a/frontend/app/components/Dashboard/Widgets/CallWithErrors/MethodType.js b/frontend/app/components/Dashboard/Widgets/CallWithErrors/MethodType.js
deleted file mode 100644
index ba370b481..000000000
--- a/frontend/app/components/Dashboard/Widgets/CallWithErrors/MethodType.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import { Label } from 'UI';
-
-const MethodType = ({ data }) => {
-  return (
-    <Label className="ml-1">{data.method}</Label>
-  )
-}
-
-export default MethodType
diff --git a/frontend/app/components/Dashboard/Widgets/CallWithErrors/callWithErrors.module.css b/frontend/app/components/Dashboard/Widgets/CallWithErrors/callWithErrors.module.css
deleted file mode 100644
index bc37a3991..000000000
--- a/frontend/app/components/Dashboard/Widgets/CallWithErrors/callWithErrors.module.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.topActions {
-  position: absolute;
-  top: -4px;
-  right: 50px;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.searchField {
-  padding: 4px 5px;
-  border-bottom: dotted thin $gray-light;
-  border-radius: 3px;
-  &:focus,
-  &:active {
-    border: solid thin transparent !important;
-    box-shadow: none;
-    background-color: $gray-light;
-  }
-  &:hover {
-    border: solid thin $gray-light !important;
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CallWithErrors/imageInfo.module.css b/frontend/app/components/Dashboard/Widgets/CallWithErrors/imageInfo.module.css
deleted file mode 100644
index 69030a582..000000000
--- a/frontend/app/components/Dashboard/Widgets/CallWithErrors/imageInfo.module.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.name {
-  display: flex;
-  align-items: center;
-
-  & > span {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap; 
-    max-width: 60%;
-  }
-}
-
-.imagePreview {
-  max-width: 200px;
-  max-height: 200px;
-}
-
-.imageWrapper {
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  width: 40px;
-  text-align: center;
-  margin-right: 10px;
-  & > span {
-    height: 16px;
-  }
-  & .label {
-    font-size: 9px;
-    color: $gray-light;
-  }
-}
-
-.popup {
-  background-color: #f5f5f5 !important;
-  &:before {
-    background-color: #f5f5f5 !important;
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CallWithErrors/index.js b/frontend/app/components/Dashboard/Widgets/CallWithErrors/index.js
deleted file mode 100644
index 6b0db1bd0..000000000
--- a/frontend/app/components/Dashboard/Widgets/CallWithErrors/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './CallWithErrors';
diff --git a/frontend/app/components/Dashboard/Widgets/CallsErrors4xx/CallsErrors4xx.js b/frontend/app/components/Dashboard/Widgets/CallsErrors4xx/CallsErrors4xx.js
deleted file mode 100644
index d387b53cc..000000000
--- a/frontend/app/components/Dashboard/Widgets/CallsErrors4xx/CallsErrors4xx.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, Styles } from '../common';
-import { ResponsiveContainer, XAxis, YAxis, CartesianGrid, 
-  LineChart, Line, Legend, Tooltip
-} from 'recharts';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-
-const customParams = rangeName => {
-  const params = { density: 70 }
-
-  if (rangeName === LAST_24_HOURS) params.density = 70
-  if (rangeName === LAST_30_MINUTES) params.density = 70
-  if (rangeName === YESTERDAY) params.density = 70
-  if (rangeName === LAST_7_DAYS) params.density = 70
-  
-  return params
-}
-
-@widgetHOC('domainsErrors_4xx', { customParams })
-export default class CallsErrors4xx extends React.PureComponent {
-  render() {
-    const { data, loading, period, compare = false, showSync = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const params = customParams(period.rangeName)
-  
-    const namesMap = data.chart
-      .map(i => Object.keys(i))
-      .flat()
-      .filter(i => i !== 'time' && i !== 'timestamp')
-      .reduce(
-        (unique, item) => (unique.includes(item) ? unique : [...unique, item]),
-        []
-      );
-
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          title="No recordings found"
-          show={ data.chart.length === 0 }
-        >
-          <ResponsiveContainer height={ 240 } width="100%">
-            <LineChart
-              data={ data.chart }
-              margin={Styles.chartMargins}
-              syncId={ showSync ? "domainsErrors_4xx" : undefined }
-            >
-              <defs>
-                <linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor={colors[4]} stopOpacity={ 0.9 } />
-                  <stop offset="95%" stopColor={colors[4]} stopOpacity={ 0.2 } />
-                </linearGradient>
-              </defs>
-              <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-              <XAxis
-                {...Styles.xaxis}
-                dataKey="time"
-                interval={params.density/7}
-              />
-              <YAxis 
-                {...Styles.yaxis}
-                allowDecimals={false}
-                label={{  
-                  ...Styles.axisLabelLeft,
-                  value: "Number of Errors"
-                }}
-              />
-              <Legend />
-              <Tooltip {...Styles.tooltip} />
-              { namesMap.map((key, index) => (
-                <Line key={key} name={key} type="monotone" dataKey={key} stroke={colors[index]} fillOpacity={ 1 } strokeWidth={ 2 } strokeOpacity={ 0.8 } fill="url(#colorCount)" dot={false} />
-              ))}
-            </LineChart>
-          </ResponsiveContainer>
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/CallsErrors4xx/index.js b/frontend/app/components/Dashboard/Widgets/CallsErrors4xx/index.js
deleted file mode 100644
index 78fa75b53..000000000
--- a/frontend/app/components/Dashboard/Widgets/CallsErrors4xx/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './CallsErrors4xx';
diff --git a/frontend/app/components/Dashboard/Widgets/CallsErrors5xx/CallsErrors5xx.js b/frontend/app/components/Dashboard/Widgets/CallsErrors5xx/CallsErrors5xx.js
deleted file mode 100644
index 3c655da5f..000000000
--- a/frontend/app/components/Dashboard/Widgets/CallsErrors5xx/CallsErrors5xx.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, Styles } from '../common';
-import { ResponsiveContainer, XAxis, YAxis, CartesianGrid, 
-  LineChart, Line, Legend, Tooltip
-} from 'recharts';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-
-const customParams = rangeName => {
-  const params = { density: 70 }
-
-  if (rangeName === LAST_24_HOURS) params.density = 70
-  if (rangeName === LAST_30_MINUTES) params.density = 70
-  if (rangeName === YESTERDAY) params.density = 70
-  if (rangeName === LAST_7_DAYS) params.density = 70
-  
-  return params
-}
-
-@widgetHOC('domainsErrors_5xx', { customParams })
-export default class CallsErrors5xx extends React.PureComponent {
-  render() {
-    const { data, loading, period, compare = false, showSync = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const params = customParams(period.rangeName)
-  
-    const namesMap = data.chart
-      .map(i => Object.keys(i))
-      .flat()
-      .filter(i => i !== 'time' && i !== 'timestamp')
-      .reduce(
-        (unique, item) => (unique.includes(item) ? unique : [...unique, item]),
-        []
-      );
-
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          title="No recordings found"
-          show={ data.chart.length === 0 }
-        >
-          <ResponsiveContainer height={ 240 } width="100%">
-            <LineChart
-              data={ data.chart }
-              margin={Styles.chartMargins}
-              syncId={ showSync ? "domainsErrors_5xx" : undefined }
-            >              
-              <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-              <XAxis
-                {...Styles.xaxis}
-                dataKey="time"
-                interval={params.density/7}
-              />
-              <YAxis 
-                {...Styles.yaxis}
-                allowDecimals={false}
-                label={{  
-                  ...Styles.axisLabelLeft,
-                  value: "Number of Errors"
-                }}
-              />
-              <Legend />
-              <Tooltip {...Styles.tooltip} />
-              { namesMap.map((key, index) => (
-                <Line
-                  key={key}
-                  name={key}
-                  type="monotone"
-                  dataKey={key}
-                  stroke={colors[index]}
-                  fillOpacity={ 1 }
-                  strokeWidth={ 2 }
-                  strokeOpacity={ 0.8 }
-                  // fill="url(#colorCount)"
-                  dot={false}
-                />
-              ))}
-            </LineChart>
-          </ResponsiveContainer>
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/CallsErrors5xx/index.js b/frontend/app/components/Dashboard/Widgets/CallsErrors5xx/index.js
deleted file mode 100644
index 61b9900d7..000000000
--- a/frontend/app/components/Dashboard/Widgets/CallsErrors5xx/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './CallsErrors5xx';
diff --git a/frontend/app/components/Dashboard/Widgets/CpuLoad/CpuLoad.js b/frontend/app/components/Dashboard/Widgets/CpuLoad/CpuLoad.js
deleted file mode 100644
index ee448dac2..000000000
--- a/frontend/app/components/Dashboard/Widgets/CpuLoad/CpuLoad.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, Styles, AvgLabel } from '../common';
-import { ResponsiveContainer, XAxis, YAxis, CartesianGrid, AreaChart, Area, Tooltip } from 'recharts';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-
-const customParams = rangeName => {
-  const params = { density: 70 }
-
-  if (rangeName === LAST_24_HOURS) params.density = 70
-  if (rangeName === LAST_30_MINUTES) params.density = 70
-  if (rangeName === YESTERDAY) params.density = 70
-  if (rangeName === LAST_7_DAYS) params.density = 70
-  
-  return params
-}
-
-@widgetHOC('cpu', { customParams })
-export default class CpuLoad extends React.PureComponent {
-  render() {
-    const { data, loading, period, compare = false, showSync = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const params = customParams(period.rangeName)
-    const gradientDef = Styles.gradientDef();
-
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          title="No recordings found"
-          show={ data.chart.length === 0 }
-        >
-          <div className="flex items-center justify-end mb-3">
-            <AvgLabel text="Avg" unit="%" className="ml-3" count={data.avgCpu} />
-          </div>
-          <ResponsiveContainer height={ 207 } width="100%">
-            <AreaChart
-              data={ data.chart }
-              margin={ Styles.chartMargins }
-              syncId={ showSync ? "cpu" : undefined }
-            >
-              {gradientDef}
-              <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-              <XAxis {...Styles.xaxis} dataKey="time" interval={params.density/7} />
-              <YAxis
-                {...Styles.yaxis}
-                allowDecimals={false}
-                tickFormatter={val => Styles.tickFormatter(val)}
-                label={{ ...Styles.axisLabelLeft, value: "CPU Load (%)" }}
-              />
-              <Tooltip {...Styles.tooltip} />
-              <Area
-                name="Avg"
-                type="monotone"
-                unit="%"
-                dataKey="avgCpu"
-                stroke={colors[0]}
-                fillOpacity={ 1 }
-                strokeWidth={ 2 }
-                strokeOpacity={ 0.8 }
-                fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
-              />
-            </AreaChart>
-          </ResponsiveContainer>
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/CpuLoad/index.js b/frontend/app/components/Dashboard/Widgets/CpuLoad/index.js
deleted file mode 100644
index 84bd7bc61..000000000
--- a/frontend/app/components/Dashboard/Widgets/CpuLoad/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './CpuLoad';
diff --git a/frontend/app/components/Dashboard/Widgets/Crashes/Crashes.js b/frontend/app/components/Dashboard/Widgets/Crashes/Crashes.js
deleted file mode 100644
index 576c9c13f..000000000
--- a/frontend/app/components/Dashboard/Widgets/Crashes/Crashes.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, Styles } from '../common';
-import { 
-  AreaChart, Area, ResponsiveContainer, 
-  XAxis, YAxis, CartesianGrid, Tooltip
-} from 'recharts';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-
-const customParams = rangeName => {
-  const params = { density: 70 }
-
-  if (rangeName === LAST_24_HOURS) params.density = 70
-  if (rangeName === LAST_30_MINUTES) params.density = 70
-  if (rangeName === YESTERDAY) params.density = 70
-  if (rangeName === LAST_7_DAYS) params.density = 70
-  
-  return params
-}
-
-@widgetHOC('crashes', { customParams })
-export default class Crashes extends React.PureComponent {
-  render() {
-    const { data, loading, period, compare = false, showSync = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const params = customParams(period.rangeName)
-    const gradientDef = Styles.gradientDef();
-
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          title="No recordings found"
-          show={ data.chart.length === 0 }
-        >
-          <ResponsiveContainer height={ 240 } width="100%">
-            <AreaChart
-              data={ data.chart }
-              margin={ Styles.chartMargins }
-              syncId={ showSync ? "crashes" : undefined }
-            >
-              {gradientDef}
-              <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-              <XAxis {...Styles.xaxis} dataKey="time" interval={(params.density/7)} />
-              <YAxis
-                {...Styles.yaxis}
-                allowDecimals={false}
-                tickFormatter={val => Styles.tickFormatter(val)}
-                label={{ ...Styles.axisLabelLeft, value: "Number of Crashes" }}
-              />
-              <Tooltip {...Styles.tooltip} />
-              <Area
-                name="Crashes"
-                type="monotone"
-                dataKey="count"
-                stroke={colors[0]}
-                fillOpacity={ 1 }
-                strokeWidth={ 2 }
-                strokeOpacity={ 0.8 }
-                fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
-              />
-            </AreaChart>
-          </ResponsiveContainer>
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/Crashes/index.js b/frontend/app/components/Dashboard/Widgets/Crashes/index.js
deleted file mode 100644
index cb869ef09..000000000
--- a/frontend/app/components/Dashboard/Widgets/Crashes/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Crashes';
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.module.css b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.module.css
deleted file mode 100644
index 1d1ef3ee4..000000000
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.wrapper {
-  background-color: white;
-  /* border: solid thin $gray-medium; */
-  border-radius: 3px;
-  padding: 10px;
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
deleted file mode 100644
index 71820c502..000000000
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-import React, { useState } from 'react';
-import { connect } from 'react-redux';
-import { Loader, NoContent, Icon, Tooltip } from 'UI';
-import { Styles } from '../../common';
-import { ResponsiveContainer } from 'recharts';
-import stl from './CustomMetricWidget.module.css';
-import { getStartAndEndTimestampsByDensity } from 'Types/dashboard/helper';
-import {
-  init,
-  edit,
-  remove,
-  setActiveWidget,
-  updateActiveState,
-} from 'Duck/customMetrics';
-import { setShowAlerts } from 'Duck/dashboard';
-import CustomMetriLineChart from '../CustomMetriLineChart';
-import CustomMetricPieChart from '../CustomMetricPieChart';
-import CustomMetricPercentage from '../CustomMetricPercentage';
-import CustomMetricTable from '../CustomMetricTable';
-import { NO_METRIC_DATA } from 'App/constants/messages';
-
-const customParams = (rangeName) => {
-  const params = { density: 70 };
-
-  // if (rangeName === LAST_24_HOURS) params.density = 70
-  // if (rangeName === LAST_30_MINUTES) params.density = 70
-  // if (rangeName === YESTERDAY) params.density = 70
-  // if (rangeName === LAST_7_DAYS) params.density = 70
-
-  return params;
-};
-
-interface Props {
-  metric: any;
-  // loading?: boolean;
-  data?: any;
-  compare?: boolean;
-  period?: any;
-  onClickEdit: (e) => void;
-  remove: (id) => void;
-  setShowAlerts: (showAlerts) => void;
-  setAlertMetricId: (id) => void;
-  onAlertClick: (e) => void;
-  init: (metric: any) => void;
-  edit: (setDefault?) => void;
-  setActiveWidget: (widget) => void;
-  updateActiveState: (metricId, state) => void;
-  isTemplate?: boolean;
-}
-function CustomMetricWidget(props: Props) {
-  const { metric, period, isTemplate } = props;
-  const [loading, setLoading] = useState(false);
-  const [data, setData] = useState<any>([]);
-  // const [seriesMap, setSeriesMap] = useState<any>([]);
-
-  const colors = Styles.customMetricColors;
-  const params = customParams(period.rangeName);
-  // const metricParams = { ...params, metricId: metric.metricId, viewType: 'lineChart', startDate: period.start, endDate: period.end }
-  const isLineChart = metric.viewType === 'lineChart';
-  const isProgress = metric.viewType === 'progress';
-  const isTable = metric.viewType === 'table';
-  const isPieChart = metric.viewType === 'pieChart';
-
-  const clickHandlerTable = (filters) => {
-    const activeWidget = {
-      widget: metric,
-      period: period,
-      ...period.toTimestamps(),
-      filters,
-    };
-    props.setActiveWidget(activeWidget);
-  };
-
-  const clickHandler = (event, index) => {
-    if (event) {
-      const payload = event.activePayload[0].payload;
-      const timestamp = payload.timestamp;
-      const periodTimestamps =
-        metric.metricType === 'timeseries'
-          ? getStartAndEndTimestampsByDensity(timestamp, period.start, period.end, params.density)
-          : period.toTimestamps();
-
-      const activeWidget = {
-        widget: metric,
-        period: period,
-        ...periodTimestamps,
-        timestamp: payload.timestamp,
-        index,
-      };
-
-      props.setActiveWidget(activeWidget);
-    }
-  };
-
-  const updateActiveState = (metricId, state) => {
-    props.updateActiveState(metricId, state);
-  };
-
-  return (
-    <div className={stl.wrapper}>
-      <div className="flex items-center p-2">
-        <div className="font-medium">{metric.name}</div>
-        <div className="ml-auto flex items-center">
-          {!isTable && !isPieChart && (
-            <WidgetIcon
-              className="cursor-pointer mr-6"
-              icon="bell-plus"
-              tooltip="Set Alert"
-              onClick={props.onAlertClick}
-            />
-          )}
-          <WidgetIcon
-            className="cursor-pointer mr-6"
-            icon="pencil"
-            tooltip="Edit Metric"
-            onClick={() => props.init(metric)}
-          />
-          <WidgetIcon
-            className="cursor-pointer"
-            icon="close"
-            tooltip="Hide Metric"
-            onClick={() => updateActiveState(metric.metricId, false)}
-          />
-        </div>
-      </div>
-      <div className="px-3">
-        <Loader loading={loading} size="small">
-          <NoContent size="small" title={NO_METRIC_DATA} show={data.length === 0}>
-            <ResponsiveContainer height={240} width="100%">
-              <>
-                {isLineChart && (
-                  <CustomMetriLineChart
-                    data={data}
-                    params={params}
-                    // seriesMap={ seriesMap }
-                    colors={colors}
-                    onClick={clickHandler}
-                  />
-                )}
-
-                {isPieChart && (
-                  <CustomMetricPieChart
-                    metric={metric}
-                    data={data[0]}
-                    colors={colors}
-                    onClick={clickHandlerTable}
-                  />
-                )}
-
-                {isProgress && (
-                  <CustomMetricPercentage
-                    data={data[0]}
-                    params={params}
-                    colors={colors}
-                    onClick={clickHandler}
-                  />
-                )}
-
-                {isTable && (
-                  <CustomMetricTable
-                    metric={metric}
-                    data={data[0]}
-                    onClick={clickHandlerTable}
-                    isTemplate={isTemplate}
-                  />
-                )}
-              </>
-            </ResponsiveContainer>
-          </NoContent>
-        </Loader>
-      </div>
-    </div>
-  );
-}
-
-export default connect(
-  (state) => ({
-    period: state.getIn(['dashboard', 'period']),
-  }),
-  {
-    remove,
-    setShowAlerts,
-    edit,
-    setActiveWidget,
-    updateActiveState,
-    init,
-  }
-)(CustomMetricWidget);
-
-const WidgetIcon = ({
-  className = '',
-  tooltip = '',
-  icon,
-  onClick,
-}: {
-  className: string;
-  tooltip: string;
-  icon: string;
-  onClick: any;
-}) => (
-  <Tooltip title={tooltip}>
-    <div className={className} onClick={onClick}>
-      {/* @ts-ignore */}
-      <Icon name={icon} size="14" />
-    </div>
-  </Tooltip>
-);
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/index.ts b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/index.ts
deleted file mode 100644
index 4a6d9b653..000000000
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './CustomMetricWidget';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/DomBuildingTime/DomBuildingTime.js b/frontend/app/components/Dashboard/Widgets/DomBuildingTime/DomBuildingTime.js
deleted file mode 100644
index 970bfdbad..000000000
--- a/frontend/app/components/Dashboard/Widgets/DomBuildingTime/DomBuildingTime.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, Styles, AvgLabel } from '../common';
-import { withRequest } from 'HOCs';
-import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts';
-import WidgetAutoComplete from 'Shared/WidgetAutoComplete';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-
-const WIDGET_KEY = 'pagesDomBuildtime';
-const toUnderscore = s => s.split(/(?=[A-Z])/).join('_').toLowerCase();
-
-const customParams = rangeName => {
-  const params = { density: 70 }
-
-  if (rangeName === LAST_24_HOURS) params.density = 70
-  if (rangeName === LAST_30_MINUTES) params.density = 70
-  if (rangeName === YESTERDAY) params.density = 70
-  if (rangeName === LAST_7_DAYS) params.density = 70
-  
-  return params
-}
-@withRequest({
-	dataName: "options",
-  initialData: [],
-  dataWrapper: data => data,  
-  loadingName: 'optionsLoading',
-	requestName: "fetchOptions",
-	endpoint: '/dashboard/' + toUnderscore(WIDGET_KEY) + '/search',
-	method: 'GET'
-})
-@widgetHOC(WIDGET_KEY, { customParams })
-export default class DomBuildingTime extends React.PureComponent {
-  onSelect = (params) => {
-    const _params = customParams(this.props.period.rangeName)
-    this.props.fetchWidget(WIDGET_KEY, this.props.period, this.props.platform, { ..._params, url: params.value })
-  }
-
-  render() {
-    const { data, loading, period, optionsLoading, compare = false, showSync = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const params = customParams(period.rangeName)
-    const gradientDef = Styles.gradientDef();
-
-    return (
-      <NoContent
-        size="small"
-        title="No recordings found"
-        show={ data.chart.length === 0 }
-      >
-        <React.Fragment>
-          <div className="flex items-center mb-3">
-            <WidgetAutoComplete
-              loading={optionsLoading}
-              fetchOptions={this.props.fetchOptions}
-              options={this.props.options}
-              onSelect={this.onSelect}
-              placeholder="Search for Page"
-            />
-            <AvgLabel className="ml-auto" text="Avg" count={Math.round(data.avg)} unit="ms" />
-          </div>
-          <Loader loading={ loading } size="small">
-            <NoContent
-              size="small"
-              title="No recordings found"
-              show={ data.chart.size === 0 }
-            >
-              <ResponsiveContainer height={ 200 } width="100%">
-                <AreaChart
-                  data={ data.chart }
-                  margin={ Styles.chartMargins }
-                  syncId={ showSync ? WIDGET_KEY : undefined }
-                >
-                  {gradientDef}
-                  <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                  <XAxis
-                    {...Styles.xaxis} dataKey="time"
-                    interval={params.density/7}
-                  />
-                  <YAxis
-                    {...Styles.yaxis}
-                    label={{ ...Styles.axisLabelLeft, value: "DOM Build Time (ms)" }}
-                    tickFormatter={val => Styles.tickFormatter(val)}
-                  />                 
-                  <Tooltip {...Styles.tooltip} />
-                  <Area
-                    name="Avg"
-                    type="monotone"
-                    dataKey="avg"
-                    stroke={colors[0]}
-                    fillOpacity={ 1 }
-                    strokeWidth={ 2 }
-                    strokeOpacity={ 0.8 }
-                    fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
-                  />
-                </AreaChart>
-              </ResponsiveContainer>
-            </NoContent>
-          </Loader>
-        </React.Fragment>
-      </NoContent>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/DomBuildingTime/index.js b/frontend/app/components/Dashboard/Widgets/DomBuildingTime/index.js
deleted file mode 100644
index b5d6c5682..000000000
--- a/frontend/app/components/Dashboard/Widgets/DomBuildingTime/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './DomBuildingTime';
diff --git a/frontend/app/components/Dashboard/Widgets/Errors/Errors.js b/frontend/app/components/Dashboard/Widgets/Errors/Errors.js
deleted file mode 100644
index ad2313c7f..000000000
--- a/frontend/app/components/Dashboard/Widgets/Errors/Errors.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area } from 'recharts';
-import { Loader, NoContent } from 'UI';
-import { CountBadge, domain, widgetHOC } from '../common';
-import styles from './errors.module.css';
-
-@widgetHOC('errors')
-export default class Errors extends React.PureComponent {
-  render() {
-    const { data, loading } = this.props;
-
-    const isMoreThanKSessions = data.impactedSessions > 1000;
-    const impactedSessionsView = isMoreThanKSessions ? Math.trunc(data.impactedSessions / 1000) : data.impactedSessions;
-    return (
-      <div className="flex justify-between items-center flex-1 flex-shrink-0">
-        <Loader loading={ loading } size="small">
-          <NoContent 
-            title="No exceptions."
-            size="small"
-            show={ data.count === 0 && data.progress === 0 }
-          >
-            <CountBadge
-              title={ <div className={ styles.label }>{ 'Events' }</div> }
-              count={ data.count }
-              change={ data.progress }
-              oppositeColors
-            />
-            <CountBadge
-              title={ <div className={ styles.label }>{ 'Sessions' }</div> }
-              count={ impactedSessionsView }
-              change={ data.impactedSessionsProgress }
-              unit={ isMoreThanKSessions ? 'k' : '' }
-              oppositeColors
-            />
-            <ResponsiveContainer height={ 140 } width="60%">
-              <AreaChart data={ data.chart } margin={ { top: 10, right: 20, left: 20, bottom: 0 } }>
-                <defs>
-                  <linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="#A8E0DA" stopOpacity={ 0.9 } />
-                    <stop offset="95%" stopColor="#A8E0DA" stopOpacity={ 0.2 } />
-                  </linearGradient>
-                </defs>
-                <XAxis interval={ 0 } dataKey="time" tick={ { fill: '#999999', fontSize: 9 } } />
-                <YAxis interval={ 0 } hide domain={ domain }/>
-                <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                <Area type="monotone" dataKey="count" stroke="#3EAAAF" fill="url(#colorCount)" fillOpacity={ 1 } strokeWidth={ 1 } strokeOpacity={ 0.8 } />
-              </AreaChart>
-            </ResponsiveContainer>
-          </NoContent>
-        </Loader>
-      </div>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/Errors/errors.module.css b/frontend/app/components/Dashboard/Widgets/Errors/errors.module.css
deleted file mode 100644
index 1de075dc2..000000000
--- a/frontend/app/components/Dashboard/Widgets/Errors/errors.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.label {
- max-width: 65px;
- line-height: 14px;
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/Errors/index.js b/frontend/app/components/Dashboard/Widgets/Errors/index.js
deleted file mode 100644
index 87b132550..000000000
--- a/frontend/app/components/Dashboard/Widgets/Errors/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Errors';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/ErrorsByOrigin/ErrorsByOrigin.js b/frontend/app/components/Dashboard/Widgets/ErrorsByOrigin/ErrorsByOrigin.js
deleted file mode 100644
index d77bac5f4..000000000
--- a/frontend/app/components/Dashboard/Widgets/ErrorsByOrigin/ErrorsByOrigin.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, Styles } from '../common';
-import { 
-  BarChart, Bar, CartesianGrid, Tooltip, Legend, ResponsiveContainer, 
-  XAxis, YAxis
-} from 'recharts';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-
-const customParams = rangeName => {
-  const params = { density: 28 }
-
-  if (rangeName === LAST_24_HOURS) params.density = 28
-  if (rangeName === LAST_30_MINUTES) params.density = 28
-  if (rangeName === YESTERDAY) params.density = 28
-  if (rangeName === LAST_7_DAYS) params.density = 28
-  
-  return params
-}
-
-@widgetHOC('resourcesByParty', { fullwidth: true, customParams })
-export default class ErrorsByOrigin extends React.PureComponent {
-  render() {
-    const { data, loading, period, compare = false, showSync = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const params = customParams(period.rangeName)
-
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          title="No recordings found"
-          show={ data.chart.length === 0 }
-        >
-          <ResponsiveContainer height={ 240 } width="100%">
-            <BarChart
-              data={data.chart}
-              margin={Styles.chartMargins}
-              syncId={ showSync ? "resourcesByParty" : undefined }
-            >
-              <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-              <XAxis {...Styles.xaxis} dataKey="time" interval={params.density/7} />
-              <YAxis
-                {...Styles.yaxis}
-                label={{ ...Styles.axisLabelLeft, value: "Number of Errors" }}
-                allowDecimals={false}
-              />
-              <Legend />
-              <Tooltip {...Styles.tooltip} />
-              <Bar minPointSize={1} name={<span className="float">1<sup>st</sup> Party</span>} dataKey="firstParty" stackId="a" fill={colors[0]} />
-              <Bar name={<span className="float">3<sup>rd</sup> Party</span>} dataKey="thirdParty" stackId="a" fill={colors[2]} />
-            </BarChart>
-          </ResponsiveContainer>
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/ErrorsByOrigin/index.js b/frontend/app/components/Dashboard/Widgets/ErrorsByOrigin/index.js
deleted file mode 100644
index 9ef5b0117..000000000
--- a/frontend/app/components/Dashboard/Widgets/ErrorsByOrigin/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ErrorsByOrigin';
diff --git a/frontend/app/components/Dashboard/Widgets/ErrorsByType/ErrorsByType.js b/frontend/app/components/Dashboard/Widgets/ErrorsByType/ErrorsByType.js
deleted file mode 100644
index 4421a3fbb..000000000
--- a/frontend/app/components/Dashboard/Widgets/ErrorsByType/ErrorsByType.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, domain, Styles } from '../common';
-import { numberWithCommas} from 'App/utils';
-import { 
-  BarChart, Bar, CartesianGrid, Tooltip,
-  LineChart, Line, Legend, ResponsiveContainer, 
-  XAxis, YAxis
-} from 'recharts';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-
-const customParams = rangeName => {
-  const params = { density: 28 }
-
-  if (rangeName === LAST_24_HOURS) params.density = 21
-  if (rangeName === LAST_30_MINUTES) params.density = 28
-  if (rangeName === YESTERDAY) params.density = 28
-  if (rangeName === LAST_7_DAYS) params.density = 28
-  
-  return params
-}
-
-@widgetHOC('errorsPerType', { fullwidth: true, customParams })
-export default class ErrorsByType extends React.PureComponent {
-  render() {
-    const { data, loading, period, compare = false, showSync = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const params = customParams(period.rangeName)
-
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          title="No recordings found"
-          show={ data.chart.length === 0 }
-        >
-          <ResponsiveContainer height={ 240 } width="100%">
-            <BarChart
-              data={data.chart}
-              margin={Styles.chartMargins}
-              syncId="errorsPerType"
-              syncId={ showSync ? "errorsPerType" : undefined }
-            >
-              <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-              <XAxis {...Styles.xaxis} dataKey="time" interval={params.density/7} />
-              <YAxis
-                {...Styles.yaxis}
-                label={{ ...Styles.axisLabelLeft, value: "Number of Errors" }}
-                allowDecimals={false}
-              />
-              <Legend />
-              <Tooltip {...Styles.tooltip} />
-              <Bar minPointSize={1} name="Integrations" dataKey="integrations" stackId="a" fill={colors[0]}/>
-              <Bar name="4xx" dataKey="4xx" stackId="a" fill={colors[1]} />
-              <Bar name="5xx" dataKey="5xx" stackId="a" fill={colors[2]} />
-              <Bar name="Javascript" dataKey="js" stackId="a" fill={colors[3]} />
-            </BarChart>
-          </ResponsiveContainer>
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/ErrorsByType/index.js b/frontend/app/components/Dashboard/Widgets/ErrorsByType/index.js
deleted file mode 100644
index 53f976df3..000000000
--- a/frontend/app/components/Dashboard/Widgets/ErrorsByType/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ErrorsByType';
diff --git a/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/Bar.js b/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/Bar.js
deleted file mode 100644
index 14f52349d..000000000
--- a/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/Bar.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import stl from './Bar.module.css'
-
-const Bar = ({ className = '', width = 0, avg, domain, color }) => {
-  return (
-    <div className={className}>
-      <div className="flex items-center">
-        <div className={stl.bar} style={{ width: `${width > 0 ? width : 5 }%`, backgroundColor: color }}></div>
-        <div className="ml-2">
-          <span className="font-medium">{`${avg}`}</span>
-        </div>
-      </div>
-      <div className="text-sm leading-3 color-gray-medium">{domain}</div>
-    </div>
-  )
-}
-
-export default Bar
diff --git a/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/Bar.module.css b/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/Bar.module.css
deleted file mode 100644
index 529aa15eb..000000000
--- a/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/Bar.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.bar {
-  height: 5px;
-  background-color: red;
-  width: 100%;
-  border-radius: 3px;
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/ErrorsPerDomain.js b/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/ErrorsPerDomain.js
deleted file mode 100644
index 11af3f7d7..000000000
--- a/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/ErrorsPerDomain.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { Table, widgetHOC, domain, AvgLabel, Styles } from '../common';
-import Bar from './Bar';
-import { numberWithCommas } from 'App/utils';
-
-@widgetHOC('errorsPerDomains')
-export default class ErrorsPerDomain extends React.PureComponent {  
-  render() {
-    const { data, loading, compare = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const firstAvg = data.first() && data.first().errorsCount;
-    
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          title="No recordings found"
-          show={ data.size === 0 }
-        >          
-          <div className="w-full pt-3" style={{ height: '240px' }}>
-            {data.map((item, i) => 
-              <Bar
-                key={i}
-                className="mb-4"
-                avg={numberWithCommas(Math.round(item.errorsCount))}
-                width={Math.round((item.errorsCount * 100) / firstAvg) - 10}
-                domain={item.domain}
-                color={colors[i]}
-              />
-            )}
-          </div>
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/index.js b/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/index.js
deleted file mode 100644
index 3a60d15c0..000000000
--- a/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ErrorsPerDomain';
diff --git a/frontend/app/components/Dashboard/Widgets/FPS/FPS.js b/frontend/app/components/Dashboard/Widgets/FPS/FPS.js
deleted file mode 100644
index 843cea3db..000000000
--- a/frontend/app/components/Dashboard/Widgets/FPS/FPS.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, Styles, AvgLabel } from '../common';
-import { ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid, AreaChart, Area } from 'recharts';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-
-const customParams = rangeName => {
-  const params = { density: 70 }
-
-  if (rangeName === LAST_24_HOURS) params.density = 70
-  if (rangeName === LAST_30_MINUTES) params.density = 70
-  if (rangeName === YESTERDAY) params.density = 70
-  if (rangeName === LAST_7_DAYS) params.density = 70
-  
-  return params
-}
-
-@widgetHOC('fps', { customParams })
-export default class FPS extends React.PureComponent {
-  render() {
-    const { data, loading, period, compare = false, showSync = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const params = customParams(period.rangeName)
-    const gradientDef = Styles.gradientDef();
-
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          title="No recordings found"
-          size="small"
-          show={ data.chart.length === 0 }
-        >
-          <div className="flex items-center justify-end mb-3">
-            <AvgLabel text="Avg" className="ml-3" count={data.avgFps} />
-          </div>
-          <ResponsiveContainer height={ 207 } width="100%">
-            <AreaChart
-              data={ data.chart }
-              margin={ Styles.chartMargins }
-              syncId={ showSync ? "fps" : undefined }
-            >
-              {gradientDef}
-              <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-              <XAxis {...Styles.xaxis} dataKey="time" interval={params.density/7} />
-              <YAxis
-                {...Styles.yaxis}
-                allowDecimals={false}
-                tickFormatter={val => Styles.tickFormatter(val)}
-                label={{ ...Styles.axisLabelLeft, value: "Frames Per Second" }}
-              />
-              <Tooltip {...Styles.tooltip} />
-              <Area
-                name="Avg"
-                type="monotone"
-                dataKey="avgFps"
-                stroke={colors[0]}
-                fillOpacity={ 1 }
-                strokeWidth={ 2 }
-                strokeOpacity={ 0.8 }
-                fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
-              />
-            </AreaChart>
-          </ResponsiveContainer>
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/FPS/index.js b/frontend/app/components/Dashboard/Widgets/FPS/index.js
deleted file mode 100644
index 55394ee20..000000000
--- a/frontend/app/components/Dashboard/Widgets/FPS/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './FPS';
diff --git a/frontend/app/components/Dashboard/Widgets/LastFrustrations/LastFrustrations.js b/frontend/app/components/Dashboard/Widgets/LastFrustrations/LastFrustrations.js
deleted file mode 100644
index fcd36d98e..000000000
--- a/frontend/app/components/Dashboard/Widgets/LastFrustrations/LastFrustrations.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { Loader, NoContent, BrowserIcon, OsIcon } from 'UI';
-import { countries } from 'App/constants';
-import { diffFromNowString } from 'App/date';
-import { widgetHOC, SessionLine } from '../common';
-
-@widgetHOC('sessionsFrustration', { fitContent: true })
-export default class LastFeedbacks extends React.PureComponent {
-  render() {
-    const { data: sessions, loading } = this.props;
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          title="No recordings found"
-          show={ sessions.size === 0 }
-        >
-          { sessions.map(({ 
-              startedAt,
-              sessionId, 
-              clickRage, 
-              returningLocation, 
-              userBrowser, 
-              userOs,
-              userCountry,
-            }) => (
-            <SessionLine 
-              sessionId={ sessionId }
-              icon={ clickRage ? "event/click" : "event/link" }
-              info={ 
-                <span className="flex items-center" >
-                  { clickRage ? "Click Rage" : "Returning Location" }
-                  <BrowserIcon browser={ userBrowser } size="16" className="ml-10 mr-10" />
-                  <OsIcon os={ userOs } size="16" />
-                </span>
-              }
-              subInfo={ `${ diffFromNowString(startedAt) } ago - ${ countries[ userCountry ] || '' }` }
-            />
-          ))}
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/LastFrustrations/index.js b/frontend/app/components/Dashboard/Widgets/LastFrustrations/index.js
deleted file mode 100644
index caaafd7e5..000000000
--- a/frontend/app/components/Dashboard/Widgets/LastFrustrations/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './LastFrustrations';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/MemoryConsumption/MemoryConsumption.js b/frontend/app/components/Dashboard/Widgets/MemoryConsumption/MemoryConsumption.js
deleted file mode 100644
index 14ed08d93..000000000
--- a/frontend/app/components/Dashboard/Widgets/MemoryConsumption/MemoryConsumption.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, Styles, AvgLabel } from '../common';
-import { ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid, AreaChart, Area } from 'recharts';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-
-const customParams = rangeName => {
-  const params = { density: 70 }
-
-  if (rangeName === LAST_24_HOURS) params.density = 70
-  if (rangeName === LAST_30_MINUTES) params.density = 70
-  if (rangeName === YESTERDAY) params.density = 70
-  if (rangeName === LAST_7_DAYS) params.density = 70
-  
-  return params
-}
-@widgetHOC('memoryConsumption', { customParams })
-export default class MemoryConsumption extends React.PureComponent {
-  render() {
-    const { data, loading, period, compare = false, showSync = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const params = customParams(period.rangeName)
-    const gradientDef = Styles.gradientDef();
-
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          title="No recordings found"
-          show={ data.chart.length === 0 }
-        >
-          <div className="flex items-center justify-end mb-3">
-            <AvgLabel text="Avg" unit="mb" className="ml-3" count={data.avgUsedJsHeapSize} />
-          </div>
-          <ResponsiveContainer height={ 207 } width="100%">
-            <AreaChart
-              data={ data.chart }
-              margin={ Styles.chartMargins }
-              syncId={ showSync ? "memoryConsumption" : undefined }
-            >
-              {gradientDef}
-              <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-              <XAxis
-                {...Styles.xaxis} dataKey="time"
-                interval={params.density/7}
-              />
-              <YAxis
-                {...Styles.yaxis}
-                allowDecimals={false}                
-                tickFormatter={val => Styles.tickFormatterBytes(val)}
-                label={{ ...Styles.axisLabelLeft, value: "JS Heap Size (mb)" }}
-              />
-              <Tooltip {...Styles.tooltip} />
-              <Area
-                name="Avg"
-                unit=" mb"
-                type="monotone"
-                dataKey="avgUsedJsHeapSize"
-                stroke={colors[0]}
-                fillOpacity={ 1 }
-                strokeWidth={ 2 }
-                strokeOpacity={ 0.8 }
-                fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
-              />
-            </AreaChart>
-          </ResponsiveContainer>
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/MemoryConsumption/index.js b/frontend/app/components/Dashboard/Widgets/MemoryConsumption/index.js
deleted file mode 100644
index 9e6644855..000000000
--- a/frontend/app/components/Dashboard/Widgets/MemoryConsumption/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './MemoryConsumption';
diff --git a/frontend/app/components/Dashboard/Widgets/MissingResources/Chart.js b/frontend/app/components/Dashboard/Widgets/MissingResources/Chart.js
deleted file mode 100644
index cf2e5758e..000000000
--- a/frontend/app/components/Dashboard/Widgets/MissingResources/Chart.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { AreaChart, Area } from 'recharts';
-import { Styles } from '../common';
-
-const Chart = ({ data, compare }) => {
-  const colors = compare ? Styles.compareColors : Styles.colors;
-
-  return (
-    <AreaChart width={ 90 } height={ 30 } data={ data.chart } >
-      <Area type="monotone" dataKey="count" stroke={colors[0]} fill={colors[3]} fillOpacity={ 0.5 } />
-    </AreaChart>
-  );
-}
-
-Chart.displayName = 'Chart';
-
-export default Chart;
diff --git a/frontend/app/components/Dashboard/Widgets/MissingResources/CopyPath.js b/frontend/app/components/Dashboard/Widgets/MissingResources/CopyPath.js
deleted file mode 100644
index 6b7e709e7..000000000
--- a/frontend/app/components/Dashboard/Widgets/MissingResources/CopyPath.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-import copy from 'copy-to-clipboard'
-import { useState } from 'react'
-
-const CopyPath = ({ data }) => {
-  const [copied, setCopied] = useState(false)
-
-  const copyHandler = () => {
-    copy(data.url);
-    setCopied(true);
-    setTimeout(function() {
-      setCopied(false)
-    }, 500);
-  }
-
-  return (
-    <div className="cursor-pointer color-teal" onClick={copyHandler}>
-      { copied ? 'Copied' : 'Copy Path'}
-    </div>
-  )
-}
-
-export default CopyPath
diff --git a/frontend/app/components/Dashboard/Widgets/MissingResources/MissingResources.js b/frontend/app/components/Dashboard/Widgets/MissingResources/MissingResources.js
deleted file mode 100644
index af2444418..000000000
--- a/frontend/app/components/Dashboard/Widgets/MissingResources/MissingResources.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { Table, widgetHOC } from '../common';
-import Chart from './Chart';
-import ResourceInfo from './ResourceInfo';
-import CopyPath from './CopyPath';
-
-const cols = [
-  {
-    key: 'resource',
-    title: 'Resource',
-    Component: ResourceInfo,
-    width: '40%',
-  },
-  {
-    key: 'sessions',
-    title: 'Sessions',
-    toText: count => `${ count > 1000 ? Math.trunc(count / 1000) : count }${ count > 1000 ? 'k' : '' }`,
-    width: '20%',
-  },
-  {
-    key: 'trend',
-    title: 'Trend',
-    Component: Chart,
-    width: '20%',
-  },
-  {
-    key: 'copy-path',
-    title: '',
-    Component: CopyPath,
-    cellClass: 'invisible group-hover:visible text-right',
-    width: '20%',
-  }
-];
-
-@widgetHOC('missingResources', {  })
-export default class MissingResources extends React.PureComponent {
-  render() {
-    const { data: resources, loading, compare } = this.props;
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          title="No resources missing."
-          size="small"
-          show={ resources.size === 0 }
-        >
-          <Table
-            small
-            cols={ cols }
-            rows={ resources }
-            rowClass="group"
-            compare={compare}
-            isTemplate={this.props.isTemplate}
-          />
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/MissingResources/ResourceInfo.js b/frontend/app/components/Dashboard/Widgets/MissingResources/ResourceInfo.js
deleted file mode 100644
index 0a3ba485e..000000000
--- a/frontend/app/components/Dashboard/Widgets/MissingResources/ResourceInfo.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { diffFromNowString } from 'App/date';
-import { TextEllipsis } from 'UI';
-
-import styles from './resourceInfo.module.css';
-
-export default class ResourceInfo extends React.PureComponent {
-  render() {
-    const { data } = this.props;
-    return (
-      <div className="flex flex-col" >
-        <TextEllipsis className={ styles.name } text={ data.name } hintText={ data.url } />
-        <div className={ styles.timings }>
-          { data.endedAt && data.startedAt && `${ diffFromNowString(data.endedAt) } ago - ${ diffFromNowString(data.startedAt) } old` }
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/MissingResources/index.js b/frontend/app/components/Dashboard/Widgets/MissingResources/index.js
deleted file mode 100644
index 27229bb1c..000000000
--- a/frontend/app/components/Dashboard/Widgets/MissingResources/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './MissingResources';
diff --git a/frontend/app/components/Dashboard/Widgets/MissingResources/resourceInfo.module.css b/frontend/app/components/Dashboard/Widgets/MissingResources/resourceInfo.module.css
deleted file mode 100644
index d73d23530..000000000
--- a/frontend/app/components/Dashboard/Widgets/MissingResources/resourceInfo.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.name {
-  letter-spacing: -.04em;
-  font-size: .9rem;
-  cursor: pointer;
-}
-
-.timings {
-  color: $gray-medium;
-  font-size: 12px;
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/Chart.js b/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/Chart.js
deleted file mode 100644
index 1f97c6605..000000000
--- a/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/Chart.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { BarChart, Bar } from 'recharts';
-
-const Chart = ({ data }) => (
-  <BarChart width={ 90 } height={ 30 } data={ data.chart }>
-    <Bar dataKey="count" fill="#A8E0DA" />
-  </BarChart>
-);
-
-Chart.displaName = 'Chart';
-
-export default Chart;
diff --git a/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/ErrorInfo.js b/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/ErrorInfo.js
deleted file mode 100644
index 4ac5e5f67..000000000
--- a/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/ErrorInfo.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { diffFromNowString } from 'App/date';
-import { TextEllipsis } from 'UI';
-import styles from './errorInfo.module.css';
-
-export default class ErrorInfo extends React.PureComponent {
-  findJourneys = () => this.props.findJourneys(this.props.data.error)
-
-  render() {
-    const { data } = this.props;
-    return (
-      <div className="flex flex-col" >
-        <TextEllipsis
-          onClick={ this.findJourneys }
-          className={ styles.errorText  }
-          text={ data.error }
-          popupProps={{
-            position: 'left center',
-            wide: 'very',
-            offset: '100',
-            positionFixed: true,
-            size: 'small'
-          }}
-        />
-        <div className={ styles.timings }>
-          { `${ diffFromNowString(data.lastOccurrenceAt) } ago - ${ diffFromNowString(data.firstOccurrenceAt) } old` }
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/MostImpactfulErrors.js b/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/MostImpactfulErrors.js
deleted file mode 100644
index a86e23220..000000000
--- a/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/MostImpactfulErrors.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import withSiteIdRouter from 'HOCs/withSiteIdRouter';
-import { Loader, NoContent } from 'UI';
-import { addEvent } from 'Duck/filters';
-import { TYPES } from 'Types/filter/event';
-import { sessions } from 'App/routes';
-import { Table, widgetHOC } from '../common';
-import Chart from './Chart';
-import ErrorInfo from './ErrorInfo';
-
-const cols = [
-  {
-    key: 'error',
-    title: 'Error Info',
-    Component: ErrorInfo,
-    width: '80%',
-  },
-  {
-    key: 'trend',
-    title: 'Trend',
-    Component: Chart,
-    width: '10%',
-  },
-  {
-    key: 'sessions',
-    title: 'Sessions',
-    toText: count => `${ count > 1000 ? Math.trunc(count / 1000) : count }${ count > 1000 ? 'k' : '' }`,
-    width: '10%',
-  },
-];
-
-@withSiteIdRouter
-@widgetHOC('errorsTrend', { fullwidth: true })
-@connect(null, { addEvent })
-export default class MostImpactfulErrors extends React.PureComponent {
-  findJourneys = (error) => {
-    this.props.addEvent({
-      type: TYPES.CONSOLE,
-      value: error,
-    }, true);
-    this.props.history.push(sessions());
-  }
-
-  render() {
-    const { data: errors, loading } = this.props;
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          title="No recordings found"
-          show={ errors.size === 0 }
-        >
-          <Table
-            cols={ cols }
-            rows={ errors }
-            rowProps={ { findJourneys: this.findJourneys } }
-            isTemplate={this.props.isTemplate}
-          />
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/errorInfo.module.css b/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/errorInfo.module.css
deleted file mode 100644
index 7aa0df799..000000000
--- a/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/errorInfo.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.errorText {
-  font-family: 'menlo', 'monaco', 'consolas', monospace;
-  letter-spacing: -.04em;
-  font-size: .9rem;
-  cursor: pointer;
-}
-
-.timings {
-  color: $gray-medium;
-  font-size: 12px;
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/index.js b/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/index.js
deleted file mode 100644
index c072ed32c..000000000
--- a/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './MostImpactfulErrors';
diff --git a/frontend/app/components/Dashboard/Widgets/PageMetrics.js b/frontend/app/components/Dashboard/Widgets/PageMetrics.js
deleted file mode 100644
index 0df75ae99..000000000
--- a/frontend/app/components/Dashboard/Widgets/PageMetrics.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { Loader } from 'UI';
-import { CountBadge, Divider, widgetHOC } from './common';
-
-@widgetHOC('pageMetrics')
-export default class PageMetrics extends React.PureComponent {
-  render() {
-    const { data, loading } = this.props;
-    return (
-      <div className="flex-1 flex-shrink-0  flex justify-around items-center">
-        <Loader loading={ loading } size="small">
-          <CountBadge
-            title="Avg. Dom Load Time"
-            unit="ms"
-            icon="file"
-            count={ data.avgLoad }
-            change={ data.avgLoadProgress }
-            oppositeColors
-          />
-          <Divider />
-          <CountBadge
-            title="Avg. First Meaningful Paint"
-            unit="ms"
-            icon="file"
-            count={ data.avgFirstContentfulPixel }
-            change={ data.avgFirstContentfulPixelProgress }
-            oppositeColors
-          />
-        </Loader>
-      </div>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/Performance/Performance.js b/frontend/app/components/Dashboard/Widgets/Performance/Performance.js
deleted file mode 100644
index 6c585305f..000000000
--- a/frontend/app/components/Dashboard/Widgets/Performance/Performance.js
+++ /dev/null
@@ -1,198 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { Map } from 'immutable';
-import cn from 'classnames';
-import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area, Legend } from 'recharts';
-import { Loader, TextEllipsis, Tooltip } from 'UI';
-import { TYPES } from 'Types/resource';
-import { LAST_24_HOURS, LAST_30_MINUTES, LAST_7_DAYS, LAST_30_DAYS } from 'Types/app/period';
-import { fetchPerformanseSearch } from 'Duck/dashboard';
-import { widgetHOC } from '../common';
-
-import styles from './performance.module.css';
-
-const BASE_KEY = 'resource';
-
-const pagesColor = '#7FCC33';
-const imagesColor = '#40C4FF';
-const requestsColor = '#DAB72F';
-
-@widgetHOC('performance', { fullwidth: true })
-@connect((state, props) => ({
-  performanceChartSpecified: state.getIn([ 'dashboard', 'performanceChart' ]),
-  period: state.getIn([ 'dashboard', 'period' ]),
-  loading: state.getIn([ 'dashboard', 'performanceSearchRequest', 'loading' ]) ||
-    props.loading,
-}), {
-  fetchPerformanseSearch,
-})
-export default class Performance extends React.PureComponent {
-  state = {
-    comparing: false,
-    resources: Map(),
-    opacity: {},
-  }
-
-  onResourceSelect = (resource) => {
-    if (!resource || this.state.resources.size > 1) return;
-    
-    resource.fillColor = this.getFillColor(resource);
-    resource.strokeColor = this.getStrokeColor(resource);
-    this.setResources(this.state.resources.set(this.state.resources.size, resource));
-  }
-
-  onResourceSelect0 = resource => this.onResourceSelect(0, resource)
-  onResourceSelect1 = resource => this.onResourceSelect(1, resource)
-
-  getInterval = () => {
-    switch (this.props.period.rangeName) {
-      case LAST_30_MINUTES:
-        return 0;
-      case LAST_24_HOURS:
-        return 2;
-      case LAST_7_DAYS:
-        return 3;
-      case LAST_30_DAYS:
-        return 2;
-      default:
-        return 0;
-    }
-  }
-
-  setResources = (resources) => {
-    this.setState({
-      resources,
-    });
-    this.props.fetchPerformanseSearch({
-      ...this.props.period.toTimestamps(),
-      resources: resources.valueSeq().toJS(),
-    });
-  }
-
-  getFillColor = (resource) => {
-    switch (resource.type) {
-      case TYPES.IMAGE:
-        return 'url(#colorAvgImageLoadTime)';
-      case TYPES.PAGE:
-        return 'url(#colorAvgPageLoadTime)';
-      case TYPES.REQUEST:
-        return 'url(#colorAvgRequestLoadTime)';
-      default:
-        return 'blue';
-    }
-  }
-
-  getStrokeColor = (resource) => {
-    switch (resource.type) {
-      case TYPES.IMAGE:
-        return imagesColor;
-      case TYPES.PAGE:
-        return pagesColor;
-      case TYPES.REQUEST:
-        return requestsColor;
-      default:
-        return 'blue';
-    }
-  }
-
-  removeResource = (index) => {
-    this.setResources(this.state.resources.remove(index));
-  }
-
-  compare = () => this.setState({ comparing: true })
-
-  legendPopup = (component, trigger) => <Tooltip size="mini" content={ component }>{trigger}</Tooltip>
-
-  legendFormatter = (value, entry, index) => {
-    const { opacity } = this.state;
-
-    if (value === 'avgPageLoadTime') return (this.legendPopup(opacity.avgPageLoadTime === 0 ? 'Show' : 'Hide', <span className={ opacity.avgPageLoadTime === 0 ? styles.muted : '' }>{'Pages'}</span>));
-    if (value === 'avgRequestLoadTime') return (this.legendPopup(opacity.avgRequestLoadTime === 0 ? 'Show' : 'Hide', <span className={ opacity.avgRequestLoadTime === 0 ? styles.muted : '' }>{'Requests'}</span>));
-    if (value === 'avgImageLoadTime') return (this.legendPopup(opacity.avgImageLoadTime === 0 ? 'Show' : 'Hide', <span className={ opacity.avgImageLoadTime === 0 ? styles.muted : '' }>{'Images'}</span>));
-    // if (value === 'avgImageLoadTime') return (<span className={ opacity.avgImageLoadTime === 0 ? styles.muted : '' }>{'Images'}</span>);
-    if (value.includes(BASE_KEY)) {
-      const resourceIndex = Number.parseInt(value.substr(BASE_KEY.length));
-      return (
-        <Tooltip
-          title={ this.state.resources.getIn([ resourceIndex, 'value' ]) }
-        >
-          <TextEllipsis
-              maxWidth="200px"
-              style={ { verticalAlign: 'middle' } }
-              text={ this.state.resources.getIn([ resourceIndex, 'value' ]) }
-            />
-        </Tooltip>
-      );
-    }
-  }
-
-  handleLegendClick = (legend) => {
-    const { dataKey } = legend;
-    const { opacity } = this.state;
-
-    if (dataKey === 'resource0') {
-      this.removeResource(0);
-    } else if (dataKey === 'resource1') {
-      this.removeResource(1);
-    } else {
-      this.setState({
-        opacity: { ...opacity, [ dataKey ]: opacity[ dataKey ] === 0 ? 1 : 0 },
-      });
-    }
-  }
-
-  // eslint-disable-next-line complexity
-  render() {
-    const { comparing, resources, opacity } = this.state;
-    const { data, performanceChartSpecified, loading } = this.props;
-    const r0Presented = !!resources.get(0);
-    const r1Presented = !!resources.get(1);
-    const resourcesPresented = r0Presented || r1Presented;
-    const defaultData = !resourcesPresented || performanceChartSpecified.length === 0; // TODO: more safe? 
-    const interval = this.getInterval();
-
-    return (
-      <React.Fragment>
-        <div className="flex justify-between">
-          <div className={ cn("flex items-center", { "hidden": loading }) }>
-          </div>
-        </div>
-        <Loader loading={ loading } size="small">
-          <ResponsiveContainer height={ 300 }>
-            <AreaChart data={ defaultData ? data.chart : performanceChartSpecified } margin={ { top: 10, right: 20, left: 20, bottom: 0 } }>
-              <defs>
-                <linearGradient id="colorAvgPageLoadTime" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor={ pagesColor } stopOpacity={ 0.7 } />
-                  <stop offset="95%" stopColor={ pagesColor } stopOpacity={ 0.2 } />
-                </linearGradient>
-                <linearGradient id="colorAvgImageLoadTime" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor={ imagesColor } stopOpacity={ 0.7 } />
-                  <stop offset="95%" stopColor={ imagesColor } stopOpacity={ 0.2 } />
-                </linearGradient>
-                <linearGradient id="colorAvgRequestLoadTime" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor={ requestsColor } stopOpacity={ 0.7 } />
-                  <stop offset="95%" stopColor={ requestsColor } stopOpacity={ 0.2 } />
-                </linearGradient>
-              </defs>
-              <XAxis interval={ interval } dataKey="time" tick={ { fill: '#999999', fontSize: 9 } } />
-              <YAxis hide />
-              <CartesianGrid strokeDasharray="3 3" vertical={ false } />
-              { defaultData && <Area connectNulls type="monotone" dataKey="avgPageLoadTime" stroke={ pagesColor } strokeOpacity={ opacity.avgPageLoadTime } fill="url(#colorAvgPageLoadTime)" fillOpacity={ opacity.avgPageLoadTime } /> }
-              { defaultData && <Area connectNulls type="monotone" dataKey="avgImageLoadTime" stroke={ imagesColor } strokeOpacity={ opacity.avgImageLoadTime } fill="url(#colorAvgImageLoadTime)" fillOpacity={ opacity.avgImageLoadTime } /> }
-              { defaultData && <Area connectNulls type="monotone" dataKey="avgRequestLoadTime" stroke={ requestsColor } strokeOpacity={ opacity.avgRequestLoadTime } fill="url(#colorAvgRequestLoadTime)" fillOpacity={ opacity.avgRequestLoadTime } /> }
-              { !defaultData && r0Presented && <Area type="monotone" dataKey={ `${ BASE_KEY }0` } stroke={ resources.get(0).strokeColor } fill={ resources.get(0).fillColor } fillOpacity={ 0.5 } /> }
-              { !defaultData && r1Presented && <Area type="monotone" dataKey={ `${ BASE_KEY }1` } stroke={ resources.get(1).strokeColor } fill={ resources.get(1).fillColor } fillOpacity={ 0.5 } /> }
-              <Legend
-                verticalAlign="top"
-                height={ 36 }
-                margin={ { left: 20, right: 20 } }
-                formatter={ this.legendFormatter }
-                onClick={ this.handleLegendClick }
-              />
-            </AreaChart>
-          </ResponsiveContainer>
-        </Loader>
-      </React.Fragment>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/Performance/index.js b/frontend/app/components/Dashboard/Widgets/Performance/index.js
deleted file mode 100644
index 63b30d682..000000000
--- a/frontend/app/components/Dashboard/Widgets/Performance/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Performance';
diff --git a/frontend/app/components/Dashboard/Widgets/Performance/performance.module.css b/frontend/app/components/Dashboard/Widgets/Performance/performance.module.css
deleted file mode 100644
index ab974bdc3..000000000
--- a/frontend/app/components/Dashboard/Widgets/Performance/performance.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.muted {
-  color: rgba(0, 0, 0, 0.3);
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/ProcessedSessions.js b/frontend/app/components/Dashboard/Widgets/ProcessedSessions.js
deleted file mode 100644
index 2e6d3e743..000000000
--- a/frontend/app/components/Dashboard/Widgets/ProcessedSessions.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area } from 'recharts';
-import { Loader } from 'UI';
-import { CountBadge, domain, widgetHOC, Styles } from './common';
-
-@widgetHOC('sessions', { trendChart: true, fitContent: true })
-export default class ProcessedSessions extends React.PureComponent {
-  render() {
-    const { data, loading } = this.props;
-    const isMoreThanK = data.count > 1000;
-    const countView = isMoreThanK ? Math.trunc(data.count / 1000) : data.count;
-
-    return (
-      <div className="flex justify-between items-center flex-1">
-        <Loader loading={ loading } size="small">
-          <CountBadge
-            className="absolute top-0 pl-4"
-            title="New and Returning Visitors"
-            count={ countView }
-            change={ data.progress }
-            unit={ isMoreThanK ? 'k' : '' }
-          />
-          <ResponsiveContainer height={ 90 } width="100%">
-            <AreaChart
-              data={ data.chart }
-              margin={ {
-                top: 40, right: 0, left: 0, bottom: -10,
-              } }
-            >
-              <defs>
-                <linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor="#A8E0DA" stopOpacity={ 0.9 } />
-                  <stop offset="95%" stopColor="#A8E0DA" stopOpacity={ 0.2 } />
-                </linearGradient>
-              </defs>
-              <XAxis {...Styles.xaxis} dataKey="time" />
-              <YAxis hide interval={ 0 }  domain={ domain } />
-              <Area type="monotone" dataKey="count" stroke={Styles.strokeColor} fillOpacity={ 1 } strokeWidth={ 2 } strokeOpacity={ 0.8 } fill="url(#colorCount)" />
-            </AreaChart>
-          </ResponsiveContainer>
-        </Loader>
-      </div>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.js b/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.js
deleted file mode 100644
index d04a5cef5..000000000
--- a/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, Styles } from '../common';
-import { ComposedChart, Bar, CartesianGrid, Line, Legend, ResponsiveContainer, 
-  XAxis, YAxis, Tooltip
-} from 'recharts';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-
-const customParams = rangeName => {
-  const params = { density: 30 }
-
-  if (rangeName === LAST_24_HOURS) params.density = 24
-  if (rangeName === LAST_30_MINUTES) params.density = 18
-  if (rangeName === YESTERDAY) params.density = 24
-  if (rangeName === LAST_7_DAYS) params.density = 30
-  
-  return params
-}
-
-@widgetHOC('resourceTypeVsResponseEnd', { customParams })
-export default class ResourceLoadedVsResponseEnd extends React.PureComponent {
-  render() {
-    const { data, loading, compare = false, showSync = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          show={ data.chart.length === 0 }
-          title="No recordings found"
-        >
-          <ResponsiveContainer height={ 247 } width="100%">
-            <ComposedChart
-              data={data.chart}
-              margin={Styles.chartMargins}
-              syncId={ showSync ? "resourceTypeVsResponseEnd" : undefined }
-            >
-              <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-              <XAxis {...Styles.xaxis} dataKey="time" interval={7} />
-              <YAxis
-                {...Styles.yaxis}
-                label={{ ...Styles.axisLabelLeft, value: "Number of Resources" }}
-                tickFormatter={val => Styles.tickFormatter(val, 'ms')}
-                yAxisId="left"
-              />
-              <YAxis
-                {...Styles.yaxis}
-                tickFormatter={val => Styles.tickFormatter(val, 'ms')}
-                label={{
-                  ...Styles.axisLabelLeft,
-                  offset: 70,
-                  value: "Response End (ms)"
-                }}
-                yAxisId="right"
-                orientation="right"
-              />
-              <Legend />
-              <Tooltip {...Styles.tooltip} />
-              <Bar minPointSize={1} yAxisId="left" name="XHR" dataKey="xhr" stackId="a" fill={colors[0]} />
-              <Bar yAxisId="left" name="Other" dataKey="total" stackId="a" fill={colors[2]} />
-              <Line
-                yAxisId="right"
-                strokeWidth={2}
-                name="Response End"
-                type="monotone"
-                dataKey="avgResponseEnd"
-                stroke={compare ? Styles.lineColorCompare : Styles.lineColor}
-                dot={false}
-              />
-            </ComposedChart>
-          </ResponsiveContainer>
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsResponseEnd/index.js b/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsResponseEnd/index.js
deleted file mode 100644
index e56d66bcd..000000000
--- a/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsResponseEnd/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ResourceLoadedVsResponseEnd';
diff --git a/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.js b/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.js
deleted file mode 100644
index b56d6fed3..000000000
--- a/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, Styles } from '../common';
-import { 
-  ComposedChart, Bar, CartesianGrid, Line, Legend, ResponsiveContainer, 
-  XAxis, YAxis, Tooltip
-} from 'recharts';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-
-const customParams = rangeName => {
-  const params = { density: 21 }
-
-  if (rangeName === LAST_24_HOURS) params.density = 21
-  if (rangeName === LAST_30_MINUTES) params.density = 21
-  if (rangeName === YESTERDAY) params.density = 21
-  if (rangeName === LAST_7_DAYS) params.density = 21
-  
-  return params
-}
-
-@widgetHOC('resourcesVsVisuallyComplete', { customParams })
-export default class ResourceLoadedVsVisuallyComplete extends React.PureComponent {
-  render() {
-    const {className, data, loading, period, compare = false, showSync = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const params = customParams(period.rangeName)
-
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          title="No recordings found"
-          show={ data.size === 0 }
-        >
-          <ResponsiveContainer height={ 240 } width="100%">
-            <ComposedChart
-              data={data.chart}
-              margin={ Styles.chartMargins}
-              syncId={ showSync ? "resourcesVsVisuallyComplete" : undefined }
-            >
-              <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-              <XAxis
-                {...Styles.xaxis}
-                dataKey="time"
-                interval={3}
-                interval={(params.density / 7)}
-              />
-              <YAxis
-                {...Styles.yaxis}
-                label={{ ...Styles.axisLabelLeft, value: "Visually Complete (ms)" }}
-                yAxisId="left"
-                tickFormatter={val => Styles.tickFormatter(val, 'ms')}
-              />
-              <YAxis
-                {...Styles.yaxis}
-                label={{
-                  ...Styles.axisLabelLeft,
-                  value: "Number of Resources",
-                  position: "insideRight",
-                  offset: 0
-                }}
-                yAxisId="right"
-                orientation="right"
-                tickFormatter={val => Styles.tickFormatter(val)}
-              />
-              <Tooltip {...Styles.tooltip} />
-              <Legend />
-              <Bar minPointSize={1} yAxisId="right" name="Images" type="monotone" dataKey="types.img" stackId="a" fill={colors[0]} />
-              <Bar yAxisId="right" name="Scripts" type="monotone" dataKey="types.script" stackId="a" fill={colors[2]} />
-              <Bar yAxisId="right" name="CSS" type="monotone" dataKey="types.stylesheet" stackId="a" fill={colors[4]} />
-              <Line
-                yAxisId="left"
-                name="Visually Complete"
-                type="monotone"
-                dataKey="avgTimeToRender"
-                stroke={compare? Styles.lineColorCompare : Styles.lineColor }
-                dot={false}
-                unit=" ms"
-                strokeWidth={2}
-              />
-            </ComposedChart>
-          </ResponsiveContainer>
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsVisuallyComplete/index.js b/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsVisuallyComplete/index.js
deleted file mode 100644
index 6f3621b2e..000000000
--- a/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsVisuallyComplete/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ResourceLoadedVsVisuallyComplete';
diff --git a/frontend/app/components/Dashboard/Widgets/ResourceLoadingTime/ResourceLoadingTime.js b/frontend/app/components/Dashboard/Widgets/ResourceLoadingTime/ResourceLoadingTime.js
deleted file mode 100644
index 8f95a3479..000000000
--- a/frontend/app/components/Dashboard/Widgets/ResourceLoadingTime/ResourceLoadingTime.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import React from 'react';
-import { Loader, NoContent, DropdownPlain } from 'UI';
-import { widgetHOC, Styles, AvgLabel } from '../common';
-import { withRequest } from 'HOCs';
-import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts';
-import WidgetAutoComplete from 'Shared/WidgetAutoComplete';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-
-const WIDGET_KEY = 'resourcesLoadingTime';
-const toUnderscore = s => s.split(/(?=[A-Z])/).join('_').toLowerCase();
-
-// other' = -1, 'script' = 0, 'stylesheet' = 1, 'fetch' = 2, 'img' = 3, 'media' = 4
-export const RESOURCE_OPTIONS = [
-  { text: 'All', value: 'all', },
-  { text: 'JS', value: "SCRIPT", },
-  { text: 'CSS', value: "STYLESHEET", },
-  { text: 'Fetch', value: "REQUEST", },
-  { text: 'Image', value: "IMG", },
-  { text: 'Media', value: "MEDIA", },
-  { text: 'Other', value: "OTHER", },
-];
-
-const customParams = rangeName => {
-  const params = {density: 70, type: null }
-
-  if (rangeName === LAST_24_HOURS) params.density = 70
-  if (rangeName === LAST_30_MINUTES) params.density = 70
-  if (rangeName === YESTERDAY) params.density = 70
-  if (rangeName === LAST_7_DAYS) params.density = 70
-  
-  return params
-}
-
-@withRequest({
-	dataName: "options",
-  initialData: [],
-  dataWrapper: data => data,  
-  loadingName: 'optionsLoading',
-	requestName: "fetchOptions",
-	endpoint: '/dashboard/' + toUnderscore(WIDGET_KEY) + '/search',
-	method: 'GET'
-})
-@widgetHOC(WIDGET_KEY, { customParams })
-export default class ResourceLoadingTime extends React.PureComponent {
-  state = { autoCompleteSelected: null, type: null }
-  onSelect = (params) => {
-    const _params = customParams(this.props.period.rangeName)
-    this.setState({ autoCompleteSelected: params.value });
-    this.props.fetchWidget(WIDGET_KEY, this.props.period, this.props.platform, { ..._params, url: params.value })
-  }
-
-  writeOption = (e, { name, value }) => {
-    this.setState({ [name]: value })
-    const _params = customParams(this.props.period.rangeName)
-    this.props.fetchWidget(WIDGET_KEY, this.props.period, this.props.platform, { ..._params, [ name ]: value === 'all' ? null : value  })
-  }
-
-  render() {
-    const { data, loading, period, optionsLoading, compare = false, showSync = false } = this.props;
-    const { autoCompleteSelected, type } = this.state;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const params = customParams(period.rangeName)
-    const gradientDef = Styles.gradientDef();
-
-    return (
-      <NoContent
-        size="small"
-        show={ data.chart.length === 0 }
-        title="No recordings found"
-      >
-        <React.Fragment>
-          <div className="flex items-center mb-3">
-            <WidgetAutoComplete
-              loading={optionsLoading}
-              fetchOptions={this.props.fetchOptions}
-              options={this.props.options}
-              onSelect={this.onSelect}
-              placeholder="Search for Fetch, CSS or Media"
-              filterParams={{ type: type }}
-            />
-            <DropdownPlain
-              disabled={!!autoCompleteSelected}
-              name="type"
-              label="Resource"
-              options={ RESOURCE_OPTIONS }
-              onChange={ this.writeOption }
-              defaultValue={'all'}
-              wrapperStyle={{
-                position: 'absolute',
-                top: '12px',
-                left: '170px',
-              }}
-            />
-            <AvgLabel className="ml-auto" text="Avg" count={Math.round(data.avg)} unit="ms" />
-          </div>
-          <Loader loading={ loading } size="small">
-            <NoContent
-              size="small"
-              show={ data.chart.size === 0 }
-              title="No recordings found"
-            >
-              <ResponsiveContainer height={ 200 } width="100%">
-                <AreaChart
-                  data={ data.chart }
-                  margin={ Styles.chartMargins }
-                  syncId={ showSync ? WIDGET_KEY : undefined }
-                >
-                  {gradientDef}
-                  <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                  <XAxis {...Styles.xaxis} dataKey="time" interval={params.density/7} />
-                  <YAxis
-                    {...Styles.yaxis}
-                    tickFormatter={val => Styles.tickFormatter(val)}
-                    label={{ ...Styles.axisLabelLeft, value: "Resource Fetch Time (ms)" }}
-                  />
-                  <Tooltip {...Styles.tooltip} />
-                  <Area
-                    name="Avg"
-                    unit=" ms"
-                    type="monotone"
-                    dataKey="avg"
-                    stroke={colors[0]}
-                    fillOpacity={ 1 }
-                    strokeWidth={ 2 }
-                    strokeOpacity={ 0.8 }
-                    fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
-                  />
-                </AreaChart>
-              </ResponsiveContainer>
-            </NoContent>
-          </Loader>
-        </React.Fragment>
-      </NoContent>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/ResourceLoadingTime/index.js b/frontend/app/components/Dashboard/Widgets/ResourceLoadingTime/index.js
deleted file mode 100644
index 91072b5ec..000000000
--- a/frontend/app/components/Dashboard/Widgets/ResourceLoadingTime/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ResourceLoadingTime';
diff --git a/frontend/app/components/Dashboard/Widgets/ResponseTime/ResponseTime.js b/frontend/app/components/Dashboard/Widgets/ResponseTime/ResponseTime.js
deleted file mode 100644
index 5bd400d37..000000000
--- a/frontend/app/components/Dashboard/Widgets/ResponseTime/ResponseTime.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, domain, Styles, AvgLabel } from '../common';
-import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-import WidgetAutoComplete from 'Shared/WidgetAutoComplete';
-import { withRequest } from 'HOCs';
-import { toUnderscore } from 'App/utils';
-
-const WIDGET_KEY = 'pagesResponseTime';
-
-const customParams = rangeName => {
-  const params = { density: 70 }
-
-  if (rangeName === LAST_24_HOURS) params.density = 70
-  if (rangeName === LAST_30_MINUTES) params.density = 70
-  if (rangeName === YESTERDAY) params.density = 70
-  if (rangeName === LAST_7_DAYS) params.density = 70
-  
-  return params
-}
-
-@withRequest({
-	dataName: "options",
-  initialData: [],
-  dataWrapper: data => data,
-  // resetBeforeRequest: true,
-  loadingName: "optionsLoading",
-	requestName: "fetchOptions",
-	endpoint: '/dashboard/' + toUnderscore(WIDGET_KEY) + '/search',
-	method: 'GET'
-})
-@widgetHOC(WIDGET_KEY, { customParams })
-export default class ResponseTime extends React.PureComponent {
-  onSelect = (params) => {
-    const _params = customParams(this.props.period.rangeName)
-    this.props.fetchWidget(WIDGET_KEY, this.props.period, this.props.platform, {..._params, url: params.value }, this.props.filters)
-  }
-
-  render() {
-    const { data, loading, optionsLoading, compare = false, showSync = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const gradientDef = Styles.gradientDef();
-
-    return (
-      <React.Fragment>
-        <div className="flex items-center justify-between mb-3">
-          <WidgetAutoComplete
-            loading={optionsLoading}
-            fetchOptions={this.props.fetchOptions}
-            options={this.props.options}
-            onSelect={this.onSelect}
-            placeholder="Search for Page"
-          />
-          <div className="flex items-center justify-end mb-3">
-            <AvgLabel text="Avg" unit="ms" className="ml-3" count={data.avg} />
-          </div>
-        </div>
-        <Loader loading={ loading } size="small">
-          <NoContent
-            size="small"
-            show={ data.chart.size === 0 }
-            title="No recordings found"
-          >
-            <ResponsiveContainer height={ 207 } width="100%">
-              <AreaChart
-                data={ data.chart }
-                margin={Styles.chartMargins}
-                syncId={ showSync ? "pagesResponseTime" : undefined }
-              >
-                {gradientDef}
-                <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                <XAxis {...Styles.xaxis} interval={10} dataKey="time" />
-                <YAxis
-                  {...Styles.yaxis}
-                  // tickFormatter={(val) => `${val}` }
-                  label={{ ...Styles.axisLabelLeft, value: "Page Response Time (ms)" }}
-                />
-                <Tooltip {...Styles.tooltip} />
-                <Area
-                  name="Avg"
-                  type="monotone"
-                  unit=" ms"
-                  dataKey="avg"
-                  stroke={colors[0]}
-                  fillOpacity={ 1 }
-                  strokeWidth={ 2 }
-                  strokeOpacity={ 0.8 }
-                  fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
-                />
-              </AreaChart>
-            </ResponsiveContainer>
-          </NoContent>
-        </Loader>
-      </React.Fragment>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/ResponseTime/index.js b/frontend/app/components/Dashboard/Widgets/ResponseTime/index.js
deleted file mode 100644
index c4228f56e..000000000
--- a/frontend/app/components/Dashboard/Widgets/ResponseTime/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ResponseTime';
diff --git a/frontend/app/components/Dashboard/Widgets/ResponseTimeDistribution/ResponseTimeDistribution.js b/frontend/app/components/Dashboard/Widgets/ResponseTimeDistribution/ResponseTimeDistribution.js
deleted file mode 100644
index ea4762fb1..000000000
--- a/frontend/app/components/Dashboard/Widgets/ResponseTimeDistribution/ResponseTimeDistribution.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, Styles, AvgLabel } from '../common';
-import { 
-  ComposedChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, 
-  XAxis, YAxis, ReferenceLine, Tooltip
-} from 'recharts';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-
-const customParams = rangeName => {
-  const params = { density: 40 }
-
-  if (rangeName === LAST_24_HOURS) params.density = 40
-  if (rangeName === LAST_30_MINUTES) params.density = 40
-  if (rangeName === YESTERDAY) params.density = 40
-  if (rangeName === LAST_7_DAYS) params.density = 40
-  
-  return params
-}
-
-const PercentileLine = props => {
-  const {
-    viewBox: { x, y },
-    xoffset,
-    yheight,
-    height,
-    label
-  } = props;
-  return (
-    <svg>
-      <line
-        x1={x + xoffset}
-        x2={x + xoffset}
-        y1={height + 10}
-        y2={172}
-        {...props}
-      />
-      <text
-        x={x + 5}
-        y={height + 20}
-        fontSize="8"
-        fontFamily="Roboto"
-        fill="#000000"
-        textAnchor="start"
-      >
-        {label}
-      </text>
-    </svg>
-  );
-};
-
-@widgetHOC('pagesResponseTimeDistribution', { customParams })
-export default class ResponseTimeDistribution extends React.PureComponent {
-  render() {
-    const { data, loading, compare = false, showSync = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;    
-
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          show={ data.chart.length === 0 }
-          title="No recordings found"
-        >
-          <div className="flex items-center justify-end mb-3">
-            <AvgLabel text="Avg" unit="ms" className="ml-3" count={data.avg} />
-          </div>
-          <div className="flex">
-            <ResponsiveContainer height={ 207 } width="100%">
-              <ComposedChart
-                data={data.chart}
-                margin={Styles.chartMargins}
-                syncId={ showSync ? "pagesResponseTimeDistribution" : undefined }
-                barSize={50}
-              >
-                <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                <XAxis
-                  {...Styles.xaxis}
-                  dataKey="responseTime"
-                  label={{ 
-                    ...Styles.axisLabelLeft,
-                    angle: 0,
-                    offset: 0,
-                    value: "Page Response Time (ms)",
-                    style: { textAnchor: 'middle' },
-                    position: "insideBottom"
-                  }}
-                  dataKey="responseTime"
-                />
-                <YAxis
-                  {...Styles.yaxis}
-                  allowDecimals={false}
-                  label={{
-                    ...Styles.axisLabelLeft,
-                    value: "Number of Calls"
-                  }}
-                />
-                <Bar minPointSize={1} name="Calls" dataKey="count" stackId="a" fill={colors[2]} label="Backend" />
-                <Tooltip {...Styles.tooltip} labelFormatter={val => 'Page Response Time: ' + val} />
-                { data.percentiles.map((item, i) => (
-                  <ReferenceLine
-                    key={i}
-                    label={
-                      <PercentileLine
-                        xoffset={0}
-                        // y={130}
-                        height={i * 20}
-                        stroke={'#000'}
-                        strokeWidth={0.5}
-                        strokeOpacity={1}
-                        label={`${item.percentile}th Percentile (${item.responseTime}ms)`}
-                      />
-                    }
-                    allowDecimals={false}
-                    x={item.responseTime}
-                    strokeWidth={0}
-                    strokeOpacity={1}
-                  />
-                ))}
-              </ComposedChart>
-            </ResponsiveContainer>
-            <ResponsiveContainer height={ 207 } width="10%">
-              <BarChart
-                data={data.extremeValues}
-                margin={Styles.chartMargins}
-                barSize={40}
-              >
-                <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                <XAxis {...Styles.xaxis} dataKey="time" />
-                <YAxis hide type="number" domain={[0, data.total]} {...Styles.yaxis} allowDecimals={false} />
-                <Tooltip {...Styles.tooltip} />
-                <Bar minPointSize={1} name="Extreme Values" dataKey="count" stackId="a" fill={colors[0]} />
-              </BarChart>
-            </ResponsiveContainer>
-          </div>
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/ResponseTimeDistribution/index.js b/frontend/app/components/Dashboard/Widgets/ResponseTimeDistribution/index.js
deleted file mode 100644
index 2ddc12a3c..000000000
--- a/frontend/app/components/Dashboard/Widgets/ResponseTimeDistribution/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ResponseTimeDistribution';
diff --git a/frontend/app/components/Dashboard/Widgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.js b/frontend/app/components/Dashboard/Widgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.js
deleted file mode 100644
index 057122195..000000000
--- a/frontend/app/components/Dashboard/Widgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, Styles, AvgLabel } from '../common';
-import { 
-  ComposedChart, Bar, CartesianGrid, Legend, ResponsiveContainer, 
-  XAxis, YAxis, Tooltip
-} from 'recharts';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-
-const customParams = rangeName => {
-  const params = { density: 28 }
-
-  if (rangeName === LAST_24_HOURS) params.density = 28
-  if (rangeName === LAST_30_MINUTES) params.density = 28
-  if (rangeName === YESTERDAY) params.density = 28
-  if (rangeName === LAST_7_DAYS) params.density = 28
-  
-  return params
-}
-
-@widgetHOC('impactedSessionsByJsErrors', { customParams })
-export default class SessionsAffectedByJSErrors extends React.PureComponent {
-  render() {
-    const { data, loading, period, compare, showSync = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const params = customParams(period.rangeName)
-
-    return (
-      <React.Fragment>
-        <div className="flex items-center mb-3">
-          <div className="ml-auto">
-            <AvgLabel text="Errors" count={data.errorsCount} />
-          </div>
-        </div>
-        <Loader loading={ loading } size="small">
-          <NoContent
-            size="small"
-            show={ data.chart.length === 0 }
-            title="No recordings found"
-          >
-            <ResponsiveContainer height={ 207 } width="100%">
-              <ComposedChart
-                data={data.chart}
-                margin={Styles.chartMargins}
-                syncId={ showSync ? "impactedSessionsByJsErrors" : undefined }
-              >
-                <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                <XAxis {...Styles.xaxis} dataKey="time" interval={params.density/7} />
-                <YAxis
-                  {...Styles.yaxis}
-                  allowDecimals={false}
-                  label={{  
-                    ...Styles.axisLabelLeft,
-                    value: "Number of Sessions"
-                  }}
-                />
-                <Tooltip {...Styles.tooltip} />
-                <Bar minPointSize={1} name="Sessions" dataKey="sessionsCount" stackId="a" fill={colors[0]} />
-              </ComposedChart>
-            </ResponsiveContainer>
-          </NoContent>
-        </Loader>
-      </React.Fragment>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/SessionsAffectedByJSErrors/index.js b/frontend/app/components/Dashboard/Widgets/SessionsAffectedByJSErrors/index.js
deleted file mode 100644
index 2af7f10db..000000000
--- a/frontend/app/components/Dashboard/Widgets/SessionsAffectedByJSErrors/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SessionsAffectedByJSErrors';
diff --git a/frontend/app/components/Dashboard/Widgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.js b/frontend/app/components/Dashboard/Widgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.js
deleted file mode 100644
index af321c1c0..000000000
--- a/frontend/app/components/Dashboard/Widgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, Styles } from '../common';
-import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-
-const customParams = rangeName => {
-  const params = { density: 70 }
-
-  if (rangeName === LAST_24_HOURS) params.density = 70
-  if (rangeName === LAST_30_MINUTES) params.density = 70
-  if (rangeName === YESTERDAY) params.density = 70
-  if (rangeName === LAST_7_DAYS) params.density = 70
-  
-  return params
-}
-
-@widgetHOC('impactedSessionsBySlowPages', { customParams })
-export default class SessionsImpactedBySlowRequests extends React.PureComponent {
-  render() {
-    const { data, loading, period, compare = false, showSync = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const params = customParams(period.rangeName)
-    const gradientDef = Styles.gradientDef();
-
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          show={ data.chart.length === 0 }
-          title="No recordings found"
-        >
-          <ResponsiveContainer height={ 240 } width="100%">
-            <AreaChart
-              data={ data.chart }
-              margin={Styles.chartMargins}
-              syncId={ showSync ? "impactedSessionsBySlowPages" : undefined }
-            >
-              {gradientDef}
-              <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-              <XAxis {...Styles.xaxis} dataKey="time" interval={params.density/7} />
-              <YAxis
-                {...Styles.yaxis}
-                label={{ ...Styles.axisLabelLeft, value: "Number of Requests" }}
-                allowDecimals={false}
-              />
-              <Tooltip {...Styles.tooltip} />
-              <Area
-                name="Sessions"
-                type="monotone"
-                dataKey="count"
-                stroke={colors[0]}
-                fillOpacity={ 1 }
-                strokeWidth={ 2 }
-                strokeOpacity={ 0.8 }
-                fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
-              />
-            </AreaChart>
-          </ResponsiveContainer>
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/SessionsImpactedBySlowRequests/index.js b/frontend/app/components/Dashboard/Widgets/SessionsImpactedBySlowRequests/index.js
deleted file mode 100644
index 7e4adcc74..000000000
--- a/frontend/app/components/Dashboard/Widgets/SessionsImpactedBySlowRequests/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SessionsImpactedBySlowRequests';
diff --git a/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/Bar.js b/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/Bar.js
deleted file mode 100644
index ffcace6ba..000000000
--- a/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/Bar.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import stl from './Bar.module.css'
-import { Styles } from '../common'
-import { TextEllipsis } from 'UI';
-
-const Bar = ({ className = '', versions = [], width = 0, avg, domain, colors }) => {
-  return (
-    <div className={className}>
-      <div className="flex items-center">
-        <div className={stl.bar} style={{ width: `${width < 15 ? 15 : width }%`}}>
-          {versions.map((v, i) => {
-            const w = (v.value * 100)/ avg;
-            return ( 
-            <div key={i} className="text-xs" style={{ width: `${w }%`, backgroundColor: colors[i]}}>
-              <TextEllipsis text={v.key} hintText={
-                <div className="text-sm">
-                  <div>Version: {v.key}</div>
-                  <div>Sessions: {v.value}</div>
-                </div>
-              } />
-            </div> 
-            )
-          })}
-        </div>
-        <div className="ml-2">
-          <span className="font-medium">{`${avg}`}</span>
-        </div>
-      </div>
-      <div className="text-sm">{domain}</div>
-    </div>
-  )
-}
-
-export default Bar
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/Bar.module.css b/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/Bar.module.css
deleted file mode 100644
index dde6009e4..000000000
--- a/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/Bar.module.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.bar {
-  height: 5px;
-  width: 100%;
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  & div {
-    padding: 0 5px;
-    height: 20px;
-    color: #FFF;
-  }
-  & div:first-child {
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-  & div:last-child {
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/SessionsPerBrowser.js b/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/SessionsPerBrowser.js
deleted file mode 100644
index 3179f64da..000000000
--- a/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/SessionsPerBrowser.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, AvgLabel, Styles } from '../common';
-import Bar from './Bar';
-
-@widgetHOC('sessionsPerBrowser')
-export default class SessionsPerBrowser extends React.PureComponent {  
-
-  getVersions = item => {
-    return Object.keys(item)
-      .filter(i => i !== 'browser' && i !== 'count')
-      .map(i => ({ key: 'v' +i, value: item[i]}))
-  }
-
-  render() {
-    const { data, loading, compare = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const firstAvg = data.chart[0] && data.chart[0].count;
-    
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          show={ data.chart.size === 0 }
-          title="No recordings found"
-        >          
-          <div className="w-full pt-3" style={{ height: '240px' }}>
-            {data.chart.map((item, i) => 
-              <Bar
-                key={i}
-                className="mb-4"
-                avg={Math.round(item.count)}
-                versions={this.getVersions(item)}
-                width={Math.round((item.count * 100) / firstAvg) - 10}
-                domain={item.browser}
-                colors={colors}
-              />
-            )}
-          </div>
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/index.js b/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/index.js
deleted file mode 100644
index facd495bd..000000000
--- a/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SessionsPerBrowser';
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestDomains/Bar.js b/frontend/app/components/Dashboard/Widgets/SlowestDomains/Bar.js
deleted file mode 100644
index 99ed6af05..000000000
--- a/frontend/app/components/Dashboard/Widgets/SlowestDomains/Bar.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import stl from './Bar.module.css'
-
-const Bar = ({ className = '', width = 0, avg, domain, color }) => {
-  return (
-    <div className={className}>
-      <div className="flex items-center">
-        <div className={stl.bar} style={{ width: `${width < 5 ? 5 : width }%`, backgroundColor: color }}></div>
-        <div className="ml-2 shrink-0">
-          <span className="font-medium">{avg}</span>
-          <span> ms</span>
-        </div>
-      </div>
-      <div className="text-sm leading-3">{domain}</div>
-    </div>
-  )
-}
-
-export default Bar
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestDomains/Bar.module.css b/frontend/app/components/Dashboard/Widgets/SlowestDomains/Bar.module.css
deleted file mode 100644
index d3d399918..000000000
--- a/frontend/app/components/Dashboard/Widgets/SlowestDomains/Bar.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.bar {
-  height: 10px;
-  background-color: red;
-  width: 100%;
-  border-radius: 3px;
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestDomains/SlowestDomains.js b/frontend/app/components/Dashboard/Widgets/SlowestDomains/SlowestDomains.js
deleted file mode 100644
index 9f85ae412..000000000
--- a/frontend/app/components/Dashboard/Widgets/SlowestDomains/SlowestDomains.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, Styles } from '../common';
-import Bar from './Bar';
-import { numberWithCommas } from 'App/utils';
-
-@widgetHOC('slowestDomains')
-export default class ResponseTime extends React.PureComponent {  
-  render() {
-    const { data, loading, compare = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const firstAvg = data.partition.first() && data.partition.first().avg;
-    
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          show={ data.partition && data.partition.size === 0 }
-          title="No recordings found"
-        >          
-          <div className="w-full pt-3" style={{ height: '240px' }}>
-            {data.partition && data.partition.map((item, i) => 
-              <Bar className="mb-4"
-                avg={numberWithCommas(Math.round(item.avg))}
-                width={Math.round((item.avg * 100) / firstAvg) - 20}
-                domain={item.domain}
-                color={colors[i]}
-              />
-            )}
-          </div>
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestDomains/index.js b/frontend/app/components/Dashboard/Widgets/SlowestDomains/index.js
deleted file mode 100644
index 87f1e002a..000000000
--- a/frontend/app/components/Dashboard/Widgets/SlowestDomains/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SlowestDomains';
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestImages/Chart.js b/frontend/app/components/Dashboard/Widgets/SlowestImages/Chart.js
deleted file mode 100644
index a66c2801d..000000000
--- a/frontend/app/components/Dashboard/Widgets/SlowestImages/Chart.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { AreaChart, Area } from 'recharts';
-
-const Chart = ({ data }) => {
-  return (
-    <AreaChart width={ 90 } height={ 30 } data={ data.chart } >
-      <Area type="monotone" dataKey="avgDuration" stroke="#3EAAAF" fill="#A8E0DA" fillOpacity={ 0.5 } />
-    </AreaChart>
-  );
-}
-
-Chart.displayName = 'Chart';
-
-export default Chart;
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestImages/ImageInfo.js b/frontend/app/components/Dashboard/Widgets/SlowestImages/ImageInfo.js
deleted file mode 100644
index cf7402a80..000000000
--- a/frontend/app/components/Dashboard/Widgets/SlowestImages/ImageInfo.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import { Tooltip, Icon } from 'UI';
-import styles from './imageInfo.module.css';
-
-const ImageInfo = ({ data }) => (
-  <div className={styles.name}>
-    <Tooltip
-      className={styles.popup}
-      title={
-        <img
-          src={`//${data.url}`}
-          className={styles.imagePreview}
-          alt="One of the slowest images"
-        />
-      }
-    >
-      <div className={styles.imageWrapper}>
-        <Icon name="camera-alt" size="18" color="gray-light" />
-        <div className={styles.label}>{'Preview'}</div>
-      </div>
-    </Tooltip>
-    <Tooltip disabled content={data.url}>
-      <span>{data.name}</span>
-    </Tooltip>
-  </div>
-);
-
-ImageInfo.displayName = 'ImageInfo';
-
-export default ImageInfo;
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestImages/SlowestImages.js b/frontend/app/components/Dashboard/Widgets/SlowestImages/SlowestImages.js
deleted file mode 100644
index 7bfc0cfd9..000000000
--- a/frontend/app/components/Dashboard/Widgets/SlowestImages/SlowestImages.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { Table, widgetHOC } from '../common';
-import Chart from './Chart';
-import ImageInfo from './ImageInfo';
-
-const cols = [
-  {
-    key: 'image',
-    title: 'Image',
-    Component: ImageInfo,
-    width: '40%',
-  },
-  {
-    key: 'avgDuration',
-    title: 'Load Time',
-    toText: time => `${ Math.trunc(time) }ms`,
-    width: '25%',
-  },
-  {
-    key: 'trend',
-    title: 'Trend',
-    Component: Chart,
-    width: '20%',
-  },
-  {
-    key: 'sessions',
-    title: 'Sessions',
-    width: '15%',
-    toText: count => `${ count > 1000 ? Math.trunc(count / 1000) : count }${ count > 1000 ? 'k' : '' }`,
-    className: 'text-left'
-  },
-];
-
-@widgetHOC('slowestImages', { fitContent: true })
-export default class SlowestImages extends React.PureComponent {
-  render() {
-    const { data: images, loading } = this.props;
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          show={ images.size === 0 }
-          title="No recordings found"
-        >
-          <Table
-            cols={ cols }
-            rows={ images }
-          />
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestImages/imageInfo.module.css b/frontend/app/components/Dashboard/Widgets/SlowestImages/imageInfo.module.css
deleted file mode 100644
index 69030a582..000000000
--- a/frontend/app/components/Dashboard/Widgets/SlowestImages/imageInfo.module.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.name {
-  display: flex;
-  align-items: center;
-
-  & > span {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap; 
-    max-width: 60%;
-  }
-}
-
-.imagePreview {
-  max-width: 200px;
-  max-height: 200px;
-}
-
-.imageWrapper {
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  width: 40px;
-  text-align: center;
-  margin-right: 10px;
-  & > span {
-    height: 16px;
-  }
-  & .label {
-    font-size: 9px;
-    color: $gray-light;
-  }
-}
-
-.popup {
-  background-color: #f5f5f5 !important;
-  &:before {
-    background-color: #f5f5f5 !important;
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestImages/index.js b/frontend/app/components/Dashboard/Widgets/SlowestImages/index.js
deleted file mode 100644
index 54bcac137..000000000
--- a/frontend/app/components/Dashboard/Widgets/SlowestImages/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SlowestImages';
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestResources/Chart.js b/frontend/app/components/Dashboard/Widgets/SlowestResources/Chart.js
deleted file mode 100644
index 1990733fb..000000000
--- a/frontend/app/components/Dashboard/Widgets/SlowestResources/Chart.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { AreaChart, Area } from 'recharts';
-import { Styles } from '../common';
-
-const Chart = ({ data, compare }) => {
-  const colors = compare ? Styles.compareColors : Styles.colors;
-  return (
-    <AreaChart width={ 90 } height={ 30 } data={ data.chart } >
-      <Area type="monotone" dataKey="avg" stroke={colors[0]} fill={ colors[3] } fillOpacity={ 0.5 } />
-    </AreaChart>
-  );
-}
-
-Chart.displayName = 'Chart';
-
-export default Chart;
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestResources/CopyPath.js b/frontend/app/components/Dashboard/Widgets/SlowestResources/CopyPath.js
deleted file mode 100644
index 6b7e709e7..000000000
--- a/frontend/app/components/Dashboard/Widgets/SlowestResources/CopyPath.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-import copy from 'copy-to-clipboard'
-import { useState } from 'react'
-
-const CopyPath = ({ data }) => {
-  const [copied, setCopied] = useState(false)
-
-  const copyHandler = () => {
-    copy(data.url);
-    setCopied(true);
-    setTimeout(function() {
-      setCopied(false)
-    }, 500);
-  }
-
-  return (
-    <div className="cursor-pointer color-teal" onClick={copyHandler}>
-      { copied ? 'Copied' : 'Copy Path'}
-    </div>
-  )
-}
-
-export default CopyPath
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestResources/ImageInfo.js b/frontend/app/components/Dashboard/Widgets/SlowestResources/ImageInfo.js
deleted file mode 100644
index c8b3890e3..000000000
--- a/frontend/app/components/Dashboard/Widgets/SlowestResources/ImageInfo.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { Tooltip } from 'UI';
-import cn from 'classnames';
-import styles from './imageInfo.module.css';
-
-const supportedTypes = ['png', 'jpg', 'jpeg', 'svg'];
-
-const ImageInfo = ({ data }) => {
-  const canPreview = supportedTypes.includes(data.type);
-  return (
-    <div className={styles.name}>
-      <Tooltip
-        className={styles.popup}
-        disabled={!canPreview}
-        title={
-          <img
-            src={`${data.url}`}
-            className={styles.imagePreview}
-            alt="One of the slowest images"
-          />
-        }
-      >
-        <div className={cn({ [styles.hasPreview]: canPreview })}>
-          <div className={styles.label}>{data.name}</div>
-        </div>
-      </Tooltip>
-    </div>
-  );
-};
-
-ImageInfo.displayName = 'ImageInfo';
-
-export default ImageInfo;
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestResources/ResourceType.js b/frontend/app/components/Dashboard/Widgets/SlowestResources/ResourceType.js
deleted file mode 100644
index 9803a050f..000000000
--- a/frontend/app/components/Dashboard/Widgets/SlowestResources/ResourceType.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import cn from 'classnames'
-
-const ResourceType = ({ data : { type = 'js' }, compare }) => {
-  return (
-    <div className={ cn("rounded-full p-2 color-white h-12 w-12 flex items-center justify-center", { 'bg-teal': compare, 'bg-tealx': !compare})}>
-      <span className="overflow-hidden whitespace-no-wrap text-xs">{ type.toUpperCase() }</span>
-    </div>
-  )
-}
-
-export default ResourceType
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestResources/SlowestResources.js b/frontend/app/components/Dashboard/Widgets/SlowestResources/SlowestResources.js
deleted file mode 100644
index 4de486e49..000000000
--- a/frontend/app/components/Dashboard/Widgets/SlowestResources/SlowestResources.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react';
-import { Loader, NoContent, DropdownPlain } from 'UI';
-import { Table, widgetHOC } from '../common';
-import Chart from './Chart';
-import ImageInfo from './ImageInfo';
-import { getRE } from 'App/utils';
-import cn from 'classnames';
-import stl from './SlowestResources.module.css';
-import ResourceType from './ResourceType';
-import CopyPath from './CopyPath';
-import { numberWithCommas } from 'App/utils';
-
-export const RESOURCE_OPTIONS = [
-  { text: 'All', value: 'ALL', },
-  { text: 'CSS', value: 'STYLESHEET', },
-  { text: 'JS', value: 'SCRIPT', },
-];
-
-const cols = [
-  {
-    key: 'type',
-    title: 'Type',
-    Component: ResourceType,
-    className: 'text-center justify-center',
-    cellClass: 'ml-2',
-    width: '8%',
-  },
-  {
-    key: 'name',
-    title: 'File Name',
-    Component: ImageInfo,
-    cellClass: '-ml-2',
-    width: '40%',
-  },
-  {
-    key: 'avg',
-    title: 'Load Time',
-    toText: avg => `${ avg ? numberWithCommas(Math.trunc(avg)) : 0} ms`,
-    className: 'justify-center',
-    width: '15%',
-  },
-  {
-    key: 'trend',
-    title: 'Trend',
-    Component: Chart,
-    width: '15%',
-  },
-  {
-    key: 'copy-path',
-    title: '',
-    Component: CopyPath,
-    cellClass: 'invisible group-hover:visible text-right',
-    width: '15%',
-  }
-];
-const WIDGET_KEY = 'slowestResources'
-
-@widgetHOC(WIDGET_KEY, { fitContent: true })
-export default class SlowestResources extends React.PureComponent {
-  state = { resource: 'all', search: ''}
-
-  test = (key, value = '') => getRE(key, 'i').test(value);
-
-  write = ({ target: { name, value } }) => {
-    this.setState({ [ name ]: value })
-  };
-
-  writeOption = (e, { name, value }) => {
-    this.setState({ [ name ]: value })
-    this.props.fetchWidget(WIDGET_KEY, this.props.period, this.props.platform, { [ name ]: value === 'all' ? null : value  })
-  }
-
-  render() {
-    const { data, loading, compare, isTemplate } = this.props;
-
-    return (
-      <div>
-        <div className={ cn(stl.topActions, 'py-3 flex text-right')}>
-          <DropdownPlain
-            name="type"
-            label="Resource"
-            options={ RESOURCE_OPTIONS }
-            onChange={ this.writeOption }
-          />
-        </div>
-        <Loader loading={ loading } size="small">
-          <NoContent
-            size="small"
-            show={ data.size === 0 }
-            title="No recordings found"
-          >
-            <Table cols={ cols } rows={ data } isTemplate={isTemplate} rowClass="group" compare={compare} />
-          </NoContent>
-        </Loader>
-      </div>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestResources/SlowestResources.module.css b/frontend/app/components/Dashboard/Widgets/SlowestResources/SlowestResources.module.css
deleted file mode 100644
index 42a6c55a1..000000000
--- a/frontend/app/components/Dashboard/Widgets/SlowestResources/SlowestResources.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.topActions {
-  position: absolute;
-  top: 0px;
-  right: 50px;
-  display: flex;
-  justify-content: flex-end;
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestResources/imageInfo.module.css b/frontend/app/components/Dashboard/Widgets/SlowestResources/imageInfo.module.css
deleted file mode 100644
index 1de36b529..000000000
--- a/frontend/app/components/Dashboard/Widgets/SlowestResources/imageInfo.module.css
+++ /dev/null
@@ -1,52 +0,0 @@
-.name {
-  display: flex;
-  align-items: center;
-
-  & > span {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap; 
-    max-width: 60%;
-  }
-
-  & .label {
-    max-width: 300px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.hasPreview {
-  /* text-decoration: underline; */
-  border-bottom: 1px dotted; 
-  cursor: pointer;
-}
-
-.imagePreview {
-  max-width: 200px;
-  max-height: 200px;
-}
-
-.imageWrapper {
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  width: 40px;
-  text-align: center;
-  margin-right: 10px;
-  & > span {
-    height: 16px;
-  }
-  & .label {
-    font-size: 9px;
-    color: $gray-light;
-  }
-}
-
-.popup {
-  background-color: #f5f5f5 !important;
-  &:before {
-    background-color: #f5f5f5 !important;
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestResources/index.js b/frontend/app/components/Dashboard/Widgets/SlowestResources/index.js
deleted file mode 100644
index 22fd02391..000000000
--- a/frontend/app/components/Dashboard/Widgets/SlowestResources/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SlowestResources';
diff --git a/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/Bar.js b/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/Bar.js
deleted file mode 100644
index 8702869e9..000000000
--- a/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/Bar.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import stl from './Bar.module.css'
-
-const Bar = ({ className = '', width = 0, avg, domain, color }) => {
-  return (
-    <div className={className}>
-      <div className="flex items-center">
-        <div className={stl.bar} style={{ width: `${width}%`, backgroundColor: color }}></div>
-        <div className="ml-2">{avg}</div>
-      </div>
-      <div className="text-sm leading-none">{domain}</div>
-    </div>
-  )
-}
-
-export default Bar
diff --git a/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/Bar.module.css b/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/Bar.module.css
deleted file mode 100644
index d3d399918..000000000
--- a/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/Bar.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.bar {
-  height: 10px;
-  background-color: red;
-  width: 100%;
-  border-radius: 3px;
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/Scale.js b/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/Scale.js
deleted file mode 100644
index 6ee56f2b3..000000000
--- a/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/Scale.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-import { Styles } from '../common';
-import cn from 'classnames';
-import stl from './scale.module.css';
-
-function Scale({ colors }) {
-  const lastIndex = (Styles.colors.length - 1)
-  return (
-    <div className={ cn(stl.bars, 'absolute bottom-0 mb-4')}>
-      {colors.map((c, i) => (
-        <div
-          key={i}
-          style={{ backgroundColor: c, width: '6px', height: '15px', marginBottom: '1px' }}
-          className="flex items-center justify-center"
-        >
-          { i === 0 && <div className="text-xs pl-12">Slow</div>}
-          { i === lastIndex && <div className="text-xs pl-12">Fast</div>}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export default Scale
diff --git a/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/SpeedIndexLocation.js b/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/SpeedIndexLocation.js
deleted file mode 100644
index 9e1a23213..000000000
--- a/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/SpeedIndexLocation.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react';
-import { widgetHOC, AvgLabel, Styles } from '../common';
-import * as DataMap from "datamaps";
-import { threeLetter } from 'App/constants/countries';
-import Scale from './Scale';
-import { numberWithCommas } from 'App/utils';
-import stl from './speedIndexLocation.module.css';
-import { colorScale } from 'App/utils';
-
-@widgetHOC('speedLocation', { fitContent: false })
-export default class SpeedIndexLocation extends React.PureComponent {  
-  wrapper = React.createRef()
-  map = null;
-
-  getSeries = data => {
-    const series = [];
-    data.chart.forEach(item => {
-      const d = [threeLetter[item.userCountry], Math.round(item.avg)]
-      series.push(d)
-    })
-
-    return series;
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.map) {
-      this.map.updateChoropleth(this.getDataset(), { reset: true});
-    }
-  }
-
-  getDataset = () => {
-    const { data, compare } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-
-    var dataset = {};
-    const series = this.getSeries(data);
-    var onlyValues = series.map(function(obj){ return obj[1]; });
-    const paletteScale = colorScale(onlyValues, [...colors].reverse());
-
-    // fill dataset in appropriate format
-    series.forEach(function(item){
-        var iso = item[0], value = item[1];
-        dataset[iso] = { numberOfThings: value, fillColor: paletteScale(value) };
-    });
-    return dataset;
-  }
-
-  render() {
-    const { data, loading, compare = false } = this.props;
-    
-    
-    if (this.wrapper.current && !this.map && data.chart.length > 0) {
-      const dataset = this.getDataset();
-      this.map = new DataMap({
-        element: this.wrapper.current,
-        fills: { defaultFill: '#E8E8E8' },
-        data: dataset,
-        // responsive: true,
-        // height: null, //if not null, datamaps will grab the height of 'element'
-        // width: null, //if not null, datamaps will grab the width of 'element'
-        geographyConfig: {
-          borderColor: '#FFFFFF',
-          borderWidth: 0.5,
-          highlightBorderWidth: 1,
-          popupOnHover: true,
-          // don't change color on mouse hover
-          highlightFillColor: function(geo) {
-            return '#999999';
-            // return geo['fillColor'] || '#F5F5F5';
-          },
-          // only change border
-          highlightBorderColor: '#B7B7B7',
-          // show desired information in tooltip
-          popupTemplate: function(geo, data) {
-              // don't show tooltip if country don't present in dataset
-              if (!data) { return ; }
-              // tooltip content
-              return ['<div class="hoverinfo speedIndexPopup">',
-                  '<strong>', geo.properties.name, '</strong>',
-                  '<span>Avg: <strong>', numberWithCommas(data.numberOfThings), '</strong><span>',
-                  '</div>'].join('');
-          }
-        }
-      });
-    }
-  
-    return (      
-      <>
-        <div className="w-full flex justify-end">
-          <AvgLabel text="Avg" count={Math.round(data.avg)} unit="ms" />
-        </div>
-        <Scale colors={compare ? Styles.compareColors : Styles.colors} />
-        <div className={stl.mapWrapper} ref={ this.wrapper } />
-      </>      
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/index.js b/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/index.js
deleted file mode 100644
index d62ce8efc..000000000
--- a/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SpeedIndexLocation';
diff --git a/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/scale.module.css b/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/scale.module.css
deleted file mode 100644
index 5aa34f966..000000000
--- a/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/scale.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.bars {
-  & div:first-child {
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-  }
-
-  & div:last-child {
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/speedIndexLocation.module.css b/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/speedIndexLocation.module.css
deleted file mode 100644
index 1a433dc85..000000000
--- a/frontend/app/components/Dashboard/Widgets/SpeedIndexLocation/speedIndexLocation.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.mapWrapper {
-  height: 220px;
-  width: 90%;
-  margin: 0 auto;
-  display: flex;  
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/TimeToRender/TimeToRender.js b/frontend/app/components/Dashboard/Widgets/TimeToRender/TimeToRender.js
deleted file mode 100644
index 1ac489588..000000000
--- a/frontend/app/components/Dashboard/Widgets/TimeToRender/TimeToRender.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, Styles, AvgLabel } from '../common';
-import { withRequest } from 'HOCs';
-import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts';
-import WidgetAutoComplete from 'Shared/WidgetAutoComplete';
-import { toUnderscore } from 'App/utils';
-import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
-
-const WIDGET_KEY = 'timeToRender';
-const customParams = rangeName => {
-  const params = { density: 70 }
-
-  if (rangeName === LAST_24_HOURS) params.density = 70
-  if (rangeName === LAST_30_MINUTES) params.density = 70
-  if (rangeName === YESTERDAY) params.density = 70
-  if (rangeName === LAST_7_DAYS) params.density = 70
-  
-  return params
-}
-
-@withRequest({
-	dataName: "options",
-  initialData: [],
-  dataWrapper: data => data,  
-  loadingName: "optionsLoading",
-	requestName: "fetchOptions",
-	endpoint: '/dashboard/' + toUnderscore(WIDGET_KEY) + '/search',
-	method: 'GET'
-})
-@widgetHOC(WIDGET_KEY, { customParams })
-export default class TimeToRender extends React.PureComponent {
-  onSelect = (params) => {
-    const _params = customParams(this.props.period.rangeName)
-    this.props.fetchWidget(WIDGET_KEY, this.props.period, this.props.platform, { ..._params, url: params.value }, this.props.filters)
-  }
-
-  render() {
-    const { data, loading, optionsLoading, period, compare = false, showSync = false } = this.props;
-    const colors = compare ? Styles.compareColors : Styles.colors;
-    const params = customParams(period.rangeName)
-    const gradientDef = Styles.gradientDef();
-
-    return (
-      <React.Fragment>
-        <div className="flex items-center mb-3">
-          <WidgetAutoComplete
-            loading={optionsLoading}
-            fetchOptions={this.props.fetchOptions}
-            options={this.props.options}
-            onSelect={this.onSelect}
-            placeholder="Search for Page"
-          />
-          <div className="ml-auto">
-            <AvgLabel text="Avg." count={Math.round(data.avg)} unit="ms" />
-          </div>
-        </div>
-        <Loader loading={ loading } size="small">
-          <NoContent
-            size="small"
-            show={ data.chart.length === 0 }
-            title="No recordings found"
-          >
-            <ResponsiveContainer height={ 200 } width="100%">
-              <AreaChart
-                data={ data.chart }
-                margin={Styles.chartMargins}
-                syncId={ showSync ? WIDGET_KEY : undefined }
-              >
-                {gradientDef}
-                <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-                <XAxis {...Styles.xaxis} interval={params.density/7} dataKey="time" />
-                <YAxis
-                  {...Styles.yaxis}
-                  label={{ ...Styles.axisLabelLeft, value: "Time to Render (ms)" }}
-                  tickFormatter={val => Styles.tickFormatter(val)}
-                />
-                <Tooltip {...Styles.tooltip} />
-                <Area
-                  name="Avg"
-                  unit=" ms"
-                  type="monotone"
-                  dataKey="avg"
-                  stroke={colors[0]}
-                  fillOpacity={ 1 }
-                  strokeWidth={ 2 }
-                  strokeOpacity={ 0.8 }
-                  fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
-                />
-              </AreaChart>
-            </ResponsiveContainer>
-          </NoContent>
-        </Loader>
-      </React.Fragment>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/TimeToRender/index.js b/frontend/app/components/Dashboard/Widgets/TimeToRender/index.js
deleted file mode 100644
index 9c4c77c12..000000000
--- a/frontend/app/components/Dashboard/Widgets/TimeToRender/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './TimeToRender';
diff --git a/frontend/app/components/Dashboard/Widgets/TopDomains/TopDomains.js b/frontend/app/components/Dashboard/Widgets/TopDomains/TopDomains.js
deleted file mode 100644
index 23537e0f7..000000000
--- a/frontend/app/components/Dashboard/Widgets/TopDomains/TopDomains.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
-import { widgetHOC, Styles } from '../common';
-import { ResponsiveContainer, XAxis, YAxis, CartesianGrid, 
-  LineChart, Line, Legend, Tooltip
-} from 'recharts';
-
-@widgetHOC('domainsErrors', { fitContent: true })
-export default class TopDomains extends React.PureComponent {
-  render() {
-    const { data, loading, key = '4xx' } = this.props;
-  
-    const namesMap = data.chart[key]
-      .map(i => Object.keys(i))
-      .flat()
-      .filter(i => i !== 'time' && i !== 'timestamp')
-      .reduce(
-        (unique, item) => (unique.includes(item) ? unique : [...unique, item]),
-        []
-      );
-
-    return (
-      <Loader loading={ loading } size="small">
-        <NoContent
-          size="small"
-          show={ data.chart.length === 0 }
-          title="No recordings found"
-        >
-          <ResponsiveContainer height={ 240 } width="100%">
-            <LineChart
-              data={ data.chart[key] }
-              margin={Styles.chartMargins}
-            >
-              <defs>
-                <linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor="#A8E0DA" stopOpacity={ 0.9 } />
-                  <stop offset="95%" stopColor="#A8E0DA" stopOpacity={ 0.2 } />
-                </linearGradient>
-              </defs>
-              <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-              <XAxis
-                {...Styles.xaxis} dataKey="time"
-              />
-              <YAxis 
-                {...Styles.yaxis}
-                allowDecimals={false}
-                label={{  
-                  ...Styles.axisLabelLeft,
-                  value: "Number of Errors"
-                }}
-              />
-              <Legend />
-              <Tooltip {...Styles.tooltip} />
-              { namesMap.map((key, index) => (
-                <Line name={key} type="monotone" dataKey={key} stroke={Styles.colors[index]} fillOpacity={ 1 } strokeWidth={ 2 } strokeOpacity={ 0.8 } fill="url(#colorCount)" dot={false} />
-              ))}
-            </LineChart>
-          </ResponsiveContainer>
-        </NoContent>
-      </Loader>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/TopDomains/index.js b/frontend/app/components/Dashboard/Widgets/TopDomains/index.js
deleted file mode 100644
index 33cefa725..000000000
--- a/frontend/app/components/Dashboard/Widgets/TopDomains/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './TopDomains';
diff --git a/frontend/app/components/Dashboard/Widgets/TopMetrics.js b/frontend/app/components/Dashboard/Widgets/TopMetrics.js
deleted file mode 100644
index bac8d5d41..000000000
--- a/frontend/app/components/Dashboard/Widgets/TopMetrics.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import { Loader } from 'UI';
-import { msToSec } from 'App/date';
-import { CountBadge, Divider, widgetHOC } from './common';
-
-@widgetHOC('topMetrics')
-export default class TopMetrics extends React.PureComponent {
-  render() {
-    const { data, loading } = this.props;
-    return (
-      <div className="flex-1 no-shrink">
-        <Loader loading={ loading } size="small">
-          <div className="flex space-around align-centered">
-            <CountBadge
-              title="Avg. Response Time"
-              unit="s"
-              icon="window"
-              count={ msToSec(data.avgResponseTime) }
-              change={ data.avgPageLoadProgress }
-              oppositeColors
-            />
-            <Divider />
-            <CountBadge
-              title="Request Count"
-              unit="ms"
-              icon="eye"
-              count={ data.requestsCount }
-              change={ data.avgImgLoadProgress }
-              oppositeColors
-            />
-            {/* <Divider /> */}
-          </div>
-          <div className="flex space-around align-centered">
-            <CountBadge
-              title="Avg. Time till first Bite"
-              unit="ms"
-              icon="clock"
-              count={ data.avgTimeTilFirstBite }
-              change={ data.avgReqLoadProgress }
-              oppositeColors
-            />
-            <Divider />
-            <CountBadge
-              title="Avg. Dom Complete Time"
-              unit="ms"
-              icon="clock"
-              count={ data.avgDomCompleteTime }
-              change={ data.avgReqLoadProgress }
-              oppositeColors
-            />
-          </div>
-        </Loader>
-      </div>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/TrendChart/TrendChart.js b/frontend/app/components/Dashboard/Widgets/TrendChart/TrendChart.js
deleted file mode 100644
index b32f4171a..000000000
--- a/frontend/app/components/Dashboard/Widgets/TrendChart/TrendChart.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import React from 'react';
-import { Styles, CountBadge } from '../common';
-import { CloseButton, Loader } from 'UI';
-import { ResponsiveContainer, AreaChart, XAxis, YAxis, Area, Tooltip } from 'recharts';
-import { numberWithCommas } from 'App/utils';
-import cn from 'classnames';
-import stl from './trendChart.module.css';
-
-const loadChart = (data, loading, unit, syncId, compare, tooltipLael) => {
-  const gradientDef = Styles.gradientDef();
-  return (
-    <div className="-m-4 z-0">
-      <Loader loading={ loading } size="small" className="pt-10">
-        <ResponsiveContainer height={ 130 } width="100%">
-          <AreaChart
-            data={ data }
-            syncId={syncId}
-            margin={ {
-              top: 85, right: 0, left: 0, bottom: 5,
-            } }
-          >
-            {gradientDef}
-            <Tooltip {...Styles.tooltip} />
-            <XAxis hide {...Styles.xaxis} interval={4} dataKey="time" />
-            <YAxis hide interval={ 0 } />
-            <Area
-              name={tooltipLael}
-              // unit={unit && ' ' + unit}
-              type="monotone"
-              dataKey="value"
-              stroke={compare? Styles.compareColors[0] : Styles.colors[0]}
-              fillOpacity={ 1 }
-              strokeWidth={ 2 }
-              strokeOpacity={ 0.8 }
-              fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
-            />
-          </AreaChart>
-        </ResponsiveContainer>
-      </Loader>
-    </div>
-  )
-}
-
-const countView = (avg, unit) => {  
-  if (unit === 'mb') {
-    if (!avg) return 0;
-    const count = Math.trunc(avg / 1024 / 1024);
-    return numberWithCommas(count);
-  }
-  if (unit === 'min') {
-    if (!avg) return 0;
-    const count = Math.trunc(avg);
-    return numberWithCommas(count > 1000 ? count +'k' : count);
-  }
-  return avg ? numberWithCommas(avg): 0;
-}
-
-function TrendChart({ 
-  loading = true, 
-  title,
-  avg,
-  progress,
-  unit = false,
-  subtext,
-  data,
-  handleRemove,
-  compare = false,
-  comparing = false,
-  syncId = '',
-  tooltipLael = '',
-  textClass ='',
-  prefix = '',
-  canRemove = true
-}) {
-  return (
-    <div className="group border rounded p-4 relative bg-white" style={{ height: '130px'}}>
-      { canRemove && (
-        <CloseButton
-          className="absolute right-0 top-0 m-4 z-10 invisible group-hover:visible"
-          onClick={ handleRemove } size="17"
-        />
-      )}
-      <div className="absolute flex items-start flex-col justify-center inset-0 p-3">
-        <div className="mb-2 flex items-center" >
-          {comparing && <div className={cn(stl.circle, { 'bg-tealx' : !compare, 'bg-teal' : compare})} />}
-          <div className={ cn("text-lg") }>{ title }</div>
-        </div>
-        <div className="flex items-center">
-          {prefix}
-          {/* <div className="h-2 w-2 bg-red mr-2" /> */}
-          {/* <div className="h-2 w-2 bg-green mr-2 rounded-full" /> */}
-          {/* <div className="mr-2" style={{ borderWidth: "0 5px 7px 5px", borderColor: "transparent transparent #007bff transparent" }} /> */}
-          <CountBadge
-            title={subtext}
-            count={ countView(avg, unit) }
-            change={ progress || 0 }
-            unit={ unit }
-            className={textClass}
-          />
-        </div>
-      </div>
-      { loadChart(data, loading, unit, syncId, compare, tooltipLael) }
-    </div>
-  )
-}
-
-export default TrendChart
diff --git a/frontend/app/components/Dashboard/Widgets/TrendChart/index.js b/frontend/app/components/Dashboard/Widgets/TrendChart/index.js
deleted file mode 100644
index bdf7f32b2..000000000
--- a/frontend/app/components/Dashboard/Widgets/TrendChart/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as TrendChart } from './TrendChart';
diff --git a/frontend/app/components/Dashboard/Widgets/TrendChart/trendChart.module.css b/frontend/app/components/Dashboard/Widgets/TrendChart/trendChart.module.css
deleted file mode 100644
index e69fb4878..000000000
--- a/frontend/app/components/Dashboard/Widgets/TrendChart/trendChart.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.circle {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  margin-right: 5px;
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/UserActivity.js b/frontend/app/components/Dashboard/Widgets/UserActivity.js
deleted file mode 100644
index 282e305d9..000000000
--- a/frontend/app/components/Dashboard/Widgets/UserActivity.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { msToMin } from 'App/date';
-import { Loader } from 'UI';
-import { CountBadge, Divider, widgetHOC } from './common';
-
-@widgetHOC('userActivity')
-export default class UserActivity extends React.PureComponent {
-  render() {
-    const { data, loading } = this.props;
-    return (
-      <div className="flex justify-around items-center flex-1 flex-shrink-0">
-        <Loader loading={ loading } size="small">          
-          <CountBadge 
-            title="Avg. no. of Visited Pages" 
-            icon="file" 
-            count={ data.avgVisitedPages } 
-            change={ data.avgVisitedPagesProgress }
-          />
-          <Divider />
-          <CountBadge 
-            title="Avg. Session Duration" 
-            icon="clock" 
-            unit="min" 
-            count={ msToMin(data.avgDuration) } 
-            change={ data.avgDurationProgress }
-          />
-        </Loader>
-      </div>
-    );
-  }
-}
diff --git a/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.module.css b/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.module.css
deleted file mode 100644
index 1d1ef3ee4..000000000
--- a/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.wrapper {
-  background-color: white;
-  /* border: solid thin $gray-medium; */
-  border-radius: 3px;
-  padding: 10px;
-}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.tsx b/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.tsx
deleted file mode 100644
index 4df0d6fbb..000000000
--- a/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import stl from './CustomMetricWidgetHoc.module.css';
-import { Icon } from 'UI';
-
-interface Props {
-}
-const CustomMetricWidgetHoc = ({ ...rest }: Props) => BaseComponent => {
-  return (
-    <div className={stl.wrapper}>
-      <div className="flex items-center mb-10 p-2">
-        <div className="font-medium">Widget Name</div>
-        <div className="ml-auto">
-          <div className="cursor-pointer">
-            <Icon name="bell-plus" size="16" />
-          </div>
-        </div>
-      </div>
-      {/* <BaseComponent {...rest} /> */}
-    </div>
-  );
-}
-
-export default CustomMetricWidgetHoc;
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/index.ts b/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/index.ts
deleted file mode 100644
index 0be8a5be5..000000000
--- a/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './CustomMetricWidgetHoc';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/common/index.js b/frontend/app/components/Dashboard/Widgets/common/index.js
index 52ca30580..21ef76ea0 100644
--- a/frontend/app/components/Dashboard/Widgets/common/index.js
+++ b/frontend/app/components/Dashboard/Widgets/common/index.js
@@ -1,9 +1,5 @@
 export { default as Title } from './Title';
-export { default as CountBadge } from './CountBadge';
 export { default as Table } from './Table';
-export { default as Divider } from './Divider';
 export { default as domain } from './domain';
-export { default as widgetHOC } from './widgetHOC';
-export { default as SessionLine } from './SessionLine';
 export { default as Styles } from './Styles';
 export { default as AvgLabel } from './AvgLabel';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/common/widgetHOC.js b/frontend/app/components/Dashboard/Widgets/common/widgetHOC.js
deleted file mode 100644
index 341d52245..000000000
--- a/frontend/app/components/Dashboard/Widgets/common/widgetHOC.js
+++ /dev/null
@@ -1,149 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import cn from 'classnames';
-import { CloseButton } from 'UI';
-import { fetchWidget } from 'Duck/dashboard';
-// import { updateAppearance } from 'Duck/user';
-import { WIDGET_MAP } from 'Types/dashboard';
-import Title from './Title';
-import stl from './widgetHOC.module.css';
-
-export default (widgetKey, panelProps = {}, wrapped = true, allowedFilters = []) =>
-  (BaseComponent) => {
-    @connect(
-      (state, props) => {
-        const compare = props && props.compare;
-        const key = compare ? '_' + widgetKey : widgetKey;
-
-        return {
-          loading: state.getIn(['dashboard', 'fetchWidget', key, 'loading']),
-          data: state.getIn(['dashboard', key]),
-          comparing: state.getIn(['dashboard', 'comparing']),
-          filtersSize: state.getIn(['dashboard', 'filters']).size,
-          filters: state.getIn(['dashboard', compare ? 'filtersCompare' : 'filters']),
-          period: state.getIn(['dashboard', compare ? 'periodCompare' : 'period']), //TODO: filters
-          platform: state.getIn(['dashboard', 'platform']),
-          // appearance: state.getIn([ 'user', 'account', 'appearance' ]),
-
-          dataCompare: state.getIn(['dashboard', '_' + widgetKey]), // only for overview
-          loadingCompare: state.getIn(['dashboard', 'fetchWidget', '_' + widgetKey, 'loading']),
-          filtersCompare: state.getIn(['dashboard', 'filtersCompare']),
-          periodCompare: state.getIn(['dashboard', 'periodCompare']), //TODO: filters
-        };
-      },
-      {
-        fetchWidget,
-        // updateAppearance,
-      }
-    )
-    class WidgetWrapper extends React.PureComponent {
-      constructor(props) {
-        super(props);
-        const params = panelProps.customParams
-          ? panelProps.customParams(this.props.period.rangeName)
-          : {};
-        if (props.testId) {
-          params.testId = parseInt(props.testId);
-        }
-        params.compare = this.props.compare;
-        const filters =
-          allowedFilters.length > 0
-            ? props.filters.filter((f) => allowedFilters.includes(f.key))
-            : props.filters;
-        props.fetchWidget(widgetKey, props.period, props.platform, params, filters);
-      }
-
-      componentDidUpdate(prevProps) {
-        if (
-          prevProps.period !== this.props.period ||
-          prevProps.platform !== this.props.platform ||
-          prevProps.filters.size !== this.props.filters.size
-        ) {
-          const params = panelProps.customParams
-            ? panelProps.customParams(this.props.period.rangeName)
-            : {};
-          if (this.props.testId) {
-            params.testId = parseInt(this.props.testId);
-          }
-          params.compare = this.props.compare;
-          const filters =
-            allowedFilters.length > 0
-              ? this.props.filters.filter((f) => allowedFilters.includes(f.key))
-              : this.props.filters;
-          this.props.fetchWidget(
-            widgetKey,
-            this.props.period,
-            this.props.platform,
-            params,
-            filters
-          );
-        }
-
-        // handling overview widgets
-        if (
-          (!prevProps.comparing ||
-            prevProps.periodCompare !== this.props.periodCompare ||
-            prevProps.filtersCompare.size !== this.props.filtersCompare.size) &&
-          this.props.comparing &&
-          this.props.isOverview
-        ) {
-          const params = panelProps.customParams
-            ? panelProps.customParams(this.props.period.rangeName)
-            : {};
-          params.compare = true;
-          const filtersCompare =
-            allowedFilters.length > 0
-              ? this.props.filtersCompare.filter((f) => allowedFilters.includes(f.key))
-              : this.props.filtersCompare;
-          this.props.fetchWidget(
-            widgetKey,
-            this.props.periodCompare,
-            this.props.platform,
-            params,
-            filtersCompare
-          );
-        }
-      }
-
-      handleRemove = () => {
-        // const { appearance } = this.props;
-        // this.props.updateAppearance(appearance.setIn([ 'dashboard', widgetKey ], false));
-      };
-
-      render() {
-        const { comparing, compare } = this.props;
-
-        return wrapped ? (
-          <div className={cn(stl.wrapper, { [stl.comparing]: comparing })}>
-            <div
-              className={cn(stl.panel, 'flex flex-col relative', {
-                [stl.fullwidth]: panelProps.fullwidth,
-                [stl.fitContent]: panelProps.fitContent,
-                [stl.minHeight]: !panelProps.fitContent,
-              })}
-            >
-              <div className="flex items-center mb-2">
-                {comparing && (
-                  <div className={cn(stl.circle, { 'bg-tealx': !compare, 'bg-teal': compare })} />
-                )}
-                <Title title={panelProps.name ? panelProps.name : WIDGET_MAP[widgetKey].name} />
-                {
-                  <CloseButton
-                    className={cn(stl.closeButton, 'ml-auto')}
-                    onClick={this.handleRemove}
-                    size="17"
-                  />
-                }
-              </div>
-              <div className="flex-1 flex flex-col">
-                <BaseComponent {...this.props} />
-              </div>
-            </div>
-          </div>
-        ) : (
-          <BaseComponent {...this.props} />
-        );
-      }
-    }
-    return WidgetWrapper;
-  };
diff --git a/frontend/app/components/Dashboard/Widgets/index.js b/frontend/app/components/Dashboard/Widgets/index.js
deleted file mode 100644
index e5dbd3758..000000000
--- a/frontend/app/components/Dashboard/Widgets/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-// export { default as ApplicationActivity } from './ApplicationActivity';
-// export { default as ProcessedSessions } from './ProcessedSessions';
-// export { default as Errors } from './Errors';
-// export { default as UserActivity } from './UserActivity';
-// export { default as Performance } from './Performance';
-// export { default as SlowestImages } from './SlowestImages';
-// export { default as PageMetrics } from './PageMetrics';
-// export { default as LastFrustrations } from './LastFrustrations';
-// export { default as MissingResources } from './MissingResources';
-// export { default as ResourceLoadingTime } from './ResourceLoadingTime';
-// export { default as SlowestResources } from './SlowestResources';
-// export { default as DomBuildingTime } from './DomBuildingTime';
-// export { default as BusiestTimeOfTheDay } from './BusiestTimeOfTheDay';
-// export { default as ResponseTime } from './ResponseTime';
-// export { default as ResponseTimeDistribution } from './ResponseTimeDistribution';
-// export { default as TimeToRender } from './TimeToRender';
-// export { default as SessionsImpactedBySlowRequests } from './SessionsImpactedBySlowRequests';
-// export { default as MemoryConsumption } from './MemoryConsumption';
-// export { default as FPS } from './FPS';
-// export { default as CpuLoad } from './CpuLoad';
-// export { default as Crashes } from './Crashes';
-// export { default as TopDomains } from './TopDomains';
-// export { default as SlowestDomains } from './SlowestDomains';
-// export { default as ErrorsPerDomain } from './ErrorsPerDomain';
-// export { default as CallWithErrors } from './CallWithErrors';
-// export { default as ErrorsByType } from './ErrorsByType';
-// export { default as ErrorsByOrigin } from './ErrorsByOrigin';
-// export { default as ResourceLoadedVsResponseEnd } from './ResourceLoadedVsResponseEnd';
-// export { default as ResourceLoadedVsVisuallyComplete } from './ResourceLoadedVsVisuallyComplete';
-// export { default as SessionsAffectedByJSErrors } from './SessionsAffectedByJSErrors';
-// export { default as BreakdownOfLoadedResources } from './BreakdownOfLoadedResources';
-// export { default as TopMetrics } from './TopMetrics';
-// export { default as SpeedIndexLocation } from './SpeedIndexLocation';
-// export { default as SessionsPerBrowser } from './SessionsPerBrowser';
-// export { default as CallsErrors5xx } from './CallsErrors5xx';
-// export { default as CallsErrors4xx } from './CallsErrors4xx';
-// export { default as TrendChart } from './TrendChart';
-
-// TODO remove all the references to the old widgets
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx b/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx
index c411ee25c..88da5d888 100644
--- a/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx
@@ -1,6 +1,4 @@
 import React from 'react';
-import { Styles } from 'App/components/Dashboard/Widgets/common';
-import CustomMetricOverviewChart from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart';
 import ErrorsByType from 'App/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType';
 import ErrorsByOrigin from 'App/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin';
 import ErrorsPerDomain from 'App/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain';
diff --git a/frontend/app/duck/dashboard.js b/frontend/app/duck/dashboard.js
index a99f985e3..9e40505c6 100644
--- a/frontend/app/duck/dashboard.js
+++ b/frontend/app/duck/dashboard.js
@@ -1,123 +1,22 @@
-import { List, Map, getIn } from 'immutable';
-import { 
-  WIDGET_LIST,
-  WIDGET_MAP,
-  WIDGET_KEYS,
-} from 'Types/dashboard';
-import Period, { LAST_24_HOURS, LAST_7_DAYS } from 'Types/app/period';
-import { ALL } from 'Types/app/platform';
+import { List, Map } from 'immutable';
 import { createRequestReducer } from './funcTools/request';
-import { mergeReducers, success, array } from './funcTools/tools';
+import { mergeReducers, } from './funcTools/tools';
 import { RequestTypes } from 'Duck/requestStateCreator';
 
-const SET_PERIOD = 'dashboard/SET_PERIOD';
-const SET_PLATFORM = 'dashboard/SET_PLATFORM';
 const SET_SHOW_ALERTS = 'dashboard/SET_SHOW_ALERTS';
-const SET_COMPARING = 'dashboard/SET_COMPARING';
-const SET_FILTERS = 'dashboard/SET_FILTERS';
-const REMOVE_FILTER = 'dashboard/REMOVE_FILTER';
-const CLEAR_FILTERS = 'dashboard/CLEAR_FILTERS';
 const FETCH_PERFORMANCE_SEARCH = 'dashboard/FETCH_PERFORMANCE_SEARCH';
-const FETCH_PERFORMANCE_SEARCH_SUCCESS = success(FETCH_PERFORMANCE_SEARCH);
 const ON_BOARD = new RequestTypes('plan/ON_BOARD');
 
-const FETCH_META_OPTIONS = 'dashboard/FETCH_META_OPTIONS';
-const FETCH_META_OPTIONS_SUCCESS = success(FETCH_META_OPTIONS);
-
-export const FETCH_WIDGET_TYPES = {};
-WIDGET_KEYS.forEach(key => {
-  FETCH_WIDGET_TYPES[ key ] = `dashboard/FETCH_WIDGET-${ key }-`; //workaround TODO
-  FETCH_WIDGET_TYPES[ '_' + key ] = `dashboard/FETCH_WIDGET-${ '_' + key }-`; //workaround TODO
-});
-const FETCH_WIDGET_SUCCESS_LIST = WIDGET_KEYS.map(key => success(FETCH_WIDGET_TYPES[ key ])).concat(WIDGET_KEYS.map(key => success(FETCH_WIDGET_TYPES[ '_' + key ])));
-
-const widgetInitialStates = {};
-WIDGET_LIST.forEach(({ key, dataWrapper }) => { 
-  widgetInitialStates[ key ] = dataWrapper();
-  widgetInitialStates[ '_' + key ] = dataWrapper(); 
-});
-
 const initialState = Map({
-  ...widgetInitialStates,
-  period: Period({ rangeName: LAST_7_DAYS }),
-  periodCompare: Period({ rangeName: LAST_7_DAYS }),
-  filters: List(),
-  filtersCompare: List(),
-  platform: ALL,
-  performanceChart: [],
   showAlerts: false,
-  comparing: false,
-  metaOptions: [],
-  boarding: List(),
-  boardingCompletion: 0,
+  boarding: undefined,
+  boardingCompletion: undefined,
 });
 
-const getValue = ({ avgPageLoadTime, avgRequestLoadTime, avgImageLoadTime }) =>  avgPageLoadTime || avgRequestLoadTime || avgImageLoadTime;
-
-const getCountry = item => {
-  switch(item.location) {
-    case 'us-east-2':
-    case 'us-east-1':
-      return {
-        userCountry: 'US',
-        avg: Math.round(item.avg)
-      };
-    case 'europe-west1-d':
-      return {
-        userCountry: 'EU',
-        avg: Math.round(item.avg)
-      };
-    default:
-      return '';
-  }
-}
-
 const reducer = (state = initialState, action = {}) => {
-  let isCompare;
-  if (FETCH_WIDGET_SUCCESS_LIST.includes(action.type)) {
-    const key = action.type.split('-')[ 1 ];
-    const _key = key.startsWith('_') ? key.replace('_', '') : key;    
-    const dataWrapper = WIDGET_LIST.find(w => w.key === _key).dataWrapper;
-    return state.set(action.compare ? key : key, dataWrapper(action.data, action.period));
-  }
   switch (action.type) {
-    case SET_PERIOD:
-      return state.set(action.compare ? 'periodCompare' : 'period', Period(action.period));
-    case SET_PLATFORM:
-      return state.set("platform", action.platform);
-    case FETCH_PERFORMANCE_SEARCH_SUCCESS:
-      const timestamps = List(getIn(action.data, [ 0, "chart" ])).map(({ timestamp }) => ({ timestamp }));
-      const chart = List(action.data)
-        .reduce((zippedChartData, resource, index) => zippedChartData
-          .zipWith((chartPoint, resourcePoint) => ({
-            ...chartPoint,
-            [ `resource${ index }` ]: getValue(resourcePoint),
-          }), List(resource.chart)), 
-          timestamps
-        )
-        .toJS();
-      return state.set('performanceChart', formatChartTime(chart, state.get("period")));
     case SET_SHOW_ALERTS:
       return state.set('showAlerts', action.state);
-    case SET_COMPARING:
-      return state.set('comparing', action.status)
-        .set('filtersCompare', List()).set('periodCompare', state.get("period"));
-    case SET_FILTERS:
-      isCompare = action.key === 'compare';
-      return state.update(isCompare ? 'filtersCompare' : 'filters', list => list.push(action.filter))
-    case REMOVE_FILTER:
-      isCompare = action.key === 'compare';
-      return state.update(
-        isCompare ? 'filtersCompare' : 'filters', 
-        list => list.filter(filter => filter.key !== action.filterKey)
-      );
-    case CLEAR_FILTERS:
-      isCompare = action.key === 'compare';
-      return state.set(isCompare ? 'filtersCompare' : 'filters', List());
-
-    case FETCH_META_OPTIONS_SUCCESS:
-      return state.set('metaOptions', action.data.map(i => ({ ...i, icon: 'id-card', placeholder: 'Search for ' + i.name})));
-    
     case ON_BOARD.SUCCESS:
       const tasks = List(action.data);
       const completion = tasks.filter(task => task.done).size * 100 / tasks.size;
@@ -129,82 +28,10 @@ const reducer = (state = initialState, action = {}) => {
 export default mergeReducers(
   reducer,
   createRequestReducer({
-    fetchWidget: FETCH_WIDGET_TYPES,
     performanceSearchRequest: FETCH_PERFORMANCE_SEARCH,
   }),
 );
 
-export function setPeriod(compare, period) {
-  return {
-    type: SET_PERIOD,
-    compare,
-    period,
-  }
-}
-
-export function setPlatform(platform) {
-  return {
-    type: SET_PLATFORM,
-    platform,
-  };
-}
-
-export function setComparing(status) {
-  return {
-    type: SET_COMPARING,
-    status,
-  };
-}
-
-export function setFilters(key, filter) {
-  return {
-    type: SET_FILTERS,
-    key,
-    filter
-  };
-}
-
-export function removeFilter(key, filterKey) {
-  return {
-    type: REMOVE_FILTER,
-    key,
-    filterKey
-  };
-}
-
-export function clearFilters(key) {
-  return {
-    type: CLEAR_FILTERS,
-    key
-  };
-}
-
-
-const toUnderscore = s => s.split(/(?=[A-Z])/).join('_').toLowerCase();
-export function fetchWidget(widgetKey, period, platform, _params, filters) {
-  let path = `/dashboard/${ toUnderscore(widgetKey) }`;
-  const widget = WIDGET_MAP[widgetKey];  
-  const params = period.toTimestamps();
-  params.filters = filters ? 
-    filters.map(f => ({key: f.key, value: f.value ? f.value : f.text})).toJS() : [];
-  // if (platform !== ALL) {
-  //   params.platform = platform;
-  // }  
-  
-  return {
-    types: array(FETCH_WIDGET_TYPES[ _params.compare ? '_' + widgetKey : widgetKey ]),
-    call: client => client.post(path, {...params, ..._params}),
-    period,
-    compare: _params && _params.compare
-  };
-}
-
-export function fetchPerformanseSearch(params) {
-  return {
-    types: array(FETCH_PERFORMANCE_SEARCH),
-    call: client => client.post('/dashboard/performance/search', params),
-  };
-}
 
 export function setShowAlerts(state) {
   return {
@@ -213,13 +40,6 @@ export function setShowAlerts(state) {
   }
 }
 
-export function fetchMetadataOptions() {
-  return {
-    types: array(FETCH_META_OPTIONS),
-    call: client => client.get('/dashboard/metadata'),
-  };
-}
-
 export function getOnboard() {
   return {
     types: ON_BOARD.toArray(),
diff --git a/frontend/app/types/dashboard/applicationActivity.js b/frontend/app/types/dashboard/applicationActivity.js
deleted file mode 100644
index f24b063b8..000000000
--- a/frontend/app/types/dashboard/applicationActivity.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import Record from 'Types/Record';
-
-export default Record({
-  avgPageLoad: 0,
-  avgPageLoadProgress: 0,
-  avgImgLoad: 0,
-  avgImgLoadProgress: 0,
-  avgReqLoad: 0,
-  avgReqLoadProgress: 0,
-}, {
-  // fromJS: aa => ({
-  //   avgPageLoad: aa.avgDom,
-  //   avgPageLoadProgress: aa.avgDomProgress,
-  //   avgImgLoad: aa.avgLoad,
-  //   avgImgLoadProgress: aa.avgLoadProgress,
-  //   avgReqLoad: aa.avgFirstPixel,
-  //   avgReqLoadProgress: aa.avgFirstPixelProgress,
-  //   ...aa,
-  // }),
-});
-
diff --git a/frontend/app/types/dashboard/crashes.js b/frontend/app/types/dashboard/crashes.js
deleted file mode 100644
index 0986dddeb..000000000
--- a/frontend/app/types/dashboard/crashes.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Record } from 'immutable';
-
-const Crashes = Record({
-  chart: [],
-  browsers: []
-});
-
-
-function fromJS(data = {}) {
-  if (data instanceof Crashes) return data;
-  return new Crashes(data);
-}
-
-export default fromJS;
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/customMetric.js b/frontend/app/types/dashboard/customMetric.js
deleted file mode 100644
index 9dd374b56..000000000
--- a/frontend/app/types/dashboard/customMetric.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Record } from 'immutable';
-
-const CustomMetric = Record({
-  avg: undefined,
-  chart: [],
-});
-
-
-function fromJS(data = {}) {
-  if (data instanceof CustomMetric) return data;
-  return new CustomMetric(data);
-}
-
-export default fromJS;
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/domBuildingTime.js b/frontend/app/types/dashboard/domBuildingTime.js
deleted file mode 100644
index 258902f60..000000000
--- a/frontend/app/types/dashboard/domBuildingTime.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Record } from 'immutable';
-
-const DomBuildingTime = Record({
-  avg: undefined,
-  chart: [],
-});
-
-
-function fromJS(data = {}) {
-  if (data instanceof DomBuildingTime) return data;
-  return new DomBuildingTime(data);
-}
-
-export default fromJS;
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/err.js b/frontend/app/types/dashboard/err.js
deleted file mode 100644
index cd869b60a..000000000
--- a/frontend/app/types/dashboard/err.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Record from 'Types/Record';
-import { convertNumberRange } from 'App/utils';
-
-export default Record({
-  error: '',
-  count: undefined,
-  sessions: undefined,
-  firstOccurrenceAt: undefined,
-  lastOccurrenceAt: undefined,
-  startTimestamp: undefined,
-  endTimestamp: undefined,
-  chart: [],
-}, {
-  fromJS: ({ chart = [], ...err }) => {
-    const oldMax = [ ...chart ].sort((a, b) => b.count - a.count)[ 0 ].count;
-    const formattedChart = chart.map(({ count, ...rest }) =>
-      ({ count: convertNumberRange(oldMax, 0, 2, 20, count), ...rest }));
-    return {
-      ...err,
-      chart: formattedChart,
-    }
-  }
-});
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/errors.js b/frontend/app/types/dashboard/errors.js
deleted file mode 100644
index 8d56e4c33..000000000
--- a/frontend/app/types/dashboard/errors.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Record } from 'immutable';
-
-const Errors = Record({
-  count: undefined,
-  progress: undefined,
-  impactedSessions: undefined,
-  impactedSessionsProgress: undefined,
-  chart: [],
-});
-
-function fromJS(errors = {}) {
-  if (errors instanceof Errors) return errors;
-  return new Errors(errors);
-}
-
-export default fromJS;
diff --git a/frontend/app/types/dashboard/errorsByOrigin.js b/frontend/app/types/dashboard/errorsByOrigin.js
deleted file mode 100644
index bdbceab60..000000000
--- a/frontend/app/types/dashboard/errorsByOrigin.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Record } from 'immutable';
-
-const ErrorsByOrigin = Record({
-  chart: []
-});
-
-
-function fromJS(data = {}) {
-  if (data instanceof ErrorsByOrigin) return data;
-  return new ErrorsByOrigin(data);
-}
-
-export default fromJS;
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/errorsByType.js b/frontend/app/types/dashboard/errorsByType.js
deleted file mode 100644
index ccedc566e..000000000
--- a/frontend/app/types/dashboard/errorsByType.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Record } from 'immutable';
-
-const ErrorsByType = Record({
-  chart: [],
-});
-
-
-function fromJS(data = {}) {
-  if (data instanceof ErrorsByType) return data;
-  return new ErrorsByType(data);
-}
-
-export default fromJS;
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/image.js b/frontend/app/types/dashboard/image.js
deleted file mode 100644
index 57f5f7507..000000000
--- a/frontend/app/types/dashboard/image.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Record from 'Types/Record';
-
-const getName = (url = '') => url.split('/').filter(part => !!part).pop();
-
-export default Record({
-  avgDuration: undefined,
-  sessions: undefined,
-  chart: [],
-  url: '',
-  name: '',
-}, {
-	fromJS: (image) => ({
-		...image,
-		name: getName(image.url),
-	})
-});
diff --git a/frontend/app/types/dashboard/index.ts b/frontend/app/types/dashboard/index.ts
deleted file mode 100644
index 3e2ff0e74..000000000
--- a/frontend/app/types/dashboard/index.ts
+++ /dev/null
@@ -1,571 +0,0 @@
-import { List } from 'immutable';
-import Session from 'Types/session';
-import { camelCased } from 'App/utils';
-
-import { getChartFormatter } from './helper';
-import ProcessedSessions from './processedSessions';
-import DomBuildingTime from './domBuildingTime';
-import MemoryConsumption from './memoryConsumption';
-import ResponseTime from './responseTime';
-import ErrorsByType from './errorsByType';
-import OverviewWidget from './overviewWidget';
-import TopDomains from './topDomains';
-import SpeedLocation from './speedLocation';
-import SessionsPerBrowser from './sessionsPerBrowser';
-import ErrorsByOrigin from './errorsByOrigin';
-import SlowestResources from './slowestResources';
-import ResponseTimeDistribution from './responseTimeDistribution';
-import SessionsImpactedBySlowRequests from './sessionsImpactedBySlowRequests';
-import TimeToRender from './timeToRender';
-import SessionsImpactedByJSErrors from './sessionsImpactedByJSErrors';
-import ApplicationActivity from './applicationActivity';
-import TopMetrics from './topMetrics';
-import Errors from './errors';
-import UserActivity from './userActivity';
-import Performance from './performance';
-import Crashes from './crashes';
-import PageMetrics from './pageMetrics';
-import SlowestDomains from './slowestDomains';
-import ResourceLoadingTime from './resourceLoadingTime';
-
-import Image from './image';
-import Err from './err';
-import MissingResource from './missingResource';
-
-export const WIDGET_LIST = [{
-		key: "sessions",
-		name: "Processed Sessions",
-		description: 'Number of recorded user sessions.',
-		thumb: 'processed_sessions.png',
-		dataWrapper: (ps, period) => ProcessedSessions(ps)
-			.update("chart", getChartFormatter(period)),
-	}, {
-		key: "applicationActivity",
-		name: "Application Activity",
-		description: 'Average loading time of pages, images and browser requests.',
-		thumb: 'application_activity.png',
-		dataWrapper: ApplicationActivity,
-	}, {
-		key: "errors",
-		name: "Exceptions",
-		description: 'Number of errors and impacted user sessions.',
-		thumb: 'errors.png',
-		dataWrapper: (e, period) => Errors(e)
-			.update("chart", getChartFormatter(period)),
-	}, {
-		key: "userActivity",
-		name: "User Activity",
-		description: 'The average user feedback score, average number of visited pages per session and average session duration.',
-		thumb: 'user_activity.png',
-		dataWrapper: data => new UserActivity(data),
-	}, {
-		key: "pageMetrics",
-		name: "Page Metrics",
-		description: "Average speed metrics across all pages: First Meaningful Pain and DOM Content Loaded.",
-		thumb: 'page_metrics.png',
-		dataWrapper: PageMetrics,
-	}, {
-		key: "performance",
-		name: "Performance",
-		description: "Compare the average loading times of your web app's resources (pages, images and browser requests)",
-		thumb: 'performance.png',
-		dataWrapper: (p, period) => Performance(p)
-			.update("chart", getChartFormatter(period)),
-	}, {
-		key: "slowestImages",
-		name: "Slowest Images",
-		description: 'List of images that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		dataWrapper: list => List(list).map(Image).sort((i1, i2) => {
-      if (i1.sessions < 1000) return i2.sessions -i1.sessions;
-      const sessionK1 = Math.trunc(i1.sessions/1000);
-      const sessionK2 = Math.trunc(i2.sessions/1000);
-      if (sessionK1 !== sessionK2) return sessionK2 - sessionK1;
-      return i2.avgDuration - i1.avgDuration;
-    }),
-	},
-	{
-		key: "sessionsFrustration",
-		name: "Recent Frustrations",
-		description: "List of recent sessions where users experienced some kind of frustrations, such as click rage.",
-		thumb: 'recent_frustrations.png',
-		dataWrapper: list => List(list).map(s => new Session(s)),
-	},
-	{
-		key: "sessionsFeedback",
-		name: "Recent Negative Feedback",
-		description: "List of recent sessions where users reported an issue or a bad experience.",
-		thumb: 'negative_feedback.png',
-		dataWrapper: list => List(list).map(s => new Session(s)),
-	},
-	{
-		key: "missingResources",
-		name: "Missing Resources",
-		description: "List of resources, such as images, that couldn't be loaded.",
-		thumb: 'missing_resources.png',
-		type: 'resources',
-		dataWrapper: list => List(list).map(MissingResource),
-	},
-	{
-		key: "slowestResources",
-		name: "Slowest Resources",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'resources',
-		dataWrapper: list => list.map(res => new SlowestResources(res))
-	},
-	{
-		key: "overview",
-		name: "Overview Metrics",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		dataWrapper: (p, period) => {
-			return List(p)
-				.map(item => OverviewWidget({ key: camelCased(item.key), ...item.data}))
-				.map(widget => widget.update("chart", getChartFormatter(period)))
-		}
-	},
-	{
-		key: "speedLocation",
-		name: "Speed Index by Location",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'performance',
-		dataWrapper: list => SpeedLocation(list)
-	},
-	{
-		key: "slowestDomains",
-		name: "Slowest Domains",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'performance',
-		// dataWrapper: list => List(list).sort((a, b) => a.avg >= b.avg).map(SlowestDomains)
-		dataWrapper: list => SlowestDomains(list)
-			.update("partition", (partition) => List(partition).sort((a, b) => b.avg - a.avg))
-	},
-	{
-		key: "sessionsPerBrowser",
-		name: "Sessions per Browser",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'performance',
-		dataWrapper: list => SessionsPerBrowser(list)
-			// .update("chart", (list) => List(list).sort((a, b) => a.count >= b.count))
-	},
-	{
-		key: "resourcesLoadingTime",
-		name: "Resource Fetch Time",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'resources',
-		dataWrapper: (list, period) => DomBuildingTime(list)
-			.update("chart", getChartFormatter(period))
-	},
-	{
-		key: "timeToRender",
-		name: "Time To Render",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'performance',
-		dataWrapper: (p, period) => TimeToRender(p)
-			.update("chart", getChartFormatter(period))
-	},
-	{
-		key: "impactedSessionsBySlowPages",
-		name: "Sessions Impacted by Slow Requests",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'performance',
-		dataWrapper: (p, period) => SessionsImpactedBySlowRequests({ chart: p})
-			.update("chart", getChartFormatter(period))
-	},
-	{
-		key: "memoryConsumption",
-		name: "Memory Consumption",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'performance',
-		dataWrapper: (p, period) => MemoryConsumption(p)
-		// .update("chart", list => list.map((i) => ({...i, avgUsedJsHeapSize: i.avgUsedJsHeapSize/1024/1024 })))
-		.update("chart", getChartFormatter(period))
-	},
-	{
-		key: "cpu",
-		name: "CPU Load",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'performance',
-		dataWrapper: (p, period) => MemoryConsumption(p)
-			.update("chart", getChartFormatter(period)),
-	},
-	{
-		key: "fps",
-		name: "Framerate",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'performance',
-		dataWrapper: (p, period) => MemoryConsumption(p)
-			.update("chart", getChartFormatter(period)),
-	},
-	{
-		key: "crashes",
-		name: "Crashes",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'performance',
-		dataWrapper: (e, period) => Crashes(e)
-			.update("chart", getChartFormatter(period))
-	},
-	{
-		key: "resourceTypeVsResponseEnd",
-		name: "Resource Loaded vs Response End",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'resources',
-		dataWrapper: (p, period) => ErrorsByType({chart: p})
-			.update("chart", getChartFormatter(period))
-	},
-	{
-		key: "resourcesCountByType",
-		name: "Breakdown of Loaded Resources",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'resources',
-		dataWrapper: (p, period) => ErrorsByType({chart: p})
-			.update("chart", getChartFormatter(period))
-	},
-	{
-		key: "resourcesVsVisuallyComplete",
-		name: "Resource Loaded vs Visually Complete",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'performance',
-		dataWrapper: (p, period) => ErrorsByType({chart: p})
-			.update("chart", getChartFormatter(period))
-			// .update('chart', (data) => {
-			// 	return data.map(i => ({...i, avgTimeToRender: i.avgTimeToRender / 100}));
-			// })
-	},
-	{
-		key: "pagesDomBuildtime",
-		name: "DOM Build Time",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'performance',
-		dataWrapper: (p, period) => DomBuildingTime(p)
-			.update("chart", getChartFormatter(period))
-	},
-	{
-		key: "pagesResponseTime",
-		name: "Page Response Time",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'performance',
-		dataWrapper: (p, period) => ResponseTime(p)
-			.update("chart", getChartFormatter(period))
-	},
-	{
-		key: "pagesResponseTimeDistribution",
-		name: "Page Response Time Distribution",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'performance',
-		dataWrapper: (p, period) => ResponseTimeDistribution(p)
-			.update("chart", getChartFormatter(period))
-			.update("extremeValues", list => list.map(i => ({...i, time: 'Extreme Values'})))
-			.update("percentiles", list => list.map(i => ({ ...i, responseTime: Math.round(i.responseTime)})))
-	},
-	{
-		key: "domainsErrors_4xx",
-		name: "Top Domains with 4xx Fetch Errors",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'errors',
-		dataWrapper: (p, period) => TopDomains({ chart: p})
-			.update("chart", getChartFormatter(period))
-			// .updateIn(["chart", "5xx"], getChartFormatter(period))
-	},
-	{
-		key: "domainsErrors_5xx",
-		name: "Top Domains with 5xx Fetch Errors",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'errors',
-		dataWrapper: (p, period) => TopDomains({ chart: p})
-			.update("chart", getChartFormatter(period))
-			// .updateIn(["chart", "5xx"], getChartFormatter(period))
-	},
-	{
-		key: "errorsPerDomains",
-		name: "Errors per Domain",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'errors',
-		// dataWrapper: list => List(list)
-		dataWrapper: list => List(list).sort((a, b) => b.errorsCount - a.errorsCount).take(5)
-	},
-	{
-		key: "callsErrors",
-		name: "Fetch Calls with Errors",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'errors',
-		dataWrapper: list => List(list).sort((a, b) => b.allRequests - a.allRequests)
-	},
-	{
-		key: "errorsPerType",
-		name: "Errors by Type",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'errors',
-		dataWrapper: (p, period) => ErrorsByType({chart: p})
-			.update("chart", getChartFormatter(period))
-	},
-	{
-		key: "resourcesByParty",
-		name: "Errors by Origin",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'errors',
-		dataWrapper: (p, period) => ErrorsByOrigin({chart: p})
-			.update("chart", getChartFormatter(period))
-	},
-	{
-		key: "impactedSessionsByJsErrors",
-		name: "Sessions Affected by JS Errors",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		type: 'errors',
-		dataWrapper: (p, period) => SessionsImpactedByJSErrors(p)
-			.update("chart", getChartFormatter(period))
-	},
-	{
-		key: "busiestTimeOfDay",
-		name: "Busiest Time of the Day",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		dataWrapper: list => List(list)
-	},
-	{
-		key: "topMetrics",
-		name: "Top Metrics",
-		description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
-		thumb: 'na.png',
-		dataWrapper: TopMetrics
-	},
-
-	// Overview Widgets
-	{
-		key: 'countSessions',
-		name: 'Captured Sessions',
-		description: 'Lorem ipsum...',
-		thumb: 'na.png',
-		subtext: 'New vs Returning',
-		type: 'overview',
-		tooltipLabel: "Count",
-		dataWrapper: list => List(list)
-	},
-	{
-		key: 'avgTimeToRender',
-		name: 'Time To Render',
-		description: 'Lorem ipsum...',
-		thumb: 'na.png',
-    subtext: 'test',
-		unit: 'ms',
-		type: 'overview',
-		dataWrapper: list => TimeToRender(list)
-  },
-  {
-		key: 'avgTimeToInteractive',
-		name: 'Time To Interactive',
-		description: 'Lorem ipsum...',
-		thumb: 'na.png',
-    subtext: 'test',
-		unit: 'ms',
-		type: 'overview',
-		dataWrapper: list => List(list)
-	},
-	{
-		key: 'avgPageLoadTime',
-		name: 'Page Load Time',
-		description: 'Lorem ipsum...',
-		thumb: 'na.png',
-    subtext: 'test',
-		unit: 'ms',
-		type: 'overview',
-		dataWrapper: list => List(list)
-	},
-	{
-		key: 'avgImageLoadTime',
-		name: 'Image Load Time',
-		description: 'Lorem ipsum...',
-		thumb: 'na.png',
-    subtext: 'test',
-		unit: 'ms',
-		type: 'overview',
-		dataWrapper: list => List(list)
-  },
-  {
-		key: 'avgRequestLoadTime',
-		name: 'Request Load Time',
-		description: 'Lorem ipsum...',
-		thumb: 'na.png',
-    subtext: 'test',
-		unit: 'ms',
-		type: 'overview',
-		dataWrapper: list => List(list)
-	},
-	{
-		key: 'avgDomContentLoadStart',
-		name: 'DOM Content Loaded',
-		description: 'Lorem ipsum...',
-		thumb: 'na.png',
-    subtext: 'test',
-		unit: 'ms',
-		type: 'overview',
-		dataWrapper: list => List(list)
-	},
-	{
-		key: 'avgPagesDomBuildtime',
-		name: 'DOM Build Time',
-		description: 'Lorem ipsum...',
-		thumb: 'na.png',
-    subtext: 'test',
-		unit: 'ms',
-		type: 'overview',
-		dataWrapper: (list, period) => DomBuildingTime(list)
-			.update("chart", getChartFormatter(period))
-	},
-  {
-		key: 'avgSessionDuration',
-		name: 'Session Duration',
-		description: 'Lorem ipsum...',
-		thumb: 'na.png',
-    subtext: 'test',
-		unit: 'min',
-		type: 'overview',
-		dataWrapper: list => List(list)
-	},
-	{
-		key: 'avgVisitedPages',
-		name: 'No. of Visited Pages',
-		description: 'Lorem ipsum...',
-		thumb: 'na.png',
-		subtext: 'test',
-		type: 'overview',
-		dataWrapper: list => List(list)
-  },
-  {
-		key: 'avgPagesResponseTime',
-		name: 'Page Response Time',
-		description: 'Lorem ipsum...',
-		thumb: 'na.png',
-    subtext: 'test',
-		unit: 'ms',
-		type: 'overview',
-		dataWrapper: list => ResponseTime(list)
-  },
-  {
-		key: 'avgTillFirstBit',
-		name: 'Time Till First Byte',
-		description: 'Lorem ipsum...',
-		thumb: 'na.png',
-    subtext: 'test',
-		unit: 'ms',
-		type: 'overview',
-		dataWrapper: list => ResponseTime(list)
-  },
-  // {
-	// 	key: 'avgResponseTime',
-	// 	name: 'Response Time',
-	// 	description: 'Lorem ipsum...',
-	// 	thumb: 'na.png',
-  //   subtext: 'test',
-	// 	unit: 'ms',
-	// 	type: 'overview',
-	// 	dataWrapper: list => List(list)
-  // },
-  // {
-	// 	key: 'requestsCount',
-	// 	name: 'Request Count',
-	// 	description: 'Lorem ipsum...',
-	// 	thumb: 'na.png',
-  //   subtext: 'test',
-	// 	// unit: 'ms',
-	// 	type: 'overview',
-	// 	dataWrapper: list => List(list)
-	// },
-	{
-		key: 'avgFirstContentfulPixel',
-		name: 'First Meaningful Paint',
-		description: 'Lorem ipsum...',
-		thumb: 'na.png',
-    subtext: 'test',
-		unit: 'ms',
-		type: 'overview',
-		dataWrapper: list => List(list)
-  },
-  {
-		key: 'avgFirstPaint',
-		name: 'First Paint',
-		description: 'Lorem ipsum...',
-		thumb: 'na.png',
-    subtext: 'test',
-		unit: 'ms',
-		type: 'overview',
-		dataWrapper: list => List(list)
-  },
-  {
-		key: 'avgUsedJsHeapSize',
-		name: 'Memory Consumption',
-		description: 'Lorem ipsum...',
-		thumb: 'na.png',
-    subtext: 'test',
-		unit: 'mb',
-		type: 'overview',
-		dataWrapper: list => List(list)
-	},
-	{
-		key: 'avgCpu',
-		name: 'CPU Load',
-		description: 'Lorem ipsum...',
-		thumb: 'na.png',
-		subtext: 'test',
-		type: 'overview',
-		unit: '%',
-		dataWrapper: list => List(list)
-	},
-  {
-		key: 'avgFps',
-		name: 'Framerate',
-		description: 'Lorem ipsum...',
-		thumb: 'na.png',
-		subtext: 'test',
-		type: 'overview',
-		dataWrapper: list => List(list)
-	},
-
-];
-
-export const WIDGET_KEYS = WIDGET_LIST.map(({ key }) => key);
-
-const WIDGET_MAP = {};
-WIDGET_LIST.forEach(w => { WIDGET_MAP[ w.key ] = w; });
-
-const OVERVIEW_WIDGET_MAP = {};
-WIDGET_LIST.filter(w => w.type === 'overview').forEach(w => { OVERVIEW_WIDGET_MAP[ w.key ] = w; });
-
-export {
-	WIDGET_MAP,
-	OVERVIEW_WIDGET_MAP,
-	ProcessedSessions,
-	ApplicationActivity,
-	Errors,
-	UserActivity,
-	Performance,
-	PageMetrics,
-	Image,
-	Err,
-	SlowestDomains,
-	ResourceLoadingTime
-};
diff --git a/frontend/app/types/dashboard/memoryConsumption.js b/frontend/app/types/dashboard/memoryConsumption.js
deleted file mode 100644
index f585ac4fd..000000000
--- a/frontend/app/types/dashboard/memoryConsumption.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Record } from 'immutable';
-
-const MemoryConsumption = Record({
-  avgFps: undefined,
-  avgUsedJsHeapSize: undefined,
-  avgCpu: undefined,
-  chart: [],
-});
-
-function fromJS(data = {}) {
-  const size = data.avgUsedJsHeapSize && data.avgUsedJsHeapSize / 1024 / 1024
-  if (data instanceof MemoryConsumption) return data;
-  return new MemoryConsumption({...data, avgUsedJsHeapSize: size});
-}
-
-export default fromJS;
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/missingResource.js b/frontend/app/types/dashboard/missingResource.js
deleted file mode 100644
index 8ca975973..000000000
--- a/frontend/app/types/dashboard/missingResource.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import Record from 'Types/Record';
-import { convertNumberRange, getResourceName } from 'App/utils';
-
-
-export default Record({
-  url: '',
-  name: '',
-  count: undefined,
-  sessions: undefined,
-  startedAt: undefined,
-  endedAt: undefined,
-  startTimestamp: undefined,
-  endTimestamp: undefined,
-  chart: [],
-}, {
-  fromJS: ({ chart = [], ...missingResource }) => {
-    const oldMax = [ ...chart ].sort((a, b) => b.count - a.count)[ 0 ].count;
-    const formattedChart = chart.map(({ count, ...rest }) =>
-      ({ count: convertNumberRange(oldMax, 0, 2, 20, count), ...rest }));
-    return {
-      ...missingResource,
-      chart: formattedChart,
-      name: getResourceName(missingResource.url),
-    }
-  }
-});
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/overviewWidget.js b/frontend/app/types/dashboard/overviewWidget.js
deleted file mode 100644
index 6133c5946..000000000
--- a/frontend/app/types/dashboard/overviewWidget.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Record } from 'immutable';
-
-const OverviewWidget = Record({
-  key: undefined,
-  value: undefined,
-  progress: undefined,
-  chart: [],
-});
-
-
-function fromJS(data = {}) {
-  if (data instanceof OverviewWidget) return data;
-  
-  if (data.key === "avgSessionDuration") {
-    data.value = data.value / 100000
-  }
-  return new OverviewWidget(data);
-}
-
-export default fromJS;
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/pageMetrics.js b/frontend/app/types/dashboard/pageMetrics.js
deleted file mode 100644
index 9c92d9486..000000000
--- a/frontend/app/types/dashboard/pageMetrics.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Record from 'Types/Record';
-
-export default Record({
-  avgLoad: 0,
-  avgLoadProgress: 0,
-  avgFirstContentfulPixel: 0,
-  avgFirstContentfulPixelProgress: 0,
-}, {
-	fromJS: pm => ({
-		...pm,
-		avgFirstContentfulPixel: pm.avgFirstContentfulPixel || pm.avgFirstPixel,
-		avgFirstContentfulPixelProgress: pm.avgFirstContentfulPixelProgress || pm.avgFirstPixelProgress,
-	}),
-});
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/performance.js b/frontend/app/types/dashboard/performance.js
deleted file mode 100644
index 88932f22b..000000000
--- a/frontend/app/types/dashboard/performance.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Record } from 'immutable';
-
-const Performance = Record({
-  chart: [],
-});
-
-
-function fromJS(performance = {}) {
-  if (performance instanceof Performance) return performance;
-  return new Performance(performance);
-}
-
-export default fromJS;
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/processedSessions.js b/frontend/app/types/dashboard/processedSessions.js
deleted file mode 100644
index 2f719648f..000000000
--- a/frontend/app/types/dashboard/processedSessions.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Record } from 'immutable';
-
-const ProcessedSessions = Record({
-  count: undefined,
-  progress: undefined,
-  chart: [],
-});
-
-function fromJS(processedSessions = {}) {
-  if (processedSessions instanceof ProcessedSessions) return processedSessions;
-  return new ProcessedSessions(processedSessions);
-}
-
-export default fromJS;
diff --git a/frontend/app/types/dashboard/resource.ts b/frontend/app/types/dashboard/resource.ts
deleted file mode 100644
index c35b00765..000000000
--- a/frontend/app/types/dashboard/resource.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-const getName = (url = '') => url.split('/').filter(part => !!part).pop();
-
-interface IResource {
-  avgDuration: number;
-  sessions: any[];
-  chart: any[];
-  url: string;
-  name: string;
-}
-
-export default class Resource {
-  avgDuration: IResource["avgDuration"];
-  sessions: IResource["sessions"];
-  chart: IResource["chart"] = [];
-  url: IResource["url"] = '';
-  name: IResource["name"] = '';
-
-  constructor(data: IResource) {
-    Object.assign(this, {
-      ...data,
-      name: getName(data.url),
-    })
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/resourceLoadingTime.ts b/frontend/app/types/dashboard/resourceLoadingTime.ts
deleted file mode 100644
index 65a9114a9..000000000
--- a/frontend/app/types/dashboard/resourceLoadingTime.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-
-interface IResourceLoadingTime {
-  avg: number;
-  timestamp: number;
-}
-
-class ResourceLoadingTime {
-  avg: IResourceLoadingTime["avg"];
-  timestamp: IResourceLoadingTime["timestamp"];
-
-  constructor(data: IResourceLoadingTime) {
-    Object.assign(this, data)
-  }
-}
-
-function fromJS(resourceLoadingTime = {}) {
-  if (resourceLoadingTime instanceof ResourceLoadingTime) return resourceLoadingTime;
-  return new ResourceLoadingTime(resourceLoadingTime);
-}
-
-export default fromJS;
diff --git a/frontend/app/types/dashboard/responseTime.ts b/frontend/app/types/dashboard/responseTime.ts
deleted file mode 100644
index 774440008..000000000
--- a/frontend/app/types/dashboard/responseTime.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-interface IResponseTime {
-  avg: number;
-  chart: any[];
-}
-
-class ResponseTime {
-  avg: IResponseTime["avg"]
-  chart: IResponseTime["chart"] = []
-
-  constructor(data: IResponseTime) {
-    Object.assign(this, data)
-  }
-}
-
-function fromJS(data = {}) {
-  if (data instanceof ResponseTime) return data;
-  return new ResponseTime(data);
-}
-
-export default fromJS;
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/responseTimeDistribution.ts b/frontend/app/types/dashboard/responseTimeDistribution.ts
deleted file mode 100644
index 76a96a1b2..000000000
--- a/frontend/app/types/dashboard/responseTimeDistribution.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-interface IResponseTimeDistribution {
-  chart: any[],
-  avg: number,
-  percentiles: number[],
-  extremeValues: number[],
-  total: number
-}
-
-class ResponseTimeDistribution {
-  chart: IResponseTimeDistribution["chart"] = []
-  avg: IResponseTimeDistribution["avg"]
-  percentiles: IResponseTimeDistribution["percentiles"] = []
-  extremeValues: IResponseTimeDistribution["extremeValues"] = []
-  total: IResponseTimeDistribution["total"]
-
-  constructor(data: IResponseTimeDistribution) {
-    Object.assign(this, data)
-  }
-}
-
-
-function fromJS(data = {}) {
-  if (data instanceof ResponseTimeDistribution) return data;
-  return new ResponseTimeDistribution(data);
-}
-
-export default fromJS;
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/sessionsImpactedByJSErrors.ts b/frontend/app/types/dashboard/sessionsImpactedByJSErrors.ts
deleted file mode 100644
index 843ed6b9a..000000000
--- a/frontend/app/types/dashboard/sessionsImpactedByJSErrors.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-interface ISessionsImpactedByJSErrors {
-  errorsCount: number;
-  chart: any[];
-}
-
-class SessionsImpactedByJSErrors {
-  errorsCount: ISessionsImpactedByJSErrors["errorsCount"];
-  chart: ISessionsImpactedByJSErrors["chart"];
-
-  constructor(data: ISessionsImpactedByJSErrors) {
-    Object.assign(this, data)
-  }
-}
-
-function fromJS(data = {}) {
-  if (data instanceof SessionsImpactedByJSErrors) return data;
-  return new SessionsImpactedByJSErrors(data);
-}
-
-export default fromJS;
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/sessionsImpactedBySlowRequests.ts b/frontend/app/types/dashboard/sessionsImpactedBySlowRequests.ts
deleted file mode 100644
index 6b905fc26..000000000
--- a/frontend/app/types/dashboard/sessionsImpactedBySlowRequests.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-interface ISessionsSlowRequests {
-  avg: number;
-  chart: any[];
-}
-
-class SessionsImpactedBySlowRequests {
-  avg: ISessionsSlowRequests["avg"];
-  chart: ISessionsSlowRequests["chart"] = [];
-
-  constructor(data: ISessionsSlowRequests) {
-    Object.assign(this, data)
-  }
-}
-
-function fromJS(data = {}) {
-  if (data instanceof SessionsImpactedBySlowRequests) return data;
-  return new SessionsImpactedBySlowRequests(data);
-}
-
-export default fromJS;
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/sessionsPerBrowser.ts b/frontend/app/types/dashboard/sessionsPerBrowser.ts
deleted file mode 100644
index ec7a08c76..000000000
--- a/frontend/app/types/dashboard/sessionsPerBrowser.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-interface ISessionsPerBrowser {
-  count?: number,
-  chart?: any[],
-  avg: number,
-}
-
-class SessionsPerBrowser {
-  count: ISessionsPerBrowser["count"]
-  chart: ISessionsPerBrowser["chart"] = []
-  avg: ISessionsPerBrowser["avg"]
-
-  constructor(data: ISessionsPerBrowser) {
-    Object.assign(this, data)
-  }
-}
-
-function fromJS(sessionsPerBrowser = {}) {
-  if (sessionsPerBrowser instanceof SessionsPerBrowser) return sessionsPerBrowser;
-  return new SessionsPerBrowser({...sessionsPerBrowser, avg: Math.round(sessionsPerBrowser.avg)});
-}
-
-export default fromJS;
diff --git a/frontend/app/types/dashboard/slowestDomains.ts b/frontend/app/types/dashboard/slowestDomains.ts
deleted file mode 100644
index 9dbe09870..000000000
--- a/frontend/app/types/dashboard/slowestDomains.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Record } from 'immutable';
-
-interface ISlowestDomains {
-  partition?: string[];
-  avg: number;
-}
-
-class SlowestDomains {
-  partition: ISlowestDomains["partition"] = [];
-  avg: ISlowestDomains["avg"];
-
-  constructor(data: ISlowestDomains) {
-    Object.assign(this, data)
-  }
-}
-
-function fromJS(slowestDomains = {}) {
-  if (slowestDomains instanceof SlowestDomains) return slowestDomains;
-  return new SlowestDomains({...slowestDomains, avg: Math.round(slowestDomains.avg)});
-}
-
-export default fromJS;
diff --git a/frontend/app/types/dashboard/slowestResources.ts b/frontend/app/types/dashboard/slowestResources.ts
deleted file mode 100644
index 57a802ac6..000000000
--- a/frontend/app/types/dashboard/slowestResources.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-interface ISlowestResources {
-	avg: number;
-	url: string;
-	type: string;
-	name: string;
-	chart: any[]
-}
-
-export default class SlowestResources {
-	avg: ISlowestResources["avg"];
-	url: ISlowestResources["url"];
-	type: ISlowestResources["type"];
-	name: ISlowestResources["name"];
-	chart: ISlowestResources["chart"];
-
-	constructor(data: ISlowestResources) {
-		Object.assign(this, data);
-	}
-}
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/speedLocation.ts b/frontend/app/types/dashboard/speedLocation.ts
deleted file mode 100644
index ee9ff7cd3..000000000
--- a/frontend/app/types/dashboard/speedLocation.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-interface ISpeedLocation {
-  avg?: number
-  chart?: any[]
-}
-
-class SpeedLocation {
-  avg?: ISpeedLocation["avg"]
-  chart?: ISpeedLocation["chart"]
-
-  constructor(data: ISpeedLocation) {
-    Object.assign(this, data)
-  }
-}
-
-function fromJS(data = {}) {
-  if (data instanceof SpeedLocation) return data;
-  return new SpeedLocation(data);
-}
-
-export default fromJS;
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/timeToRender.ts b/frontend/app/types/dashboard/timeToRender.ts
deleted file mode 100644
index d04b40986..000000000
--- a/frontend/app/types/dashboard/timeToRender.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-interface ITimeToRender {
-  avg?: number
-  chart?: any[]
-}
-
-class TimeToRender {
-  avg: ITimeToRender["avg"]
-  chart: ITimeToRender["chart"] = []
-
-  constructor(data: ITimeToRender) {
-    Object.assign(this, data)
-  }
-}
-
-function fromJS(data = {}) {
-  if (data instanceof TimeToRender) return data;
-  return new TimeToRender(data);
-}
-
-export default fromJS;
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/topDomains.ts b/frontend/app/types/dashboard/topDomains.ts
deleted file mode 100644
index dfbb2af7e..000000000
--- a/frontend/app/types/dashboard/topDomains.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Record } from 'immutable';
-
-interface ITopDomains {
-  chart?: any[]
-}
-
-class TopDomains {
-  chart: ITopDomains["chart"] = []
-
-  constructor(data: ITopDomains) {
-    this.chart = data.chart
-  }
-}
-
-function fromJS(data = {}) {
-  if (data instanceof TopDomains) return data;
-  return new TopDomains(data);
-}
-
-export default fromJS;
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/topMetrics.ts b/frontend/app/types/dashboard/topMetrics.ts
deleted file mode 100644
index 59d7c89b7..000000000
--- a/frontend/app/types/dashboard/topMetrics.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-interface ITopMetrics {
-  avgResponseTime: number
-  requestsCount: number
-  avgTimeTilFirstBite: number
-  avgDomCompleteTime: number
-}
-
-export default class TopMetrics {
-  avgResponseTime: ITopMetrics["avgResponseTime"] = 0
-  requestsCount: ITopMetrics["requestsCount"] = 0
-  avgTimeTilFirstBite: ITopMetrics["avgTimeTilFirstBite"] = 0
-  avgDomCompleteTime: ITopMetrics["avgDomCompleteTime"] = 0
-
-  constructor(data: ITopMetrics) {
-    Object.assign(this, data)
-  }
-}
\ No newline at end of file
diff --git a/frontend/app/types/dashboard/userActivity.ts b/frontend/app/types/dashboard/userActivity.ts
deleted file mode 100644
index 835fa4b8a..000000000
--- a/frontend/app/types/dashboard/userActivity.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-interface IUserActivity {
-  avgVisitedPages: number;
-  avgVisitedPagesProgress: number;
-  avgDuration: number;
-  avgDurationProgress: number;
-}
-
-export default class UserActivity {
-  avgVisitedPages: IUserActivity["avgVisitedPages"]
-  avgVisitedPagesProgress: IUserActivity["avgDurationProgress"]
-  avgDuration: IUserActivity["avgDuration"]
-  avgDurationProgress: IUserActivity["avgDurationProgress"]
-
-  constructor(activity: IUserActivity) {
-    Object.assign(this, activity)
-  }
-}
\ No newline at end of file