diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index e3a598f8e..10441c7c4 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -5,6 +5,7 @@
     "repos": "Repos",
     "repositories": "Repositories",
     "docs": "Docs",
+    "api": "API",
     "logout": "Logout",
     "search": "Search…",
     "username": "Username",
diff --git a/web/src/components/layout/header/Navbar.vue b/web/src/components/layout/header/Navbar.vue
index 685ec4332..b844f7105 100644
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@@ -15,6 +15,8 @@
       </router-link>
       <!-- Docs Link -->
       <a :href="docsUrl" target="_blank" class="navbar-link navbar-clickable hidden md:flex">{{ $t('docs') }}</a>
+      <!-- API Link -->
+      <a :href="apiUrl" target="_blank" class="navbar-link navbar-clickable hidden md:flex">{{ $t('api') }}</a>
     </div>
     <!-- Right Icons Box -->
     <div class="flex ml-auto -m-1.5 items-center space-x-2 text-white dark:text-gray-400">
@@ -70,6 +72,7 @@ export default defineComponent({
     const authentication = useAuthentication();
     const { darkMode } = useDarkMode();
     const docsUrl = config.docs || undefined;
+    const apiUrl = `${config.rootURL ?? ''}/swagger/index.html`;
 
     function doLogin() {
       authentication.authenticate(route.fullPath);
@@ -77,7 +80,7 @@ export default defineComponent({
 
     const version = config.version?.startsWith('next') ? 'next' : config.version;
 
-    return { darkMode, user: authentication.user, doLogin, docsUrl, version };
+    return { darkMode, user: authentication.user, doLogin, docsUrl, version, apiUrl };
   },
 });
 </script>