diff --git a/ui/src/app/app.tsx b/ui/src/app/app.tsx
index 7861282220..2e8d8db8c2 100644
--- a/ui/src/app/app.tsx
+++ b/ui/src/app/app.tsx
@@ -156,7 +156,7 @@ export class App extends React.Component<{}, {popupProps: PopupProps; error: Err
                     <link rel='icon' type='image/png' href={`${base}assets/favicon/favicon-16x16.png`} sizes='16x16' />
                 </Helmet>
                 <PageContext.Provider value={{title: 'Argo CD'}}>
-                    <Provider value={{history, popup: this.popupManager, notifications: this.notificationsManager, navigation: this.navigationManager}}>
+                    <Provider value={{history, popup: this.popupManager, notifications: this.notificationsManager, navigation: this.navigationManager, baseHref: base}}>
                         {this.state.popupProps && <Popup {...this.state.popupProps} />}
                         <Router history={history}>
                             <Switch>
diff --git a/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx b/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx
index 79023a1607..2cfa7f2254 100644
--- a/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx
+++ b/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 import * as models from '../../../shared/models';
 
 import {EmptyState} from '../../../shared/components';
+import {Consumer} from '../../../shared/context';
 import {ApplicationURLs} from '../application-urls';
 import {ResourceIcon} from '../resource-icon';
 import {ComparisonStatusIcon, getAppOverridesCount, HealthStatusIcon, isAppNode, NodeId, nodeKey} from '../utils';
@@ -214,9 +215,13 @@ function renderResourceNode(props: ApplicationResourceTreeProps, id: string, nod
                     {healthState != null && <HealthStatusIcon state={healthState} />}
                     {comparisonStatus != null && <ComparisonStatusIcon status={comparisonStatus} resource={!rootNode && node} />}
                     {appNode && !rootNode && (
-                        <a href={'/applications/' + node.name} title='Open application'>
-                            <i className='fa fa-external-link-alt' />
-                        </a>
+                        <Consumer>
+                            {ctx => (
+                                <a href={ctx.baseHref + 'applications/' + node.name} title='Open application'>
+                                    <i className='fa fa-external-link-alt' />
+                                </a>
+                            )}
+                        </Consumer>
                     )}
                     <ApplicationURLs urls={rootNode ? props.app.status.summary.externalURLs : node.networkingInfo && node.networkingInfo.externalURLs} />
                 </div>
diff --git a/ui/src/app/shared/context.ts b/ui/src/app/shared/context.ts
index 0bd9100ec5..a594a27783 100644
--- a/ui/src/app/shared/context.ts
+++ b/ui/src/app/shared/context.ts
@@ -2,12 +2,13 @@ import {AppContext as ArgoAppContext, NavigationApi, NotificationsApi, PopupApi}
 import {History} from 'history';
 import * as React from 'react';
 
-export type AppContext = ArgoAppContext & {apis: {popup: PopupApi; notifications: NotificationsApi; navigation: NavigationApi}};
+export type AppContext = ArgoAppContext & {apis: {popup: PopupApi; notifications: NotificationsApi; navigation: NavigationApi; baseHref: string}};
 
 export interface ContextApis {
     popup: PopupApi;
     notifications: NotificationsApi;
     navigation: NavigationApi;
+    baseHref: string;
 }
 
 export const {Provider, Consumer} = React.createContext<ContextApis & {history: History}>(null);