diff --git a/contentcuration/contentcuration/frontend/accounts/pages/Create.vue b/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
index 6e590d4142..aab2c0be9e 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
@@ -20,7 +20,9 @@
         <Banner :value="!valid" error class="mb-4">
           {{ registrationFailed ? $tr('registrationFailed') : $tr('errorsMessage') }}
         </Banner>
-
+        <Banner :value="offline" error class="mb-4">
+          {{ $tr('registrationFailedOffline') }}
+        </Banner>
         <!-- Basic information -->
         <h1 class="font-weight-bold my-2 subheading">
           {{ $tr('basicInformationHeader') }}
@@ -157,7 +159,7 @@
         <p class="mb-4">
           {{ $tr('contactMessage') }}
         </p>
-        <VBtn color="primary" large type="submit">
+        <VBtn color="primary" large :disabled="offline" type="submit">
           {{ $tr('finishButton') }}
         </VBtn>
       </VForm>
@@ -171,7 +173,7 @@
 
 <script>
 
-  import { mapActions, mapGetters } from 'vuex';
+  import { mapActions, mapGetters, mapState } from 'vuex';
   import { uses, sources } from '../constants';
   import TextField from 'shared/views/form/TextField';
   import EmailField from 'shared/views/form/EmailField';
@@ -222,6 +224,9 @@
       };
     },
     computed: {
+      ...mapState({
+        offline: state => !state.connection.online,
+      }),
       ...mapGetters('policies', ['getPolicyAcceptedData']),
       passwordConfirmRules() {
         return [value => (this.form.password1 === value ? true : this.$tr('passwordMatchMessage'))];
@@ -410,7 +415,9 @@
               this.$router.push({ name: 'ActivationSent' });
             })
             .catch(error => {
-              if (error.response.status === 403) {
+              if (error.message === 'Network Error') {
+                this.$refs.top.scrollIntoView({ behavior: 'smooth' });
+              } else if (error.response.status === 403) {
                 this.emailErrors = [this.$tr('emailExistsMessage')];
               } else if (error.response.status === 405) {
                 this.$router.push({ name: 'AccountNotActivated' });
@@ -431,6 +438,8 @@
       fieldRequiredMessage: 'Field is required',
       errorsMessage: 'Please fix the errors below',
       registrationFailed: 'There was an error registering your account. Please try again',
+      registrationFailedOffline:
+        'You seem to be offline. Please connect to the internet to create an account.',
 
       // Basic information strings
       basicInformationHeader: 'Basic information',
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/Main.vue b/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
index 46fabc4b92..cff562b4c4 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
@@ -6,6 +6,9 @@
       justify-center
       class="main pt-5"
     >
+      <h3 class="corner">
+        <OfflineText indicator />
+      </h3>
       <div>
         <!-- Sign in -->
         <VCard class="pa-4" style="width: 300px;margin: 0 auto;">
@@ -20,6 +23,7 @@
             {{ $tr('kolibriStudio') }}
           </h2>
           <Banner :value="loginFailed" :text="$tr('loginFailed')" error />
+          <Banner :value="offline" :text="$tr('loginFailedOffline')" error />
           <Banner
             :value="Boolean(nextParam)"
             :text="$tr('loginToProceed')"
@@ -32,7 +36,7 @@
             <p>
               <ActionLink :to="{ name: 'ForgotPassword' }" :text="$tr('forgotPasswordLink')" />
             </p>
-            <VBtn block color="primary" large type="submit" :disabled="busy">
+            <VBtn block color="primary" large type="submit" :disabled="offline || busy">
               {{ $tr('signInButton') }}
             </VBtn>
             <VBtn block flat color="primary" class="mt-2" :to="{ name: 'Create' }">
@@ -79,13 +83,14 @@
 
 <script>
 
-  import { mapActions } from 'vuex';
+  import { mapActions, mapState } from 'vuex';
   import EmailField from 'shared/views/form/EmailField';
   import PasswordField from 'shared/views/form/PasswordField';
   import Banner from 'shared/views/Banner';
   import PolicyModals from 'shared/views/policies/PolicyModals';
   import { policies } from 'shared/constants';
   import LanguageSwitcherList from 'shared/languageSwitcher/LanguageSwitcherList';
+  import OfflineText from 'shared/views/OfflineText';
 
   export default {
     name: 'Main',
@@ -95,6 +100,7 @@
       LanguageSwitcherList,
       PasswordField,
       PolicyModals,
+      OfflineText,
     },
     data() {
       return {
@@ -102,9 +108,13 @@
         password: '',
         loginFailed: false,
         busy: false,
+        loginFailedOffline: false,
       };
     },
     computed: {
+      ...mapState({
+        offline: state => !state.connection.online,
+      }),
       nextParam() {
         const params = new URLSearchParams(window.location.search.substring(1));
         return params.get('next');
@@ -128,14 +138,19 @@
           };
           return this.login(credentials)
             .then(() => {
+              this.loginFailedOffline = false;
+              this.loginFailed = false;
               window.location.assign(this.nextParam || '/channels');
             })
             .catch(err => {
               this.busy = false;
-              if (err.response.status === 405) {
+              if (err.message === 'Network Error') {
+                this.loginFailedOffline = true;
+              } else if (err.response.status === 405) {
                 this.$router.push({ name: 'AccountNotActivated' });
+              } else {
+                this.loginFailed = true;
               }
-              this.loginFailed = true;
             });
         }
         return Promise.resolve();
@@ -153,6 +168,8 @@
       TOSLink: 'Terms of service',
       copyright: '© {year} Learning Equality',
       loginToProceed: 'You must sign in to view that page',
+      loginFailedOffline:
+        'You seem to be offline. Please connect to the internet before signing in.',
     },
   };
 
@@ -174,4 +191,10 @@
     content: '•';
   }
 
+  .corner {
+    position: absolute;
+    top: 1em;
+    left: 1em;
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/__tests__/create.spec.js b/contentcuration/contentcuration/frontend/accounts/pages/__tests__/create.spec.js
index 60d73418a6..dc9f24df06 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/__tests__/create.spec.js
+++ b/contentcuration/contentcuration/frontend/accounts/pages/__tests__/create.spec.js
@@ -3,6 +3,16 @@ import router from '../../router';
 import { uses, sources } from '../../constants';
 import Create from '../Create';
 
+const connectionStateMocks = {
+  $store: {
+    state: {
+      connection: {
+        offline: true,
+      },
+    },
+  },
+};
+
 const defaultData = {
   first_name: 'Test',
   last_name: 'User',
@@ -34,6 +44,7 @@ function makeWrapper(formData) {
       },
     },
     stubs: ['PolicyModals'],
+    mocks: connectionStateMocks,
   });
   wrapper.setData({
     form: {
@@ -87,7 +98,7 @@ describe('create', () => {
   });
   it('should automatically fill the email if provided in the query param', () => {
     router.push({ name: 'Create', query: { email: 'newtest@test.com' } });
-    let wrapper = mount(Create, { router, stubs: ['PolicyModals'] });
+    let wrapper = mount(Create, { router, stubs: ['PolicyModals'], mocks: connectionStateMocks });
     expect(wrapper.vm.form.email).toBe('newtest@test.com');
   });
   describe('validation', () => {
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/__tests__/main.spec.js b/contentcuration/contentcuration/frontend/accounts/pages/__tests__/main.spec.js
index 880e7a0aa1..dc57ccf210 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/__tests__/main.spec.js
+++ b/contentcuration/contentcuration/frontend/accounts/pages/__tests__/main.spec.js
@@ -8,6 +8,15 @@ function makeWrapper() {
   let wrapper = mount(Main, {
     router,
     stubs: ['GlobalSnackbar', 'PolicyModals'],
+    mocks: {
+      $store: {
+        state: {
+          connection: {
+            online: true,
+          },
+        },
+      },
+    },
   });
   wrapper.setMethods({
     login: data => {
diff --git a/contentcuration/contentcuration/frontend/shared/views/OfflineText.vue b/contentcuration/contentcuration/frontend/shared/views/OfflineText.vue
index 2dbcb8b8e2..0c23df89c8 100644
--- a/contentcuration/contentcuration/frontend/shared/views/OfflineText.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/OfflineText.vue
@@ -13,7 +13,7 @@
             </span>
           </div>
         </template>
-        <span>{{ $tr('offlineText') }}</span>
+        <span>{{ offlineText || $tr('offlineText') }}</span>
       </VTooltip>
       <ToolBar
         v-else-if="toolbar"
@@ -29,13 +29,13 @@
         <Icon class="mx-3">
           cloud_off
         </Icon>
-        <span>{{ $tr('offlineText') }}</span>
+        <span>{{ offlineText || $tr('offlineText') }}</span>
       </ToolBar>
       <div v-else>
         <Icon class="mx-3">
           cloud_off
         </Icon>
-        <span>{{ $tr('offlineText') }}</span>
+        <span>{{ offlineText || $tr('offlineText') }}</span>
       </div>
     </template>
   </VFadeTransition>
@@ -65,6 +65,10 @@
         type: Number,
         default: 0,
       },
+      offlineText: {
+        type: String,
+        default: null,
+      },
     },
     computed: {
       ...mapState({