diff --git a/src/components/settings/DHCPInfo.js b/src/components/settings/DHCPInfo.js
index 9d27238..cdb2f68 100644
--- a/src/components/settings/DHCPInfo.js
+++ b/src/components/settings/DHCPInfo.js
@@ -67,25 +67,15 @@ class DHCPInfo extends Component {
     const { t } = this.props;
 
     return (
-      <div className="card border-0 bg-success stat-dbl-height-lock">
-        <div className="card-body">
-          <div className="card-icon">
-            <i className="fa fa-cogs fa-2x"/>
-          </div>
-        </div>
-        <div className="card-img-overlay">
-          <h3>{t("DHCP")}</h3>
-          <pre>
-            {t("DHCP Active")}: {this.state.active.toString()}<br/>
-            {t("Start IP")}: {this.state.ip_start}<br/>
-            {t("End IP")}: {this.state.ip_end}<br/>
-            {t("Router IP")}: {this.state.router_ip}<br/>
-            {t("Lease Time")}: {this.state.lease_time} h<br/>
-            {t("Domain")}: {this.state.domain}<br/>
-            {t("IPv6 Support")}: {this.state.ipv6_support.toString()}<br/>
-          </pre>
-        </div>
-      </div>
+      <pre>
+        {t("DHCP Active")}: {this.state.active.toString()}<br/>
+        {t("Start IP")}: {this.state.ip_start}<br/>
+        {t("End IP")}: {this.state.ip_end}<br/>
+        {t("Router IP")}: {this.state.router_ip}<br/>
+        {t("Lease Time")}: {this.state.lease_time} h<br/>
+        {t("Domain")}: {this.state.domain}<br/>
+        {t("IPv6 Support")}: {this.state.ipv6_support.toString()}<br/>
+      </pre>
     );
   }
 }
diff --git a/src/components/settings/DNSInfo.js b/src/components/settings/DNSInfo.js
index 76c8ade..a977ca9 100644
--- a/src/components/settings/DNSInfo.js
+++ b/src/components/settings/DNSInfo.js
@@ -69,41 +69,31 @@ class DNSInfo extends Component {
     const { t } = this.props;
 
     return (
-      <div className="card border-0 bg-success stat-dbl-height-lock">
-        <div className="card-body">
-          <div className="card-icon">
-            <i className="fa fa-binoculars fa-2x"/>
-          </div>
+      <div className="row">
+        <div className="col-lg-4 col-sm-4 col-xs-4">
+          <pre>
+            <br/>
+            {t("Upstream DNS Servers")}:<br/>
+            {this.state.upstream_dns.map(item => item + "\n")}<br/>
+          </pre>
         </div>
-        <div className="card-img-overlay">
-          <h3>{t("DNS")}</h3>
-          <div className="row">
-            <div className="col-lg-4 col-sm-4 col-xs-4">
-              <pre>
-                <br/>
-                {t("Upstream DNS Servers")}:<br/>
-                {this.state.upstream_dns.map(item => item + "\n")}<br/>
-              </pre>
-            </div>
-            <div className="col-lg-4 col-sm-4 col-xs-4">
-              <pre>
-                <br/>
-                {t("Interface listening behavior")}: {this.state.options.listening_type}<br/>
-                {t("Forward FQDNs only")}: {this.state.options.fqdn_required.toString()}<br/>
-                {t("Only forward public reverse lookups")}:{this.state.options.bogus_priv.toString()}<br/>
-                {t("Use DNSSEC")}: {this.state.options.dnssec.toString()}
-              </pre>
-            </div>
-            <div className="col-lg-4 col-sm-4 col-xs-4">
-              <pre>
-                <br/>
-                {t("Conditional Forwarding")}<br/>
-                {t("Enabled")}: {this.state.conditional_forwarding.enabled.toString()}<br/>
-                {t("Router IP")}: {this.state.conditional_forwarding.router_ip.toString()}<br/>
-                {t("Local Domain Name")}: {this.state.conditional_forwarding.domain.toString()}<br/>
-              </pre>
-            </div>
-          </div>
+        <div className="col-lg-4 col-sm-4 col-xs-4">
+          <pre>
+            <br/>
+            {t("Interface listening behavior")}: {this.state.options.listening_type}<br/>
+            {t("Forward FQDNs only")}: {this.state.options.fqdn_required.toString()}<br/>
+            {t("Only forward public reverse lookups")}:{this.state.options.bogus_priv.toString()}<br/>
+            {t("Use DNSSEC")}: {this.state.options.dnssec.toString()}
+          </pre>
+        </div>
+        <div className="col-lg-4 col-sm-4 col-xs-4">
+          <pre>
+            <br/>
+            {t("Conditional Forwarding")}<br/>
+            {t("Enabled")}: {this.state.conditional_forwarding.enabled.toString()}<br/>
+            {t("Router IP")}: {this.state.conditional_forwarding.router_ip.toString()}<br/>
+            {t("Local Domain Name")}: {this.state.conditional_forwarding.domain.toString()}<br/>
+          </pre>
         </div>
       </div>
     );
diff --git a/src/components/settings/FTLInfo.js b/src/components/settings/FTLInfo.js
index e5c630e..a332817 100644
--- a/src/components/settings/FTLInfo.js
+++ b/src/components/settings/FTLInfo.js
@@ -56,23 +56,11 @@ class FTLInfo extends Component {
     const { t } = this.props;
 
     return (
-      <div className="card border-0 bg-success stat-dbl-height-lock">
-        <div className="card-block">
-          <div className="card-icon">
-            <i className="fa fa-database fa-2x"/>
-          </div>
-        </div>
-        <div className="card-img-overlay">
-          <h3>
-            {t("FTL Database")}
-          </h3>
-          <pre>
-            {t("Queries")}: {this.state.queries}<br/>
-            {t("Filesize")}: {this.state.filesize} B<br/>
-            {t("SQLite version")}: {this.state.sqlite_version}<br/>
-          </pre>
-        </div>
-      </div>
+      <pre>
+        {t("Queries")}: {this.state.queries}<br/>
+        {t("Filesize")}: {this.state.filesize} B<br/>
+        {t("SQLite version")}: {this.state.sqlite_version}<br/>
+      </pre>
     );
   }
 }
diff --git a/src/components/settings/NetworkInfo.js b/src/components/settings/NetworkInfo.js
index 1fc7c90..2a39e8d 100644
--- a/src/components/settings/NetworkInfo.js
+++ b/src/components/settings/NetworkInfo.js
@@ -8,9 +8,10 @@
 *  This file is copyright under the latest version of the EUPL.
 *  Please see LICENSE file for your rights under this license. */
 
-import React, { Component } from "react";
+import React, { Component, Fragment } from "react";
 import { translate } from "react-i18next";
 import { api, ignoreCancel, makeCancelable } from "../../utils";
+import { Col, Form, FormGroup, Input, Label } from "reactstrap";
 
 class NetworkInfo extends Component {
   state = {
@@ -58,22 +59,34 @@ class NetworkInfo extends Component {
     const { t } = this.props;
 
     return (
-      <div className="card border-0 bg-success stat-dbl-height-lock">
-        <div className="card-block">
-          <div className="card-icon">
-            <i className="fa fa-sitemap fa-2x"/>
-          </div>
-        </div>
-        <div className="card-img-overlay">
-          <h3>{t("Network")}</h3>
-          <pre>
-            {t("Interface")}: {this.state.interface}<br/>
-            {t("IPv4 address")}: {this.state.ipv4_address}<br/>
-            {t("IPv6 address")}: {this.state.ipv6_address}<br/>
-            {t("Hostname")}: {this.state.hostname}
-          </pre>
-        </div>
-      </div>
+      <Fragment>
+        <Form>
+          <FormGroup row>
+            <Label for="interface" sm={4}>{t("Interface")}</Label>
+            <Col sm={8}>
+              <Input plaintext id="interface">{this.state.interface}</Input>
+            </Col>
+          </FormGroup>
+          <FormGroup row>
+            <Label for="ipv4_address" sm={4}>{t("IPv4 address")}</Label>
+            <Col sm={8}>
+              <Input plaintext id="ipv4_address">{this.state.ipv4_address}</Input>
+            </Col>
+          </FormGroup>
+          <FormGroup row>
+            <Label for="ipv6_address" sm={4}>{t("IPv6 address")}</Label>
+            <Col sm={8}>
+              <Input plaintext id="ipv6_address">{this.state.ipv6_address}</Input>
+            </Col>
+          </FormGroup>
+          <FormGroup row>
+            <Label for="hostname" sm={4}>{t("Hostname")}</Label>
+            <Col sm={8}>
+              <Input plaintext id="hostname">{this.state.hostname}</Input>
+            </Col>
+          </FormGroup>
+        </Form>
+      </Fragment>
     );
   }
 }
diff --git a/src/views/Networking.js b/src/views/Networking.js
index 75ae64c..80547ac 100644
--- a/src/views/Networking.js
+++ b/src/views/Networking.js
@@ -8,30 +8,78 @@
 *  This file is copyright under the latest version of the EUPL.
 *  Please see LICENSE file for your rights under this license. */
 
-import React from 'react';
+import React, { Component } from "react";
+import { translate } from "react-i18next";
+import { Nav, NavItem, NavLink, TabContent, TabPane } from "reactstrap";
+import DHCPInfo from "../components/settings/DHCPInfo";
+import DNSInfo from "../components/settings/DNSInfo";
+import NetworkInfo from "../components/settings/NetworkInfo";
+import FTLInfo from "../components/settings/FTLInfo";
 
-import DHCPInfo from '../components/settings/DHCPInfo';
-import DNSInfo from '../components/settings/DNSInfo';
-import NetworkInfo from '../components/settings/NetworkInfo';
-import FTLInfo from '../components/settings/FTLInfo';
+class Networking extends Component {
+  state = {
+    activeTab: "network"
+  };
 
-export default () => (
-  <div className="animated fadeIn">
-    <div className="container-flex">
-      <div className="row">
-        <div className="col-lg-6 col-xs-6">
-          <NetworkInfo/>
-        </div>
-        <div className="col-lg-6 col-xs-6">
-          <DHCPInfo/>
-        </div>
-        <div className="col-lg-12 col-xs-12">
-          <DNSInfo/>
-        </div>
-        <div className="col-lg-3 col-xs-3">
-          <FTLInfo/>
-        </div>
+  /**
+   * Set the active tab to the input
+   *
+   * @param tab the tab ID to switch to
+   */
+  setTab = tab => {
+    if(this.state.activeTab !== tab) {
+      this.setState({
+        activeTab: tab
+      });
+    }
+  };
+
+  /**
+   * Create a navigation tab
+   *
+   * @param id the tab's ID
+   * @param name the tab's display name
+   * @returns {NavItem} the tab component
+   */
+  tab = (id, name) => (
+    <NavItem>
+      <NavLink active={this.state.activeTab === id} onClick={() => this.setTab(id)}>
+        {name}
+      </NavLink>
+    </NavItem>
+  );
+
+  /**
+   * Create tab content
+   *
+   * @param id the tab's ID
+   * @param component the component to render in the tab
+   * @returns {TabPane} the tab content component
+   */
+  tabContent = (id, component) => (
+    <TabPane tabId={id}>{component}</TabPane>
+  );
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <div className="animated fadeIn">
+        <Nav tabs>
+          {this.tab("network", t("Network"))}
+          {this.tab("dhcp", t("DHCP"))}
+          {this.tab("dns", t("DNS"))}
+          {this.tab("ftl", t("FTL"))}
+        </Nav>
+        <TabContent activeTab={this.state.activeTab}>
+          {this.tabContent("network", <NetworkInfo/>)}
+          {this.tabContent("dhcp", <DHCPInfo/>)}
+          {this.tabContent("dns", <DNSInfo/>)}
+          {this.tabContent("ftl", <FTLInfo/>)}
+        </TabContent>
       </div>
-    </div>
-  </div>
-);
+    );
+  }
+}
+
+export default translate(["common", "settings"])(Networking);