diff --git a/ui/src/app/shared/components/deep-links.tsx b/ui/src/app/shared/components/deep-links.tsx
index f7881bff537d..6d9f614ea966 100644
--- a/ui/src/app/shared/components/deep-links.tsx
+++ b/ui/src/app/shared/components/deep-links.tsx
@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
+import {Link} from 'react-router-dom';
 import {LinkInfo} from '../models';
 
 export const DeepLinks = (props: {links: LinkInfo[]}) => {
@@ -7,10 +8,17 @@ export const DeepLinks = (props: {links: LinkInfo[]}) => {
         <div style={{margin: '10px 0'}}>
             {(links || []).map((link: LinkInfo) => (
                 <div key={link.title} style={{display: 'flex', alignItems: 'center', height: '35px'}}>
-                    <a href={link.url} target='_blank' style={{display: 'flex', alignItems: 'center', marginRight: '7px'}} rel='noopener'>
-                        <i className={`fa ${link.iconClass ? link.iconClass : 'fa-external-link-alt'}`} style={{marginRight: '5px'}} />
-                        <div>{link.title}</div>
-                    </a>
+                    {link.url.startsWith('http') ? (
+                        <a href={link.url} target='_blank' rel='noopener' style={{display: 'flex', alignItems: 'center', marginRight: '7px'}}>
+                            <i className={`fa ${link.iconClass ? link.iconClass : 'fa-external-link-alt'} custom-style-link`} style={{marginRight: '5px'}} />
+                            <div>{link.title}</div>
+                        </a>
+                    ) : (
+                        <Link to={link.url} style={{display: 'flex', alignItems: 'center', marginRight: '7px'}}>
+                            <i className={`fa ${link.iconClass ? link.iconClass : 'fa-external-link-alt'}`} style={{marginRight: '5px'}} />
+                            <div>{link.title}</div>
+                        </Link>
+                    )}
                     {link.description && <>({link.description})</>}
                 </div>
             ))}