diff --git a/resources/js/components/Graphics/LatestResults.js b/resources/js/components/Graphics/LatestResults.js
index 86534899..f93524ec 100644
--- a/resources/js/components/Graphics/LatestResults.js
+++ b/resources/js/components/Graphics/LatestResults.js
@@ -92,47 +92,48 @@ export default class LatestResults extends Component {
         } else {
             return (
                 <Container fluid>
-                    <Row>
-                        <Col sm={{ span: 12 }} className="text-center">
-                            <h4>Latest test results:</h4>
-                        </Col>
-                    </Row>
                     <Row>
                         <Col
-                            lg={{ span: 2, offset: 3 }}
+                            lg={{ span: 4 }}
                             md={{ span: 4 }}
-                            sm={{ span: 4 }}
+                            sm={{ span: 12 }}
                             className="my-2"
                         >
                             <Widget
                                 title="Ping"
                                 value={parseFloat(data.data.ping).toFixed(1)}
+                                avg={parseFloat(data.average.ping).toFixed(1)}
+                                max={parseFloat(data.max.ping).toFixed(1)}
                                 unit="ms"
                                 icon="ping"
                             />
                         </Col>
                         <Col
-                            lg={{ span: 2 }}
+                            lg={{ span: 4 }}
                             md={{ span: 4 }}
-                            sm={{ span: 4 }}
+                            sm={{ span: 12 }}
                             className="my-2"
                         >
                             <Widget
                                 title="Download"
                                 value={parseFloat(data.data.download).toFixed(1)}
+                                avg={parseFloat(data.average.download).toFixed(1)}
+                                max={parseFloat(data.max.download).toFixed(1)}
                                 unit="Mbit/s"
                                 icon="dl"
                             />
                         </Col>
                         <Col
-                            lg={{ span: 2 }}
+                            lg={{ span: 4 }}
                             md={{ span: 4 }}
-                            sm={{ span: 4 }}
+                            sm={{ span: 12 }}
                             className="my-2"
                         >
                             <Widget
                                 title="Upload"
                                 value={parseFloat(data.data.upload).toFixed(1)}
+                                avg={parseFloat(data.average.upload).toFixed(1)}
+                                max={parseFloat(data.max.upload).toFixed(1)}
                                 unit="Mbit/s"
                                 icon="ul"
                             />
diff --git a/resources/js/components/Graphics/Widget.js b/resources/js/components/Graphics/Widget.js
index e4bdb18b..0282122c 100644
--- a/resources/js/components/Graphics/Widget.js
+++ b/resources/js/components/Graphics/Widget.js
@@ -10,26 +10,32 @@ export default class Widget extends Component {
             title: this.props.title,
             value: this.props.value,
             unit: this.props.unit,
-            icon: this.props.icon
+            icon: this.props.icon,
+            avg: this.props.avg,
+            max: this.props.max
         }
     }
 
     componentDidUpdate = () => {
-        if(this.props.title != this.state.title || this.props.value != this.state.value || this.props.unit != this.state.unit || this.props.icon != this.state.icon) {
+        if(this.props.title != this.state.title || this.props.value != this.state.value || this.props.unit != this.state.unit || this.props.icon != this.state.icon || this.props.avg != this.state.avg || this.props.max != this.state.max) {
             this.setState({
                 title: this.props.title,
                 value: this.props.value,
                 unit: this.props.unit,
-                icon: this.props.icon
+                icon: this.props.icon,
+                avg: this.props.avg,
+                max: this.props.max
             });
         }
     }
 
     render() {
-        var title = this.props.title;
-        var value = this.props.value;
-        var unit = this.props.unit;
-        var icon = this.props.icon;
+        var title = this.state.title;
+        var value = this.state.value;
+        var unit = this.state.unit;
+        var icon = this.state.icon;
+        var max = this.state.max;
+        var avg = this.state.avg;
 
         switch(icon) {
             case 'ping':
@@ -46,14 +52,25 @@ export default class Widget extends Component {
         return (
             <Card className="widget-card shadow-sm">
                 <Card.Body>
-                    <div className="d-flex align-items-center justify-content-between">
+                    <div>
                         <div>
-                            <p>{title}</p>
-                            <h3 className="d-inline">{value}</h3>
-                            <p className="d-inline ml-2">{unit}</p>
-                        </div>
-                        <div>
-                            {icon}
+                            <div className="d-flex align-items-center justify-content-between">
+                                <h4>{title}</h4>
+                                {icon}
+                            </div>
+
+                            <div className="text-truncate">
+                                <h3 className="d-inline">{value}</h3>
+                                <p className="d-inline ml-2">{unit} (current)</p>
+                            </div>
+                            <div className="text-muted text-truncate">
+                                <h5 className="d-inline">{avg}</h5>
+                                <p className="d-inline ml-2">{unit} (average)</p>
+                            </div>
+                            <div className="text-muted text-truncate">
+                                <h5 className="d-inline">{max}</h5>
+                                <p className="d-inline ml-2">{unit} (maximum)</p>
+                            </div>
                         </div>
                     </div>
                 </Card.Body>