diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js
index a487299..7dd0ee2 100644
--- a/src/components/Sidebar/Sidebar.js
+++ b/src/components/Sidebar/Sidebar.js
@@ -77,7 +77,6 @@ function Sidebar({ location }) {
     </Drawer>
   );
 
-  // ##################################################################
   function handleWindowWidthChange() {
     var windowWidth = window.innerWidth;
     var breakpointWidth = theme.breakpoints.values.md;
diff --git a/src/components/Wrappers/Wrappers.js b/src/components/Wrappers/Wrappers.js
index 0f02dff..d218e6f 100644
--- a/src/components/Wrappers/Wrappers.js
+++ b/src/components/Wrappers/Wrappers.js
@@ -121,8 +121,6 @@ function Button({ children, color, className, ...props }) {
 
 export { Badge, Typography, Button };
 
-// ########################################################################
-
 function getColor(color, theme, brigtness = "main") {
   if (color && theme.palette[color] && theme.palette[color][brigtness]) {
     return theme.palette[color][brigtness];
diff --git a/src/pages/charts/Charts.js b/src/pages/charts/Charts.js
index 3e19b7e..db9b54c 100644
--- a/src/pages/charts/Charts.js
+++ b/src/pages/charts/Charts.js
@@ -12,7 +12,7 @@ import {
   Sector,
   Tooltip,
   XAxis,
-  YAxis,
+  YAxis
 } from "recharts";
 
 // components
@@ -26,51 +26,51 @@ const lineChartData = [
     name: "Page A",
     uv: 4000,
     pv: 2400,
-    amt: 2400,
+    amt: 2400
   },
   {
     name: "Page B",
     uv: 3000,
     pv: 1398,
-    amt: 2210,
+    amt: 2210
   },
   {
     name: "Page C",
     uv: 2000,
     pv: 9800,
-    amt: 2290,
+    amt: 2290
   },
   {
     name: "Page D",
     uv: 2780,
     pv: 3908,
-    amt: 2000,
+    amt: 2000
   },
   {
     name: "Page E",
     uv: 1890,
     pv: 4800,
-    amt: 2181,
+    amt: 2181
   },
   {
     name: "Page F",
     uv: 2390,
     pv: 3800,
-    amt: 2500,
+    amt: 2500
   },
   {
     name: "Page G",
     uv: 3490,
     pv: 4300,
-    amt: 2100,
-  },
+    amt: 2100
+  }
 ];
 
 const pieChartData = [
   { name: "Group A", value: 400 },
   { name: "Group B", value: 300 },
   { name: "Group C", value: 300 },
-  { name: "Group D", value: 200 },
+  { name: "Group D", value: 200 }
 ];
 
 export default function Charts(props) {
@@ -81,15 +81,14 @@ export default function Charts(props) {
 
   return (
     <>
-      <PageTitle title="Charts Page - Data Display" button={
-        <Button
-          variant="contained"
-          size="medium"
-          color="secondary"
-        >
-          Latest Reports
-        </Button>
-      } />
+      <PageTitle
+        title="Charts Page - Data Display"
+        button={
+          <Button variant="contained" size="medium" color="secondary">
+            Latest Reports
+          </Button>
+        }
+      />
       <Grid container spacing={4}>
         <Grid item xs={12} md={6}>
           <Widget title="Apex Line Chart" upperTitle noBodyPadding>
@@ -112,7 +111,7 @@ export default function Charts(props) {
                   top: 5,
                   right: 30,
                   left: 20,
-                  bottom: 5,
+                  bottom: 5
                 }}
               >
                 <CartesianGrid strokeDasharray="3 3" />
@@ -158,8 +157,6 @@ export default function Charts(props) {
   );
 }
 
-// ################################################################
-
 function renderActiveShape(props) {
   var RADIAN = Math.PI / 180;
   var {
@@ -173,7 +170,7 @@ function renderActiveShape(props) {
     fill,
     payload,
     percent,
-    value,
+    value
   } = props;
   var sin = Math.sin(-RADIAN * midAngle);
   var cos = Math.cos(-RADIAN * midAngle);
diff --git a/src/pages/charts/components/ApexHeatmap.js b/src/pages/charts/components/ApexHeatmap.js
index 3d089c8..8e1da5c 100644
--- a/src/pages/charts/components/ApexHeatmap.js
+++ b/src/pages/charts/components/ApexHeatmap.js
@@ -7,65 +7,65 @@ const series = [
     name: "Metric1",
     data: generateData(18, {
       min: 0,
-      max: 90,
-    }),
+      max: 90
+    })
   },
   {
     name: "Metric2",
     data: generateData(18, {
       min: 0,
-      max: 90,
-    }),
+      max: 90
+    })
   },
   {
     name: "Metric3",
     data: generateData(18, {
       min: 0,
-      max: 90,
-    }),
+      max: 90
+    })
   },
   {
     name: "Metric4",
     data: generateData(18, {
       min: 0,
-      max: 90,
-    }),
+      max: 90
+    })
   },
   {
     name: "Metric5",
     data: generateData(18, {
       min: 0,
-      max: 90,
-    }),
+      max: 90
+    })
   },
   {
     name: "Metric6",
     data: generateData(18, {
       min: 0,
-      max: 90,
-    }),
+      max: 90
+    })
   },
   {
     name: "Metric7",
     data: generateData(18, {
       min: 0,
-      max: 90,
-    }),
+      max: 90
+    })
   },
   {
     name: "Metric8",
     data: generateData(18, {
       min: 0,
-      max: 90,
-    }),
+      max: 90
+    })
   },
   {
     name: "Metric9",
     data: generateData(18, {
       min: 0,
-      max: 90,
-    }),
-  },
+      max: 90
+    })
+  }
 ];
 
 export default function ApexLineChart() {
@@ -81,7 +81,6 @@ export default function ApexLineChart() {
   );
 }
 
-// ##################################################################
 function generateData(count, yrange) {
   var i = 0;
   var series = [];
@@ -92,7 +91,7 @@ function generateData(count, yrange) {
 
     series.push({
       x: x,
-      y: y,
+      y: y
     });
     i++;
   }
@@ -104,12 +103,12 @@ function themeOptions(theme) {
   return {
     chart: {
       toolbar: {
-        show: false,
-      },
+        show: false
+      }
     },
     dataLabels: {
-      enabled: false,
+      enabled: false
     },
-    colors: [theme.palette.primary.main],
+    colors: [theme.palette.primary.main]
   };
 }
diff --git a/src/pages/charts/components/ApexLineChart.js b/src/pages/charts/components/ApexLineChart.js
index b1c59fe..b9414cb 100644
--- a/src/pages/charts/components/ApexLineChart.js
+++ b/src/pages/charts/components/ApexLineChart.js
@@ -5,12 +5,12 @@ import { useTheme } from "@material-ui/styles";
 const series = [
   {
     name: "series1",
-    data: [31, 40, 28, 51, 42, 109, 100],
+    data: [31, 40, 28, 51, 42, 109, 100]
   },
   {
     name: "series2",
-    data: [11, 32, 45, 32, 34, 52, 41],
-  },
+    data: [11, 32, 45, 32, 34, 52, 41]
+  }
 ];
 
 export default function ApexLineChart() {
@@ -26,14 +26,13 @@ export default function ApexLineChart() {
   );
 }
 
-// ############################################################
 function themeOptions(theme) {
   return {
     dataLabels: {
-      enabled: false,
+      enabled: false
     },
     stroke: {
-      curve: "smooth",
+      curve: "smooth"
     },
     xaxis: {
       type: "datetime",
@@ -44,25 +43,25 @@ function themeOptions(theme) {
         "2018-09-19T03:30:00",
         "2018-09-19T04:30:00",
         "2018-09-19T05:30:00",
-        "2018-09-19T06:30:00",
-      ],
+        "2018-09-19T06:30:00"
+      ]
     },
     tooltip: {
       x: {
-        format: "dd/MM/yy HH:mm",
-      },
+        format: "dd/MM/yy HH:mm"
+      }
     },
     fill: {
-      colors: [theme.palette.primary.light, theme.palette.success.light],
+      colors: [theme.palette.primary.light, theme.palette.success.light]
     },
     colors: [theme.palette.primary.main, theme.palette.success.main],
     chart: {
       toolbar: {
-        show: false,
-      },
+        show: false
+      }
     },
     legend: {
-      show: false,
-    },
+      show: false
+    }
   };
 }
diff --git a/src/pages/dashboard/Dashboard.js b/src/pages/dashboard/Dashboard.js
index 446f0d4..e61b45e 100644
--- a/src/pages/dashboard/Dashboard.js
+++ b/src/pages/dashboard/Dashboard.js
@@ -19,7 +19,7 @@ import {
   Pie,
   Cell,
   YAxis,
-  XAxis,
+  XAxis
 } from "recharts";
 
 // styles
@@ -39,7 +39,7 @@ const PieChartData = [
   { name: "Group A", value: 400, color: "primary" },
   { name: "Group B", value: 300, color: "secondary" },
   { name: "Group C", value: 300, color: "warning" },
-  { name: "Group D", value: 200, color: "success" },
+  { name: "Group D", value: 200, color: "success" }
 ];
 
 export default function Dashboard(props) {
@@ -51,13 +51,14 @@ export default function Dashboard(props) {
 
   return (
     <>
-      <PageTitle title="Dashboard" button={<Button
-      variant="contained"
-      size="medium"
-      color="secondary"
-    >
-        Latest Reports
-    </Button>} />
+      <PageTitle
+        title="Dashboard"
+        button={
+          <Button variant="contained" size="medium" color="secondary">
+            Latest Reports
+          </Button>
+        }
+      />
       <Grid container spacing={4}>
         <Grid item lg={3} md={4} sm={6} xs={12}>
           <Widget
@@ -69,30 +70,30 @@ export default function Dashboard(props) {
             <div className={classes.visitsNumberContainer}>
               <Grid container item alignItems={"center"}>
                 <Grid item xs={6}>
-              <Typography size="xl" weight="medium" noWrap>
-                12, 678
-              </Typography>
+                  <Typography size="xl" weight="medium" noWrap>
+                    12, 678
+                  </Typography>
                 </Grid>
                 <Grid item xs={6}>
-              <LineChart
-                width={100}
-                height={30}
-                data={[
-                  { value: 10 },
-                  { value: 15 },
-                  { value: 10 },
-                  { value: 17 },
-                  { value: 18 },
-                ]}
-              >
-                <Line
-                  type="natural"
-                  dataKey="value"
-                  stroke={theme.palette.success.main}
-                  strokeWidth={2}
-                  dot={false}
-                />
-              </LineChart>
+                  <LineChart
+                    width={100}
+                    height={30}
+                    data={[
+                      { value: 10 },
+                      { value: 15 },
+                      { value: 10 },
+                      { value: 17 },
+                      { value: 18 }
+                    ]}
+                  >
+                    <Line
+                      type="natural"
+                      dataKey="value"
+                      stroke={theme.palette.success.main}
+                      strokeWidth={2}
+                      dot={false}
+                    />
+                  </LineChart>
                 </Grid>
               </Grid>
             </div>
@@ -294,7 +295,9 @@ export default function Dashboard(props) {
                   {PieChartData.map(({ name, value, color }, index) => (
                     <div key={color} className={classes.legendItemContainer}>
                       <Dot color={color} />
-                      <Typography style={{ whiteSpace: "nowrap", fontSize: 12 }} >
+                      <Typography
+                        style={{ whiteSpace: "nowrap", fontSize: 12 }}
+                      >
                         &nbsp;{name}&nbsp;
                       </Typography>
                       <Typography color="text" colorBrightness="secondary">
@@ -341,13 +344,13 @@ export default function Dashboard(props) {
                 </div>
                 <Select
                   value={mainChartState}
-                  onChange={e => setMainChartState(e.target.value)}
+                  onChange={(e) => setMainChartState(e.target.value)}
                   input={
                     <OutlinedInput
                       labelWidth={0}
                       classes={{
                         notchedOutline: classes.mainChartSelectRoot,
-                        input: classes.mainChartSelect,
+                        input: classes.mainChartSelect
                       }}
                     />
                   }
@@ -372,7 +375,7 @@ export default function Dashboard(props) {
                   tickLine={false}
                 />
                 <XAxis
-                  tickFormatter={i => i + 1}
+                  tickFormatter={(i) => i + 1}
                   tick={{ fill: theme.palette.text.hint + "80", fontSize: 14 }}
                   stroke={theme.palette.text.hint + "80"}
                   tickLine={false}
@@ -400,14 +403,14 @@ export default function Dashboard(props) {
                   dot={{
                     stroke: theme.palette.warning.dark,
                     strokeWidth: 2,
-                    fill: theme.palette.warning.main,
+                    fill: theme.palette.warning.main
                   }}
                 />
               </ComposedChart>
             </ResponsiveContainer>
           </Widget>
         </Grid>
-        {mock.bigStat.map(stat => (
+        {mock.bigStat.map((stat) => (
           <Grid item md={4} sm={6} xs={12} key={stat.product}>
             <BigStat {...stat} />
           </Grid>
@@ -427,7 +430,6 @@ export default function Dashboard(props) {
   );
 }
 
-// #######################################################################
 function getRandomData(length, min, max, multiplier = 10, maxDiff = 10) {
   var array = new Array(length).fill();
   let lastValue;
@@ -459,7 +461,7 @@ function getMainChartData() {
     resultArray.push({
       tablet: tablet[i].value,
       desktop: desktop[i].value,
-      mobile: mobile[i].value,
+      mobile: mobile[i].value
     });
   }
 
diff --git a/src/pages/dashboard/components/BigStat/BigStat.js b/src/pages/dashboard/components/BigStat/BigStat.js
index 06f4f38..3a839ee 100644
--- a/src/pages/dashboard/components/BigStat/BigStat.js
+++ b/src/pages/dashboard/components/BigStat/BigStat.js
@@ -28,7 +28,7 @@ export default function BigStat(props) {
 
           <Select
             value={value}
-            onChange={e => setValue(e.target.value)}
+            onChange={(e) => setValue(e.target.value)}
             input={
               <Input
                 disableUnderline
@@ -71,7 +71,7 @@ export default function BigStat(props) {
             <Typography variant="h6">{registrations[value].value}</Typography>
             <ArrowForwardIcon
               className={classnames(classes.profitArrow, {
-                [!registrations[value].profit]: classes.profitArrowDanger,
+                [!registrations[value].profit]: classes.profitArrowDanger
               })}
             />
           </Grid>
@@ -84,7 +84,7 @@ export default function BigStat(props) {
             <Typography variant="h6">{bounce[value].value}%</Typography>
             <ArrowForwardIcon
               className={classnames(classes.profitArrow, {
-                [!registrations[value].profit]: classes.profitArrowDanger,
+                [!registrations[value].profit]: classes.profitArrowDanger
               })}
             />
           </Grid>
@@ -99,7 +99,7 @@ export default function BigStat(props) {
             </Typography>
             <ArrowForwardIcon
               className={classnames(classes.profitArrow, {
-                [classes.profitArrowDanger]: !registrations[value].profit,
+                [classes.profitArrowDanger]: !registrations[value].profit
               })}
             />
           </Grid>
@@ -112,8 +112,6 @@ export default function BigStat(props) {
   );
 }
 
-// #######################################################################
-
 function getRandomData() {
   return Array(7)
     .fill()