diff --git a/package-lock.json b/package-lock.json
index 31916f976..b6cb4412a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11566,6 +11566,11 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-detect-offline": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-detect-offline/-/react-detect-offline-2.1.1.tgz",
+      "integrity": "sha512-xdFzuozxzQsBAjqX4LkfJ9g2YJoBB6pD5DSTzReelZvZEdba+7W9Tqjr+4Oz9jhT0l17VBbKsC5yaZk1rhn8GQ=="
+    },
     "react-dev-utils": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-5.0.1.tgz",
diff --git a/package.json b/package.json
index 161a39068..0ed655ae3 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "pikaday": "^1.7.0",
     "prop-types": "^15.6.0",
     "react": "^16.3.2",
+    "react-detect-offline": "^2.1.1",
     "react-dom": "^16.3.2",
     "react-pdf": "^2.5.3",
     "react-redux": "^5.0.6",
diff --git a/src/components/LandingPage.js b/src/components/LandingPage.js
index 8f0fa3dea..52b0adf26 100644
--- a/src/components/LandingPage.js
+++ b/src/components/LandingPage.js
@@ -1,11 +1,13 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import { Offline } from 'react-detect-offline';
 import Navbar from './Navbar';
 import Toast from './Toast';
 import { userHaveRole, isUserActive } from '../utils';
 import { fetchUser, fetchReferences, fetchZones } from '../actionCreators';
 import { getUser } from '../reducers/rootReducer';
+import { USER_NOT_ACTIVE, NO_INTERNET } from '../constants/strings';
 
 const propTypes = {
   component: PropTypes.func.isRequired,
@@ -32,8 +34,11 @@ export class LandingPage extends Component {
     return (
       <main>
         <Navbar {...rest} />
+        <Offline>
+          <section className="offline">{NO_INTERNET}</section>
+        </Offline>
         { !isUserActive(user) &&
-          <div>This account is not active.</div>
+          <section>{USER_NOT_ACTIVE}</section>
         }
         { userHaveRole(user) &&
           <Component {...rest} />
diff --git a/src/constants/strings.js b/src/constants/strings.js
index bf5fc8192..40ffb6778 100644
--- a/src/constants/strings.js
+++ b/src/constants/strings.js
@@ -63,6 +63,7 @@ export const TOTAL_AUMS_EXCEEDS = 'Total AUMs exceeds authorized AUMs.';
 export const USER_NOT_ACTIVE = 'This account is not active yet, please contact the administrator.';
 export const USER_NOT_REGISTERED = 'This account has not been registered.';
 export const LINK_CLIENT_SUCCESS = 'You have successfully linked the client.';
+export const NO_INTERNET = 'There is no Internet connection.';
 
 // modals
 export const COMPLETED_CONFIRMATION_HEADER = 'Update Status: Completed';
diff --git a/src/styles/App.scss b/src/styles/App.scss
index f7a9c43f6..ad9a44996 100644
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -13,6 +13,13 @@ body {
   background: #fdfdfd;
 }
 
+.offline {
+  background-color: $error-color;
+  color: white;
+  text-align: center;
+  height: 20px;
+}
+
 footer {
   height: 20px;
 }