diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx
index 3038813e4..84ab4805a 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx
@@ -42,7 +42,7 @@ function CustomMetricOverviewChart(props: Props) {
                         // unit={unit && ' ' + unit}
                         type="monotone"
                         dataKey="value"
-                        stroke={Styles.colors[0]}
+                        stroke={Styles.strokeColor}
                         fillOpacity={ 1 }
                         strokeWidth={ 2 }
                         strokeOpacity={ 0.8 }
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
index 311b481c6..b397f4d30 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
@@ -43,7 +43,7 @@ function CPULoad(props: Props) {
                   type="monotone"
                   unit="%"
                   dataKey="value"
-                  stroke={Styles.colors[0]}
+                  stroke={Styles.strokeColor}
                   fillOpacity={ 1 }
                   strokeWidth={ 2 }
                   strokeOpacity={ 0.8 }
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx
index 69a7c2f6b..ee222ea1c 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx
@@ -41,7 +41,7 @@ function Crashes(props: Props) {
                   name="Crashes"
                   type="monotone"
                   dataKey="count"
-                  stroke={Styles.colors[0]}
+                  stroke={Styles.strokeColor}
                   fillOpacity={ 1 }
                   strokeWidth={ 2 }
                   strokeOpacity={ 0.8 }
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx
index 7eea40a8a..07265cb93 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx
@@ -67,7 +67,7 @@ function DomBuildingTime(props: Props) {
                     type="monotone"
                     // unit="%"
                     dataKey="value"
-                    stroke={Styles.colors[0]}
+                    stroke={Styles.strokeColor}
                     fillOpacity={ 1 }
                     strokeWidth={ 2 }
                     strokeOpacity={ 0.8 }
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
index baea7156d..818ff2573 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
@@ -45,7 +45,7 @@ function FPS(props: Props) {
                     name="Avg"
                     type="monotone"
                     dataKey="value"
-                    stroke={Styles.colors[0]}
+                    stroke={Styles.strokeColor}
                     fillOpacity={ 1 }
                     strokeWidth={ 2 }
                     strokeOpacity={ 0.8 }
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
index 4889f05f7..e20cac3d4 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
@@ -48,7 +48,7 @@ function MemoryConsumption(props: Props) {
                     unit=" mb"
                     type="monotone"
                     dataKey="value"
-                    stroke={Styles.colors[0]}
+                    stroke={Styles.strokeColor}
                     fillOpacity={ 1 }
                     strokeWidth={ 2 }
                     strokeOpacity={ 0.8 }
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
index 7ff396d6f..a786b7da0 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
@@ -51,8 +51,8 @@ function ResourceLoadedVsVisuallyComplete(props: Props) {
                 />
                 <Tooltip {...Styles.tooltip} />
                 <Legend />
-                <Bar minPointSize={1} yAxisId="right" name="Images" type="monotone" dataKey="types.img" stackId="a" fill={Styles.colors[0]} />
-                <Bar yAxisId="right" name="Scripts" type="monotone" dataKey="types.script" stackId="a" fill={Styles.colors[2]} />
+                <Bar minPointSize={1} yAxisId="right" name="Images" type="monotone" dataKey="types.img" stackId="a" fill={Styles.colors[2]} />
+                <Bar yAxisId="right" name="Scripts" type="monotone" dataKey="types.script" stackId="a" fill={Styles.colors[3]} />
                 <Bar yAxisId="right" name="CSS" type="monotone" dataKey="types.stylesheet" stackId="a" fill={Styles.colors[4]} />
                 <Line
                   yAxisId="left"
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx
index fdba24ed5..68db8eff5 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx
@@ -99,7 +99,7 @@ function ResourceLoadingTime(props: Props) {
                     unit=" ms"
                     type="monotone"
                     dataKey="avg"
-                    stroke={Styles.colors[0]}
+                    stroke={Styles.strokeColor}
                     fillOpacity={ 1 }
                     strokeWidth={ 2 }
                     strokeOpacity={ 0.8 }
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
index 6ed001ff1..f9201e262 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
@@ -68,7 +68,7 @@ function ResponseTime(props: Props) {
                     type="monotone"
                     unit=" ms"
                     dataKey="value"
-                    stroke={Styles.colors[0]}
+                    stroke={Styles.strokeColor}
                     fillOpacity={ 1 }
                     strokeWidth={ 2 }
                     strokeOpacity={ 0.8 }
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
index 12098a162..695bcb6c8 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
@@ -41,7 +41,7 @@ function SessionsImpactedBySlowRequests(props: Props) {
                   name="Sessions"
                   type="monotone"
                   dataKey="count"
-                  stroke={Styles.colors[0]}
+                  stroke={Styles.strokeColor}
                   fillOpacity={ 1 }
                   strokeWidth={ 2 }
                   strokeOpacity={ 0.8 }
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/Scale.js b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/Scale.js
index c83d32110..6b944518c 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/Scale.js
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/Scale.js
@@ -4,10 +4,11 @@ import cn from 'classnames';
 import stl from './scale.module.css';
 
 function Scale({ colors }) {
-  const lastIndex = (Styles.colors.length - 1)
+  const lastIndex = (Styles.colorsTeal.length - 1)
+  
   return (
     <div className={ cn(stl.bars, 'absolute bottom-0 mb-4')}>
-      {colors.map((c, i) => (
+      {Styles.colorsTeal.map((c, i) => (
         <div
           key={i}
           style={{ backgroundColor: c, width: '6px', height: '15px', marginBottom: '1px' }}
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
index 94334ee5d..9d98d5428 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
@@ -68,7 +68,7 @@ function TimeToRender(props: Props) {
                     type="monotone"
                     unit=" ms"
                     dataKey="value"
-                    stroke={Styles.colors[0]}
+                    stroke={Styles.strokeColor}
                     fillOpacity={ 1 }
                     strokeWidth={ 2 }
                     strokeOpacity={ 0.8 }
diff --git a/frontend/app/components/Dashboard/Widgets/ProcessedSessions.js b/frontend/app/components/Dashboard/Widgets/ProcessedSessions.js
index 7b1a92918..2e6d3e743 100644
--- a/frontend/app/components/Dashboard/Widgets/ProcessedSessions.js
+++ b/frontend/app/components/Dashboard/Widgets/ProcessedSessions.js
@@ -35,7 +35,7 @@ export default class ProcessedSessions extends React.PureComponent {
               </defs>
               <XAxis {...Styles.xaxis} dataKey="time" />
               <YAxis hide interval={ 0 }  domain={ domain } />
-              <Area type="monotone" dataKey="count" stroke={Styles.colors[0]} fillOpacity={ 1 } strokeWidth={ 2 } strokeOpacity={ 0.8 } fill="url(#colorCount)" />
+              <Area type="monotone" dataKey="count" stroke={Styles.strokeColor} fillOpacity={ 1 } strokeWidth={ 2 } strokeOpacity={ 0.8 } fill="url(#colorCount)" />
             </AreaChart>
           </ResponsiveContainer>
         </Loader>
diff --git a/frontend/app/components/Dashboard/Widgets/common/Styles.js b/frontend/app/components/Dashboard/Widgets/common/Styles.js
index 1804b6dbc..65aa72954 100644
--- a/frontend/app/components/Dashboard/Widgets/common/Styles.js
+++ b/frontend/app/components/Dashboard/Widgets/common/Styles.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import { numberWithCommas } from 'App/utils';
-const colors = ['#1E889A', '#239DB2', '#28B2C9', '#36C0D7', '#65CFE1'];
+const colorsTeal = ['#1E889A', '#239DB2', '#28B2C9', '#36C0D7', '#65CFE1'];
+const colors = ['#6774E2', '#929ACD', '#3EAAAF', '#565D97', '#8F9F9F', '#376F72'];
 const colorsx = ['#256669', '#38999e', '#3eaaaf', '#51b3b7', '#78c4c7', '#9fd5d7', '#c5e6e7'].reverse();
 const compareColors = ['#394EFF', '#4D5FFF', '#808DFF', '#B3BBFF', '#E5E8FF'];
 const compareColorsx = ["#222F99", "#2E3ECC", "#394EFF", "#6171FF", "#8895FF", "#B0B8FF", "#D7DCFF"].reverse();
-const customMetricColors = ['#3EAAAF', '#394EFF', '#666666'];
+const customMetricColors = ['#3EAAAF', '#394EFF', '#565D97'];
 const colorsPie = colors.concat(["#DDDDDD"]);
 
 const countView = count => {
@@ -15,12 +16,14 @@ const countView = count => {
 export default {
   customMetricColors,
   colors,
+  colorsTeal,
   colorsPie,
   colorsx,
   compareColors,
   compareColorsx,
   lineColor: '#2A7B7F',
   lineColorCompare: '#394EFF',
+  strokeColor: colors[2],
   xaxis: {
     axisLine: { stroke: '#CCCCCC' },
     interval: 0,
@@ -74,8 +77,8 @@ export default {
   gradientDef: () => (
     <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 } />
+        <stop offset="5%" stopColor={colors[2]} stopOpacity={ 0.5 } />
+        <stop offset="95%" stopColor={colors[2]} stopOpacity={ 0.2 } />
       </linearGradient>
       <linearGradient id="colorCountCompare" x1="0" y1="0" x2="0" y2="1">
         <stop offset="5%" stopColor={compareColors[4]} stopOpacity={ 0.9 } />