diff --git a/gulpfile.js b/gulpfile.js
index 4f7b4dcc..b8483b9d 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -61,6 +61,7 @@ const cssFiles = [
   path.src + '/css/transitional.css',
   path.src + '/css/search.css',
   path.src + '/css/background.css',
+  path.src + '/css/group.css',
   path.src + '/css/link.css',
   path.src + '/css/auto-suggest.css',
   path.src + '/css/fontawesome.css'
diff --git a/package.json b/package.json
index be019240..518128db 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "3.83.0",
+  "version": "4.0.0",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
   "main": "index.js",
   "scripts": {
diff --git a/src/css/form.css b/src/css/form.css
index 6df4e430..f7503348 100755
--- a/src/css/form.css
+++ b/src/css/form.css
@@ -1,3 +1,71 @@
+/* select */
+select {
+  background-color: rgb(var(--theme-gray-02));
+  background-image:
+    linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text)) 50%),
+    linear-gradient(135deg, rgb(var(--form-input-text)) 50%, transparent 50%);
+  background-position:
+    calc(100% - calc(var(--form-arrow-size) * 5)) 50%,
+    calc(100% - calc(var(--form-arrow-size) * 4)) 50%;
+  background-size:
+    var(--form-arrow-size) var(--form-arrow-size),
+    var(--form-arrow-size) var(--form-arrow-size);
+  background-repeat: no-repeat;
+  padding: 0 calc(var(--form-arrow-size) * 10) 0 1em;
+  margin: 0 0 1em 0;
+  color: rgb(var(--form-input-text));
+  font-size: 1em;
+  font-family: var(--font-regular);
+  min-height: 2.5em;
+  min-width: 0;
+  width: 100%;
+  border-width: var(--form-input-border);
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--theme-radius);
+  cursor: pointer;
+  transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+select:hover {
+  background-image:
+    linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text-hover)) 50%),
+    linear-gradient(135deg, rgb(var(--form-input-text-hover)) 50%, transparent 50%);
+  background-color: rgb(var(--theme-gray-03));
+  color: rgb(var(--form-input-text-hover));
+  outline: none;
+  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
+}
+
+select:focus,
+select:active {
+  background-image:
+    linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text-focus)) 50%),
+    linear-gradient(135deg, rgb(var(--form-input-text-focus)) 50%, transparent 50%);
+  background-color: rgb(var(--theme-gray-01));
+  color: rgb(var(--form-input-text-focus));
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
+}
+
+select:disabled,
+select:disabled:hover,
+select:disabled:focus,
+select:disabled:active {
+  background-color: transparent;
+  background-image:
+    linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text-disabled)) 50%),
+    linear-gradient(135deg, rgb(var(--form-input-text-disabled)) 50%, transparent 50%);
+  color: rgb(var(--form-input-text-disabled));
+  border-color: rgb(var(--form-input-text-disabled));
+  cursor: default;
+  box-shadow: none;
+}
+
 /* textarea */
 textarea {
   background-color: rgb(var(--theme-gray-02));
@@ -420,6 +488,7 @@ input[type="range"] {
   color: rgb(var(--theme-style-text));
   font-size: 1em;
   font-family: var(--font-regular);
+  display: block;
   height: 2em;
   width: 100%;
   border: 0;
@@ -846,7 +915,7 @@ input[type="range"]:disabled::-moz-range-progress {
 
 .form-grid:focus,
 .form-grid:focus-within {
-  outline: 0;
+  outline: none;
   border-color: rgb(var(--theme-style-text));
 }
 
@@ -1085,20 +1154,20 @@ input[type="range"]:disabled::-moz-range-progress {
 
 .form-group-text:hover,
 .form-group-text:focus {
-  background-color: rgb(var(--theme-gray-03));
-  border-bottom-color: rgb(var(--theme-gray-08));
+  /* background-color: rgb(var(--theme-gray-03)); */
+  /* border-bottom-color: rgb(var(--theme-gray-08)); */
   outline: none;
 }
 
-.form-group-text:disabled {
+.form-group-text.disabled {
   background-color: rgb(var(--theme-gray-02));
   color: rgb(var(--form-input-placeholder-disabled));
   box-shadow: none;
   cursor: default;
 }
 
-.form-group-text:disabled:hover,
-.form-group-text:disabled:focus {
+.form-group-text.disabled:hover,
+.form-group-text.disabled:focus {
   background-color: rgb(var(--theme-gray-02));
   border-color: transparent;
 }
@@ -1138,7 +1207,7 @@ input[type="range"]:disabled::-moz-range-progress {
 
 .form-group .form-group-text {
   margin-bottom: 0;
-  margin-left: calc(-1px * var(--form-input-border));
+  /* margin-left: calc(-1px * var(--form-input-border)); */
   border-radius: 0;
   z-index: 1;
   position: relative;
diff --git a/src/css/group.css b/src/css/group.css
new file mode 100644
index 00000000..5f5c3f7a
--- /dev/null
+++ b/src/css/group.css
@@ -0,0 +1,89 @@
+.group {
+  padding-top: calc(calc(var(--layout-space) / 2) * var(--layout-padding));
+  padding-bottom: calc(calc(var(--layout-space) / 2) * var(--layout-padding));
+  padding-left: calc(var(--layout-space) * var(--layout-padding));
+  padding-right: calc(var(--layout-space) * var(--layout-padding));
+  width: var(--link-area-width);
+}
+
+.group:first-child {
+  padding-top: calc(var(--layout-space) * var(--layout-padding));
+}
+
+.group:last-child {
+  padding-bottom: calc(var(--layout-space) * var(--layout-padding));
+}
+
+.group-header {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+  transition: padding var(--layout-timing-extra-fast) var(--layout-duration-04);
+}
+
+.is-group-name-show .group-header,
+.is-link-edit .group-header {
+  padding-bottom: calc(var(--layout-space) * var(--layout-gutter));
+  transition: padding var(--layout-timing-extra-fast);
+}
+
+.group-name {
+  margin-right: 0;
+  display: none;
+  align-items: center;
+  min-height: 2.5em;
+  font-size: var(--group-name-size);
+}
+
+.is-group-name-show .group-name {
+  display: flex;
+}
+
+.group-name-text {
+  font-family: var(--font-fjalla);
+  margin-bottom: 0;
+}
+
+.group-control {
+  margin-right: 0;
+  margin-bottom: 0;
+  overflow: hidden;
+  height: 0;
+  width: 0;
+  transition:
+    width var(--layout-timing-extra-fast),
+    height var(--layout-timing-extra-fast) var(--layout-duration-04),
+    margin var(--layout-timing-extra-fast);
+}
+
+.is-link-edit .group-control {
+  height: 2.5em;
+  width: 16em;
+  transition:
+    width var(--layout-timing-extra-fast) var(--layout-duration-04),
+    height var(--layout-timing-extra-fast),
+    margin var(--layout-timing-extra-fast) var(--layout-duration-04);
+}
+
+.is-link-edit.is-group-name-show .group-control {
+  margin-right: 1em;
+}
+
+.group-control-item {
+  width: 4em;
+  flex-shrink: 0;
+}
+
+.group-body {
+  font-size: calc(var(--link-item-size) * 1);
+  background-color: transparent;
+  position: relative;
+  min-height: var(--link-item-height);
+  display: grid;
+  grid-auto-rows: 1fr;
+  grid-gap: calc(var(--layout-space) * var(--layout-gutter));
+  grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
+}
diff --git a/src/css/link.css b/src/css/link.css
index df4b34b0..9ea3d4fa 100755
--- a/src/css/link.css
+++ b/src/css/link.css
@@ -1,7 +1,7 @@
 .link {
   display: none;
   position: relative;
-  flex-direction: row;
+  flex-direction: column;
   z-index: var(--z-index-link);
 }
 
@@ -10,45 +10,33 @@
 }
 
 .is-link-area-alignment-left .link {
-  justify-content: flex-start;
+  align-items: flex-start;
 }
 
 .is-link-area-alignment-center .link {
-  justify-content: center;
+  align-items: center;
 }
 
 .is-link-area-alignment-right .link {
-  justify-content: flex-end;
+  align-items: flex-end;
 }
 
-.link-area {
-  padding-left: calc(var(--layout-space) * var(--layout-padding));
-  padding-right: calc(var(--layout-space) * var(--layout-padding));
-  font-size: calc(var(--link-item-size) * 1);
-  position: relative;
-  width: var(--link-area-width);
-  display: grid;
-  grid-auto-rows: 1fr;
-  grid-gap: calc(var(--layout-space) * var(--layout-gutter));
-  grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
+.is-layout-order-headerlink .link {
+  margin-top: calc(-1 * calc(var(--layout-space) * var(--layout-padding)));
 }
 
-.is-layout-order-headerlink .link-area {
-  padding-bottom: calc(var(--layout-space) * var(--layout-padding));
+.is-layout-order-linkheader .link {
+  margin-bottom: calc(-1 * calc(var(--layout-space) * var(--layout-padding)));
 }
 
-.is-layout-order-headerlink.is-header-border-bottom .link-area,
-.is-layout-order-headerlink.is-header-shade-style-always .link-area {
-  padding-top: calc(var(--layout-space) * var(--layout-padding));
+.is-layout-order-headerlink.is-header-border-bottom .link,
+.is-layout-order-headerlink.is-header-shade-style-always .link {
+  margin-top: 0;
 }
 
-.is-layout-order-linkheader .link-area {
-  padding-top: calc(var(--layout-space) * var(--layout-padding));
-}
-
-.is-layout-order-linkheader.is-header-border-top .link-area,
-.is-layout-order-linkheader.is-header-shade-style-always .link-area {
-  padding-bottom: calc(var(--layout-space) * var(--layout-padding));
+.is-layout-order-linkheader.is-header-border-top .link,
+.is-layout-order-linkheader.is-header-shade-style-always .link {
+  margin-bottom: 0;
 }
 
 .link-item {
@@ -79,15 +67,12 @@
   transition: none;
 }
 
-.link-item-placeholder {
+.link-placeholder {
   background-color: rgba(var(--theme-accent), 0.2);
   border-radius: var(--theme-radius);
   width: 100%;
   height: 100%;
   position: relative;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   box-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1);
   pointer-events: none;
 }
@@ -321,6 +306,14 @@
   transition: all var(--layout-timing-extra-fast);
 }
 
+.is-link-style-list .link-control {
+  flex-wrap: nowrap;
+}
+
+.is-link-style-block .link-control {
+  flex-wrap: wrap;
+}
+
 .link-control-item {
   background-color: transparent;
   border-radius: 0;
@@ -329,7 +322,14 @@
   padding: 0;
   color: rgb(var(--theme-gray-02));
   flex-grow: 1;
-  flex-basis: 50%;
+}
+
+.is-link-style-list .link-control-item {
+  flex-basis: inherit;
+}
+
+.is-link-style-block .link-control-item {
+  flex-basis: 30%;
 }
 
 .link-url-text-dark .link-control-item {
@@ -436,6 +436,15 @@
 .link-display {
   font-size: 1em;
   display: none;
+  transition: font-size var(--layout-timing-extra-fast), margin var(--layout-timing-extra-fast);
+}
+
+.is-link-edit.is-link-style-list .link-display {
+  font-size: 0.5em;
+}
+
+.is-link-edit.is-link-style-block .link-display {
+  font-size: 0.6em;
 }
 
 .is-link-display-item-show .link-display {
@@ -497,7 +506,11 @@
   font-family: var(--font-regular);
   color: rgb(var(--theme-gray-12));
   display: none;
-  transition: color var(--layout-timing-extra-fast);
+  transition: color var(--layout-timing-extra-fast), font-size var(--layout-timing-extra-fast);
+}
+
+.is-link-edit .link-name {
+  font-size: 0.6em;
 }
 
 .link-name,
@@ -537,13 +550,27 @@
 }
 
 .link-empty {
+  background-color: rgba(var(--theme-gray-04), 0.2);
+  padding: 1em 0;
+  border-radius: var(--theme-radius);
   grid-column-start: 1;
   grid-column-end: -1;
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.is-sorting .link-empty {
+  display: none;
 }
 
 .link-empty-heading {
-  color: rgb(var(--theme-gray-16));
+  color: rgb(var(--theme-style-text));
+  margin-bottom: 0;
+}
+
+.link-empty-heading:not(:only-child) {
   margin-bottom: 0.5em;
 }
 
@@ -604,12 +631,12 @@
   transition: transform var(--layout-timing-extra-fast);
 }
 
-.link-form-text-icon:not(:disabled):hover .link-form-icon {
+.link-form-text-icon:not(.disabled):hover .link-form-icon {
   transform: scale(2) rotate(360deg);
   z-index: 1;
 }
 
-.link-form-text-icon:not(:disabled):active .link-form-icon {
+.link-form-text-icon:not(.disabled):active .link-form-icon {
   transform: scale(4) rotate(360deg);
 }
 
diff --git a/src/css/typography.css b/src/css/typography.css
index 5755ab2a..248b6898 100755
--- a/src/css/typography.css
+++ b/src/css/typography.css
@@ -56,7 +56,7 @@ p:not(:last-child) {
 
 hr {
   border: 0;
-  border-top: 1px solid rgb(var(--theme-gray-02));
+  border-top: 2px solid rgb(var(--theme-gray-02));
   border-radius: var(--theme-radius);
   margin: 1em 0;
   clear: both;
diff --git a/src/css/variables.css b/src/css/variables.css
index 7c57830d..31916038 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -38,6 +38,8 @@
   --header-button-size: 1em;
   --header-greeting-size: 1em;
   --header-transitional-size: 1em;
+  /* group */
+  --group-name-size: 1em;
   /* link */
   --link-area-width: 100%;
   --link-item-size: 1em;
@@ -51,11 +53,16 @@
   --layout-space: 0.5rem;
   --layout-padding: 4;
   --layout-gutter: 4;
-  --layout-timing-extra-fast: 0.2s ease-in-out;
-  --layout-timing-fast: 0.4s ease-in-out;
-  --layout-timing-medium: 0.6s ease-in-out;
-  --layout-timing-slow: 0.8s ease-in-out;
-  --layout-timing-extra-slow: 1s ease-in-out;
+  --layout-duration-02: 0.2s;
+  --layout-duration-04: 0.4s;
+  --layout-duration-06: 0.6s;
+  --layout-duration-08: 0.8s;
+  --layout-duration-10: 1s;
+  --layout-timing-extra-fast: var(--layout-duration-02) ease-in-out;
+  --layout-timing-fast: var(--layout-duration-04) ease-in-out;
+  --layout-timing-medium: var(--layout-duration-06) ease-in-out;
+  --layout-timing-slow: var(--layout-duration-08) ease-in-out;
+  --layout-timing-extra-slow: var(--layout-duration-10) ease-in-out;
   --layout-shadow-small: 0 0 4px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 0, 0, 0.1);
   --layout-shadow-medium: 0 0 8px rgba(0, 0, 0, 0.2), 0 0 16px rgba(0, 0, 0, 0.1);
   --layout-shadow-large: 0 0 16px rgba(0, 0, 0, 0.2), 0 0 32px rgba(0, 0, 0, 0.1);
@@ -87,6 +94,7 @@
   --form-feedback-text-disabled: var(--theme-gray-04);
   --form-helper: var(--theme-gray-12);
   --form-helper-disabled: var(--theme-gray-06);
+  --form-arrow-size: 5px;
   /* button */
   --button-text: var(--theme-gray-12);
   --button-text-hover-focus: var(--theme-style-text);
@@ -175,7 +183,7 @@
   --link-item-width: 11em;
   --link-item-height: 10em;
   --link-item-url-height: 20%;
-  --link-item-edit-height: 30%;
+  --link-item-edit-height: 50%;
 }
 
 .is-link-style-list {
diff --git a/src/index.html b/src/index.html
index 72ea7f61..16e34e0c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -32,6 +32,7 @@
   <link rel="stylesheet" href="css/transitional.css">
   <link rel="stylesheet" href="css/search.css">
   <link rel="stylesheet" href="css/background.css">
+  <link rel="stylesheet" href="css/group.css">
   <link rel="stylesheet" href="css/link.css">
   <link rel="stylesheet" href="css/auto-suggest.css">
   <link rel="stylesheet" href="css/fontawesome.css">
@@ -99,9 +100,7 @@
       </div>
     </header>
 
-    <section class="link">
-      <div class="link-area"></div>
-    </section>
+    <section class="link"></section>
 
   </main>
 
@@ -112,6 +111,7 @@
         <div class="menu-nav-area-tab menu-nav-area-grow mb-0 list-unstyled">
           <button class="menu-nav-button control-menu-layout button mb-0 active" tabindex="-1">Layout</button>
           <button class="menu-nav-button control-menu-header button mb-0" tabindex="-1">Header</button>
+          <button class="menu-nav-button control-menu-groups button mb-0" tabindex="-1">Groups</button>
           <button class="menu-nav-button control-menu-bookmarks button mb-0" tabindex="-1">Bookmarks</button>
           <button class="menu-nav-button control-menu-theme button mb-0" tabindex="-1">Theme</button>
           <button class="menu-nav-button control-menu-background button mb-0" tabindex="-1">Background</button>
@@ -752,6 +752,29 @@
           </div>
         </div>
 
+        <div class="menu-content-area menu-content-area-groups is-hidden">
+          <div class="menu-item">
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Names</h1>
+            </div>
+            <div class="menu-item-form">
+              <div class="input-wrap">
+                <input id="control-group-name-show" class="control-group-name-show" type="checkbox" tabindex="-1">
+                <label for="control-group-name-show">Show</label>
+              </div>
+              <div class="form-indent">
+                <div class="input-wrap">
+                  <label for="control-group-name-size">Name Size</label>
+                  <input id="control-group-name-size" class="control-group-name-size" type="range" min="20" max="500" value="0" step="20" tabindex="-1">
+                </div>
+                <div class="button-wrap">
+                  <button class="control-group-name-size-default button mb-0" tabindex="-1">Default name size</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div class="menu-content-area menu-content-area-bookmarks is-hidden">
           <div class="menu-item">
             <div class="menu-item-header">
@@ -1001,8 +1024,9 @@
               <h1 class="menu-item-header-text">Accent</h1>
             </div>
             <div class="menu-item-form">
-              <label for="control-theme-accent-current-picker">Colour</label>
-              <div class="input-wrap"><div class="form-group mb-0">
+              <div class="input-wrap">
+                <label for="control-theme-accent-current-picker">Colour</label>
+                <div class="form-group mb-0">
                   <input id="control-theme-accent-current-picker" class="form-group-item-half control-theme-accent-current-picker mb-0" type="color" value="#000000" tabindex="1">
                   <input id="control-theme-accent-current-hex" class="form-group-item-half control-theme-accent-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
                 </div>
diff --git a/src/js/bookmarks.js b/src/js/bookmarks.js
index a668b7af..48fc3ca3 100644
--- a/src/js/bookmarks.js
+++ b/src/js/bookmarks.js
@@ -3,185 +3,176 @@ var bookmarks = (function() {
   var mod = {};
 
   mod.all = [{
-    display: "icon",
-    letter: "DEV",
-    icon: {
-      name: "code",
-      prefix: "fas",
-      label: "Code"
-    },
-    name: "Devdocs",
-    url: "http://devdocs.io/",
-    accent: {
-      override: false,
-      color: {
-        r: null,
-        g: null,
-        b: null
-      }
-    },
-    timeStamp: 1546453101749
+    name: "Cool stuff",
+    items: [{
+      display: "icon",
+      letter: "AS",
+      icon: {
+        name: "dice-d20",
+        prefix: "fas",
+        label: "Dice D20"
+      },
+      name: "awesomeSheet",
+      url: "https://zombiefox.github.io/awesomeSheet/",
+      accent: {
+        override: false,
+        color: {
+          r: null,
+          g: null,
+          b: null
+        }
+      },
+      timeStamp: 1546453104010
+    }, {
+      display: "letter",
+      letter: "AZ",
+      icon: {
+        name: "amazon",
+        prefix: "fab",
+        label: "Amazon"
+      },
+      name: "Amazon",
+      url: "https://www.amazon.co.uk/",
+      accent: {
+        override: false,
+        color: {
+          r: null,
+          g: null,
+          b: null
+        }
+      },
+      timeStamp: 1546453107633
+    }, {
+      display: "letter",
+      letter: "GM",
+      icon: {
+        name: "envelope",
+        prefix: "fas",
+        label: "Envelope"
+      },
+      name: "Gmail",
+      url: "https://mail.google.com/",
+      accent: {
+        override: false,
+        color: {
+          r: null,
+          g: null,
+          b: null
+        }
+      },
+      timeStamp: 1546453110265
+    }, {
+      display: "icon",
+      letter: "R",
+      icon: {
+        name: "reddit-alien",
+        prefix: "fab",
+        label: "reddit Alien"
+      },
+      name: "Reddit",
+      url: "https://www.reddit.com/",
+      accent: {
+        override: false,
+        color: {
+          r: null,
+          g: null,
+          b: null
+        }
+      },
+      timeStamp: 1546453111491
+    }, {
+      display: "icon",
+      letter: "N",
+      icon: {
+        name: "film",
+        prefix: "fas",
+        label: "Film"
+      },
+      name: "Netflix",
+      url: "https://www.netflix.com/",
+      accent: {
+        override: false,
+        color: {
+          r: null,
+          g: null,
+          b: null
+        }
+      },
+      timeStamp: 1546453104460
+    }, {
+      display: "letter",
+      letter: "DR",
+      icon: {
+        name: null,
+        prefix: null,
+        label: null
+      },
+      name: "Drive",
+      url: "https://drive.google.com/drive/",
+      accent: {
+        override: false,
+        color: {
+          r: null,
+          g: null,
+          b: null
+        }
+      },
+      timeStamp: 1546453111953
+    }]
   }, {
-    display: "icon",
-    letter: "AS",
-    icon: {
-      name: "dice-d20",
-      prefix: "fas",
-      label: "Dice D20"
-    },
-    name: "awesomeSheet",
-    url: "https://zombiefox.github.io/awesomeSheet/",
-    accent: {
-      override: false,
-      color: {
-        r: null,
-        g: null,
-        b: null
-      }
-    },
-    timeStamp: 1546453104010
-  }, {
-    display: "icon",
-    letter: "N",
-    icon: {
-      name: "film",
-      prefix: "fas",
-      label: "Film"
-    },
-    name: "Netflix",
-    url: "https://www.netflix.com/",
-    accent: {
-      override: false,
-      color: {
-        r: null,
-        g: null,
-        b: null
-      }
-    },
-    timeStamp: 1546453104460
-  }, {
-    display: "letter",
-    letter: "AZ",
-    icon: {
-      name: "amazon",
-      prefix: "fab",
-      label: "Amazon"
-    },
-    name: "Amazon",
-    url: "https://www.amazon.co.uk/",
-    accent: {
-      override: false,
-      color: {
-        r: null,
-        g: null,
-        b: null
-      }
-    },
-    timeStamp: 1546453107633
-  }, {
-    display: "icon",
-    letter: "YT",
-    icon: {
-      name: "youtube",
-      prefix: "fab",
-      label: "YouTube"
-    },
-    name: "Youtube",
-    url: "https://www.youtube.com/",
-    accent: {
-      override: false,
-      color: {
-        r: null,
-        g: null,
-        b: null
-      }
-    },
-    timeStamp: 1546453108071
-  }, {
-    display: "letter",
-    letter: "GIT",
-    icon: {
-      name: "github",
-      prefix: "fab",
-      label: "GitHub"
-    },
-    name: "Github",
-    url: "https://github.com/",
-    accent: {
-      override: false,
-      color: {
-        r: null,
-        g: null,
-        b: null
-      }
-    },
-    timeStamp: 1546453108926
-  }, {
-    display: "letter",
-    letter: "GM",
-    icon: {
-      name: "envelope",
-      prefix: "fas",
-      label: "Envelope"
-    },
-    name: "Gmail",
-    url: "https://mail.google.com/",
-    accent: {
-      override: false,
-      color: {
-        r: null,
-        g: null,
-        b: null
-      }
-    },
-    timeStamp: 1546453110265
-  }, {
-    display: "icon",
-    letter: "R",
-    icon: {
-      name: "reddit-alien",
-      prefix: "fab",
-      label: "reddit Alien"
-    },
-    name: "Reddit",
-    url: "https://www.reddit.com/",
-    accent: {
-      override: false,
-      color: {
-        r: null,
-        g: null,
-        b: null
-      }
-    },
-    timeStamp: 1546453111491
-  }, {
-    display: "letter",
-    letter: "DR",
-    icon: {
-      name: null,
-      prefix: null,
-      label: null
-    },
-    name: "Drive",
-    url: "https://drive.google.com/drive/",
-    accent: {
-      override: false,
-      color: {
-        r: null,
-        g: null,
-        b: null
-      }
-    },
-    timeStamp: 1546453111953
+    name: "Dev sites",
+    items: [{
+      display: "icon",
+      letter: "DEV",
+      icon: {
+        name: "code",
+        prefix: "fas",
+        label: "Code"
+      },
+      name: "Devdocs",
+      url: "http://devdocs.io/",
+      accent: {
+        override: false,
+        color: {
+          r: null,
+          g: null,
+          b: null
+        }
+      },
+      timeStamp: 1546453101749
+    }, {
+      display: "icon",
+      letter: "GIT",
+      icon: {
+        name: "github",
+        prefix: "fab",
+        label: "GitHub"
+      },
+      name: "Github",
+      url: "https://github.com/",
+      accent: {
+        override: false,
+        color: {
+          r: null,
+          g: null,
+          b: null
+        }
+      },
+      timeStamp: 1546453108926
+    }]
   }];
 
   mod.get = function(data) {
     var _singleBookmark = function() {
       var found = false;
-      for (var i = 0; i < mod.all.length; i++) {
-        if (mod.all[i].timeStamp === data.timeStamp) {
-          found = mod.all[i];
-        };
+      if (mod.all.length > 0) {
+        mod.all.forEach(function(arrayItem, index) {
+          arrayItem.forEach(function(arrayItem, index) {
+            if (arrayItem[index].timeStamp === data.timeStamp) {
+              found = arrayItem[index];
+            };
+          });
+        });
       };
       return found;
     };
@@ -198,24 +189,52 @@ var bookmarks = (function() {
     };
   };
 
-  mod.add = function(data) {
-    mod.all.push(data);
+  mod.add = {
+    link: function(data) {
+      if (data.position.group.new) {
+        mod.add.group(data);
+      };
+      mod.all[data.position.destination.group].items.splice(data.position.destination.item, 0, data.link);
+    },
+    group: function(data) {
+      var name = data.position.group.name;
+      if (name != null && typeof name == "string") {
+        name = name.trim();
+      };
+      if (name == "" || name == null || name == undefined) {
+        var count = get().length + 1;
+        name = "Group " + count;
+      };
+      mod.all.push({
+        name: name,
+        items: []
+      });
+    }
   };
 
-  mod.edit = function(data) {
-    for (var i = 0; i < mod.all.length; i++) {
-      if (mod.all[i].timeStamp === data.timeStamp) {
-        mod.all[i] = data;
+  mod.edit = {
+    link: function(data) {
+      if (data.position.group.new) {
+        mod.add.group(data);
       };
-    };
+      var item = JSON.parse(JSON.stringify(data.link));
+      mod.all[data.position.origin.group].items.splice(data.position.origin.item, 1);
+      mod.all[data.position.destination.group].items.splice(data.position.destination.item, 0, item);
+    },
+    group: function(data) {
+      var group = JSON.parse(JSON.stringify(data.group));
+      mod.all.splice(data.position.origin, 1);
+      mod.all.splice(data.position.destination, 0, group);
+    }
   };
 
-  mod.remove = function(data) {
-    for (var i = 0; i < mod.all.length; i++) {
-      if (mod.all[i].timeStamp === data.timeStamp) {
-        mod.all.splice(mod.all.indexOf(mod.all[i]), 1);
-      };
-    };
+  mod.remove = {
+    link: function(data) {
+      mod.all[data.position.origin.group].items.splice(data.position.origin.item, 1);
+    },
+    group: function(data) {
+      mod.all.splice(data.position.origin, 1);
+    }
   };
 
   mod.sort = function(by) {
@@ -230,35 +249,51 @@ var bookmarks = (function() {
         return helper.sortObject(array, "icon.name");
       }
     };
-    mod.all = action[by](mod.all);
+    mod.all.forEach(function(arrayItem, index) {
+      arrayItem.items = action[by](arrayItem.items);
+    });
   };
 
-  mod.move = function(origin, destination) {
-    mod.all = helper.moveArrayItem(mod.all, origin, destination);
+  mod.move = {
+    link: function(data) {
+      var item = JSON.parse(JSON.stringify(mod.all[data.position.origin.group].items[data.position.origin.item]));
+      mod.all[data.position.origin.group].items.splice(data.position.origin.item, 1);
+      mod.all[data.position.destination.group].items.splice(data.position.destination.item, 0, item);
+    },
+    group: function(data) {
+      var group = JSON.parse(JSON.stringify(mod.all[data.position.origin]));
+      mod.all.splice(data.position.origin, 1);
+      mod.all.splice(data.position.destination, 0, group);
+    }
+  };
+
+  mod.count = function() {
+    var count = 0;
+    mod.all.forEach(function(arrayItem, index) {
+      count = count + arrayItem.items.length
+    });
+    return count;
+  };
+
+  var count = function() {
+    return mod.count();
   };
 
   var get = function(data) {
     return mod.get(data);
   };
 
-  var add = function(data) {
-    mod.add(data);
-  };
-
-  var edit = function(data) {
-    mod.edit(data);
-  };
-
   var sort = function(by) {
     mod.sort(by);
   };
 
-  var move = function(origin, destination) {
-    mod.move(origin, destination);
-  };
-
-  var remove = function(data) {
-    mod.remove(data);
+  var remove = {
+    link: function(data) {
+      mod.remove.link(data);
+    },
+    group: function(data) {
+      mod.remove.group(data);
+    }
   };
 
   var init = function() {
@@ -272,10 +307,8 @@ var bookmarks = (function() {
     init: init,
     mod: mod,
     get: get,
-    add: add,
-    edit: edit,
     sort: sort,
-    move: move,
+    count: count,
     remove: remove
   };
 
diff --git a/src/js/control.js b/src/js/control.js
index a777e40e..a3ad68f0 100644
--- a/src/js/control.js
+++ b/src/js/control.js
@@ -18,6 +18,12 @@ var control = (function() {
     func: function() {
       menu.nav(this.element, helper.e(".menu-content-area-header"));
     }
+  }, {
+    element: helper.e(".control-menu-groups"),
+    type: "button",
+    func: function() {
+      menu.nav(this.element, helper.e(".menu-content-area-groups"));
+    }
   }, {
     element: helper.e(".control-menu-bookmarks"),
     type: "button",
@@ -76,7 +82,7 @@ var control = (function() {
       theme.accent();
       theme.render.input.picker();
       theme.render.input.hex();
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-layout-width"),
@@ -1591,6 +1597,78 @@ var control = (function() {
     func: function() {
       render.class();
     }
+  }, {
+    element: helper.e(".control-group-name-show"),
+    path: "group.name.show",
+    type: "checkbox",
+    func: function() {
+      render.class();
+      render.dependents();
+    }
+  }, {
+    element: helper.e(".control-group-name-size"),
+    path: "group.name.size",
+    type: "range",
+    valueMod: ["float"],
+    additionalEvents: [{
+      event: "input",
+      func: function() {
+        edge.box.open({
+          element: helper.e(".group-name-text"),
+        });
+      }
+    }, {
+      event: "mousedown",
+      func: function() {
+        edge.box.open({
+          element: helper.e(".group-name-text"),
+        });
+      }
+    }, {
+      event: "mouseup",
+      func: function() {
+        edge.box.close();
+      }
+    }, {
+      event: "touchend",
+      func: function() {
+        edge.box.close();
+      }
+    }, {
+      event: "keydown",
+      func: function() {
+        if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
+          edge.box.open({
+            element: helper.e(".group-name-text"),
+          });
+        };
+      }
+    }, {
+      event: "keyup",
+      func: function() {
+        edge.box.close();
+      }
+    }],
+    func: function() {
+      link.render.group.size();
+    }
+  }, {
+    element: helper.e(".control-group-name-size-default"),
+    type: "button",
+    additionalEvents: [{
+      event: "click",
+      func: function() {
+        edge.box.open({
+          element: helper.e(".group-name-text"),
+          delay: 500
+        });
+      }
+    }],
+    func: function() {
+      mod.setValue("group.name.size", 1);
+      link.render.group.size();
+      render.update();
+    }
   }, {
     element: helper.e(".control-header-border-top"),
     path: "header.border.top",
@@ -1615,14 +1693,14 @@ var control = (function() {
       event: "input",
       func: function() {
         edge.box.open({
-          element: helper.e(".link-area"),
+          element: helper.e(".group"),
         });
       }
     }, {
       event: "mousedown",
       func: function() {
         edge.box.open({
-          element: helper.e(".link-area"),
+          element: helper.e(".group"),
         });
       }
     }, {
@@ -1640,7 +1718,7 @@ var control = (function() {
       func: function() {
         if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
           edge.box.open({
-            element: helper.e(".link-area"),
+            element: helper.e(".group"),
           });
         };
       }
@@ -1660,7 +1738,7 @@ var control = (function() {
       event: "click",
       func: function() {
         edge.box.open({
-          element: helper.e(".link-area"),
+          element: helper.e(".group"),
           delay: 500
         });
       }
@@ -1686,7 +1764,7 @@ var control = (function() {
       event: "change",
       func: function() {
         edge.box.open({
-          element: helper.e(".link-area"),
+          element: helper.e(".group"),
           delay: 500
         });
       }
@@ -1702,7 +1780,7 @@ var control = (function() {
       event: "change",
       func: function() {
         edge.box.open({
-          element: helper.e(".link-area"),
+          element: helper.e(".group"),
           delay: 500
         });
       }
@@ -1718,7 +1796,7 @@ var control = (function() {
       event: "change",
       func: function() {
         edge.box.open({
-          element: helper.e(".link-area"),
+          element: helper.e(".group"),
           delay: 500
         });
       }
@@ -1923,14 +2001,14 @@ var control = (function() {
     path: "link.item.order",
     type: "radio",
     func: function() {
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-link-item-order-namedisplay"),
     path: "link.item.order",
     type: "radio",
     func: function() {
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-link-item-url-show"),
@@ -1974,7 +2052,7 @@ var control = (function() {
     path: "link.newTab",
     type: "checkbox",
     func: function() {
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-link-item-border"),
@@ -2017,35 +2095,35 @@ var control = (function() {
     type: "button",
     func: function() {
       bookmarks.sort("letter");
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-link-sort-icon"),
     type: "button",
     func: function() {
       bookmarks.sort("icon");
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-link-sort-name"),
     type: "button",
     func: function() {
       bookmarks.sort("name");
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-link-accent-clear"),
     type: "button",
     func: function() {
       link.mod.accent.clear();
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-link-accent-set"),
     type: "button",
     func: function() {
       link.mod.accent.rainbow();
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-theme-accent-current-picker"),
@@ -2055,7 +2133,7 @@ var control = (function() {
       theme.accent();
       theme.render.input.quick();
       theme.render.input.hex();
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-theme-accent-current-hex"),
@@ -2066,7 +2144,7 @@ var control = (function() {
       theme.accent();
       theme.render.input.picker();
       theme.render.input.quick();
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-theme-style-dark"),
@@ -2147,7 +2225,7 @@ var control = (function() {
     func: function() {
       theme.render.accent.random();
       theme.render.accent.color();
-      link.items();
+      link.groupAndItems();
     }
   }, {
     element: helper.e(".control-background-color-by-theme"),
@@ -2520,6 +2598,13 @@ var control = (function() {
       _greeting();
       _transitional();
     };
+    var _group = function() {
+      if (state.get().group.name.show) {
+        helper.addClass(html, "is-group-name-show");
+      } else {
+        helper.removeClass(html, "is-group-name-show");
+      };
+    };
     var _link = function() {
       helper.removeClass(html, "is-link-show");
       helper.removeClass(html, "is-link-area-alignment-left");
@@ -2612,6 +2697,7 @@ var control = (function() {
     };
     _menu();
     _header();
+    _group();
     _link();
     _layout();
     _background();
@@ -2947,6 +3033,17 @@ var control = (function() {
         _disable.input(".control-link-edit", false);
       };
     };
+    var _group = function() {
+      if (state.get().group.name.show) {
+        _disable.input(".control-group-name-size", false);
+        _disable.element("[for=control-group-name-size]", false);
+        _disable.input(".control-group-name-size-default", false);
+      } else {
+        _disable.input(".control-group-name-size", true);
+        _disable.element("[for=control-group-name-size]", true);
+        _disable.input(".control-group-name-size-default", true);
+      };
+    };
     var _link = function() {
       _disable.input(".control-layout-order-headerlink", true);
       _disable.input(".control-layout-order-linkheader", true);
@@ -3150,6 +3247,7 @@ var control = (function() {
     };
     _header();
     _edit();
+    _group();
     _link();
     _theme();
     _background();
diff --git a/src/js/edge.js b/src/js/edge.js
index 197c1bd7..1d194fb1 100644
--- a/src/js/edge.js
+++ b/src/js/edge.js
@@ -1,8 +1,25 @@
 var edge = (function() {
 
   var _timer = null;
+  var _tick = null;
+  var _currentElement = null;
   var _currentEdge = null;
 
+  var bind = {};
+
+  bind.tick = {
+    set: function() {
+      _tick = window.setTimeout(function() {
+        render.update();
+        bind.tick.set();
+      }, 100);
+    },
+    remove: function() {
+      window.clearTimeout(_tick);
+      _tick = null;
+    }
+  };
+
   var mod = {};
 
   mod.open = function() {
@@ -40,6 +57,7 @@ var edge = (function() {
     if (override) {
       options = helper.applyOptions(options, override);
     };
+    _currentElement = options.element;
     var _resize = function() {
       var scrollTop = document.documentElement.scrollTop;
       var scrollLeft = document.documentElement.scrollLeft;
@@ -60,7 +78,9 @@ var edge = (function() {
         } else {
           edgeElement.remove();
         };
+        bind.tick.remove();
         _currentEdge = null;
+        _currentElement = null;
       };
       edgeElement.addEventListener("transitionend", function(event, elapsed) {
         if (event.propertyName === "opacity" && getComputedStyle(this).opacity == 0) {
@@ -82,13 +102,26 @@ var edge = (function() {
     if (options.element != null) {
       if (_currentEdge == null) {
         _makeEdge();
-        _resize();
+        render.update();
+        bind.tick.set();
       } else {
-        _resize();
+        render.update();
       };
     };
   };
 
+  render.update = function() {
+    if (_currentEdge != null) {
+      var scrollTop = document.documentElement.scrollTop;
+      var scrollLeft = document.documentElement.scrollLeft;
+      var rect = _currentElement.getBoundingClientRect();
+      _currentEdge.style.width = rect.width + "px";
+      _currentEdge.style.height = rect.height + "px";
+      _currentEdge.style.top = rect.top + scrollTop + "px";
+      _currentEdge.style.left = rect.left + scrollLeft + "px";
+    };
+  };
+
   var box = {
     open: function(override) {
       mod.open();
@@ -103,6 +136,7 @@ var edge = (function() {
   // exposed methods
   return {
     mod: mod,
+    bind: bind,
     render: render,
     box: box
   };
diff --git a/src/js/keyboard.js b/src/js/keyboard.js
index 1f974f8d..49f956b9 100644
--- a/src/js/keyboard.js
+++ b/src/js/keyboard.js
@@ -7,7 +7,7 @@ var keyboard = (function() {
       //  esc
       if (event.keyCode == 27) {
         if (state.get().edge) {
-          edge.render.clear();
+          edge.box.close();
         } else if (state.get().menu) {
           menu.close();
           shade.close();
@@ -16,17 +16,14 @@ var keyboard = (function() {
         } else if (state.get().link.add) {
           link.add.close();
           shade.close();
+        } else if (state.get().link.edit) {
+          link.add.close();
+          shade.close();
+          control.render.update();
+          control.render.class();
         } else if (state.get().modal) {
           modal.close();
           shade.close();
-        } else if (state.get().link.edit) {
-          helper.setObject({
-            object: state.get(),
-            path: "link.edit",
-            newValue: false
-          });
-          control.render.update();
-          control.render.class();
         };
         data.save();
       };
@@ -96,7 +93,7 @@ var keyboard = (function() {
       if (state.get().theme.accent.random.active && event.ctrlKey && event.altKey && event.keyCode == 82) {
         theme.render.accent.random();
         theme.render.accent.color();
-        link.items();
+        link.groupAndItems();
         data.save();
       };
     }, false);
diff --git a/src/js/link.js b/src/js/link.js
index a20a01e1..1ffec6f1 100644
--- a/src/js/link.js
+++ b/src/js/link.js
@@ -1,31 +1,121 @@
 var link = (function() {
 
+  var stagedGroup = {
+    position: {
+      origin: null,
+      destination: null
+    },
+    group: {
+      name: null,
+      items: null
+    }
+  };
+
+  stagedGroup.reset = function() {
+    stagedGroup.position.origin = null;
+    stagedGroup.position.destination = null;
+    stagedGroup.group.name = null;
+    stagedGroup.group.items = null;
+  };
+
+  var stagedLink = {
+    position: {
+      origin: {
+        group: null,
+        item: null
+      },
+      destination: {
+        group: null,
+        item: null
+      },
+      group: {
+        new: null,
+        name: null
+      }
+    },
+    link: {
+      display: null,
+      letter: null,
+      icon: {
+        name: null,
+        prefix: null,
+        label: null
+      },
+      name: null,
+      url: null,
+      timeStamp: null,
+      accent: {
+        override: null,
+        color: {
+          r: null,
+          g: null,
+          b: null
+        }
+      }
+    }
+  };
+
+  stagedLink.init = function() {
+    stagedLink.position.origin.group = 0;
+    stagedLink.position.origin.item = 0;
+    stagedLink.position.destination.group = 0;
+    stagedLink.position.destination.item = 0;
+    stagedLink.position.group.new = false;
+    stagedLink.link.display = "letter";
+    stagedLink.link.accent.override = false;
+  };
+
+  stagedLink.reset = function() {
+    stagedLink.position.origin.group = null;
+    stagedLink.position.origin.item = null;
+    stagedLink.position.destination.group = null;
+    stagedLink.position.destination.item = null;
+    stagedLink.position.group.new = null;
+    stagedLink.position.group.name = null;
+    stagedLink.link.display = null;
+    stagedLink.link.letter = null;
+    stagedLink.link.icon.name = null;
+    stagedLink.link.icon.prefix = null;
+    stagedLink.link.icon.label = null;
+    stagedLink.link.name = null;
+    stagedLink.link.url = null;
+    stagedLink.link.timeStamp = null;
+    stagedLink.link.accent.override = null;
+    stagedLink.link.accent.color.r = null;
+    stagedLink.link.accent.color.g = null;
+    stagedLink.link.accent.color.b = null;
+  };
+
   var mod = {};
 
   mod.accent = {
     clear: function() {
       bookmarks.get().forEach(function(arrayItem, index) {
-        arrayItem.accent = {
-          override: false,
-          color: {
-            r: null,
-            g: null,
-            b: null
-          }
-        };
+        arrayItem.items.forEach(function(arrayItem, index) {
+          arrayItem.accent = {
+            override: false,
+            color: {
+              r: null,
+              g: null,
+              b: null
+            }
+          };
+        });
       });
     },
     rainbow: function() {
-      var units = 360 / bookmarks.get().length;
+      var units = 360 / bookmarks.count();
       var degree = 0;
       bookmarks.get().forEach(function(arrayItem, index) {
-        arrayItem.accent.override = true;
-        arrayItem.accent.color = helper.hslToRgb({
-          h: degree,
-          s: 1,
-          l: 0.5
+        arrayItem.items.forEach(function(arrayItem, index) {
+          arrayItem.accent.override = true;
+          arrayItem.accent.color = helper.hslToRgb({
+            h: degree,
+            s: 1,
+            l: 0.5
+          });
+          degree = degree + units;
         });
-        degree = degree + units;
       });
     }
   };
@@ -33,9 +123,9 @@ var link = (function() {
   mod.edit = {
     toggle: function() {
       if (state.get().link.edit) {
-        mod.edit.close()
+        mod.edit.close();
       } else {
-        mod.edit.open()
+        mod.edit.open();
       };
     },
     open: function() {
@@ -82,107 +172,147 @@ var link = (function() {
 
   var bind = {};
 
-  bind.sort = function() {
-    sortable(".link-area", {
-      items: ".link-item",
-      handle: ".link-control-item-handle",
-      placeholder: helper.node("div|class:link-item-placeholder")
-    });
-    sortable(".link-area")[0].addEventListener("sortupdate", function(event) {
-      bookmarks.move(event.detail.origin.index, event.detail.destination.index);
-      data.save();
-    });
-  };
-
-  var _previousFocus = null;
-
-  var stagedLink = {};
-
-  stagedLink.data = {
-    display: null,
-    letter: null,
-    icon: {
-      name: null,
-      prefix: null,
-      label: null
-    },
-    name: null,
-    url: null,
-    timeStamp: null,
-    accent: {
-      override: null,
-      color: {
-        r: null,
-        g: null,
-        b: null
+  bind.sort = {
+    update: {
+      func: {
+        group: function(event) {
+          stagedGroup.position.origin = event.detail.origin.index;
+          stagedGroup.position.destination = event.detail.destination.index;
+          bookmarks.mod.move.group(stagedGroup);
+          data.save();
+          groupAndItems();
+          stagedGroup.reset();
+        },
+        item: function(event) {
+          stagedLink.position.origin.group = Array.from(helper.getClosest(event.detail.origin.container, ".group").parentNode.children).indexOf(helper.getClosest(event.detail.origin.container, ".group"));
+          stagedLink.position.origin.item = event.detail.origin.index;
+          stagedLink.position.destination.group = Array.from(helper.getClosest(event.detail.destination.container, ".group").parentNode.children).indexOf(helper.getClosest(event.detail.destination.container, ".group"));
+          stagedLink.position.destination.item = event.detail.destination.index
+          bookmarks.mod.move.link(stagedLink);
+          data.save();
+          groupAndItems();
+          stagedLink.reset();
+        }
+      },
+      remove: {
+        group: function() {
+          helper.eA(".link").forEach(function(arrayItem, index) {
+            sortable(arrayItem)[0].removeEventListener("sortupdate", bind.sort.update.func.group, false);
+          });
+        },
+        item: function() {
+          helper.eA(".group-body").forEach(function(arrayItem, index) {
+            sortable(arrayItem)[0].removeEventListener("sortupdate", bind.sort.update.func.item, false);
+          });
+        }
       }
+    },
+    group: function() {
+      sortable(".link", {
+        items: ".group",
+        handle: ".group-control-item-handle",
+        orientation: "vertical",
+        placeholder: helper.node("div|class:link-placeholder"),
+        forcePlaceholderSize: true
+      });
+      bind.sort.update.remove.group();
+      helper.eA(".link").forEach(function(arrayItem, index) {
+        sortable(arrayItem)[0].addEventListener("sortupdate", bind.sort.update.func.group, false, event);
+      });
+    },
+    item: function() {
+      sortable(".group-body", {
+        items: ".link-item",
+        handle: ".link-control-item-handle",
+        acceptFrom: '.group-body',
+        placeholder: helper.node("div|class:link-placeholder"),
+        forcePlaceholderSize: true
+      });
+      bind.sort.update.remove.item();
+      helper.eA(".group-body").forEach(function(arrayItem, index) {
+        sortable(arrayItem)[0].addEventListener("sortstart", function() {
+          var html = helper.e("html");
+          helper.addClass(html, "is-sorting");
+        }, false);
+        sortable(arrayItem)[0].addEventListener("sortstop", function() {
+          var html = helper.e("html");
+          helper.removeClass(html, "is-sorting");
+        }, false);
+        sortable(arrayItem)[0].addEventListener("sortupdate", bind.sort.update.func.item, false, event);
+      });
     }
   };
 
-  stagedLink.init = function() {
-    stagedLink.data.display = "letter";
-    stagedLink.data.accent.override = false;
-  };
-
-  stagedLink.reset = function() {
-    stagedLink.data.display = null;
-    stagedLink.data.letter = null;
-    stagedLink.data.icon.name = null;
-    stagedLink.data.icon.prefix = null;
-    stagedLink.data.icon.label = null;
-    stagedLink.data.name = null;
-    stagedLink.data.url = null;
-    stagedLink.data.timeStamp = null;
-    stagedLink.data.accent.override = null;
-    stagedLink.data.accent.color.r = null;
-    stagedLink.data.accent.color.g = null;
-    stagedLink.data.accent.color.b = null;
-  };
-
   var render = {};
 
-  render.remove = function(bookmarkData) {
-    modal.open({
-      heading: "Remove " + bookmarkData.name + " bookmark",
-      content: "Are you sure you want to remove this bookmark? This can not be undone.",
-      successAction: function() {
-        _previousFocus = _previousFocus - 1;
-        bookmarks.remove(bookmarkData);
-        mod.edit.check();
-        header.render.button.edit();
+  render.move = {
+    group: {
+      up: function(copyStagedGroup) {
+        stagedGroup.group = JSON.parse(JSON.stringify(copyStagedGroup.group));
+        stagedGroup.position = JSON.parse(JSON.stringify(copyStagedGroup.position));
+        stagedGroup.position.destination = stagedGroup.position.destination - 1;
+        if (stagedGroup.position.destination < 0) {
+          stagedGroup.position.destination = 0;
+        };
+        bookmarks.mod.move.group(stagedGroup);
         data.save();
-        render.clear();
-        render.item.all();
-        render.item.tabindex();
-        render.previousFocus();
-        sortable(".link-area");
-        control.render.dependents();
-        control.render.class();
-        shade.close();
-        pagelock.unlock();
+        groupAndItems();
+        render.focus.group.previous.up(copyStagedGroup);
+        stagedGroup.reset();
       },
-      cancelAction: function() {
-        render.previousFocus();
-        shade.close();
-        pagelock.unlock();
-      },
-      actionText: "Remove",
-      size: "small"
-    });
-    shade.open({
-      action: function() {
-        modal.close();
-        pagelock.unlock();
+      down: function(copyStagedGroup) {
+        stagedGroup.group = JSON.parse(JSON.stringify(copyStagedGroup.group));
+        stagedGroup.position = JSON.parse(JSON.stringify(copyStagedGroup.position));
+        stagedGroup.position.destination = stagedGroup.position.destination + 1;
+        bookmarks.mod.move.group(stagedGroup);
+        data.save();
+        groupAndItems();
+        render.focus.group.next.down(copyStagedGroup);
+        stagedGroup.reset();
       }
-    });
-    pagelock.lock();
+    },
+    link: {
+      left: function(copyStagedLink) {
+        stagedLink.link = JSON.parse(JSON.stringify(copyStagedLink.link));
+        stagedLink.position = JSON.parse(JSON.stringify(copyStagedLink.position));
+        stagedLink.position.destination.item = stagedLink.position.destination.item - 1;
+        if (stagedLink.position.destination.item < 0) {
+          stagedLink.position.destination.item = 0;
+        };
+        bookmarks.mod.move.link(JSON.parse(JSON.stringify(stagedLink)));
+        data.save();
+        groupAndItems();
+        render.focus.item.previous.left(copyStagedLink);
+        stagedLink.reset();
+      },
+      right: function(copyStagedLink) {
+        stagedLink.link = JSON.parse(JSON.stringify(copyStagedLink.link));
+        stagedLink.position = JSON.parse(JSON.stringify(copyStagedLink.position));
+        stagedLink.position.destination.item = stagedLink.position.destination.item + 1;
+        bookmarks.mod.move.link(JSON.parse(JSON.stringify(stagedLink)));
+        data.save();
+        groupAndItems();
+        render.focus.item.next.right(copyStagedLink);
+        stagedLink.reset();
+      }
+    }
   };
 
-  render.clear = function() {
-    var linkArea = helper.e(".link-area");
-    while (linkArea.lastChild) {
-      linkArea.removeChild(linkArea.lastChild);
-    };
+  render.clear = {
+    group: function() {
+      var link = helper.e(".link");
+      while (link.lastChild) {
+        link.removeChild(link.lastChild);
+      };
+    },
+    item: function() {
+      var groupBody = helper.eA(".group-body");
+      groupBody.forEach(function(arrayItem, index) {
+        while (arrayItem.lastChild) {
+          arrayItem.removeChild(arrayItem.lastChild);
+        };
+      });
+    }
   };
 
   render.area = {
@@ -192,51 +322,465 @@ var link = (function() {
     }
   };
 
-  render.item = {
-    all: function() {
-      var linkArea = helper.e(".link-area");
-      var bookmarksToRender = false;
-      if (state.get().search) {
-        bookmarksToRender = search.get();
-      } else {
-        bookmarksToRender = bookmarks.get();
+  render.group = {
+    area: function() {
+      var group = helper.node("div|class:group");
+
+      var groupHeader = helper.node("div|class:group-header");
+      var groupName = helper.node("div|class:group-name");
+      var groupNameText = helper.node("h1:" + stagedGroup.group.name + "|class:group-name-text");
+      var groupControl = helper.node("div|class:group-control form-group");
+
+      groupName.appendChild(groupNameText);
+      groupHeader.appendChild(groupControl);
+      groupHeader.appendChild(groupName);
+      group.appendChild(groupHeader);
+
+      var groupBody = helper.node("div|class:group-body");
+      group.appendChild(groupBody);
+
+      var itemGroupControlItemUp = helper.node("button|class:button button-small group-control-item group-control-item-up,tabindex:-1,title:Move this bookmark up");
+      var itemGroupControlItemUpIcon = helper.node("span|class:button-icon icon-arrow-up");
+      itemGroupControlItemUp.appendChild(itemGroupControlItemUpIcon);
+      groupControl.appendChild(itemGroupControlItemUp);
+
+      var itemGroupControlItemHandle = helper.node("div|class:button button-small group-control-item group-control-item-handle,tabindex:-1,title:Drag and drop to reorder");
+      var itemGroupControlItemHandleIcon = helper.node("span|class:button-icon icon-reorder");
+      itemGroupControlItemHandle.appendChild(itemGroupControlItemHandleIcon);
+      groupControl.appendChild(itemGroupControlItemHandle);
+
+      var itemGroupControlItemDown = helper.node("button|class:button button-small group-control-item group-control-item-down,tabindex:-1,title:Move this bookmark down");
+      var itemGroupControlItemDownIcon = helper.node("span|class:button-icon icon-arrow-down");
+      itemGroupControlItemDown.appendChild(itemGroupControlItemDownIcon);
+      groupControl.appendChild(itemGroupControlItemDown);
+
+      var itemGroupControlItemEdit = helper.node("button|class:button button-small group-control-item group-control-item-edit,tabindex:-1,title:Edit this bookmark");
+      var itemGroupControlItemEditIcon = helper.node("span|class:button-icon icon-edit");
+      itemGroupControlItemEdit.appendChild(itemGroupControlItemEditIcon);
+      groupControl.appendChild(itemGroupControlItemEdit);
+
+      var itemGroupControlItemRemove = helper.node("button|class:button button-small group-control-item group-control-item-remove,tabindex:-1,title:Remove this bookmark");
+      var itemGroupControlItemRemoveIcon = helper.node("span|class:button-icon icon-close");
+      itemGroupControlItemRemove.appendChild(itemGroupControlItemRemoveIcon);
+      groupControl.appendChild(itemGroupControlItemRemove);
+
+      var copyStagedGroup = JSON.parse(JSON.stringify(stagedGroup));
+
+      itemGroupControlItemUp.addEventListener("click", function(event) {
+        render.move.group.up(copyStagedGroup);
+      }, false);
+
+      itemGroupControlItemDown.addEventListener("click", function() {
+        render.move.group.down(copyStagedGroup);
+      }, false);
+
+      itemGroupControlItemEdit.addEventListener("click", function() {
+        render.group.edit(copyStagedGroup);
+      }, false);
+
+      itemGroupControlItemRemove.addEventListener("click", function() {
+        render.group.remove(copyStagedGroup);
+      }, false);
+
+      return group;
+    },
+    edit: function(copyStagedGroup) {
+      stagedGroup.group = JSON.parse(JSON.stringify(copyStagedGroup.group));
+      stagedGroup.position = JSON.parse(JSON.stringify(copyStagedGroup.position));
+      var form = render.group.form({
+        useStagedGroup: true
+      });
+      var heading = "Edit " + stagedGroup.group.name;
+      var successAction = function() {
+        var copyStagedGroup = JSON.parse(JSON.stringify(stagedGroup));
+        bookmarks.mod.edit.group(copyStagedGroup);
+        data.save();
+        groupAndItems();
+        render.focus.group.current.edit(copyStagedGroup);
+        stagedGroup.reset();
+        autoSuggest.close();
+        shade.close();
+        pagelock.unlock();
       };
-      var action = {
-        bookmarks: function(array) {
-          array.forEach(function(arrayItem, index) {
-            linkArea.appendChild(render.item.link(arrayItem, index));
-          });
-        },
-        empty: {
-          search: function() {
-            linkArea.appendChild(render.empty.search());
-          },
-          bookmarks: function() {
-            linkArea.appendChild(render.empty.bookmarks());
-          }
+      var cancelAction = function() {
+        stagedGroup.reset();
+        autoSuggest.close();
+        pagelock.unlock();
+        shade.close();
+      };
+      modal.open({
+        heading: heading,
+        successAction: successAction,
+        cancelAction: cancelAction,
+        actionText: "Save",
+        size: "small",
+        content: form
+      });
+      shade.open({
+        action: function() {
+          stagedGroup.reset();
+          autoSuggest.close();
+          pagelock.unlock();
+          modal.close();
         }
+      });
+    },
+    remove: function(copyStagedGroup) {
+      stagedGroup.group = JSON.parse(JSON.stringify(copyStagedGroup.group));
+      stagedGroup.position = JSON.parse(JSON.stringify(copyStagedGroup.position));
+      var heading;
+      if (stagedGroup.group.name != null && stagedGroup.group.name != "") {
+        heading = "Remove " + stagedGroup.group.name + " group";
+      } else {
+        heading = "Remove unnamed group";
       };
-      // if searching
-      if (state.get().search) {
-        // if bookmarks exist to be searched
-        if (bookmarksToRender.total > 0) {
-          // if matching bookmarks found
-          if (bookmarksToRender.matching.length > 0) {
-            action.bookmarks(bookmarksToRender.matching);
-          } else {
-            action.empty.search();
-          };
-        } else {
-          action.empty.bookmarks();
+      var successAction = function() {
+        var copyStagedGroup = JSON.parse(JSON.stringify(stagedGroup));
+        bookmarks.remove.group(copyStagedGroup);
+        data.save();
+        mod.edit.check();
+        header.render.button.edit();
+        groupAndItems();
+        render.focus.group.previous.remove(copyStagedGroup);
+        stagedGroup.reset();
+        control.render.dependents();
+        control.render.class();
+        shade.close();
+        pagelock.unlock();
+      };
+      var cancelAction = function() {
+        stagedGroup.reset();
+        shade.close();
+        pagelock.unlock();
+      };
+      modal.open({
+        heading: heading,
+        content: "Are you sure you want to remove this group and all the bookmarks within? This can not be undone.",
+        successAction: successAction,
+        cancelAction: cancelAction,
+        actionText: "Remove",
+        size: "small"
+      });
+      shade.open({
+        action: function() {
+          stagedGroup.reset();
+          autoSuggest.close();
+          pagelock.unlock();
+          modal.close();
+        }
+      });
+      pagelock.lock();
+    },
+    form: function(override) {
+      var options = {
+        useStagedGroup: null
+      };
+      if (override) {
+        options = helper.applyOptions(options, override);
+      };
+      var form = helper.node("form|class:group-form");
+      var fieldset = helper.node("fieldset");
+
+      // group position
+      var groupFormPositionInputWrap = helper.node("div|class:input-wrap");
+      var groupFormPositionLabel = helper.node("label:Position|for:group-form-position");
+      var groupFormPositionSelect = helper.node("select|id:group-form-position,class:group-form-position mb-0,tabindex:1");
+
+      // group name
+      var groupFormNameInputWrap = helper.node("div|class:input-wrap");
+      var groupFormInputLabel = helper.node("label:Name|for:group-form-input-name");
+      var groupFormInputName = helper.node("input|type:text,class:group-form-input-name mb-0,id:group-form-input-name,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
+
+      groupFormPositionInputWrap.appendChild(groupFormPositionLabel);
+      groupFormPositionInputWrap.appendChild(groupFormPositionSelect);
+      groupFormNameInputWrap.appendChild(groupFormInputLabel);
+      groupFormNameInputWrap.appendChild(groupFormInputName);
+      fieldset.appendChild(groupFormPositionInputWrap);
+      fieldset.appendChild(groupFormNameInputWrap);
+      form.appendChild(fieldset);
+
+      var makeGroupOptions = function() {
+        var optionCount = bookmarks.get().length;
+        for (var i = 1; i <= optionCount; i++) {
+          groupFormPositionSelect.appendChild(helper.node("option:" + helper.ordinalNumber(i)));
+        };
+      };
+
+      var populateForm = function() {
+        groupFormPositionSelect.selectedIndex = stagedGroup.position.origin;
+        groupFormInputName.value = stagedGroup.group.name;
+      };
+
+      makeGroupOptions();
+      if (options.useStagedGroup) {
+        populateForm();
+      };
+
+      form.addEventListener("keydown", function(event) {
+        if (event.keyCode == 13) {
+          event.preventDefault();
+          return false;
+        };
+      }, false);
+      groupFormPositionSelect.addEventListener("change", function(event) {
+        stagedGroup.position.destination = this.selectedIndex;
+      }, false);
+      groupFormInputName.addEventListener("input", function(event) {
+        stagedGroup.group.name = this.value;
+      }, false);
+
+      return form;
+    },
+    size: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--group-name-size", state.get().group.name.size + "em");
+    },
+    tabindex: function() {
+      var allGroupControlItem = helper.eA(".group-control-item");
+      if (state.get().link.edit) {
+        allGroupControlItem.forEach(function(arrayItem, index) {
+          arrayItem.tabIndex = 1;
+        });
+      } else {
+        allGroupControlItem.forEach(function(arrayItem, index) {
+          arrayItem.tabIndex = -1;
+        });
+      };
+    }
+  };
+
+  render.item = {
+    link: function() {
+      var linkItemOptions = {
+        tag: "div",
+        attr: [{
+          key: "class",
+          value: "link-item"
+        }]
+      };
+      if (stagedLink.link.accent.override) {
+        linkItemOptions.attr.push({
+          key: "style",
+          value: "--theme-accent: " + stagedLink.link.accent.color.r + ", " + stagedLink.link.accent.color.g + ", " + stagedLink.link.accent.color.b
+        });
+        if (invert(stagedLink.link.accent.color, true) == "#000000") {
+          linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-url-text-dark";
+        } else if (invert(stagedLink.link.accent.color, true) == "#ffffff") {
+          linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-url-text-light";
         };
       } else {
-        // if bookmarks exist
-        if (bookmarksToRender.length > 0) {
-          action.bookmarks(bookmarksToRender);
-        } else {
-          action.empty.bookmarks();
+        if (invert(state.get().theme.accent.current, true) == "#000000") {
+          linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-url-text-dark";
+        } else if (invert(state.get().theme.accent.current, true) == "#ffffff") {
+          linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-url-text-light";
         };
       };
+      var linkItem = helper.makeNode(linkItemOptions);
+      var linkPanelFrontOptions = {
+        tag: "a",
+        attr: [{
+          key: "class",
+          value: "link-panel-front"
+        }, {
+          key: "href",
+          value: stagedLink.link.url
+        }, {
+          key: "tabindex",
+          value: 1
+        }]
+      };
+      if (state.get().link.newTab) {
+        linkPanelFrontOptions.attr.push({
+          key: "target",
+          value: "_blank"
+        });
+      };
+      var linkPanelFront = helper.makeNode(linkPanelFrontOptions);
+      var linkPanelBack = helper.node("div|class:link-panel-back");
+      var linkDisplay = helper.node("div|class:link-display");
+      var linkDisplayLetter = null;
+      var linkDisplayIcon = null;
+      if (stagedLink.link.display == "letter") {
+        var letterText = stagedLink.link.letter;
+        if (letterText == null) {
+          letterText = "";
+        };
+        linkDisplayLetter = helper.node("p:" + letterText + "|class:link-display-letter");
+      } else if (stagedLink.link.display == "icon" && stagedLink.link.icon.prefix != null && stagedLink.link.icon.name != null) {
+        linkDisplayIcon = helper.node("div|class:link-display-icon " + stagedLink.link.icon.prefix + " fa-" + stagedLink.link.icon.name);
+      };
+      var nameText = stagedLink.link.name;
+      if (nameText == null) {
+        nameText = "";
+      };
+      var linkName = helper.node("p:" + nameText + "|class:link-name");
+      var linkUrl = helper.node("div|class:link-url");
+      var url = "";
+      if (stagedLink.link.url != null) {
+        url = stagedLink.link.url.replace(/^https?\:\/\//i, "").replace(/\/$/, "");
+      };
+      var linkUrlText = helper.makeNode({
+        tag: "p",
+        text: url,
+        attr: [{
+          key: "class",
+          value: "link-url-text"
+        }, {
+          key: "title",
+          value: url
+        }]
+      });
+      var linkControl = helper.node("div|class:link-control");
+      var linkHandle = helper.node("div|class:button button-small link-control-item link-control-item-handle,tabindex:-1,title:Drag and drop to reorder");
+      var linkHandleIcon = helper.node("span|class:button-icon icon-reorder");
+      var linkEdit = helper.node("button|class:button button-small link-control-item link-control-item-edit,tabindex:-1,title:Edit this bookmark");
+      var linkEditIcon = helper.node("span|class:button-icon icon-edit");
+      var linkLeft = helper.node("button|class:button button-small link-control-item link-control-item-left,tabindex:-1,title:Move this bookmark left");
+      var linkLeftIcon = helper.node("span|class:button-icon icon-arrow-left");
+      var linkRight = helper.node("button|class:button button-small link-control-item link-control-item-right,tabindex:-1,title:Move this bookmark right");
+      var linkRightIcon = helper.node("span|class:button-icon icon-arrow-right");
+      var linkRemove = helper.node("button|class:button button-small link-control-item link-control-item-remove,tabindex:-1,title:Remove this bookmark");
+      var linkRemoveIcon = helper.node("span|class:button-icon icon-close");
+
+      if (stagedLink.link.display == "letter") {
+        linkDisplay.appendChild(linkDisplayLetter);
+      } else if (stagedLink.link.display == "icon" && stagedLink.link.icon.prefix != null && stagedLink.link.icon.name != null) {
+        linkDisplay.appendChild(linkDisplayIcon);
+      };
+      if (state.get().link.item.order == "displayname") {
+        linkPanelFront.appendChild(linkDisplay);
+        linkPanelFront.appendChild(linkName);
+      } else if (state.get().link.item.order == "namedisplay") {
+        linkPanelFront.appendChild(linkName);
+        linkPanelFront.appendChild(linkDisplay);
+      };
+      linkLeft.appendChild(linkLeftIcon);
+      linkControl.appendChild(linkLeft);
+      linkHandle.appendChild(linkHandleIcon);
+      linkControl.appendChild(linkHandle);
+      linkRight.appendChild(linkRightIcon);
+      linkControl.appendChild(linkRight);
+      linkEdit.appendChild(linkEditIcon);
+      linkControl.appendChild(linkEdit);
+      linkRemove.appendChild(linkRemoveIcon);
+      linkControl.appendChild(linkRemove);
+      linkUrl.appendChild(linkUrlText);
+      linkPanelBack.appendChild(linkUrl);
+      linkPanelBack.appendChild(linkControl);
+      linkItem.appendChild(linkPanelFront);
+      linkItem.appendChild(linkPanelBack);
+
+      var copyStagedLink = JSON.parse(JSON.stringify(stagedLink));
+
+      linkLeft.addEventListener("click", function() {
+        render.move.link.left(copyStagedLink);
+      }, false);
+
+      linkRight.addEventListener("click", function() {
+        render.move.link.right(copyStagedLink);
+      }, false);
+
+      linkEdit.addEventListener("click", function() {
+        render.item.edit(copyStagedLink);
+      }, false);
+
+      linkRemove.addEventListener("click", function() {
+        render.item.remove(copyStagedLink);
+      }, false);
+
+      return linkItem;
+    },
+    edit: function(copyStagedLink) {
+      stagedLink.link = JSON.parse(JSON.stringify(copyStagedLink.link));
+      stagedLink.position = JSON.parse(JSON.stringify(copyStagedLink.position));
+      var form = render.item.form({
+        useStagedLink: true
+      });
+      var heading;
+      if (stagedLink.link.name != null && stagedLink.link.name != "") {
+        heading = "Edit " + stagedLink.link.name;
+      } else {
+        heading = "Edit unnamed bookmark";
+      };
+      var successAction = function() {
+        var copyStagedLink = JSON.parse(JSON.stringify(stagedLink));
+        bookmarks.mod.edit.link(copyStagedLink);
+        data.save();
+        groupAndItems();
+        render.focus.item.current.edit(copyStagedLink);
+        stagedLink.reset();
+        autoSuggest.close();
+        shade.close();
+        pagelock.unlock();
+      };
+      var cancelAction = function() {
+        stagedLink.reset();
+        autoSuggest.close();
+        pagelock.unlock();
+        shade.close();
+      };
+      modal.open({
+        heading: heading,
+        successAction: successAction,
+        cancelAction: cancelAction,
+        actionText: "Save",
+        size: "small",
+        content: form
+      });
+      shade.open({
+        action: function() {
+          stagedLink.reset();
+          autoSuggest.close();
+          pagelock.unlock();
+          modal.close();
+        }
+      });
+    },
+    remove: function(copyStagedLink) {
+      stagedLink.link = JSON.parse(JSON.stringify(copyStagedLink.link));
+      stagedLink.position = JSON.parse(JSON.stringify(copyStagedLink.position));
+      var heading;
+      if (stagedLink.link.name != null && stagedLink.link.name != "") {
+        heading = "Remove " + stagedLink.link.name + " bookmark";
+      } else {
+        heading = "Remove unnamed bookmark";
+      };
+      var successAction = function() {
+        var copyStagedLink = JSON.parse(JSON.stringify(stagedLink));
+        bookmarks.remove.link(copyStagedLink);
+        data.save();
+        mod.edit.check();
+        header.render.button.edit();
+        groupAndItems();
+        render.focus.item.previous.remove(copyStagedLink);
+        stagedLink.reset();
+        control.render.dependents();
+        control.render.class();
+        shade.close();
+        pagelock.unlock();
+      };
+      var cancelAction = function() {
+        stagedLink.reset();
+        shade.close();
+        pagelock.unlock();
+      };
+      modal.open({
+        heading: heading,
+        content: "Are you sure you want to remove this bookmark? This can not be undone.",
+        successAction: successAction,
+        cancelAction: cancelAction,
+        actionText: "Remove",
+        size: "small"
+      });
+      shade.open({
+        action: function() {
+          stagedLink.reset();
+          autoSuggest.close();
+          pagelock.unlock();
+          modal.close();
+        }
+      });
+      pagelock.lock();
     },
     display: {
       letter: function() {
@@ -256,295 +800,6 @@ var link = (function() {
       var html = helper.e("html");
       html.style.setProperty("--link-item-size", state.get().link.item.size + "em");
     },
-    link: function(data, index) {
-      var linkItemOptions = {
-        tag: "div",
-        attr: [{
-          key: "class",
-          value: "link-item"
-        }]
-      };
-      if (data.accent.override) {
-        linkItemOptions.attr.push({
-          key: "style",
-          value: "--theme-accent: " + data.accent.color.r + ", " + data.accent.color.g + ", " + data.accent.color.b
-        });
-        if (invert(data.accent.color, true) == "#000000") {
-          linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-url-text-dark";
-        } else if (invert(data.accent.color, true) == "#ffffff") {
-          linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-url-text-light";
-        };
-      } else {
-        if (invert(state.get().theme.accent.current, true) == "#000000") {
-          linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-url-text-dark";
-        } else if (invert(state.get().theme.accent.current, true) == "#ffffff") {
-          linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-url-text-light";
-        };
-      };
-      var linkItem = helper.makeNode(linkItemOptions);
-      var linkPanelFrontOptions = {
-        tag: "a",
-        attr: [{
-          key: "class",
-          value: "link-panel-front"
-        }, {
-          key: "href",
-          value: data.url
-        }, {
-          key: "tabindex",
-          value: 1
-        }]
-      };
-      if (state.get().link.newTab) {
-        linkPanelFrontOptions.attr.push({
-          key: "target",
-          value: "_blank"
-        });
-      };
-      var linkPanelFront = helper.makeNode(linkPanelFrontOptions);
-      var linkPanelBack = helper.makeNode({
-        tag: "div",
-        attr: [{
-          key: "class",
-          value: "link-panel-back"
-        }]
-      });
-      var linkDisplay = helper.makeNode({
-        tag: "div",
-        attr: [{
-          key: "class",
-          value: "link-display"
-        }]
-      });
-      var linkDisplayLetter = null;
-      var linkDisplayIcon = null;
-      if (data.display == "letter") {
-        linkDisplayLetter = helper.makeNode({
-          tag: "p",
-          text: data.letter,
-          attr: [{
-            key: "class",
-            value: "link-display-letter"
-          }]
-        });
-      } else if (data.display == "icon" && data.icon.prefix != null && data.icon.name != null) {
-        linkDisplayIcon = helper.makeNode({
-          tag: "div",
-          attr: [{
-            key: "class",
-            value: "link-display-icon " + data.icon.prefix + " fa-" + data.icon.name
-          }]
-        });
-      };
-      var linkName = helper.makeNode({
-        tag: "p",
-        text: data.name,
-        attr: [{
-          key: "class",
-          value: "link-name"
-        }]
-      });
-      var linkUrl = helper.makeNode({
-        tag: "div",
-        attr: [{
-          key: "class",
-          value: "link-url"
-        }]
-      });
-      var url = "";
-      if (data.url != null) {
-        url = data.url.replace(/^https?\:\/\//i, "").replace(/\/$/, "");
-      };
-      var linkUrlText = helper.makeNode({
-        tag: "p",
-        text: url,
-        attr: [{
-          key: "class",
-          value: "link-url-text"
-        }, {
-          key: "title",
-          value: url
-        }]
-      });
-      var linkControl = helper.makeNode({
-        tag: "div",
-        attr: [{
-          key: "class",
-          value: "link-control"
-        }]
-      });
-      var linkHandle = helper.makeNode({
-        tag: "div",
-        attr: [{
-          key: "class",
-          value: "button button-small link-control-item link-control-item-handle"
-        }, {
-          key: "tabindex",
-          value: -1
-        }, {
-          key: "title",
-          value: "Drag and drop to reorder"
-        }]
-      });
-      var linkHandleIcon = helper.makeNode({
-        tag: "span",
-        attr: [{
-          key: "class",
-          value: "button-icon icon-reorder"
-        }]
-      });
-      var linkEdit = helper.makeNode({
-        tag: "button",
-        attr: [{
-          key: "class",
-          value: "button button-small link-control-item link-control-item-edit"
-        }, {
-          key: "tabindex",
-          value: -1
-        }, {
-          key: "title",
-          value: "Edit this bookmark"
-        }]
-      });
-      var linkEditIcon = helper.makeNode({
-        tag: "span",
-        attr: [{
-          key: "class",
-          value: "button-icon icon-edit"
-        }]
-      });
-      var linkRemove = helper.makeNode({
-        tag: "button",
-        attr: [{
-          key: "class",
-          value: "button button-small link-control-item link-control-item-remove"
-        }, {
-          key: "tabindex",
-          value: -1
-        }, {
-          key: "title",
-          value: "Remove this bookmark"
-        }]
-      });
-      var linkRemoveIcon = helper.makeNode({
-        tag: "span",
-        attr: [{
-          key: "class",
-          value: "button-icon icon-close"
-        }]
-      });
-      if (data.display == "letter") {
-        linkDisplay.appendChild(linkDisplayLetter);
-      } else if (data.display == "icon" && data.icon.prefix != null && data.icon.name != null) {
-        linkDisplay.appendChild(linkDisplayIcon);
-      };
-      if (state.get().link.item.order == "displayname") {
-        linkPanelFront.appendChild(linkDisplay);
-        linkPanelFront.appendChild(linkName);
-      } else if (state.get().link.item.order == "namedisplay") {
-        linkPanelFront.appendChild(linkName);
-        linkPanelFront.appendChild(linkDisplay);
-      };
-      linkHandle.appendChild(linkHandleIcon);
-      linkControl.appendChild(linkHandle);
-      linkEdit.appendChild(linkEditIcon);
-      linkControl.appendChild(linkEdit);
-      linkRemove.appendChild(linkRemoveIcon);
-      linkControl.appendChild(linkRemove);
-      linkUrl.appendChild(linkUrlText);
-      linkPanelBack.appendChild(linkUrl);
-      linkPanelBack.appendChild(linkControl);
-      linkItem.appendChild(linkPanelFront);
-      linkItem.appendChild(linkPanelBack);
-
-      linkEdit.addEventListener("click", function() {
-        _previousFocus = index;
-        render.item.edit(data);
-      }, false);
-      linkRemove.addEventListener("click", function() {
-        _previousFocus = index;
-        render.remove(data);
-      }, false);
-
-      return linkItem;
-    },
-    edit: function(bookmarkData) {
-      stagedLink.data = JSON.parse(JSON.stringify(bookmarkData));
-      var form = render.form();
-      if (stagedLink.data.display == "letter" || stagedLink.data.display == null) {
-        form.querySelector(".link-form-input-letter").removeAttribute("disabled");
-        form.querySelector(".link-form-input-icon").setAttribute("disabled", "");
-        form.querySelector(".form-group-text").setAttribute("disabled", "");
-        form.querySelector(".link-form-input-icon").setAttribute("disabled", "");
-        helper.addClass(form.querySelector(".link-form-input-icon-helper"), "disabled");
-        form.querySelector(".link-form-icon-clear").setAttribute("disabled", "");
-        form.querySelector(".link-form-text-icon").tabIndex = -1;
-      } else if (stagedLink.data.display == "icon") {
-        form.querySelector(".link-form-input-letter").setAttribute("disabled", "");
-        form.querySelector(".link-form-input-icon").removeAttribute("disabled");
-        form.querySelector(".form-group-text").removeAttribute("disabled");
-        form.querySelector(".link-form-input-icon").removeAttribute("disabled");
-        helper.removeClass(form.querySelector(".link-form-input-icon-helper"), "disabled");
-        form.querySelector(".link-form-icon-clear").removeAttribute("disabled");
-        form.querySelector(".link-form-input-display-icon").checked = true;
-        form.querySelector(".link-form-text-icon").tabIndex = 1;
-      };
-      if (stagedLink.data.icon.name != null && stagedLink.data.icon.prefix != null && stagedLink.data.icon.label != null) {
-        form.querySelector(".link-form-text-icon").appendChild(helper.node("span|class:link-form-icon " + stagedLink.data.icon.prefix + " fa-" + stagedLink.data.icon.name));
-      };
-      form.querySelector(".link-form-input-letter").value = stagedLink.data.letter;
-      form.querySelector(".link-form-input-icon").value = stagedLink.data.icon.label;
-      form.querySelector(".link-form-input-name").value = stagedLink.data.name;
-      form.querySelector(".link-form-input-url").value = stagedLink.data.url;
-      if (stagedLink.data.accent.override) {
-        form.querySelector(".link-form-input-accent-global").checked = false;
-        form.querySelector(".link-form-input-accent-custom").checked = true;
-        form.querySelector(".link-form-input-accent-picker").removeAttribute("disabled");
-        form.querySelector(".link-form-input-accent-hex").removeAttribute("disabled");
-        helper.removeClass(form.querySelector(".link-form-input-accent-helper"), "disabled");
-      } else {
-        form.querySelector(".link-form-input-accent-global").checked = true;
-        form.querySelector(".link-form-input-accent-custom").checked = false;
-        form.querySelector(".link-form-input-accent-picker").setAttribute("disabled", "");
-        form.querySelector(".link-form-input-accent-hex").setAttribute("disabled", "");
-        helper.addClass(form.querySelector(".link-form-input-accent-helper"), "disabled");
-      };
-      if (stagedLink.data.accent.color.r != null && stagedLink.data.accent.color.g != null && stagedLink.data.accent.color.b != null) {
-        form.querySelector(".link-form-input-accent-picker").value = helper.rgbToHex(stagedLink.data.accent.color);
-        form.querySelector(".link-form-input-accent-hex").value = helper.rgbToHex(stagedLink.data.accent.color);
-      };
-      modal.open({
-        heading: "Edit " + stagedLink.data.name,
-        successAction: function() {
-          bookmarks.edit(JSON.parse(JSON.stringify(stagedLink.data)));
-          data.save();
-          render.clear();
-          render.item.all();
-          render.item.tabindex();
-          render.previousFocus();
-          sortable(".link-area");
-          stagedLink.reset();
-          shade.close();
-          pagelock.unlock();
-        },
-        cancelAction: function() {
-          render.previousFocus();
-          stagedLink.reset();
-          autoSuggest.close();
-          shade.close();
-          pagelock.unlock();
-        },
-        actionText: "Save",
-        size: "small",
-        content: form
-      });
-      shade.open({
-        action: function() {
-          modal.close();
-          pagelock.unlock();
-        }
-      });
-    },
     tabindex: function() {
       var allLinkControlItem = helper.eA(".link-control-item");
       if (state.get().link.edit) {
@@ -560,231 +815,588 @@ var link = (function() {
     border: function() {
       var html = helper.e("html");
       html.style.setProperty("--link-item-border", state.get().link.item.border);
-    }
-  };
-
-  render.empty = {
-    search: function() {
-      var div = helper.node("div|class:link-empty");
-      var h1 = helper.node("h1:No matching bookmarks found|class:link-empty-heading");
-      var para = helper.node("p:\"Enter\" to Search " + state.get().header.search.engine[state.get().header.search.engine.selected].name + "|class:small muted");
-      div.appendChild(h1);
-      div.appendChild(para);
-      return div;
     },
-    bookmarks: function() {
-      var div = helper.node("div|class:link-empty");
-      var h1 = helper.node("h1:No bookmarks added|class:link-empty-heading");
-      var para = helper.node("p:Why not add some?|class:small muted");
-      div.appendChild(h1);
-      div.appendChild(para);
-      return div;
+    form: function(override) {
+      var options = {
+        useStagedLink: null
+      };
+      if (override) {
+        options = helper.applyOptions(options, override);
+      };
+      var form = helper.node("form|class:link-form");
+      var fieldset = helper.node("fieldset");
+
+      // group existing
+      var groupExistingRadioWrap = helper.node("div|class:input-wrap");
+      var groupExistingRadio = helper.node("input|class:link-form-input-group-existing,id:link-form-input-group-existing,type:radio,name:link-form-input-group,tabindex:1,checked,value:existing");
+      var groupExistingLable = helper.node("label:Existing group|for:link-form-input-group-existing");
+      var groupExistingFormIndent = helper.node("div|class:form-indent");
+      var groupExistingGroupInputWrap = helper.node("div|class:input-wrap");
+      var groupExistingGroup = helper.node("select|id:link-form-select-group,class:link-form-select-group mb-0,tabindex:1");
+      var groupExistingPositionInputWrap = helper.node("div|class:input-wrap");
+      var groupExistingPositionLabel = helper.node("label:Position|for:link-form-position");
+      var groupExistingPosition = helper.node("select|id:link-form-position,class:link-form-position mb-0,tabindex:1");
+
+      // group new
+      var groupNewRadioWrap = helper.node("div|class:input-wrap");
+      var groupNewRadio = helper.node("input|class:link-form-input-group-new,id:link-form-input-group-new,type:radio,name:link-form-input-group,tabindex:1,value:new");
+      var groupNewLable = helper.node("label:New group|for:link-form-input-group-new");
+      var groupNewFormIndent = helper.node("div|class:form-indent");
+      var groupNewInputWrap = helper.node("div|class:input-wrap");
+      var groupNewInput = helper.node("input|type:text,class:link-form-input-new-group mb-0,id:link-form-input-new-group,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
+
+      // letter
+      var displayLetterRadioWrap = helper.node("div|class:input-wrap");
+      var displayLetterRadio = helper.node("input|class:link-form-input-display-letter,id:link-form-input-display-letter,type:radio,name:link-form-input-display,tabindex:1,checked,value:letter");
+      var displayLetterLable = helper.node("label:Letters|for:link-form-input-display-letter");
+      var displayLetterFormIndent = helper.node("div|class:form-indent");
+      var displayLetterInputWrap = helper.node("div|class:input-wrap");
+      var displayLetterInput = helper.node("input|type:text,class:link-form-input-letter mb-0,id:link-form-input-letter,placeholder:E,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
+
+      // icon
+      var displayIconRadiotWrap = helper.node("div|class:input-wrap");
+      var displayIconRadio = helper.node("input|class:link-form-input-display-icon,id:link-form-input-display-icon,type:radio,name:link-form-input-display,tabindex:1,value:icon");
+      var displayIconLable = helper.node("label:Icon|for:link-form-input-display-icon");
+      var displayIconFormIndent = helper.node("div|class:form-indent");
+      var displayIconInputWrap = helper.node("div|class:input-wrap");
+      var displayIconFormGroup = helper.node("div|class:form-group mb-0 auto-suggest-wrapper");
+      var displayIconInput = helper.node("input|type:text,class:form-group-item-grow link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
+      var displayIconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon disabled,tabindex:-1");
+      var displayIconFormGroupClear = helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");
+      var displayIconFormGroupClearIcon = helper.node("span|class:icon-close");
+      var displayIconHelper = helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-icon-helper form-helper small muted disabled");
+
+      // name
+      var nameInputWrap = helper.node("div|class:input-wrap");
+      var nameLabel = helper.node("label:Name|for:link-form-input-name");
+      var nameInput = helper.node("input|type:text,class:link-form-input-name mb-0,id:link-form-input-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
+
+      // url
+      var urlInputWrap = helper.node("div|class:input-wrap");
+      var urlLabel = helper.node("label:URL|for:link-form-input-url");
+      var urlInput = helper.node("input|type:text,class:link-form-input-url mb-0,id:link-form-input-url,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
+      var urlInputHelper = helper.makeNode({
+        tag: "p",
+        text: "Be sure to use the full URL and include \"http://\" or \"https://\".",
+        attr: [{
+          key: "class",
+          value: "form-helper small muted"
+        }]
+      });
+
+      // accent
+      var accentLabel = helper.node("label:Accent colour");
+      var accentGlobalRadioWrap = helper.node("div|class:input-wrap");
+      var accentGlobalRadio = helper.node("input|class:link-form-input-accent-global,id:link-form-input-accent-global,type:radio,name:link-form-input-accent,tabindex:1,checked,value:global");
+      var accentGlobalLabel = helper.node("label:Global|for:link-form-input-accent-global");
+      var accentCustomInputWrap = helper.node("div|class:input-wrap");
+      var accentCustomRadio = helper.node("input|class:link-form-input-accent-custom,id:link-form-input-accent-custom,type:radio,name:link-form-input-accent,tabindex:1,value:custom");
+      var accentCustomLabel = helper.node("label:Custom|for:link-form-input-accent-custom");
+      var accentColorFormIndent = helper.node("div|class:form-indent");
+      var accentColorInputWrap = helper.node("div|class:input-wrap");
+      var accentColorFormGroup = helper.node("div|class:form-group mb-0");
+      var accentColorPicker = helper.node("input|id:link-form-input-accent-picker,class:form-group-item-half link-form-input-accent-picker mb-0,type:color,value:#000000,tabindex:1,disabled");
+      var accentColorHex = helper.node("input|id:link-form-input-accent-hex,class:form-group-item-half link-form-input-accent-hex mb-0,type:text,placeholder:Hex code,value:#000000,tabindex:1,maxlength:7,disabled");
+      var accentColorInputHelper = helper.node("p:Use this colour to override the global Accent colour.|class:link-form-input-accent-helper form-helper small muted disabled");
+
+      groupExistingRadioWrap.appendChild(groupExistingRadio);
+      groupExistingRadioWrap.appendChild(groupExistingLable);
+      groupExistingGroupInputWrap.appendChild(groupExistingGroup);
+      groupExistingPositionInputWrap.appendChild(groupExistingPositionLabel);
+      groupExistingPositionInputWrap.appendChild(groupExistingPosition);
+      groupExistingFormIndent.appendChild(groupExistingGroupInputWrap);
+      groupExistingFormIndent.appendChild(groupExistingPositionInputWrap);
+      fieldset.appendChild(groupExistingRadioWrap);
+      fieldset.appendChild(groupExistingFormIndent);
+
+      groupNewRadioWrap.appendChild(groupNewRadio);
+      groupNewRadioWrap.appendChild(groupNewLable);
+      groupNewInputWrap.appendChild(groupNewInput);
+      groupNewFormIndent.appendChild(groupNewInputWrap);
+      fieldset.appendChild(groupNewRadioWrap);
+      fieldset.appendChild(groupNewFormIndent);
+      fieldset.appendChild(helper.node("hr"));
+
+      displayLetterRadioWrap.appendChild(displayLetterRadio);
+      displayLetterRadioWrap.appendChild(displayLetterLable);
+      fieldset.appendChild(displayLetterRadioWrap);
+      displayLetterInputWrap.appendChild(displayLetterInput);
+      displayLetterFormIndent.appendChild(displayLetterInputWrap);
+      fieldset.appendChild(displayLetterFormIndent);
+      displayIconRadiotWrap.appendChild(displayIconRadio);
+      displayIconRadiotWrap.appendChild(displayIconLable);
+      fieldset.appendChild(displayIconRadiotWrap);
+      displayIconFormGroupClear.appendChild(displayIconFormGroupClearIcon);
+      displayIconFormGroup.appendChild(displayIconInput);
+      displayIconFormGroup.appendChild(displayIconFormGroupText);
+      displayIconFormGroup.appendChild(displayIconFormGroupClear);
+      displayIconInputWrap.appendChild(displayIconFormGroup);
+      displayIconFormIndent.appendChild(displayIconInputWrap);
+      displayIconFormIndent.appendChild(displayIconHelper);
+      fieldset.appendChild(displayIconFormIndent);
+      fieldset.appendChild(helper.node("hr"));
+      nameInputWrap.appendChild(nameLabel);
+      nameInputWrap.appendChild(nameInput);
+      fieldset.appendChild(nameInputWrap);
+      urlInputWrap.appendChild(urlLabel);
+      urlInputWrap.appendChild(urlInput);
+      fieldset.appendChild(urlInputWrap);
+      fieldset.appendChild(urlInputHelper);
+      fieldset.appendChild(helper.node("hr"));
+      fieldset.appendChild(accentLabel);
+      accentGlobalRadioWrap.appendChild(accentGlobalRadio);
+      accentGlobalRadioWrap.appendChild(accentGlobalLabel);
+      fieldset.appendChild(accentGlobalRadioWrap);
+      accentCustomInputWrap.appendChild(accentCustomRadio);
+      accentCustomInputWrap.appendChild(accentCustomLabel);
+      fieldset.appendChild(accentCustomInputWrap);
+      accentColorFormGroup.appendChild(accentColorPicker);
+      accentColorFormGroup.appendChild(accentColorHex);
+      accentColorInputWrap.appendChild(accentColorFormGroup);
+      accentColorFormIndent.appendChild(accentColorInputWrap);
+      accentColorFormIndent.appendChild(accentColorInputHelper);
+      fieldset.appendChild(accentColorFormIndent);
+      form.appendChild(fieldset);
+
+      var makeGroupOptions = function() {
+        if (bookmarks.get().length > 0) {
+          bookmarks.get().forEach(function(arrayItem, index) {
+            groupExistingGroup.appendChild(helper.node("option:" + arrayItem.name + "|value:" + arrayItem.name));
+          });
+        } else {
+          groupNewRadio.checked = true;
+          groupExistingRadio.setAttribute("disabled", "");
+          groupExistingGroup.setAttribute("disabled", "");
+          helper.addClass(groupExistingPositionLabel, "disabled");
+          groupExistingPosition.setAttribute("disabled", "");
+          groupNewInput.removeAttribute("disabled");
+          stagedLink.position.group.new = true;
+        };
+      };
+
+      var makePostionOptions = function() {
+        if (bookmarks.get().length > 0) {
+          while (groupExistingPosition.lastChild) {
+            groupExistingPosition.removeChild(groupExistingPosition.lastChild);
+          };
+          var optionCount = 0;
+          if (bookmarks.get().length > 0) {
+            if (options.useStagedLink && stagedLink.position.origin.group == stagedLink.position.destination.group) {
+              optionCount = optionCount + bookmarks.get()[stagedLink.position.origin.group].items.length;
+            } else {
+              optionCount = optionCount + bookmarks.get()[stagedLink.position.destination.group].items.length + 1;
+            };
+          } else {
+            optionCount = 1;
+          };
+          for (var i = 1; i <= optionCount; i++) {
+            groupExistingPosition.appendChild(helper.node("option:" + helper.ordinalNumber(i)));
+            if (optionCount == i) {
+              groupExistingPosition.selectedIndex = i - 1;
+            }
+          };
+        };
+      };
+
+      var populateForm = function() {
+        groupExistingGroup.selectedIndex = stagedLink.position.origin.group;
+        groupExistingPosition.selectedIndex = stagedLink.position.origin.item;
+        if (stagedLink.link.display == "letter") {
+          displayLetterInput.removeAttribute("disabled");
+          displayIconInput.setAttribute("disabled", "");
+          helper.addClass(displayIconFormGroupText, "disabled");
+          displayIconInput.setAttribute("disabled", "");
+          helper.addClass(displayIconHelper, "disabled");
+          displayIconFormGroupClear.setAttribute("disabled", "");
+          displayIconFormGroupText.tabIndex = -1;
+        } else if (stagedLink.link.display == "icon") {
+          displayLetterInput.setAttribute("disabled", "");
+          displayIconInput.removeAttribute("disabled");
+          helper.removeClass(displayIconFormGroupText, "disabled");
+          displayIconInput.removeAttribute("disabled");
+          helper.removeClass(displayIconHelper, "disabled");
+          displayIconFormGroupClear.removeAttribute("disabled");
+          displayIconRadio.checked = true;
+          displayIconFormGroupText.tabIndex = 1;
+        };
+        if (stagedLink.link.icon.name != null && stagedLink.link.icon.prefix != null && stagedLink.link.icon.label != null) {
+          displayIconFormGroupText.appendChild(helper.node("span|class:link-form-icon " + stagedLink.link.icon.prefix + " fa-" + stagedLink.link.icon.name));
+        };
+        displayLetterInput.value = stagedLink.link.letter;
+        displayIconInput.value = stagedLink.link.icon.label;
+        nameInput.value = stagedLink.link.name;
+        urlLabel.value = stagedLink.link.url;
+        if (stagedLink.link.accent.override) {
+          accentGlobalRadio.checked = false;
+          accentCustomRadio.checked = true;
+          accentColorPicker.removeAttribute("disabled");
+          accentColorHex.removeAttribute("disabled");
+          helper.removeClass(form.querySelector(".link-form-input-accent-helper"), "disabled");
+        } else {
+          accentGlobalRadio.checked = true;
+          accentCustomRadio.checked = false;
+          accentColorPicker.setAttribute("disabled", "");
+          accentColorHex.setAttribute("disabled", "");
+          helper.addClass(form.querySelector(".link-form-input-accent-helper"), "disabled");
+        };
+        if (stagedLink.link.accent.color.r != null && stagedLink.link.accent.color.g != null && stagedLink.link.accent.color.b != null) {
+          accentColorPicker.value = helper.rgbToHex(stagedLink.link.accent.color);
+          accentColorHex.value = helper.rgbToHex(stagedLink.link.accent.color);
+        };
+      };
+
+      makeGroupOptions();
+      makePostionOptions();
+      if (options.useStagedLink) {
+        populateForm();
+      };
+
+      form.addEventListener("keydown", function(event) {
+        if (event.keyCode == 13) {
+          event.preventDefault();
+          return false;
+        };
+      }, false);
+      groupExistingRadio.addEventListener("change", function(event) {
+        stagedLink.position.destination.group = groupExistingGroup.selectedIndex;
+        stagedLink.position.group.new = false;
+        groupExistingGroup.removeAttribute("disabled");
+        groupExistingPosition.removeAttribute("disabled");
+        helper.removeClass(groupExistingPositionLabel, "disabled");
+        groupNewInput.setAttribute("disabled", "");
+      }, false);
+      groupExistingGroup.addEventListener("change", function(event) {
+        stagedLink.position.destination.group = this.selectedIndex;
+        makePostionOptions();
+        stagedLink.position.destination.item = groupExistingPosition.selectedIndex;
+      }, false);
+      groupExistingPosition.addEventListener("change", function(event) {
+        stagedLink.position.destination.item = this.selectedIndex;
+      }, false);
+      groupNewRadio.addEventListener("change", function(event) {
+        stagedLink.position.destination.group = bookmarks.get().length;
+        stagedLink.position.group.new = true;
+        groupExistingGroup.setAttribute("disabled", "");
+        groupExistingPosition.setAttribute("disabled", "");
+        helper.addClass(groupExistingPositionLabel, "disabled");
+        groupNewInput.removeAttribute("disabled");
+      }, false);
+      groupNewInput.addEventListener("input", function(event) {
+        stagedLink.position.group.name = this.value;
+      }, false);
+      displayLetterRadio.addEventListener("change", function(event) {
+        stagedLink.link.display = this.value;
+      }, false);
+      displayIconRadio.addEventListener("change", function(event) {
+        stagedLink.link.display = this.value;
+      }, false);
+      displayLetterInput.addEventListener("input", function(event) {
+        stagedLink.link.letter = this.value;
+      }, false);
+      nameInput.addEventListener("input", function(event) {
+        stagedLink.link.name = this.value;
+      }, false);
+      urlInput.addEventListener("input", function(event) {
+        stagedLink.link.url = this.value;
+      }, false);
+      accentGlobalRadio.addEventListener("change", function() {
+        stagedLink.link.accent.override = false;
+        accentColorPicker.setAttribute("disabled", "");
+        accentColorHex.setAttribute("disabled", "");
+        helper.addClass(accentColorInputHelper, "disabled");
+      }, false);
+      accentCustomRadio.addEventListener("change", function() {
+        stagedLink.link.accent.override = true;
+        stagedLink.link.accent.color = helper.hexToRgb(accentColorPicker.value);
+        accentColorPicker.removeAttribute("disabled");
+        accentColorHex.removeAttribute("disabled");
+        helper.removeClass(accentColorInputHelper, "disabled");
+      }, false);
+      accentColorPicker.addEventListener("change", function() {
+        if (helper.isHexNumber(this.value)) {
+          stagedLink.link.accent.color = helper.hexToRgb(this.value);
+          accentColorHex.value = this.value;
+        };
+      }, false);
+      accentColorHex.addEventListener("input", function() {
+        if (helper.isHexNumber(this.value)) {
+          stagedLink.link.accent.color = helper.hexToRgb(this.value);
+          accentColorPicker.value = this.value;
+        };
+      }, false);
+      displayIconFormGroupClear.addEventListener("click", function(event) {
+        stagedLink.link.icon.name = null;
+        stagedLink.link.icon.prefix = null;
+        stagedLink.link.icon.label = null;
+        var existingIcon = helper.e(".link-form-icon");
+        if (existingIcon) {
+          existingIcon.remove();
+        };
+        displayIconInput.value = "";
+      }, false);
+      displayLetterRadio.addEventListener("change", function(event) {
+        displayLetterInput.removeAttribute("disabled");
+        displayIconInput.setAttribute("disabled", "");
+        helper.addClass(displayIconFormGroupText, "disabled");
+        helper.addClass(displayIconHelper, "disabled");
+        displayIconFormGroupClear.setAttribute("disabled", "");
+        displayIconFormGroupText.tabIndex = -1;
+      }, false);
+      displayIconRadio.addEventListener("change", function(event) {
+        displayLetterInput.setAttribute("disabled", "");
+        displayIconInput.removeAttribute("disabled");
+        helper.removeClass(displayIconFormGroupText, "disabled");
+        helper.removeClass(displayIconHelper, "disabled");
+        displayIconFormGroupClear.removeAttribute("disabled");
+        displayIconFormGroupText.tabIndex = 1;
+      }, false);
+      autoSuggest.bind.input({
+        input: displayIconInput,
+        type: "fontawesomeIcon",
+        postFocus: displayIconFormGroupText
+      });
+      return form;
     }
   };
 
-  render.previousFocus = function() {
-    if (_previousFocus != null) {
-      var linkPanelFront = helper.eA(".link-panel-front");
-      if (linkPanelFront.length > 0) {
-        if (_previousFocus >= 0) {
-          linkPanelFront[_previousFocus].focus();
-        } else {
-          linkPanelFront[0].focus();
-        };
+  render.all = function() {
+    var linkSection = helper.e(".link");
+    var bookmarksToRender = false;
+    if (state.get().search) {
+      bookmarksToRender = search.get();
+    } else {
+      bookmarksToRender = bookmarks.get();
+    };
+    var make = {
+      bookmarks: function(data) {
+        data.forEach(function(arrayItem, index) {
+          stagedGroup.position.origin = index;
+          stagedGroup.position.destination = index;
+          stagedGroup.position.origin = index;
+          stagedGroup.group = JSON.parse(JSON.stringify(arrayItem));
+          stagedLink.position.origin.group = index;
+          stagedLink.position.destination.group = index;
+          group = render.group.area();
+          if (arrayItem.items.length > 0) {
+            arrayItem.items.forEach(function(arrayItem, index) {
+              stagedLink.link = JSON.parse(JSON.stringify(arrayItem));
+              stagedLink.position.origin.item = index;
+              stagedLink.position.destination.item = index;
+              group.querySelector(".group-body").appendChild(render.item.link());
+            });
+          } else {
+            group.querySelector(".group-body").appendChild(render.empty.item());
+          };
+          linkSection.appendChild(group);
+          stagedGroup.reset();
+          stagedLink.reset();
+        });
+      },
+      empty: {
+        search: function() {
+          linkSection.appendChild(render.empty.search());
+        },
+        bookmarks: function() {
+          linkSection.appendChild(render.empty.group());
+        }
+      }
+    };
+    // if searching
+    if (state.get().search) {
+      // if bookmarks exist to be searched
+      if (bookmarksToRender.total > 0) {
+        make.bookmarks(bookmarksToRender.matching);
       } else {
-        helper.e("body").focus();
+        make.empty.search();
+      };
+    } else {
+      // if bookmarks exist
+      if (bookmarksToRender.length > 0) {
+        make.bookmarks(bookmarksToRender);
+      } else {
+        make.empty.bookmarks();
       };
-      _previousFocus = null;
     };
   };
 
-  render.form = function() {
-    var form = helper.node("form|class:link-form");
-    var fieldset = helper.node("fieldset");
+  render.empty = {
+    group: function() {
+      var group = helper.node("div|class:group");
+      var groupBody = helper.node("div|class:group-body");
+      var linkEmpty = helper.node("div|class:link-empty");
+      var h1 = helper.node("h1:No bookmarks added|class:link-empty-heading");
+      var para = helper.node("p:Why not add some?|class:small muted");
+      linkEmpty.appendChild(h1);
+      linkEmpty.appendChild(para);
+      groupBody.appendChild(linkEmpty);
+      group.appendChild(groupBody);
+      return group;
+    },
+    item: function() {
+      var linkEmpty = helper.node("div|class:link-empty");
+      var para = helper.node("para:Empty group|class:link-empty-heading");
+      linkEmpty.appendChild(para);
+      return linkEmpty;
+    },
+    search: function() {
+      var group = helper.node("div|class:group");
+      var groupBody = helper.node("div|class:group-body");
+      var linkEmpty = helper.node("div|class:link-empty");
+      var h1 = helper.node("h1:No matching bookmarks found|class:link-empty-heading");
+      var para = helper.node("p:\"Enter\" to Search " + state.get().header.search.engine[state.get().header.search.engine.selected].name + "|class:small muted");
+      linkEmpty.appendChild(h1);
+      linkEmpty.appendChild(para);
+      groupBody.appendChild(linkEmpty);
+      group.appendChild(groupBody);
+      return group;
+    }
+  };
 
-    // letter
-    var displayLetterRadioWrap = helper.node("div|class:input-wrap");
-    var displayLetterRadio = helper.node("input|class:link-form-input-display-letter,id:link-form-input-display-letter,type:radio,name:link-form-input-display,tabindex:1,checked,value:letter");
-    var displayLetterLable = helper.node("label:Letters|for:link-form-input-display-letter");
-    var displayLetterFormIndent = helper.node("div|class:form-indent");
-    var displayLetterInputWrap = helper.node("div|class:input-wrap");
-    var displayLetterInput = helper.node("input|type:text,class:link-form-input-letter mb-0,id:link-form-input-letter,placeholder:E,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
-
-    // icon
-    var displayIconRadiotWrap = helper.node("div|class:input-wrap");
-    var displayIconRadio = helper.node("input|class:link-form-input-display-icon,id:link-form-input-display-icon,type:radio,name:link-form-input-display,tabindex:1,value:icon");
-    var displayIconLable = helper.node("label:Icon|for:link-form-input-display-icon");
-    var displayIconFormIndent = helper.node("div|class:form-indent");
-    var displayIconInputWrap = helper.node("div|class:input-wrap");
-    var displayIconFormGroup = helper.node("div|class:form-group mb-0 auto-suggest-wrapper");
-    var displayIconInput = helper.node("input|type:text,class:form-group-item-grow link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
-    var displayIconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon,tabindex:-1,disabled");
-    var displayIconFormGroupClear = helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");
-    var displayIconFormGroupClearIcon = helper.node("span|class:icon-close");
-    var displayIconHelper = helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-icon-helper form-helper small muted disabled");
-
-    // name
-    var nameInputWrap = helper.node("div|class:input-wrap");
-    var nameLabel = helper.node("label:Name|for:link-form-input-name");
-    var nameInput = helper.node("input|type:text,class:link-form-input-name mb-0,id:link-form-input-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
-
-    // url
-    var urlInputWrap = helper.node("div|class:input-wrap");
-    var urlLabel = helper.node("label:URL|for:link-form-input-url");
-    var urlInput = helper.node("input|type:text,class:link-form-input-url mb-0,id:link-form-input-url,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
-    var urlInputHelper = helper.makeNode({
-      tag: "p",
-      text: "Be sure to use the full URL and include \"http://\" or \"https://\".",
-      attr: [{
-        key: "class",
-        value: "form-helper small muted"
-      }]
-    });
-
-    // accent
-    var accentLabel = helper.node("label:Accent colour");
-    var accentGlobalRadioWrap = helper.node("div|class:input-wrap");
-    var accentGlobalRadio = helper.node("input|class:link-form-input-accent-global,id:link-form-input-accent-global,type:radio,name:link-form-input-accent,tabindex:1,checked,value:global");
-    var accentGlobalLabel = helper.node("label:Global|for:link-form-input-accent-global");
-    var accentCustomInputWrap = helper.node("div|class:input-wrap");
-    var accentCustomRadio = helper.node("input|class:link-form-input-accent-custom,id:link-form-input-accent-custom,type:radio,name:link-form-input-accent,tabindex:1,value:custom");
-    var accentCustomLabel = helper.node("label:Custom|for:link-form-input-accent-custom");
-    var accentColorFormIndent = helper.node("div|class:form-indent");
-    var accentColorInputWrap = helper.node("div|class:input-wrap");
-    var accentColorFormGroup = helper.node("div|class:form-group mb-0");
-    var accentColorPicker = helper.node("input|id:link-form-input-accent-picker,class:form-group-item-half link-form-input-accent-picker mb-0,type:color,value:#000000,tabindex:1,disabled");
-    var accentColorHex = helper.node("input|id:link-form-input-accent-hex,class:form-group-item-half link-form-input-accent-hex mb-0,type:text,placeholder:Hex code,value:#000000,tabindex:1,maxlength:7,disabled");
-    var accentColorInputHelper = helper.node("p:Use this colour to override the global Accent colour.|class:link-form-input-accent-helper form-helper small muted disabled");
-
-    displayLetterRadioWrap.appendChild(displayLetterRadio);
-    displayLetterRadioWrap.appendChild(displayLetterLable);
-    fieldset.appendChild(displayLetterRadioWrap);
-    displayLetterInputWrap.appendChild(displayLetterInput);
-    displayLetterFormIndent.appendChild(displayLetterInputWrap);
-    fieldset.appendChild(displayLetterFormIndent);
-    displayIconRadiotWrap.appendChild(displayIconRadio);
-    displayIconRadiotWrap.appendChild(displayIconLable);
-    fieldset.appendChild(displayIconRadiotWrap);
-    displayIconFormGroupClear.appendChild(displayIconFormGroupClearIcon);
-    displayIconFormGroup.appendChild(displayIconInput);
-    displayIconFormGroup.appendChild(displayIconFormGroupText);
-    displayIconFormGroup.appendChild(displayIconFormGroupClear);
-    displayIconInputWrap.appendChild(displayIconFormGroup);
-    displayIconFormIndent.appendChild(displayIconInputWrap);
-    displayIconFormIndent.appendChild(displayIconHelper);
-    fieldset.appendChild(displayIconFormIndent);
-    fieldset.appendChild(helper.node("hr"));
-    nameInputWrap.appendChild(nameLabel);
-    nameInputWrap.appendChild(nameInput);
-    fieldset.appendChild(nameInputWrap);
-    urlInputWrap.appendChild(urlLabel);
-    urlInputWrap.appendChild(urlInput);
-    fieldset.appendChild(urlInputWrap);
-    fieldset.appendChild(urlInputHelper);
-    fieldset.appendChild(helper.node("hr"));
-    fieldset.appendChild(accentLabel);
-    accentGlobalRadioWrap.appendChild(accentGlobalRadio);
-    accentGlobalRadioWrap.appendChild(accentGlobalLabel);
-    fieldset.appendChild(accentGlobalRadioWrap);
-    accentCustomInputWrap.appendChild(accentCustomRadio);
-    accentCustomInputWrap.appendChild(accentCustomLabel);
-    fieldset.appendChild(accentCustomInputWrap);
-    accentColorFormGroup.appendChild(accentColorPicker);
-    accentColorFormGroup.appendChild(accentColorHex);
-    accentColorInputWrap.appendChild(accentColorFormGroup);
-    accentColorFormIndent.appendChild(accentColorInputWrap);
-    accentColorFormIndent.appendChild(accentColorInputHelper);
-    fieldset.appendChild(accentColorFormIndent);
-    form.appendChild(fieldset);
-
-    displayLetterRadio.addEventListener("change", function(event) {
-      stagedLink.data.display = this.value;
-    }, false);
-    displayIconRadio.addEventListener("change", function(event) {
-      stagedLink.data.display = this.value;
-    }, false);
-    displayLetterInput.addEventListener("input", function(event) {
-      stagedLink.data.letter = this.value;
-    }, false);
-    nameInput.addEventListener("input", function(event) {
-      stagedLink.data.name = this.value;
-    }, false);
-    urlInput.addEventListener("input", function(event) {
-      stagedLink.data.url = this.value;
-    }, false);
-    accentGlobalRadio.addEventListener("change", function() {
-      stagedLink.data.accent.override = false;
-      accentColorPicker.setAttribute("disabled", "");
-      accentColorHex.setAttribute("disabled", "");
-      helper.addClass(accentColorInputHelper, "disabled");
-    }, false);
-    accentCustomRadio.addEventListener("change", function() {
-      stagedLink.data.accent.override = true;
-      stagedLink.data.accent.color = helper.hexToRgb(accentColorPicker.value);
-      accentColorPicker.removeAttribute("disabled");
-      accentColorHex.removeAttribute("disabled");
-      helper.removeClass(accentColorInputHelper, "disabled");
-    }, false);
-    accentColorPicker.addEventListener("change", function() {
-      if (helper.isHexNumber(this.value)) {
-        stagedLink.data.accent.color = helper.hexToRgb(this.value);
-        accentColorHex.value = this.value;
-      };
-    }, false);
-    accentColorHex.addEventListener("input", function() {
-      if (helper.isHexNumber(this.value)) {
-        stagedLink.data.accent.color = helper.hexToRgb(this.value);
-        accentColorPicker.value = this.value;
-      };
-    }, false);
-    displayIconFormGroupClear.addEventListener("click", function(event) {
-      stagedLink.data.icon.name = null;
-      stagedLink.data.icon.prefix = null;
-      stagedLink.data.icon.label = null;
-      var existingIcon = helper.e(".link-form-icon");
-      if (existingIcon) {
-        existingIcon.remove();
-      };
-      displayIconInput.value = "";
-    }, false);
-    displayLetterRadio.addEventListener("change", function(event) {
-      displayLetterInput.removeAttribute("disabled");
-      displayIconInput.setAttribute("disabled", "");
-      displayIconFormGroupText.setAttribute("disabled", "");
-      helper.addClass(form.querySelector(".link-form-input-icon-helper"), "disabled");
-      displayIconFormGroupClear.setAttribute("disabled", "");
-      displayIconFormGroupText.tabIndex = -1;
-    }, false);
-    displayIconRadio.addEventListener("change", function(event) {
-      displayLetterInput.setAttribute("disabled", "");
-      displayIconInput.removeAttribute("disabled");
-      displayIconFormGroupText.removeAttribute("disabled");
-      helper.removeClass(form.querySelector(".link-form-input-icon-helper"), "disabled");
-      displayIconFormGroupClear.removeAttribute("disabled");
-      displayIconFormGroupText.tabIndex = 1;
-    }, false);
-    autoSuggest.bind.input({
-      input: displayIconInput,
-      type: "fontawesomeIcon",
-      postFocus: displayIconFormGroupText
-    });
-    return form;
+  render.focus = {
+    group: {
+      previous: {
+        remove: function(copyStagedGroup) {
+          var allGroup = helper.eA(".group");
+          var target = copyStagedGroup.position.origin - 1;
+          if (target < 0) {
+            target = 0;
+          };
+          if (allGroup.length > 0) {
+            if (allGroup[target].querySelector(".group-control-item-remove")) {
+              allGroup[target].querySelector(".group-control-item-remove").focus();
+            };
+          } else {
+            helper.e("body").focus();
+          };
+        },
+        up: function(copyStagedGroup) {
+          var allGroup = helper.eA(".group");
+          var target = copyStagedGroup.position.origin - 1;
+          if (target < 0) {
+            target = 0;
+          };
+          if (allGroup.length > 0) {
+            if (allGroup[target].querySelector(".group-control-item-up")) {
+              allGroup[target].querySelector(".group-control-item-up").focus();
+            };
+          } else {
+            helper.e("body").focus();
+          };
+        }
+      },
+      next: {
+        down: function(copyStagedGroup) {
+          var allGroup = helper.eA(".group");
+          var target = copyStagedGroup.position.origin + 1;
+          if (target > allGroup.length - 1) {
+            target = allGroup.length - 1;
+          };
+          if (allGroup.length > 0) {
+            if (allGroup[target].querySelector(".group-control-item-down")) {
+              allGroup[target].querySelector(".group-control-item-down").focus();
+            };
+          } else {
+            helper.e("body").focus();
+          };
+        }
+      },
+      current: {
+        edit: function(copyStagedGroup) {
+          var allGroup = helper.eA(".group");
+          var target = copyStagedGroup.position.destination;
+          if (allGroup.length > 0) {
+            if (allGroup[target].querySelector(".group-control-item-edit")) {
+              allGroup[target].querySelector(".group-control-item-edit").focus();
+            };
+          } else {
+            helper.e("body").focus();
+          };
+        }
+      }
+    },
+    item: {
+      previous: {
+        remove: function(copyStagedLink) {
+          var allGroup = helper.eA(".group");
+          var allLinkItem = allGroup[copyStagedLink.position.origin.group].querySelectorAll(".link-item");
+          var target = copyStagedLink.position.origin.item - 1;
+          if (target < 0) {
+            target = 0;
+          };
+          if (allLinkItem.length > 0) {
+            if (allLinkItem[target].querySelector(".link-control-item-remove")) {
+              allLinkItem[target].querySelector(".link-control-item-remove").focus();
+            };
+          } else {
+            helper.e("body").focus();
+          };
+        },
+        left: function(copyStagedLink) {
+          var allGroup = helper.eA(".group");
+          var allLinkItem = allGroup[copyStagedLink.position.origin.group].querySelectorAll(".link-item");
+          var target = copyStagedLink.position.origin.item - 1;
+          if (target < 0) {
+            target = 0;
+          };
+          if (allLinkItem.length > 0) {
+            if (allLinkItem[target].querySelector(".link-control-item-left")) {
+              allLinkItem[target].querySelector(".link-control-item-left").focus();
+            };
+          } else {
+            helper.e("body").focus();
+          };
+        }
+      },
+      next: {
+        right: function(copyStagedLink) {
+          var allGroup = helper.eA(".group");
+          var allLinkItem = allGroup[copyStagedLink.position.origin.group].querySelectorAll(".link-item");
+          var target = copyStagedLink.position.origin.item + 1;
+          if (target > allLinkItem.length - 1) {
+            target = allLinkItem.length - 1;
+          };
+          if (allLinkItem.length > 0) {
+            if (allLinkItem[target].querySelector(".link-control-item-right")) {
+              allLinkItem[target].querySelector(".link-control-item-right").focus();
+            };
+          } else {
+            helper.e("body").focus();
+          };
+        }
+      },
+      current: {
+        edit: function(copyStagedLink) {
+          var allGroup = helper.eA(".group");
+          var allLinkItem = allGroup[copyStagedLink.position.destination.group].querySelectorAll(".link-item");
+          var target = copyStagedLink.position.destination.item;
+          if (copyStagedLink.position.group.new) {
+            allLinkItem[0].querySelector(".link-control-item-edit").focus();
+          } else {
+            if (allLinkItem.length > 0) {
+              allLinkItem[target].querySelector(".link-control-item-edit").focus();
+            } else {
+              helper.e("body").focus();
+            };
+          };
+        }
+      }
+    }
   };
 
   render.autoSuggestIconAction = function(autoSuggestData) {
-    stagedLink.data.icon.label = autoSuggestData.label;
-    stagedLink.data.icon.name = autoSuggestData.name;
+    stagedLink.link.icon.label = autoSuggestData.label;
+    stagedLink.link.icon.name = autoSuggestData.name;
     if (autoSuggestData.styles.includes("solid")) {
-      stagedLink.data.icon.prefix = "fas";
+      stagedLink.link.icon.prefix = "fas";
     } else if (autoSuggestData.styles.includes("brands")) {
-      stagedLink.data.icon.prefix = "fab";
+      stagedLink.link.icon.prefix = "fab";
     };
     var existingIcon = helper.e(".link-form-icon");
     if (existingIcon) {
       existingIcon.remove();
     };
     helper.e(".link-form-input-icon").value = autoSuggestData.label;
-    helper.e(".link-form-text-icon").appendChild(helper.node("span|class:link-form-icon " + stagedLink.data.icon.prefix + " fa-" + stagedLink.data.icon.name));
+    helper.e(".link-form-text-icon").appendChild(helper.node("span|class:link-form-icon " + stagedLink.link.icon.prefix + " fa-" + stagedLink.link.icon.name));
     helper.e(".link-form-text-icon").focus();
   };
 
@@ -792,46 +1404,49 @@ var link = (function() {
     open: function() {
       mod.add.open();
       stagedLink.init();
+      var successAction = function() {
+        stagedLink.link.timeStamp = new Date().getTime();
+        bookmarks.mod.add.link(JSON.parse(JSON.stringify(stagedLink)));
+        data.save();
+        mod.add.close();
+        groupAndItems();
+        stagedLink.reset();
+        control.render.dependents();
+        control.render.class();
+        shade.close();
+        pagelock.unlock();
+      };
+      var cancelAction = function() {
+        mod.add.close();
+        stagedLink.reset();
+        autoSuggest.close();
+        shade.close();
+        pagelock.unlock();
+      };
       modal.open({
         heading: "Add a new bookmark",
-        successAction: function() {
-          stagedLink.data.timeStamp = new Date().getTime();
-          bookmarks.add(JSON.parse(JSON.stringify(stagedLink.data)));
-          data.save();
-          mod.add.close();
-          render.clear();
-          render.item.all();
-          render.item.tabindex();
-          sortable(".link-area");
-          control.render.dependents();
-          control.render.class();
-          stagedLink.reset();
-          shade.close();
-          pagelock.unlock();
-        },
-        cancelAction: function() {
-          mod.add.close();
-          stagedLink.reset();
-          autoSuggest.close();
-          shade.close();
-          pagelock.unlock();
-        },
+        successAction: successAction,
+        cancelAction: cancelAction,
         actionText: "Add",
         size: "small",
-        content: render.form()
+        content: render.item.form()
       });
       shade.open({
         action: function() {
           mod.add.close();
-          modal.close();
+          stagedLink.reset();
+          autoSuggest.close();
           pagelock.unlock();
+          modal.close();
         }
       });
+      stagedLink.position.destination.item = helper.e(".link-form-position").selectedIndex;
       pagelock.lock();
     },
     close: function() {
       mod.add.close();
       modal.close();
+      stagedLink.reset();
       pagelock.unlock();
     }
   };
@@ -841,26 +1456,30 @@ var link = (function() {
   };
 
   var tabindex = function() {
+    render.group.tabindex();
     render.item.tabindex();
   };
 
-  var items = function() {
-    render.clear();
-    render.item.all();
-    sortable(".link-area");
+  var groupAndItems = function() {
+    render.clear.item();
+    render.clear.group();
+    render.all();
+    bind.sort.group();
+    bind.sort.item();
+    render.group.tabindex();
+    render.item.tabindex();
   };
 
   var init = function() {
     mod.add.close();
-    render.area.width();
-    render.item.all();
-    render.item.tabindex();
+    groupAndItems();
+    render.group.size();
     render.item.size();
     render.item.display.letter();
     render.item.display.icon();
     render.item.name();
     render.item.border();
-    bind.sort();
+    render.area.width();
   };
 
   // exposed methods
@@ -870,8 +1489,9 @@ var link = (function() {
     render: render,
     add: add,
     edit: edit,
-    items: items,
-    tabindex: tabindex
+    tabindex: tabindex,
+    groupAndItems: groupAndItems,
+    stagedLink: stagedLink
   };
 
 })();
diff --git a/src/js/search.js b/src/js/search.js
index 7d524546..b001d1f8 100644
--- a/src/js/search.js
+++ b/src/js/search.js
@@ -7,7 +7,7 @@ var search = (function() {
     searchInput.addEventListener("input", function() {
       mod.searching.set();
       render.clear.button();
-      link.items();
+      link.groupAndItems();
     }, false);
   };
 
@@ -17,7 +17,7 @@ var search = (function() {
       render.clear.input();
       mod.searching.set();
       render.clear.button();
-      link.items();
+      link.groupAndItems();
     }, false);
   };
 
@@ -35,6 +35,7 @@ var search = (function() {
 
   var get = function() {
     var searchInput = helper.e(".search-input");
+    var string = searchInput.value.toLowerCase().replace(/\s/g, "");
     if (state.get().search) {
       var searchedBookmarks = {
         total: 0,
@@ -42,12 +43,25 @@ var search = (function() {
       };
       searchedBookmarks.total = bookmarks.get().length;
       bookmarks.get().forEach(function(arrayItem, index) {
-        var matchUrl = (arrayItem.url != null) && (arrayItem.url.replace(/^https?\:\/\//i, "").replace(/\/$/, "").toLowerCase().includes(searchInput.value.toLowerCase().replace(/\s/g, "")));
-        var matchName = (arrayItem.name != null) && (arrayItem.name.toLowerCase().replace(/\s/g, "").includes(searchInput.value.toLowerCase().replace(/\s/g, "")));
-        if (matchUrl || matchName) {
-          var bookmarkDataCopy = JSON.parse(JSON.stringify(arrayItem));
-          searchedBookmarks.matching.push(bookmarkDataCopy);
+        var currentGroup = JSON.parse(JSON.stringify(arrayItem));
+        var matchingItems = [];
+        currentGroup.items.forEach(function(arrayItem, index) {
+          var matchUrl = (arrayItem.url != null) && (arrayItem.url.replace(/^https?\:\/\//i, "").replace(/\/$/, "").toLowerCase().includes(string));
+          var matchName = (arrayItem.name != null) && (arrayItem.name.toLowerCase().replace(/\s/g, "").includes(string));
+          if (matchUrl || matchName) {
+            currentGroup.items.splice(index, 1);
+            matchingItems.push(JSON.parse(JSON.stringify(arrayItem)));
+          };
+        });
+        if (matchingItems.length > 0) {
+          currentGroup.items = matchingItems;
+          searchedBookmarks.matching.push(currentGroup);
         };
+        var count = 0;
+        searchedBookmarks.matching.forEach(function(arrayItem, index) {
+          count = count + arrayItem.items.length
+        });
+        searchedBookmarks.total = count;
       });
       return searchedBookmarks;
     };
diff --git a/src/js/state.js b/src/js/state.js
index eaaa1369..24b587a3 100644
--- a/src/js/state.js
+++ b/src/js/state.js
@@ -175,6 +175,12 @@ var state = (function() {
       style: "block",
       orientation: "bottom"
     },
+    group: {
+      name: {
+        show: true,
+        size: 1
+      }
+    },
     layout: {
       alignment: "centercenter",
       order: "headerlink",
diff --git a/src/js/update.js b/src/js/update.js
index 17e89da0..cfe4f279 100644
--- a/src/js/update.js
+++ b/src/js/update.js
@@ -618,6 +618,19 @@ var update = (function() {
         show: true
       };
       return data;
+    },
+    "4.0.0": function(data) {
+      data.bookmarks = [{
+        name: "Group 1",
+        items: data.bookmarks
+      }];
+      data.state.group = {
+        name: {
+          show: true,
+          size: 1
+        }
+      };
+      return data;
     }
   };
 
diff --git a/src/js/version.js b/src/js/version.js
index b0872723..11d3ba35 100644
--- a/src/js/version.js
+++ b/src/js/version.js
@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "3.83.0";
+  var current = "4.0.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");
diff --git a/src/manifest.json b/src/manifest.json
index 44cea957..ab431f60 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "3.83.0",
+  "version": "4.0.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"