diff --git a/src/component/button/index.css b/src/component/button/index.css
index c8efd4e4..5896c8ee 100644
--- a/src/component/button/index.css
+++ b/src/component/button/index.css
@@ -191,6 +191,10 @@ button .icon,
   font-size: 1.2em;
 }
 
+.button-extra-large {
+  font-size: 1.5em;
+}
+
 .button-block {
   display: flex;
   width: 100%;
diff --git a/src/component/index.js b/src/component/index.js
index f5fe90bf..415e197f 100644
--- a/src/component/index.js
+++ b/src/component/index.js
@@ -10,6 +10,7 @@ import { Shade } from './shade';
 import { Suggest } from './suggest';
 import { Tab } from './tab';
 import { ToolbarControl } from './toolbarControl';
+import { Link } from './link';
 
 import { Control_checkbox } from './control/checkbox';
 import { Control_color } from './control/color';
@@ -33,7 +34,6 @@ import { fontawesome } from './fontawesome';
 import { icon } from './icon';
 import { keyboard } from './keyboard';
 import { layout } from './layout';
-import { link } from './link';
 import { logo } from './logo';
 import { menu } from './menu';
 import { pageLock } from './pageLock';
@@ -57,7 +57,6 @@ export const component = {
   icon,
   keyboard,
   layout,
-  link,
   logo,
   menu,
   pageLock,
diff --git a/src/component/link/index.js b/src/component/link/index.js
index b625adfc..d8566a16 100644
--- a/src/component/link/index.js
+++ b/src/component/link/index.js
@@ -2,10 +2,9 @@ import { icon } from '../icon';
 import { form } from '../form';
 
 import { node } from '../../utility/node';
+import { complexNode } from '../../utility/complexNode';
 
-const link = {};
-
-link.render = ({
+export const Link = function({
   text = 'Link',
   href = '#',
   iconName = false,
@@ -16,86 +15,102 @@ link.render = ({
   title = false,
   openNew = false,
   classList = [],
-  func = false
-} = {}) => {
+  action = false
+} = {}) {
 
-  const linkElement = node('a|tabindex:1');
+  this.element = {
+    link: complexNode({
+      tag: 'a',
+      attr: [{ key: 'href', value: href }]
+    })
+  };
 
-  if (linkButton) {
-    linkElement.classList.add('button');
+  this.assemble = () => {
 
-    if (style.length > 0) {
-      style.forEach((item, i) => {
-        switch (item) {
-          case 'link':
-            linkElement.classList.add('button-link');
-            break;
+    if (linkButton) {
 
-          case 'line':
-            linkElement.classList.add('button-line');
-            break;
+      this.element.link.classList.add('button');
+
+      if (style.length > 0) {
+        style.forEach((item, i) => {
+
+          switch (item) {
+
+            case 'link':
+              this.element.link.classList.add('button-link');
+              break;
+
+            case 'line':
+              this.element.link.classList.add('button-line');
+              break;
+
+            case 'ring':
+              this.element.link.classList.add('button-ring');
+              break;
+
+          };
+        });
+
+      };
 
-          case 'ring':
-            linkElement.classList.add('button-ring');
-            break;
-        };
-      });
     };
-  };
 
-  if (image) {
-    const linkImage = node('img|src:' + image + ',class:mr-2');
-
-    linkElement.appendChild(linkImage);
-  };
-
-  if (text) {
     const linkText = node('span:' + text);
 
     if (linkButton) {
       linkText.classList.add('button-text');
     };
-    linkElement.appendChild(linkText);
-  };
 
-  if (iconName) {
-    switch (iconPosition) {
-      case 'left':
-        linkElement.prepend(icon.render(iconName));
-        break;
+    this.element.link.appendChild(linkText);
+
+    if (iconName) {
+
+      switch (iconPosition) {
+
+        case 'left':
+          this.element.link.prepend(icon.render(iconName));
+          break;
+
+        case 'right':
+          this.element.link.append(icon.render(iconName));
+          break;
+
+      };
 
-      case 'right':
-        linkElement.append(icon.render(iconName));
-        break;
     };
+
+    if (openNew) {
+      this.element.link.setAttribute('target', '_blank');
+    };
+
+    if (title) {
+      this.element.link.setAttribute('title', title);
+    };
+
+    if (classList.length > 0) {
+      classList.forEach((item, i) => {
+        this.element.link.classList.add(item);
+      });
+    };
+
   };
 
-  if (href) {
-    linkElement.setAttribute('href', href);
+  this.bind = () => {
+
+    if (action) {
+      this.element.link.addEventListener('click', (event) => {
+        action();
+      });
+    };
+
   };
 
-  if (openNew) {
-    linkElement.setAttribute('target', '_blank');
+  this.link = () => {
+    return this.element.link;
   };
 
-  if (title) {
-    linkElement.setAttribute('title', title);
-  };
+  this.assemble();
 
-  if (classList.length > 0) {
-    classList.forEach((item, i) => {
-      linkElement.classList.add(item);
-    });
-  };
-
-  if (func) {
-    linkElement.addEventListener('click', (event) => {
-      func();
-    });
-  };
-
-  return linkElement;
+  this.bind();
 
 };
-
-export { link };
diff --git a/src/component/menuContent/appSetting/index.js b/src/component/menuContent/appSetting/index.js
index 6fb655e5..0e79622a 100644
--- a/src/component/menuContent/appSetting/index.js
+++ b/src/component/menuContent/appSetting/index.js
@@ -7,7 +7,6 @@ import { version } from '../../version';
 import { menu } from '../../menu';
 import { icon } from '../../icon';
 import { logo } from '../../logo';
-import { link } from '../../link';
 import { layout } from '../../layout';
 import { toolbar } from '../../toolbar';
 import { appName } from '../../appName';
@@ -18,6 +17,7 @@ import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
 import { Alert } from '../../alert';
+import { Link } from '../../link';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';
@@ -44,6 +44,10 @@ const appSetting = {};
 
 appSetting[appName.toLowerCase()] = (parent) => {
 
+  const githubLink = new Link({ text: 'GitHub.', href: 'https://github.com/zombieFox/' + appName, openNew: true });
+
+  const licenseLink = new Link({ text: 'GNU General Public License v3.0', href: '://github.com/zombieFox/' + appName + '/blob/master/license', openNew: true });
+
   parent.appendChild(
     node('div', [
       node('div|class:version', [
@@ -55,8 +59,8 @@ appSetting[appName.toLowerCase()] = (parent) => {
         ])
       ]),
       node('hr'),
-      complexNode({ tag: 'p', text: 'Project repository on ', node: [link.render({ text: 'GitHub.', href: 'https://github.com/zombieFox/' + appName, openNew: true })] }),
-      complexNode({ tag: 'p', text: appName + ' uses the <a tabindex="1" href="https://github.com/zombieFox/' + appName + '/blob/master/license" target="_blank">GNU General Public License v3.0</a>.' })
+      complexNode({ tag: 'p', text: `This project can be found on ${githubLink.link().outerHTML}` }),
+      complexNode({ tag: 'p', text: `${appName} uses the ${licenseLink.link().outerHTML}` })
     ])
   );
 
diff --git a/src/component/menuContent/bookmarkSetting/index.js b/src/component/menuContent/bookmarkSetting/index.js
index d03ea088..47765049 100644
--- a/src/component/menuContent/bookmarkSetting/index.js
+++ b/src/component/menuContent/bookmarkSetting/index.js
@@ -7,7 +7,6 @@ import { version } from '../../version';
 import { menu } from '../../menu';
 import { icon } from '../../icon';
 import { logo } from '../../logo';
-import { link } from '../../link';
 import { layout } from '../../layout';
 import { toolbar } from '../../toolbar';
 import { groupAndBookmark } from '../../groupAndBookmark';
@@ -18,6 +17,7 @@ import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
 import { Alert } from '../../alert';
+import { Link } from '../../link';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';
diff --git a/src/component/menuContent/coffeeSetting/index.js b/src/component/menuContent/coffeeSetting/index.js
index 17bc20da..147f3ae4 100644
--- a/src/component/menuContent/coffeeSetting/index.js
+++ b/src/component/menuContent/coffeeSetting/index.js
@@ -7,7 +7,6 @@ import { version } from '../../version';
 import { menu } from '../../menu';
 import { icon } from '../../icon';
 import { logo } from '../../logo';
-import { link } from '../../link';
 import { layout } from '../../layout';
 import { toolbar } from '../../toolbar';
 import { appName } from '../../appName';
@@ -18,6 +17,7 @@ import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
 import { Alert } from '../../alert';
+import { Link } from '../../link';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';
@@ -51,17 +51,16 @@ coffeeSetting.coffee = (parent) => {
         text: appName + ' is free, appreciation is welcome in the form of coffee!'
       }),
       form.wrap({
-        children: [
-          link.render({
-            text: 'Buy me a coffee',
-            href: 'https://www.buymeacoffee.com/zombieFox',
-            iconName: 'coffee',
-            iconPosition: 'left',
-            linkButton: true,
-            style: ['line'],
-            classList: ['button-line', 'button-large', 'px-4', 'py-3']
-          })
-        ]
+        children: [(new Link({
+          text: 'Buy me a coffee',
+          href: 'https://www.buymeacoffee.com/zombieFox',
+          iconName: 'coffee',
+          iconPosition: 'left',
+          linkButton: true,
+          openNew: true,
+          style: ['line'],
+          classList: ['button-line', 'button-extra-large']
+        })).link()]
       })
     ])
   );
diff --git a/src/component/menuContent/dataSetting/index.js b/src/component/menuContent/dataSetting/index.js
index 302f8975..317cbe05 100644
--- a/src/component/menuContent/dataSetting/index.js
+++ b/src/component/menuContent/dataSetting/index.js
@@ -7,7 +7,6 @@ import { version } from '../../version';
 import { menu } from '../../menu';
 import { icon } from '../../icon';
 import { logo } from '../../logo';
-import { link } from '../../link';
 import { layout } from '../../layout';
 import { toolbar } from '../../toolbar';
 import { appName } from '../../appName';
@@ -19,6 +18,7 @@ import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
 import { Alert } from '../../alert';
 import { DropFile } from '../../dropFile';
+import { Link } from '../../link';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';
@@ -148,7 +148,7 @@ dataSetting.clear = (parent) => {
     iconName: 'warning',
     children: [
       node('p:You will lose Bookmarks by clearing all data.|class:small'),
-      node('p:Have you <a href="#menu-content-item-backup">backed up your data?</a>|class:small')
+      node(`p:Have you ${(new Link({ text:'backed up your data?', href: '#menu-content-item-backup'})).link().outerHTML}|class:small`)
     ]
   });
 
diff --git a/src/component/menuContent/debugSetting/index.js b/src/component/menuContent/debugSetting/index.js
index da6970ff..5e89a58a 100644
--- a/src/component/menuContent/debugSetting/index.js
+++ b/src/component/menuContent/debugSetting/index.js
@@ -8,7 +8,6 @@ import { version } from '../../version';
 import { menu } from '../../menu';
 import { icon } from '../../icon';
 import { logo } from '../../logo';
-import { link } from '../../link';
 import { layout } from '../../layout';
 import { toolbar } from '../../toolbar';
 import { groupAndBookmark } from '../../groupAndBookmark';
@@ -19,6 +18,7 @@ import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
 import { Alert } from '../../alert';
+import { Link } from '../../link';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';
diff --git a/src/component/menuContent/groupSetting/index.js b/src/component/menuContent/groupSetting/index.js
index 02a04462..1699eefd 100644
--- a/src/component/menuContent/groupSetting/index.js
+++ b/src/component/menuContent/groupSetting/index.js
@@ -8,7 +8,6 @@ import { version } from '../../version';
 import { menu } from '../../menu';
 import { icon } from '../../icon';
 import { logo } from '../../logo';
-import { link } from '../../link';
 import { layout } from '../../layout';
 import { toolbar } from '../../toolbar';
 import { groupAndBookmark } from '../../groupAndBookmark';
@@ -19,6 +18,7 @@ import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
 import { Alert } from '../../alert';
+import { Link } from '../../link';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';
diff --git a/src/component/menuContent/headerSetting/index.js b/src/component/menuContent/headerSetting/index.js
index 7f95cf00..779b07c1 100644
--- a/src/component/menuContent/headerSetting/index.js
+++ b/src/component/menuContent/headerSetting/index.js
@@ -7,7 +7,6 @@ import { version } from '../../version';
 import { menu } from '../../menu';
 import { icon } from '../../icon';
 import { logo } from '../../logo';
-import { link } from '../../link';
 import { layout } from '../../layout';
 import { toolbar } from '../../toolbar';
 import { searchEnginePreset } from '../../searchEnginePreset';
@@ -19,6 +18,7 @@ import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
 import { Alert } from '../../alert';
+import { Link } from '../../link';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';
@@ -434,7 +434,7 @@ headerSetting.area = (parent) => {
   });
 
   headerSetting.area.alignmentHelper = new Control_helperText({
-    text: ['Effects may not be visible if the <a href="#menu-content-item-search">Search box size</a> size is set to Auto and grows to fill available space.']
+    text: [`Effects may not be visible if the ${(new Link({ text:'Search box size', href: '#menu-content-item-search'})).link().outerHTML} size is set to Auto and grows to fill available space.`]
   });
 
   parent.appendChild(
diff --git a/src/component/menuContent/layoutSetting/index.js b/src/component/menuContent/layoutSetting/index.js
index 26663140..30059ae8 100644
--- a/src/component/menuContent/layoutSetting/index.js
+++ b/src/component/menuContent/layoutSetting/index.js
@@ -7,7 +7,6 @@ import { version } from '../../version';
 import { menu } from '../../menu';
 import { icon } from '../../icon';
 import { logo } from '../../logo';
-import { link } from '../../link';
 import { layout } from '../../layout';
 import { toolbar } from '../../toolbar';
 
@@ -17,6 +16,7 @@ import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
 import { Alert } from '../../alert';
+import { Link } from '../../link';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';
@@ -218,7 +218,7 @@ layoutSetting.area = (parent) => {
       text: ['Effects may not be visible if the Header Area is full width.']
     }),
     justifyHelper2: new Control_helperText({
-      text: ['Only available when <a href="#layout-direction-horizontal">Layout Direction</a> is Vertical and Header items are shown.']
+      text: [`Only available when ${(new Link({ text:'Layout Direction', href: '#menu-content-item-alignment'})).link().outerHTML} is Vertical and Header items are shown.`]
     })
   };
 
@@ -264,7 +264,7 @@ layoutSetting.area = (parent) => {
       text: ['Effects may not be visible if the Bookmark Area is full width.']
     }),
     justifyHelper2: new Control_helperText({
-      text: ['Only available when <a href="#layout-direction-horizontal">Layout Direction</a> is Vertical and Bookmarks are shown.']
+      text: [`Only available when ${(new Link({ text:'Layout Direction', href: '#menu-content-item-alignment'})).link().outerHTML} is Vertical and Header items are shown.`]
     })
   };
 
diff --git a/src/component/menuContent/supportSetting/index.js b/src/component/menuContent/supportSetting/index.js
index f0e6104b..43fe111e 100644
--- a/src/component/menuContent/supportSetting/index.js
+++ b/src/component/menuContent/supportSetting/index.js
@@ -7,7 +7,6 @@ import { version } from '../../version';
 import { menu } from '../../menu';
 import { icon } from '../../icon';
 import { logo } from '../../logo';
-import { link } from '../../link';
 import { layout } from '../../layout';
 import { toolbar } from '../../toolbar';
 import { appName } from '../../appName';
@@ -18,6 +17,7 @@ import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
 import { Alert } from '../../alert';
+import { Link } from '../../link';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';
@@ -66,9 +66,13 @@ supportSetting.support = (parent) => {
 
     for (var key in supportSetting.link.page) {
 
-      list.appendChild(node('li', [
-        link.render({ text: supportSetting.link.page[key].replace(/-/g, ' '), href: supportSetting.link.url + supportSetting.link.page[key], openNew: true })
-      ]));
+      const supportLink = new Link({
+        text: supportSetting.link.page[key].replace(/-/g, ' '),
+        href: supportSetting.link.url + supportSetting.link.page[key],
+        openNew: true
+      });
+
+      list.appendChild(node('li', [supportLink.link()]));
 
     };
 
@@ -82,7 +86,10 @@ supportSetting.support = (parent) => {
     node('div', [
       makeLinks(),
       node('hr'),
-      complexNode({ tag: 'p', text: 'For more support or feedback, submit an <a tabindex="1" href="https://github.com/zombieFox/' + appName + '/issues" target="_blank">Issue</a> or check the <a tabindex="1" href="https://github.com/zombieFox/' + appName + '/wiki" target="_blank">Wiki</a>.' })
+      complexNode({
+        tag: 'p',
+        text: `For more support or feedback, submit an ${(new Link({ text:'Issue', href: `https://github.com/zombieFox/${appName}/issues`, openNew: true })).link().outerHTML}. or check the ${(new Link({ text:'Wiki', href: `https://github.com/zombieFox/${appName}/wiki`, openNew: true })).link().outerHTML}.`
+      })
     ])
   );
 
diff --git a/src/component/menuContent/themeSetting/index.js b/src/component/menuContent/themeSetting/index.js
index 403d8f76..e9b2cf99 100644
--- a/src/component/menuContent/themeSetting/index.js
+++ b/src/component/menuContent/themeSetting/index.js
@@ -8,7 +8,6 @@ import { version } from '../../version';
 import { menu } from '../../menu';
 import { icon } from '../../icon';
 import { logo } from '../../logo';
-import { link } from '../../link';
 import { layout } from '../../layout';
 import { toolbar } from '../../toolbar';
 import { themePreset } from '../../themePreset';
@@ -26,6 +25,7 @@ import { Edge } from '../../edge';
 import { PresetThemeTile } from '../../presetThemeTile';
 import { AccentPresetButton } from '../../accentPresetButton';
 import { Alert } from '../../alert';
+import { Link } from '../../link';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';
@@ -734,7 +734,7 @@ themeSetting.font = (parent) => {
     }),
     nameHelper: new Control_helperText({
       text: [
-        'Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Clock, Date, Group names and Bookmark Letters.',
+        `Use a ${(new Link({ text:'Google Font', href: `https://fonts.google.com/`, openNew: true })).link().outerHTML} to customise the Clock, Date, Group names and Bookmark Letters.`,
         'Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Kanit"',
         'Clear the field to use the default font "Fjalla One".'
       ]
@@ -821,7 +821,7 @@ themeSetting.font = (parent) => {
     }),
     nameHelper: new Control_helperText({
       text: [
-        'Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Bookmark name, URL and form elements.',
+        `Use a ${(new Link({ text:'Google Font', href: `https://fonts.google.com/`, openNew: true })).link().outerHTML} to customise the Bookmark name, URL and form elements.`,
         'Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto", "Source Sans Pro" or "Noto Sans"',
         'Clear the field to use the default font "Open Sans".'
       ]
@@ -1329,7 +1329,7 @@ themeSetting.background = (parent) => {
         iconName: 'info',
         children: [
           node('p:Uploading Background images is no longer supported.|class:small'),
-          complexNode({ tag: 'p', text: `<a href="${supportSetting.link.url + supportSetting.link.page.localBackgroundImage}" target="_blank">Why has this changed?</a>`, attr: [{ key: 'class', value: 'small' }] })
+          complexNode({ tag: 'p', attr: [{ key: 'class', value: 'small' }], node: [(new Link({ text: 'Why has this changed?', href: supportSetting.link.url + supportSetting.link.page.localBackgroundImage, openNew: true })).link()] })
         ]
       }),
       url: new Control_textarea({
@@ -1498,7 +1498,7 @@ themeSetting.background = (parent) => {
         iconName: 'info',
         children: [
           node('p:YouTube page URLs <strong>can not</strong> be used.|class:small'),
-          complexNode({ tag: 'p', text: `<a href="${supportSetting.link.url + supportSetting.link.page.backgroundImageVideo}" target="_blank">How to link to a video file.</a>`, attr: [{ key: 'class', value: 'small' }] })
+          complexNode({ tag: 'p', attr: [{ key: 'class', value: 'small' }], node: [(new Link({ text: 'How to link to a video file.', href: supportSetting.link.url + supportSetting.link.page.backgroundImageVideo, openNew: true })).link()] })
         ]
       }),
       url: new Control_textarea({
diff --git a/src/component/menuContent/toolbarSetting/index.js b/src/component/menuContent/toolbarSetting/index.js
index 3b109959..4d3ae5c7 100644
--- a/src/component/menuContent/toolbarSetting/index.js
+++ b/src/component/menuContent/toolbarSetting/index.js
@@ -7,7 +7,6 @@ import { version } from '../../version';
 import { menu } from '../../menu';
 import { icon } from '../../icon';
 import { logo } from '../../logo';
-import { link } from '../../link';
 import { layout } from '../../layout';
 import { toolbar } from '../../toolbar';
 
@@ -17,6 +16,7 @@ import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
 import { Alert } from '../../alert';
+import { Link } from '../../link';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';