diff --git a/app/src/controllers/pages/constants.js b/app/src/controllers/pages/constants.js
index 11b8daf1ce..f8cda36a5d 100644
--- a/app/src/controllers/pages/constants.js
+++ b/app/src/controllers/pages/constants.js
@@ -29,7 +29,9 @@ export const PLUGINS_PAGE = 'PLUGINS_PAGE';
 export const PLUGINS_TAB_PAGE = 'PLUGINS_TAB_PAGE';
 export const PLUGIN_UI_EXTENSION_ADMIN_PAGE = 'PLUGIN_UI_EXTENSION_ADMIN_PAGE';
 // inside
-export const API_PAGE = 'API_PAGE';
+export const API_PAGE_INSTANCE_LEVEL = 'API_PAGE_INSTANCE_LEVEL';
+export const API_PAGE_ORGANIZATION_LEVEL = 'API_PAGE_ORGANIZATION_LEVEL';
+export const API_PAGE_PROJECT_LEVEL = 'API_PAGE_PROJECT_LEVEL';
 export const ORGANIZATIONS_PAGE = 'ORGANIZATIONS_PAGE';
 export const ORGANIZATION_PROJECTS_PAGE = 'ORGANIZATION_PROJECTS_PAGE';
 export const ORGANIZATION_USERS_PAGE = 'ORGANIZATION_USERS_PAGE';
@@ -78,7 +80,9 @@ export const pageNames = {
   SERVER_SETTINGS_TAB_PAGE,
   PLUGINS_PAGE,
   PLUGINS_TAB_PAGE,
-  API_PAGE,
+  API_PAGE_INSTANCE_LEVEL,
+  API_PAGE_ORGANIZATION_LEVEL,
+  API_PAGE_PROJECT_LEVEL,
   PROJECT_DASHBOARD_PAGE,
   PROJECT_DASHBOARD_ITEM_PAGE,
   PROJECT_DASHBOARD_PRINT_PAGE,
diff --git a/app/src/controllers/pages/index.js b/app/src/controllers/pages/index.js
index 10c6924627..2dd0b86f19 100644
--- a/app/src/controllers/pages/index.js
+++ b/app/src/controllers/pages/index.js
@@ -55,7 +55,9 @@ export {
   SERVER_SETTINGS_TAB_PAGE,
   PLUGINS_PAGE,
   PLUGINS_TAB_PAGE,
-  API_PAGE,
+  API_PAGE_INSTANCE_LEVEL,
+  API_PAGE_ORGANIZATION_LEVEL,
+  API_PAGE_PROJECT_LEVEL,
   PROJECT_PAGE,
   PROJECT_DASHBOARD_PAGE,
   PROJECT_DASHBOARD_ITEM_PAGE,
diff --git a/app/src/layouts/common/appSidebar/helpAndService/servicesContent/servicesContent.jsx b/app/src/layouts/common/appSidebar/helpAndService/servicesContent/servicesContent.jsx
index 6ab48d76ce..19b7ee76ac 100644
--- a/app/src/layouts/common/appSidebar/helpAndService/servicesContent/servicesContent.jsx
+++ b/app/src/layouts/common/appSidebar/helpAndService/servicesContent/servicesContent.jsx
@@ -16,9 +16,15 @@
 
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from 'react-intl';
-import { API_PAGE } from 'controllers/pages';
+import {
+  API_PAGE_INSTANCE_LEVEL,
+  API_PAGE_ORGANIZATION_LEVEL,
+  API_PAGE_PROJECT_LEVEL,
+  urlOrganizationSlugSelector,
+  urlProjectSlugSelector,
+} from 'controllers/pages';
 import { showModalAction } from 'controllers/modal';
 import { referenceDictionary } from 'common/utils';
 import { useEffect, useState } from 'react';
@@ -36,10 +42,32 @@ export const ServicesContent = ({ closePopover, closeSidebar, isFaqTouched, onOp
   const dispatch = useDispatch();
   const { formatMessage } = useIntl();
   const { trackEvent } = useTracking();
+  const organizationSlug = useSelector(urlOrganizationSlugSelector);
+  const projectSlug = useSelector(urlProjectSlugSelector);
   const [latestServiceVersions, setLatestServiceVersions] = useState({});
 
   const currentYear = new Date().getFullYear();
 
+  const getApiLink = () => {
+    if (projectSlug && organizationSlug) {
+      return {
+        type: API_PAGE_PROJECT_LEVEL,
+        payload: { organizationSlug, projectSlug },
+      };
+    }
+
+    if (organizationSlug) {
+      return {
+        type: API_PAGE_ORGANIZATION_LEVEL,
+        payload: { organizationSlug },
+      };
+    }
+
+    return {
+      type: API_PAGE_INSTANCE_LEVEL,
+    };
+  };
+
   const ServiceContentItems = [
     {
       linkTo: referenceDictionary.rpDoc,
@@ -47,7 +75,7 @@ export const ServicesContent = ({ closePopover, closeSidebar, isFaqTouched, onOp
     },
     {
       isInternal: true,
-      linkTo: { type: API_PAGE },
+      linkTo: getApiLink(),
       message: messages.openAPI,
     },
     {
diff --git a/app/src/routes/constants.js b/app/src/routes/constants.js
index 868611a850..5a61961bfd 100644
--- a/app/src/routes/constants.js
+++ b/app/src/routes/constants.js
@@ -90,7 +90,9 @@ export const pageRendering = {
   },
   [USER_PROFILE_PAGE_PROJECT_LEVEL]: { component: ProfilePage, layout: ProjectLayout },
   [USER_PROFILE_SUB_PAGE_PROJECT_LEVEL]: { component: ProfilePage, layout: ProjectLayout },
-  API_PAGE: { component: ApiPage, layout: ProjectLayout },
+  API_PAGE_INSTANCE_LEVEL: { component: ApiPage, layout: InstanceLayout },
+  API_PAGE_ORGANIZATION_LEVEL: { component: ApiPage, layout: OrganizationLayout },
+  API_PAGE_PROJECT_LEVEL: { component: ApiPage, layout: ProjectLayout },
   [ORGANIZATION_USERS_PAGE]: {
     component: OrganizationUsersPage,
     layout: OrganizationLayout,
diff --git a/app/src/routes/routesMap.js b/app/src/routes/routesMap.js
index 790ab2fba6..63db727cc2 100644
--- a/app/src/routes/routesMap.js
+++ b/app/src/routes/routesMap.js
@@ -149,7 +149,9 @@ const routesMap = {
 
   [USER_PROFILE_SUB_PAGE_PROJECT_LEVEL]: `/organizations/:organizationSlug/projects/:projectSlug/userProfile/:profileRoute(${ASSIGNMENTS_ROUTE}|${API_KEYS_ROUTE}|${CONFIG_EXAMPLES_ROUTE})`,
 
-  API_PAGE: '/api',
+  API_PAGE_INSTANCE_LEVEL: '/api',
+  API_PAGE_ORGANIZATION_LEVEL: '/organizations/:organizationSlug/api',
+  API_PAGE_PROJECT_LEVEL: '/organizations/:organizationSlug/projects/:projectSlug/api',
 
   [ALL_USERS_PAGE]: {
     path: '/users',