diff --git a/packages/web/src/markdown/MarkdownExtendedView.js b/packages/web/src/markdown/MarkdownExtendedView.js
new file mode 100644
index 000000000..56af4b579
--- /dev/null
+++ b/packages/web/src/markdown/MarkdownExtendedView.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import Markdown from 'markdown-to-jsx';
+import styled from 'styled-components';
+import OpenChartLink from './OpenChartLink';
+
+const Wrapper = styled.div`
+  padding: 10px;
+  overflow: auto;
+  flex: 1;
+`;
+
+export default function MarkdownExtendedView({ children }) {
+  return (
+    <Wrapper>
+      <Markdown
+        options={{
+          overrides: {
+            OpenChartLink: {
+              component: OpenChartLink,
+            },
+          },
+        }}
+      >
+        {children || ''}
+      </Markdown>
+    </Wrapper>
+  );
+}
diff --git a/packages/web/src/charts/MarkdownToolbar.js b/packages/web/src/markdown/MarkdownToolbar.js
similarity index 100%
rename from packages/web/src/charts/MarkdownToolbar.js
rename to packages/web/src/markdown/MarkdownToolbar.js
diff --git a/packages/web/src/markdown/OpenChartLink.js b/packages/web/src/markdown/OpenChartLink.js
new file mode 100644
index 000000000..66119b4a2
--- /dev/null
+++ b/packages/web/src/markdown/OpenChartLink.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { useCurrentDatabase, useSetOpenedTabs } from '../utility/globalState';
+import styled from 'styled-components';
+import { openNewTab } from '../utility/common';
+import axios from '../utility/axios';
+import useTheme from '../theme/useTheme';
+
+const StyledLink = styled.a`
+  text-decoration: none;
+  cursor: pointer;
+  color: ${(props) => props.theme.main_background_blue[7]};
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function OpenChartLink({ file, children }) {
+  const setOpenedTabs = useSetOpenedTabs();
+  const currentDb = useCurrentDatabase();
+  const theme = useTheme();
+
+  const handleClick = async () => {
+    const resp = await axios.post('files/load', { folder: 'charts', file, format: 'json' });
+    openNewTab(
+      setOpenedTabs,
+      {
+        title: file,
+        icon: 'img chart',
+        tabComponent: 'ChartTab',
+        props: {
+          conid: currentDb && currentDb.connection && currentDb.connection._id,
+          database: currentDb && currentDb.name,
+        },
+      },
+      resp.data
+    );
+  };
+
+  return (
+    <StyledLink theme={theme} onClick={handleClick}>
+      {children}
+    </StyledLink>
+  );
+}
diff --git a/packages/web/src/modals/AboutModal.js b/packages/web/src/modals/AboutModal.js
index e33d3e480..8b4272e66 100644
--- a/packages/web/src/modals/AboutModal.js
+++ b/packages/web/src/modals/AboutModal.js
@@ -28,6 +28,9 @@ const StyledLink = styled.a`
   text-decoration: none;
   cursor: pointer;
   color: ${(props) => props.theme.main_background_blue[7]};
+  &:hover {
+    text-decoration: underline;
+  }
 `;
 
 function Line({ label, children }) {
diff --git a/packages/web/src/tabs/MarkdownEditorTab.js b/packages/web/src/tabs/MarkdownEditorTab.js
index 6736a2236..23c09a48b 100644
--- a/packages/web/src/tabs/MarkdownEditorTab.js
+++ b/packages/web/src/tabs/MarkdownEditorTab.js
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import _ from 'lodash';
 import keycodes from '../utility/keycodes';
 import GenericEditor from '../sqleditor/GenericEditor';
-import MarkdownToolbar from '../charts/MarkdownToolbar';
+import MarkdownToolbar from '../markdown/MarkdownToolbar';
 import useEditorData from '../utility/useEditorData';
 import SaveTabModal from '../modals/SaveTabModal';
 import useModalState from '../modals/useModalState';
diff --git a/packages/web/src/tabs/MarkdownViewTab.js b/packages/web/src/tabs/MarkdownViewTab.js
index 3774f97e3..94ec9ad9b 100644
--- a/packages/web/src/tabs/MarkdownViewTab.js
+++ b/packages/web/src/tabs/MarkdownViewTab.js
@@ -1,14 +1,7 @@
 import React from 'react';
 import axios from '../utility/axios';
 import LoadingInfo from '../widgets/LoadingInfo';
-import Markdown from 'markdown-to-jsx';
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  padding: 10px;
-  overflow: auto;
-  flex: 1;
-`;
+import MarkdownExtendedView from '../markdown/MarkdownExtendedView';
 
 export default function MarkdownViewTab({ file }) {
   const [isLoading, setIsLoading] = React.useState(false);
@@ -33,9 +26,5 @@ export default function MarkdownViewTab({ file }) {
     );
   }
 
-  return (
-    <Wrapper>
-      <Markdown>{text || ''}</Markdown>
-    </Wrapper>
-  );
+  return <MarkdownExtendedView>{text || ''}</MarkdownExtendedView>;
 }