diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..7a73a41
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/client/App.jsx b/client/App.jsx
index 20bf5cf..7ae1192 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { createTheme, CssBaseline, ThemeProvider, Typography, useMediaQuery } from '@mui/material';
 import { Box } from '@mui/system';
-import ChartsPage from './pages/Charts';
+import PanelsPage from './pages/Panels';
 import { getStats } from './api';
 
 export function App() {
@@ -30,7 +30,7 @@ export function App() {
     <React.StrictMode>
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        <ChartsPage stats={stats} />
+        <PanelsPage stats={stats} />
       </ThemeProvider>
     </React.StrictMode>
   );
diff --git a/client/modules/panels/Chart.jsx b/client/modules/panels/Chart.jsx
new file mode 100644
index 0000000..d610d4f
--- /dev/null
+++ b/client/modules/panels/Chart.jsx
@@ -0,0 +1,3 @@
+export default function Chart({ children }) {
+  
+}
\ No newline at end of file
diff --git a/client/modules/panels/NetworkSpeedsPanel.jsx b/client/modules/panels/NetworkSpeedsPanel.jsx
new file mode 100644
index 0000000..dd67af9
--- /dev/null
+++ b/client/modules/panels/NetworkSpeedsPanel.jsx
@@ -0,0 +1,41 @@
+import { Line } from "react-chartjs-2";
+import Panel from "./Panel";
+
+export default function NetworkSpeedsPanel({ stats }) {
+  const statsByDate = _.orderBy(stats, 'asc');
+  const metricsNames = ['download', 'upload'];
+
+  const dates = _.map(statsByDate, 'date');
+
+  const download = {
+    label: 'Download',
+    data: _.map(statsByDate, 'metrics.download'),
+    fill: false,
+    borderColor: '#4caf50',
+    tension: 0.1,
+  };
+
+  const upload = {
+    label: 'Upload',
+    data: _.map(statsByDate, 'metrics.upload'),
+    fill: false,
+    borderColor: '#f50057',
+    tension: 0.1,
+  };
+  
+  const data = {
+    labels: dates,
+    datasets: [
+      download,
+      upload,
+    ],
+  };
+
+  return (
+    <Panel title="Speeds">
+      <Line
+        data={data}
+      />
+    </Panel>
+  );
+}
\ No newline at end of file
diff --git a/client/modules/panels/Panel.jsx b/client/modules/panels/Panel.jsx
new file mode 100644
index 0000000..99d4c5b
--- /dev/null
+++ b/client/modules/panels/Panel.jsx
@@ -0,0 +1,32 @@
+import { AppBar, Card, CardContent, Divider, Toolbar, Typography } from "@mui/material";
+import { Box } from "@mui/system";
+
+export default function Panel({ title, children }) {
+  return (
+    <Card variant="outlined">
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
+            bgcolor: 'background.paper',
+            color: 'text.secondary',
+            '& svg': {
+              m: 1.5,
+            },
+            '& hr': {
+              mx: 0.5,
+            },
+            paddingX: (theme) => theme.spacing(2),
+            paddingY: (theme) => theme.spacing(1),
+          }}
+        >
+          <Typography>{title}</Typography>
+        </Box>
+        <CardContent sx={{ flex: '1 0 auto' }}>
+          {children}
+        </CardContent>
+      </Box>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/client/pages/Charts.jsx b/client/pages/Charts.jsx
deleted file mode 100644
index fb76ca5..0000000
--- a/client/pages/Charts.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Line } from 'react-chartjs-2';
-import _ from 'lodash';
-
-export default function ChartsPage({ stats }) {
-  const statsByDate = _.orderBy(stats, 'asc');
-  const statsKeys = _.keys(_.first(statsByDate));
-  const metricsNames = _.without(statsKeys, 'id', 'date', 'ping');
-
-  const dates = _.map(statsByDate, 'date');
-  const metrics = _.map(metricsNames, (metricName) => ({
-    label: metricName,
-    data: _.map(statsByDate, metricName),
-    fill: false,
-    borderColor: 'rgb(75, 192, 192)',
-    tension: 0.1
-  }));
-
-  const data = {
-    labels: dates,
-    datasets: metrics,
-  };
-
-  return (
-    <Line
-      data={data}
-    />
-  );
-}
\ No newline at end of file
diff --git a/client/pages/Panels.jsx b/client/pages/Panels.jsx
new file mode 100644
index 0000000..21b367a
--- /dev/null
+++ b/client/pages/Panels.jsx
@@ -0,0 +1,13 @@
+import { Line } from 'react-chartjs-2';
+import _ from 'lodash';
+
+import { Container } from '@mui/material';
+import NetworkSpeedChart from '../modules/panels/NetworkSpeedsPanel';
+
+export default function PanelsPage({ stats }) {
+  return (
+    <Container>
+      <NetworkSpeedChart stats={stats} />
+    </Container>
+  );
+}
\ No newline at end of file
diff --git a/src/modules/stats/networkStats.repository.js b/src/modules/stats/networkStats.repository.js
index 90869e3..21331f7 100644
--- a/src/modules/stats/networkStats.repository.js
+++ b/src/modules/stats/networkStats.repository.js
@@ -2,9 +2,11 @@ const _ = require('lodash');
 
 const formatOneNetworkStat = ({ id, download, upload, ping, created_at }) => ({
   id,
-  download,
-  upload,
-  ping,
+  metrics: {
+    download,
+    upload,
+    ping,
+  },
   date: created_at,
 });
 
diff --git a/src/modules/stats/stats.routes.js b/src/modules/stats/stats.routes.js
index 1fc3357..eb59151 100644
--- a/src/modules/stats/stats.routes.js
+++ b/src/modules/stats/stats.routes.js
@@ -6,16 +6,16 @@ const { monitorNetworkStats, getStats } = require('./stats.usecases');
 module.exports = async (instance) => {
   const networkStatsRepository = getNetworkStatsRepository({ knex: instance.knex });
 
-  monitorNetworkStats({
-    options: {
-      interval: config.get('monitoring.interval'),
-    },
-    onData: (data) => {
-      instance.log.debug(data, 'New network stats');
-      networkStatsRepository.insertOne({ data });
-    },
-    onWarning: instance.log.warn,
-  });
+  // monitorNetworkStats({
+  //   options: {
+  //     interval: config.get('monitoring.interval'),
+  //   },
+  //   onData: (data) => {
+  //     instance.log.debug(data, 'New network stats');
+  //     networkStatsRepository.insertOne({ data });
+  //   },
+  //   onWarning: instance.log.warn,
+  // });
 
   instance.route(getStatsRoute({ instance, networkStatsRepository }));
 };