diff --git a/app/components/nav/topbar.hbs b/app/components/nav/topbar.hbs
index 0b05987e9fe14f2a280a1b139f2408d6521f0691..299cb942e4f5168cab1a30ade6b9b7c74193aec0 100644
--- a/app/components/nav/topbar.hbs
+++ b/app/components/nav/topbar.hbs
@@ -43,6 +43,14 @@
                 Documentation
               </a>
             </li>
+            <li class="dropdown-item">
+              <i class="fa fa-book mx-2"></i>
+              <a
+                href="{{this.browsable_api_url}}"
+                class="text-decoration-none">
+                Browsable API
+              </a>
+            </li>
             <li class="dropdown-item">
               <i class="fa fa-question-circle mx-2"></i>
               <a href="#" class="text-decoration-none">About</a>
diff --git a/app/components/nav/topbar.js b/app/components/nav/topbar.js
index 5637294decbf83bd24bf816e194c14f1f9fcbee6..10e85038096c6b3f555873b0c34611d68a9b8154 100644
--- a/app/components/nav/topbar.js
+++ b/app/components/nav/topbar.js
@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
+import { base_url } from 'papermerge/utils/host';
 
 
 export default class TopbarComponent extends Component {
@@ -16,4 +17,8 @@ export default class TopbarComponent extends Component {
   onSidebarToggle() {
     this.args.onSidebarToggle();
   }
+
+  get browsable_api_url() {
+    return base_url();
+  }
 }
diff --git a/app/controllers/login.js b/app/controllers/login.js
index 520e58758ffff4309771cc9aee8902821488e951..78f4a219598c2819a77c1457ccf9577f99dfdee1 100644
--- a/app/controllers/login.js
+++ b/app/controllers/login.js
@@ -42,4 +42,8 @@ export default class LoginController extends Controller {
   get inProgress() {
     return this.in_progress;
   }
+
+  get browsable_api_url() {
+    return base_url();
+  }
 }
diff --git a/app/templates/login.hbs b/app/templates/login.hbs
index 3b098750fda3865340b0e1655219aac22056f49d..0de610164be6212650f0911b07927d966798bf9f 100644
--- a/app/templates/login.hbs
+++ b/app/templates/login.hbs
@@ -21,5 +21,10 @@
 
       </div> <!-- card-body -->
     </div> <!-- card -->
+
+    <ul class="list-inline list-unstiled p-3">
+      <li class="list-inline-item"><a class="text-decoration-none m-2" href="https://docs.papermerge.io">Documentation</a></li>
+      <li class="list-inline-item"><a class="text-decoration-none m-2" href="{{this.browsable_api_url}}">Browsable API</a></li>
+    </ul>
   </div>
 </main>
diff --git a/app/utils/host.js b/app/utils/host.js
index 70219f4b8703128903c0daaff8f46fd733854257..384ece6c22380d32f7882b87afd094b08636c978 100644
--- a/app/utils/host.js
+++ b/app/utils/host.js
@@ -37,7 +37,7 @@ function ws_base_url() {
     // user can override BACKEND HOST by providing
     // ENV.APP.HOST value
     // e.g. ENV.APP.HOST = 'ws://127.0.0.1:8000';
-    base = ENV.WS_APP.HOST;
+    base = ENV.APP.WS_HOST;
   }
 
   if (!ENV.APP.WS_NAMESPACE) {