diff --git a/app/authenticators/meilisearch.js b/app/authenticators/meilisearch.js
index 71ef8ad..f48c606 100644
--- a/app/authenticators/meilisearch.js
+++ b/app/authenticators/meilisearch.js
@@ -12,15 +12,21 @@ function makeRequest({ url, key }) {
   // TODO: how to check session?
   const req = new Request(new URL('/version', url), { headers });
 
-  return fetch(req).then(() => ({ url, key }));
+  return fetch(req).then((response) => {
+    if (response.ok) {
+      return { url, key };
+    } else {
+      throw new Error('Network response was not OK');
+    }
+  });
 }
 
 export default class MeilisearchAuthenticator extends Base {
-  restore({ url, key }) {
-    return makeRequest({ url, key });
+  restore(data) {
+    return makeRequest(data);
   }
 
-  authenticate(url, key) {
-    return makeRequest({ url, key });
+  authenticate(data) {
+    return makeRequest(data);
   }
 }
diff --git a/app/controllers/login.js b/app/controllers/login.js
index bac7238..6d46bb4 100644
--- a/app/controllers/login.js
+++ b/app/controllers/login.js
@@ -14,10 +14,15 @@ export default class LoginController extends Controller {
   async authenticate(e) {
     e.preventDefault();
 
+    this.errorMessage = null;
+
     let { url, key } = this;
 
     try {
-      await this.session.authenticate('authenticator:meilisearch', url, key);
+      await this.session.authenticate('authenticator:meilisearch', {
+        url,
+        key,
+      });
     } catch (error) {
       this.errorMessage = error.error || error;
     }
diff --git a/app/templates/login.hbs b/app/templates/login.hbs
index 3e6e3c0..f7f880c 100644
--- a/app/templates/login.hbs
+++ b/app/templates/login.hbs
@@ -10,14 +10,12 @@
           @required={{true}}
           @onChange={{set this 'url'}}
           @placeholder='https://example.com'
-          class='mt-1'
         />
 
         <Form::Input
           @label='API key'
           @value={{this.key}}
           @onChange={{set this 'key'}}
-          class='mt-1'
         />
 
         <Button
@@ -28,7 +26,9 @@
         />
 
         {{#if this.errorMessage}}
-          {{this.errorMessage}}
+          <p class="text-red">
+            {{this.errorMessage}}
+          </p>
         {{/if}}
       </form>
     </div>
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index 70aa448..b217dc3 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -33,6 +33,11 @@ module.exports = {
           DEFAULT: colors.green['400'],
           dark: colors.green['800'],
         },
+        red: {
+          light: colors.red['100'],
+          DEFAULT: colors.red['400'],
+          dark: colors.red['800'],
+        },
       },
       zIndex: {
         'scroll-link': '10',