diff --git a/package-lock.json b/package-lock.json
index cf8ae5a..ac0ea03 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1332,6 +1332,11 @@
       "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==",
       "dev": true
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.6.3.tgz",
+      "integrity": "sha512-s5PLdI9NYgjBvfrv6rhirPHlAHWx+Sfo/IjsAeiXYfmemC/GSjwsyz1wLnGPazbLPXWfk62ks980o9AmsxYUEQ=="
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -7027,11 +7032,6 @@
         }
       }
     },
-    "font-awesome": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
-      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
-    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
diff --git a/package.json b/package.json
index 216ca7b..27f10b0 100644
--- a/package.json
+++ b/package.json
@@ -23,10 +23,10 @@
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
     "@coreui/icons": "0.2.0",
     "@coreui/react": "^2.0.4",
+    "@fortawesome/fontawesome-free": "^5.6.3",
     "bootstrap": "^4.1.1",
     "bootstrap-daterangepicker": "^3.0.3",
     "chart.js": "^2.7.2",
-    "font-awesome": "^4.7.0",
     "i18next": "^11.3.2",
     "i18next-browser-languagedetector": "^2.2.0",
     "i18next-xhr-backend": "^1.5.1",
diff --git a/src/components/common/BoxedLayoutButton.js b/src/components/common/BoxedLayoutButton.js
index 252002f..8ff17e1 100755
--- a/src/components/common/BoxedLayoutButton.js
+++ b/src/components/common/BoxedLayoutButton.js
@@ -24,7 +24,7 @@ export default () => {
         type="button"
         onClick={boxedLayoutToggle}
       >
-        <i className="fa fa-exchange" />
+        <i className="fa fa-exchange-alt" />
       </button>
     </div>
   );
diff --git a/src/components/common/Footer.js b/src/components/common/Footer.js
index a5b12d0..ff79d34 100644
--- a/src/components/common/Footer.js
+++ b/src/components/common/Footer.js
@@ -18,7 +18,7 @@ const Footer = props => {
   return (
     <footer className="app-footer">
       <div>
-        <i className="fa fa-paypal" />
+        <i className="fab fa-paypal" />
         <strong>
           <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=3J2L3Z4DHW9UY">
             &nbsp;
diff --git a/src/components/common/StatusBadge.js b/src/components/common/StatusBadge.js
index 8a520e1..ce1a9c7 100644
--- a/src/components/common/StatusBadge.js
+++ b/src/components/common/StatusBadge.js
@@ -9,20 +9,20 @@ class StatusBadge extends Component {
     status: PropTypes.string.isRequired
   };
 
+  isEnabled = () => this.props.status === "enabled";
+
   render() {
     const { t } = this.props;
 
-    return this.props.status === "enabled" ? (
+    return (
       <span>
-        <i className="fa fa-circle text-success" />
+        <i
+          className={
+            "fa fa-circle text-" + (this.isEnabled() ? "success" : "danger")
+          }
+        />
         &nbsp;
-        {t("Enabled")}
-      </span>
-    ) : (
-      <span>
-        <i className="fa fa-circle text-danger" />
-        &nbsp;
-        {t("Disabled")}
+        {t(this.isEnabled() ? "Enabled" : "Disabled")}
       </span>
     );
   }
diff --git a/src/components/dashboard/SummaryStats.js b/src/components/dashboard/SummaryStats.js
index b29cf62..4a54c93 100644
--- a/src/components/dashboard/SummaryStats.js
+++ b/src/components/dashboard/SummaryStats.js
@@ -33,7 +33,7 @@ class SummaryStats extends Component {
           <div className="card border-0 bg-success stat-height-lock">
             <div className="card-body">
               <div className="card-icon">
-                <i className="fa fa-globe fa-2x" />
+                <i className="fa fa-globe-americas fa-2x" />
               </div>
             </div>
             <div className="card-img-overlay">
@@ -50,7 +50,7 @@ class SummaryStats extends Component {
           <div className="card border-0 bg-primary stat-height-lock">
             <div className="card-body">
               <div className="card-icon">
-                <i className="fa fa-hand-stop-o fa-2x" />
+                <i className="far fa-hand-paper fa-2x" />
               </div>
             </div>
             <div className="card-img-overlay">
@@ -63,7 +63,7 @@ class SummaryStats extends Component {
           <div className="card border-0 bg-warning stat-height-lock">
             <div className="card-body">
               <div className="card-icon">
-                <i className="fa fa-pie-chart fa-2x" />
+                <i className="fa fa-chart-pie fa-2x" />
               </div>
             </div>
             <div className="card-img-overlay">
@@ -76,7 +76,7 @@ class SummaryStats extends Component {
           <div className="card border-0 bg-danger stat-height-lock">
             <div className="card-body">
               <div className="card-icon">
-                <i className="fa fa-list-alt fa-2x" />
+                <i className="far fa-list-alt fa-2x" />
               </div>
             </div>
             <div className="card-img-overlay">
diff --git a/src/components/list/DomainInput.js b/src/components/list/DomainInput.js
index c5c3003..8429e72 100644
--- a/src/components/list/DomainInput.js
+++ b/src/components/list/DomainInput.js
@@ -66,7 +66,7 @@ class DomainInput extends Component {
             className="btn border-secondary"
             type="button"
           >
-            <i className="fa fa-refresh" />
+            <i className="fa fa-sync" />
           </button>
         </span>
       </form>
diff --git a/src/components/list/DomainList.js b/src/components/list/DomainList.js
index e369039..59c2db1 100644
--- a/src/components/list/DomainList.js
+++ b/src/components/list/DomainList.js
@@ -24,7 +24,7 @@ const DomainList = ({ domains, onRemove, t }) => {
       style={{ marginTop: "2px" }}
       onClick={() => onRemove(item)}
     >
-      <span className="fa fa-trash-o" />
+      <span className="far fa-trash-alt" />
     </Button>
   );
 
diff --git a/src/components/log/QueryLog.js b/src/components/log/QueryLog.js
index 8836710..5230aaf 100644
--- a/src/components/log/QueryLog.js
+++ b/src/components/log/QueryLog.js
@@ -409,7 +409,7 @@ const columns = t => [
         ranges={dateRanges}
       >
         <Button color="light" size="sm">
-          <i className="fa fa-clock-o fa-lg" />
+          <i className="far fa-clock fa-lg" />
         </Button>
       </DateRangePicker>
     )
diff --git a/src/components/settings/DnsListItem.js b/src/components/settings/DnsListItem.js
index 276c50c..7131f04 100644
--- a/src/components/settings/DnsListItem.js
+++ b/src/components/settings/DnsListItem.js
@@ -16,7 +16,7 @@ const DnsListItem = ({ address, onRemove }) => (
   <ListGroupItem>
     {address}
     <Button color="danger" size="sm" className="pull-right" onClick={onRemove}>
-      <span className="fa fa-trash-o" />
+      <span className="far fa-trash-alt" />
     </Button>
   </ListGroupItem>
 );
diff --git a/src/components/settings/VersionInfo.js b/src/components/settings/VersionInfo.js
index c1d4ac2..c374413 100644
--- a/src/components/settings/VersionInfo.js
+++ b/src/components/settings/VersionInfo.js
@@ -37,7 +37,7 @@ class VersionInfo extends Component {
         <div className="col-xl-3 col-md-6 col-xs-12">
           <VersionCard
             name={t("Core")}
-            icon="fa fa-dot-circle-o fa-2x"
+            icon="far fa-dot-circle fa-2x"
             branch={this.props.core.branch}
             hash={this.props.core.hash}
             tag={this.props.core.tag}
@@ -64,7 +64,7 @@ class VersionInfo extends Component {
         <div className="col-xl-3 col-md-6 col-xs-12">
           <VersionCard
             name={t("Web")}
-            icon="fa fa-list-alt fa-2x"
+            icon="far fa-list-alt fa-2x"
             branch={this.props.web.branch}
             hash={this.props.web.hash}
             tag={this.props.web.tag}
diff --git a/src/index.js b/src/index.js
index b1f8c02..d33e283 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,7 +12,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 import "ionicons/dist/css/ionicons.min.css";
-import "font-awesome/css/font-awesome.min.css";
+import "@fortawesome/fontawesome-free/css/all.min.css";
 import "simple-line-icons/css/simple-line-icons.css";
 import "react-bootstrap-typeahead/css/Typeahead.css";
 import "./scss/style.css";
diff --git a/src/routes.js b/src/routes.js
index ec02a41..fb15088 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -35,7 +35,7 @@ export const nav = [
     name: "Dashboard",
     url: "/dashboard",
     component: Dashboard,
-    icon: "fa fa-dashboard",
+    icon: "fa fa-tachometer-alt",
     auth: false
   },
   {
@@ -49,7 +49,7 @@ export const nav = [
     name: "Whitelist",
     url: "/whitelist",
     component: Whitelist,
-    icon: "fa fa-check-circle-o",
+    icon: "far fa-check-circle",
     auth: false
   },
   {
diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
index 2b3feb9..6711e63 100644
--- a/src/scss/_custom.scss
+++ b/src/scss/_custom.scss
@@ -186,3 +186,11 @@
 .form-check-input {
   margin-top: 0.2rem;
 }
+
+.pull-left {
+  float: left;
+}
+
+.pull-right {
+  float: right;
+}