diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 8c5a956b7..d55edf0b2 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -15,6 +15,11 @@ header,
     z-index: 3;
   }
 
+  // don't overflow on buttons
+  nav .button {
+    white-space: nowrap;
+  }
+
   // add header background as only being visible when scrolled (over elements)
   // or when opened on mobile (also over other elements)
   & > .container,
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index d0ecd5a3b..74cb335f5 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { Link, LinkProps, useResolvedPath, useMatch } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBars } from '@fortawesome/free-solid-svg-icons';
+import { faBars, faExternalLink } from '@fortawesome/free-solid-svg-icons';
 
 import { useWeb3 } from '../../lib/web3/useWeb3';
 import { ThemeContext } from '../../lib/theme/themeProvider';
@@ -97,21 +97,40 @@ export default function Header() {
           </div>
           <div className="col col-lg">
             <div className="row gap-4 ml-5">
-              {Object.entries(pageLinkMap).map(([link, description]) => (
-                <div className="col" key={link}>
-                  <NavLink
-                    className="button ghost-button"
-                    to={link}
-                    onClick={closeMenuAndScrollToTop}
-                  >
-                    {description}
-                  </NavLink>
-                </div>
-              ))}
+              {Object.entries(pageLinkMap)
+                // add relative links
+                .filter(([link]) => link.startsWith('/'))
+                .map(([link, description]) => (
+                  <div className="col" key={link}>
+                    <NavLink
+                      className="button ghost-button"
+                      to={link}
+                      onClick={closeMenuAndScrollToTop}
+                    >
+                      {description}
+                    </NavLink>
+                  </div>
+                ))}
             </div>
           </div>
           <div className="col ml-auto">
             <div className="row gap-4">
+              {Object.entries(pageLinkMap)
+                // add external links
+                .filter(([link]) => !link.startsWith('/'))
+                .map(([link, description]) => (
+                  <div className="col col-lg" key={link}>
+                    <a
+                      className="button ghost-button"
+                      href={link}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {description}{' '}
+                      <FontAwesomeIcon className="ml-2" icon={faExternalLink} />
+                    </a>
+                  </div>
+                ))}
               <div className="col hide">
                 <button
                   className="link no-blend"
@@ -158,13 +177,27 @@ export default function Header() {
           <Drawer className="pt-4" expanded={menuIsOpen}>
             {Object.entries(pageLinkMap).map(([link, description]) => (
               <div className="col" key={link}>
-                <NavLink
-                  className="button ghost-button"
-                  to={link}
-                  onClick={closeMenuAndScrollToTop}
-                >
-                  {description}
-                </NavLink>
+                {link.startsWith('/') ? (
+                  // relative links
+                  <NavLink
+                    className="button ghost-button"
+                    to={link}
+                    onClick={closeMenuAndScrollToTop}
+                  >
+                    {description}
+                  </NavLink>
+                ) : (
+                  // external links
+                  <a
+                    className="button ghost-button"
+                    href={link}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {description}{' '}
+                    <FontAwesomeIcon className="ml-2" icon={faExternalLink} />
+                  </a>
+                )}
               </div>
             ))}
           </Drawer>
diff --git a/src/components/Header/routes.ts b/src/components/Header/routes.ts
index 8e3e4435d..523a39e6b 100644
--- a/src/components/Header/routes.ts
+++ b/src/components/Header/routes.ts
@@ -10,6 +10,7 @@ export const pageLinkMap = {
   }),
   '/portfolio': 'Portfolio',
   '/bridge': 'Bridge',
+  'https://duality.gitbook.io/duality-documentation/user-interface': 'Docs',
 };
 
 export const defaultPage = Object.keys(pageLinkMap).at(0) ?? '/';