diff --git a/web/ui/react-app/public/index.html b/web/ui/react-app/public/index.html
index 2e118e50d9..e5943537b4 100755
--- a/web/ui/react-app/public/index.html
+++ b/web/ui/react-app/public/index.html
@@ -10,11 +10,18 @@
     <meta name="theme-color" content="#000000" />
 
     <!--
-      This constant's placeholder magic value is replaced during serving by Prometheus
+      The GLOBAL_PATH_PREFIX placeholder magic value is replaced during serving by Prometheus
       and set to Prometheus's external URL path. It gets prepended to all links back
       to Prometheus, both for asset loading as well as API accesses.
+
+      The GLOBAL_CONSOLES_LINK placeholder magic value is replaced during serving by Prometheus
+      and set to the consoles link if it exists. It will render a "Consoles" link in the navbar when 
+      it is non-empty. 
     -->
-    <script>const PATH_PREFIX='PATH_PREFIX_PLACEHOLDER';</script>
+    <script>
+      const GLOBAL_PATH_PREFIX='PATH_PREFIX_PLACEHOLDER';
+      const GLOBAL_CONSOLES_LINK='CONSOLES_LINK_PLACEHOLDER';
+    </script>
 
     <!--
       manifest.json provides metadata used when your web app is added to the
diff --git a/web/ui/react-app/src/App.tsx b/web/ui/react-app/src/App.tsx
index 68b3ce4858..d172773e0d 100755
--- a/web/ui/react-app/src/App.tsx
+++ b/web/ui/react-app/src/App.tsx
@@ -7,10 +7,14 @@ import { Router, Redirect } from '@reach/router';
 import { Alerts, Config, Flags, Rules, ServiceDiscovery, Status, Targets, TSDBStatus, PanelList } from './pages';
 import PathPrefixProps from './types/PathPrefixProps';
 
-const App: FC<PathPrefixProps> = ({ pathPrefix }) => {
+interface AppProps {
+  consolesLink: string | null;
+}
+
+const App: FC<PathPrefixProps & AppProps> = ({ pathPrefix, consolesLink }) => {
   return (
     <>
-      <Navigation pathPrefix={pathPrefix} />
+      <Navigation pathPrefix={pathPrefix} consolesLink={consolesLink} />
       <Container fluid style={{ paddingTop: 70 }}>
         <Router basepath={`${pathPrefix}/new`}>
           <Redirect from="/" to={`${pathPrefix}/new/graph`} />
diff --git a/web/ui/react-app/src/Navbar.test.tsx b/web/ui/react-app/src/Navbar.test.tsx
new file mode 100644
index 0000000000..08fc72c34f
--- /dev/null
+++ b/web/ui/react-app/src/Navbar.test.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import Navigation from './Navbar';
+import { NavItem, NavLink } from 'reactstrap';
+
+describe('Navbar should contain console Link', () => {
+  it('with non-empty consoleslink', () => {
+    const app = shallow(<Navigation pathPrefix="/path/prefix" consolesLink="/path/consoles" />);
+    expect(
+      app.contains(
+        <NavItem>
+          <NavLink href="/path/consoles">Consoles</NavLink>
+        </NavItem>
+      )
+    ).toBeTruthy();
+  });
+});
+
+describe('Navbar should not contain consoles link', () => {
+  it('with empty string in consolesLink', () => {
+    const app = shallow(<Navigation pathPrefix="/path/prefix" consolesLink="" />);
+    expect(
+      app.contains(
+        <NavItem>
+          <NavLink>Consoles</NavLink>
+        </NavItem>
+      )
+    ).toBeFalsy();
+  });
+});
diff --git a/web/ui/react-app/src/Navbar.tsx b/web/ui/react-app/src/Navbar.tsx
index 690901bd37..031b58fdfc 100644
--- a/web/ui/react-app/src/Navbar.tsx
+++ b/web/ui/react-app/src/Navbar.tsx
@@ -14,7 +14,11 @@ import {
 } from 'reactstrap';
 import PathPrefixProps from './types/PathPrefixProps';
 
-const Navigation: FC<PathPrefixProps> = ({ pathPrefix }) => {
+interface NavbarProps {
+  consolesLink: string | null;
+}
+
+const Navigation: FC<PathPrefixProps & NavbarProps> = ({ pathPrefix, consolesLink }) => {
   const [isOpen, setIsOpen] = useState(false);
   const toggle = () => setIsOpen(!isOpen);
   return (
@@ -25,6 +29,11 @@ const Navigation: FC<PathPrefixProps> = ({ pathPrefix }) => {
       </Link>
       <Collapse isOpen={isOpen} navbar style={{ justifyContent: 'space-between' }}>
         <Nav className="ml-0" navbar>
+          {consolesLink !== '' && (
+            <NavItem>
+              <NavLink href={`${consolesLink}`}>Consoles</NavLink>
+            </NavItem>
+          )}
           <NavItem>
             <NavLink tag={Link} to={`${pathPrefix}/new/alerts`}>
               Alerts
diff --git a/web/ui/react-app/src/index.tsx b/web/ui/react-app/src/index.tsx
index 3d4e94ef7e..557069907c 100755
--- a/web/ui/react-app/src/index.tsx
+++ b/web/ui/react-app/src/index.tsx
@@ -3,12 +3,15 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import { isPresent } from './utils';
 
 // Declared/defined in public/index.html, value replaced by Prometheus when serving bundle.
-declare const PATH_PREFIX: string;
+declare const GLOBAL_PATH_PREFIX: string;
+declare const GLOBAL_CONSOLES_LINK: string;
 
-let prefix = PATH_PREFIX;
-if (PATH_PREFIX === 'PATH_PREFIX_PLACEHOLDER' || PATH_PREFIX === '/') {
+let prefix = GLOBAL_PATH_PREFIX;
+let consolesLink = GLOBAL_CONSOLES_LINK;
+if (GLOBAL_PATH_PREFIX === 'PATH_PREFIX_PLACEHOLDER' || GLOBAL_PATH_PREFIX === '/' || !isPresent(GLOBAL_PATH_PREFIX)) {
   // Either we are running the app outside of Prometheus, so the placeholder value in
   // the index.html didn't get replaced, or we have a '/' prefix, which we also need to
   // normalize to '' to make concatenations work (prefixes like '/foo/bar/' already get
@@ -16,4 +19,12 @@ if (PATH_PREFIX === 'PATH_PREFIX_PLACEHOLDER' || PATH_PREFIX === '/') {
   prefix = '';
 }
 
-ReactDOM.render(<App pathPrefix={prefix} />, document.getElementById('root'));
+if (
+  GLOBAL_CONSOLES_LINK === 'CONSOLES_LINK_PLACEHOLDER' ||
+  GLOBAL_CONSOLES_LINK === '' ||
+  !isPresent(GLOBAL_CONSOLES_LINK)
+) {
+  consolesLink = '';
+}
+
+ReactDOM.render(<App pathPrefix={prefix} consolesLink={consolesLink} />, document.getElementById('root'));
diff --git a/web/web.go b/web/web.go
index 358d7e29df..284728ce65 100644
--- a/web/web.go
+++ b/web/web.go
@@ -382,6 +382,7 @@ func New(logger log.Logger, o *Options) *Handler {
 				return
 			}
 			prefixedIdx := bytes.ReplaceAll(idx, []byte("PATH_PREFIX_PLACEHOLDER"), []byte(o.ExternalURL.Path))
+			prefixedIdx = bytes.ReplaceAll(prefixedIdx, []byte("CONSOLES_LINK_PLACEHOLDER"), []byte(h.consolesPath()))
 			w.Write(prefixedIdx)
 			return
 		}