diff --git a/client/src/components/Dashboard/Statistics.js b/client/src/components/Dashboard/Statistics.js
index e36c5c5a..434c21fd 100644
--- a/client/src/components/Dashboard/Statistics.js
+++ b/client/src/components/Dashboard/Statistics.js
@@ -1,59 +1,109 @@
-import React from 'react';
-import { ResponsiveLine } from '@nivo/line';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import Card from '../ui/Card';
+import Line from '../ui/Line';
 
-const Statistics = props => (
-    <Card title="Statistics" subtitle="for the last 24 hours" bodyType="card-graph" refresh={props.refreshButton}>
-        {props.history ?
-            <ResponsiveLine
-                data={props.history}
-                margin={{
-                    top: 50,
-                    right: 40,
-                    bottom: 80,
-                    left: 80,
-                }}
-                minY="auto"
-                stacked={false}
-                curve='monotoneX'
-                axisBottom={{
-                    orient: 'bottom',
-                    tickSize: 5,
-                    tickPadding: 5,
-                    tickRotation: -45,
-                    legendOffset: 50,
-                    legendPosition: 'center',
-                }}
-                axisLeft={{
-                    orient: 'left',
-                    tickSize: 5,
-                    tickPadding: 5,
-                    tickRotation: 0,
-                    legendOffset: -40,
-                    legendPosition: 'center',
-                }}
-                enableArea={true}
-                dotSize={10}
-                dotColor="inherit:darker(0.3)"
-                dotBorderWidth={2}
-                dotBorderColor="#ffffff"
-                dotLabel="y"
-                dotLabelYOffset={-12}
-                animate={true}
-                motionStiffness={90}
-                motionDamping={15}
-            />
-            :
-            <h2 className="text-muted">Empty data</h2>
-        }
-    </Card>
-);
+import { getPercent } from '../../helpers/helpers';
+import { STATUS_COLORS } from '../../helpers/constants';
+
+class Statistics extends Component {
+    render() {
+        const {
+            dnsQueries,
+            blockedFiltering,
+            replacedSafebrowsing,
+            replacedParental,
+        } = this.props;
+
+        const filteringData = [this.props.history[1]];
+        const queriesData = [this.props.history[2]];
+        const parentalData = [this.props.history[3]];
+        const safebrowsingData = [this.props.history[4]];
+
+        return (
+            <div className="row">
+                <div className="col-sm-6 col-lg-3">
+                    <Card bodyType="card-wrap">
+                        <div className="card-body-stats">
+                            <div className="card-value card-value-stats text-blue">
+                                {dnsQueries}
+                            </div>
+                            <div className="card-title-stats">
+                                DNS Queries
+                            </div>
+                        </div>
+                        <div className="card-chart-bg">
+                            <Line data={queriesData} color={STATUS_COLORS.blue}/>
+                        </div>
+                    </Card>
+                </div>
+                <div className="col-sm-6 col-lg-3">
+                    <Card bodyType="card-wrap">
+                        <div className="card-body-stats">
+                            <div className="card-value card-value-stats text-red">
+                                {blockedFiltering}
+                            </div>
+                            <div className="card-value card-value-percent text-red">
+                                {getPercent(dnsQueries, blockedFiltering)}
+                            </div>
+                            <div className="card-title-stats">
+                                Blocked by Filters
+                            </div>
+                        </div>
+                        <div className="card-chart-bg">
+                            <Line data={filteringData} color={STATUS_COLORS.red}/>
+                        </div>
+                    </Card>
+                </div>
+                <div className="col-sm-6 col-lg-3">
+                    <Card bodyType="card-wrap">
+                        <div className="card-body-stats">
+                            <div className="card-value card-value-stats text-green">
+                                {replacedSafebrowsing}
+                            </div>
+                            <div className="card-value card-value-percent text-green">
+                                {getPercent(dnsQueries, replacedSafebrowsing)}
+                            </div>
+                            <div className="card-title-stats">
+                                Blocked malware/phishing
+                            </div>
+                        </div>
+                        <div className="card-chart-bg">
+                            <Line data={safebrowsingData} color={STATUS_COLORS.green}/>
+                        </div>
+                    </Card>
+                </div>
+                <div className="col-sm-6 col-lg-3">
+                    <Card bodyType="card-wrap">
+                        <div className="card-body-stats">
+                            <div className="card-value card-value-stats text-yellow">
+                                {replacedParental}
+                            </div>
+                            <div className="card-value card-value-percent text-yellow">
+                                {getPercent(dnsQueries, replacedParental)}
+                            </div>
+                            <div className="card-title-stats">
+                                Blocked adult websites
+                            </div>
+                        </div>
+                        <div className="card-chart-bg">
+                            <Line data={parentalData} color={STATUS_COLORS.yellow}/>
+                        </div>
+                    </Card>
+                </div>
+            </div>
+        );
+    }
+}
 
 Statistics.propTypes = {
     history: PropTypes.array.isRequired,
-    refreshButton: PropTypes.node,
+    dnsQueries: PropTypes.number.isRequired,
+    blockedFiltering: PropTypes.number.isRequired,
+    replacedSafebrowsing: PropTypes.number.isRequired,
+    replacedParental: PropTypes.number.isRequired,
+    refreshButton: PropTypes.node.isRequired,
 };
 
 export default Statistics;
diff --git a/client/src/components/ui/Line.css b/client/src/components/ui/Line.css
new file mode 100644
index 00000000..4e77647e
--- /dev/null
+++ b/client/src/components/ui/Line.css
@@ -0,0 +1,9 @@
+.line__tooltip {
+    padding: 2px 10px 7px;
+    line-height: 1.1;
+    color: #fff;
+}
+
+.line__tooltip-text {
+    font-size: 0.7rem;
+}
diff --git a/client/src/components/ui/Line.js b/client/src/components/ui/Line.js
new file mode 100644
index 00000000..9fb805c0
--- /dev/null
+++ b/client/src/components/ui/Line.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ResponsiveLine } from '@nivo/line';
+
+import './Line.css';
+
+const Line = props => (
+    props.data &&
+        <ResponsiveLine
+            data={props.data}
+            margin={{
+                top: 15,
+                right: 0,
+                bottom: 1,
+                left: 0,
+            }}
+            minY="auto"
+            stacked={false}
+            curve='linear'
+            axisBottom={{
+                tickSize: 0,
+                tickPadding: 0,
+            }}
+            axisLeft={{
+                tickSize: 0,
+                tickPadding: 0,
+            }}
+            enableGridX={false}
+            enableGridY={false}
+            enableDots={false}
+            enableArea={true}
+            animate={false}
+            colorBy={() => (props.color)}
+            tooltip={slice => (
+                <div>
+                    {slice.data.map(d => (
+                        <div key={d.serie.id} className="line__tooltip">
+                            <span className="line__tooltip-text">
+                                {d.data.y}
+                            </span>
+                        </div>
+                    ))}
+                </div>
+            )}
+            theme={{
+                tooltip: {
+                    container: {
+                        padding: '0',
+                        background: '#333',
+                        borderRadius: '4px',
+                    },
+                },
+            }}
+        />
+);
+
+Line.propTypes = {
+    data: PropTypes.array.isRequired,
+    color: PropTypes.string.isRequired,
+};
+
+export default Line;
diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
index 3ad4f6d5..1af6c276 100644
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@@ -1 +1,17 @@
 export const R_URL_REQUIRES_PROTOCOL = /^https?:\/\/\w[\w_\-.]*\.[a-z]{2,8}[^\s]*$/;
+
+export const STATS_NAMES = {
+    avg_processing_time: 'Average processing time',
+    blocked_filtering: 'Blocked by filters',
+    dns_queries: 'DNS queries',
+    replaced_parental: 'Blocked adult websites',
+    replaced_safebrowsing: 'Blocked malware/phishing',
+    replaced_safesearch: 'Enforced safe search',
+};
+
+export const STATUS_COLORS = {
+    blue: '#467fcf',
+    red: '#cd201f',
+    green: '#5eba00',
+    yellow: '#f1c40f',
+};
diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js
index 9aea6a11..7013c9c0 100644
--- a/client/src/helpers/helpers.js
+++ b/client/src/helpers/helpers.js
@@ -4,6 +4,8 @@ import subHours from 'date-fns/sub_hours';
 import addHours from 'date-fns/add_hours';
 import round from 'lodash/round';
 
+import { STATS_NAMES } from './constants';
+
 const formatTime = (time) => {
     const parsedTime = dateParse(time);
     return dateFormat(parsedTime, 'HH:mm:ss');
@@ -34,15 +36,6 @@ export const normalizeLogs = logs => logs.map((log) => {
     };
 });
 
-const STATS_NAMES = {
-    avg_processing_time: 'Average processing time',
-    blocked_filtering: 'Blocked by filters',
-    dns_queries: 'DNS queries',
-    replaced_parental: 'Blocked adult websites',
-    replaced_safebrowsing: 'Blocked malware/phishing',
-    replaced_safesearch: 'Enforced safe search',
-};
-
 export const normalizeHistory = history => Object.keys(history).map((key) => {
     let id = STATS_NAMES[key];
     if (!id) {
@@ -81,3 +74,5 @@ export const normalizeFilteringStatus = (filteringStatus) => {
     const newUserRules = Array.isArray(userRules) ? userRules.join('\n') : '';
     return { enabled, userRules: newUserRules, filters: newFilters };
 };
+
+export const getPercent = (amount, number) => round(100 / (amount / number));