diff --git a/public/style.css b/public/style.css
index cc672218ce..75c521b649 100644
--- a/public/style.css
+++ b/public/style.css
@@ -983,12 +983,14 @@ button {
 }
 
 .keycode-container,
-.keycode-layer {
+.keycode-layer,
+.keycode-layer-container {
   font-size: 10px;
   display: block;
 }
 
 .keycode-container:after,
+.keycode-layer-container:after,
 .keycode-layer:after {
   content: '';
   width: 14px;
diff --git a/src/components/BaseKey.vue b/src/components/BaseKey.vue
index 2ce85ca296..da5970b65a 100644
--- a/src/components/BaseKey.vue
+++ b/src/components/BaseKey.vue
@@ -164,7 +164,7 @@ export default {
           dstIndex: this.id
         });
       } else {
-        this.setKeycode(json.code);
+        this.setKeycode({ _code: json.code, layer: json.layer });
       }
       this.dragleave();
     },
@@ -200,7 +200,7 @@ export default {
     },
     remove() {
       this.setSelected(this.id);
-      this.setKeycode('KC_NO');
+      this.setKeycode({ _code: 'KC_NO' });
     }
   },
   data() {
diff --git a/src/components/Keycode.vue b/src/components/Keycode.vue
index d8fa4102c9..f1aa463c22 100644
--- a/src/components/Keycode.vue
+++ b/src/components/Keycode.vue
@@ -33,7 +33,8 @@ export default {
     width: null,
     name: String,
     classes: String,
-    styles: Object
+    styles: Object,
+    layer: Number
   },
   computed: {
     computedStyles() {
@@ -87,16 +88,19 @@ export default {
       ev.dataTransfer.setDragImage(this.crt, 0, 0);
 
       this.dragging = true;
-      let { name, code, type } = this;
+      let { name, code, type, layer } = this;
       ev.dropEffect = 'copy';
       ev.dataTransfer.dropEffect = 'move';
       ev.dataTransfer.setData(
         'application/json',
-        JSON.stringify({ name, type, code })
+        JSON.stringify({ name, type, code, layer })
       );
     },
     clicked() {
-      this.$store.commit('keymap/setKeycode', this.code);
+      this.$store.commit('keymap/setKeycode', {
+        _code: this.code,
+        layer: this.layer
+      });
     }
   },
   mounted() {
diff --git a/src/components/LayerContainerKey.vue b/src/components/LayerContainerKey.vue
new file mode 100644
index 0000000000..55306c4de1
--- /dev/null
+++ b/src/components/LayerContainerKey.vue
@@ -0,0 +1,103 @@
+<template>
+  <!-- prettier-ignore -->
+  <div
+    draggable
+    :id="myid"
+    class="key key-container"
+    :class="myclasses"
+    :style="mystyles"
+    :title="mytitle"
+    @click="clicked"
+    @dragstart="dragstart"
+    @dragend="dragend"
+    @drop.stop="droppedContents"
+    @dragover.prevent="dragover"
+    @dragenter="dragenter"
+    @dragleave="dragleave"
+    >LT {{ meta.layer }}<div
+      class="key-contents"
+      :class="contentClasses"
+      @dragenter.prevent="dragenterContents"
+      @dragleave.prevent="dragleaveContents"
+      >{{ contents }}</div><div
+        v-if="visible"
+        class="remove"
+        @click.stop="remove"
+      >x</div></div>
+</template>
+<script>
+import isUndefined from 'lodash/isUndefined';
+import { mapMutations } from 'vuex';
+import BaseKey from './BaseKey';
+export default {
+  name: 'layer-container-key',
+  extends: BaseKey,
+  data() {
+    return {
+      value: this.meta.text,
+      contentsInHover: false
+    };
+  },
+  computed: {
+    mytitle() {
+      const contents =
+        (this.meta.contents && this.meta.contents.code) || 'KC_NO';
+      return `LT(${this.meta.layer}, ${contents})`;
+    },
+    contents() {
+      if (this.meta.contents) {
+        return this.formatName(this.meta.contents.name);
+      }
+      return '';
+    },
+    contentClasses() {
+      let classes = [];
+      if (this.contentsInHover) {
+        classes.push('overme');
+      }
+      console.log('contentClasses ', classes);
+      return classes.join(' ');
+    }
+  },
+  methods: {
+    ...mapMutations('keymap', ['setContents']),
+    dragenterContents(e) {
+      if (e.target.classList.contains('key-contents')) {
+        this.contentsInHover = true;
+      }
+    },
+    dragleaveContents() {
+      this.contentsInHover = false;
+    },
+    droppedContents(e) {
+      if (e.target.classList.contains('key-contents')) {
+        console.log('drop on contents ', e);
+        let json = JSON.parse(e.dataTransfer.getData('application/json'));
+        if (isUndefined(json.type)) {
+          this.setContents({
+            index: this.id,
+            key: {
+              name: json.name,
+              code: json.code,
+              type: json.type,
+              layer: json.layer
+            }
+          });
+        } else {
+          // TBD animate error on element
+        }
+        this.dragleave(e);
+        this.dragleaveContents(e);
+        return true;
+      }
+      return this.dropped(e);
+    }
+  }
+};
+</script>
+<style>
+.key-contents.overme {
+  background: #cceecc;
+  border-radius: 4px;
+}
+</style>
diff --git a/src/components/VisualKeymap.vue b/src/components/VisualKeymap.vue
index 7f2fcb6060..959e9179b5 100644
--- a/src/components/VisualKeymap.vue
+++ b/src/components/VisualKeymap.vue
@@ -18,6 +18,7 @@ import BaseKey from '@/components/BaseKey';
 import AnyKey from '@/components/AnyKey';
 import LayerKey from '@/components/LayerKey';
 import ContainerKey from '@/components/ContainerKey';
+import LayerContainerKey from '@/components/LayerContainerKey';
 
 export default {
   name: 'visual-keymap',
@@ -139,6 +140,8 @@ export default {
           return ContainerKey;
         case 'layer':
           return LayerKey;
+        case 'layer-container':
+          return LayerContainerKey;
         case 'text':
           return AnyKey;
         default:
diff --git a/src/jquery.js b/src/jquery.js
index ea6d0c7b29..1e52890bad 100644
--- a/src/jquery.js
+++ b/src/jquery.js
@@ -55,7 +55,7 @@ function generateKeypressHandler(keycode) {
         return;
       }
 
-      store.commit('keymap/setKeycode', meta.code);
+      store.commit('keymap/setKeycode', { _code: meta.code });
     }
   };
 }
@@ -102,7 +102,7 @@ function setLayerToNonEmpty(_layer) {
 */
 
 function newAnyKey(keycode) {
-  var anyKey = store.getters['keycodes/lookupKeycode']('text');
+  const anyKey = store.getters['keycodes/lookupKeycode']('text');
   // make a copy otherwise it uses a reference
   return Object.assign({}, anyKey, { text: keycode });
 }
@@ -121,6 +121,22 @@ function newKey(metadata, keycode, obj) {
   return key;
 }
 
+// newLayerContainerKey combines aspects of a layer and a container key
+// We pre-assign the layers to make the UI easier to implement.
+function newLayerContainerKey(keycode, internal) {
+  const internals = internal.split(',');
+  const LCKey = store.getters['keycodes/lookupKeycode'](
+    `${keycode}(${internals[0]},kc)`
+  );
+
+  let contents = store.getters['keycodes/lookupKeycode'](internals[1]);
+  if (isUndefined(contents)) {
+    contents = store.getters['keycodes/lookupKeycode']('KC_NO');
+  }
+  let { code, layer, name, type } = LCKey;
+  return Object.assign({ code, layer, name, type, contents: contents });
+}
+
 function parseKeycode(keycode, stats) {
   let metadata;
 
@@ -138,6 +154,10 @@ function parseKeycode(keycode, stats) {
 
     //Check whether it is a layer switching code or combo keycode
     if (internal.includes('KC')) {
+      // Layer Tap keycode
+      if (maincode === 'LT') {
+        return newLayerContainerKey(maincode, internal);
+      }
       // combo keycode
       metadata = store.getters['keycodes/lookupKeycode'](internal);
       if (metadata === undefined) {
diff --git a/src/scss/colorways.scss b/src/scss/colorways.scss
index b8cff49398..3c50077cbc 100644
--- a/src/scss/colorways.scss
+++ b/src/scss/colorways.scss
@@ -235,14 +235,16 @@
 .gmk-wob-key {
   background: $color-gmk-abs-CR;
   color: $color-gmk-abs-WS1;
-  input {
-    background: lighten($color-gmk-abs-CR, 40%);
+  input, .key-contents {
+    color: $color-gmk-abs-CR;
+    background: lighten($color-gmk-abs-CR, 60%);
   }
 }
 .gmk-wob-mod {
   background: $color-gmk-abs-CR;
   color: $color-gmk-abs-WS1;
-  input {
+  input, .key-contents {
+    color: $color-gmk-abs-CR;
     background: lighten($color-gmk-abs-CR, 40%);
   }
 }
@@ -269,14 +271,14 @@
 .gmk-olivetti-key {
   background: $color-gmk-abs-CP;
   color: $color-gmk-abs-V4;
-  input {
+  input, .key-contents {
     background: lighten($color-gmk-abs-CP, 40%);
   }
 }
 .gmk-olivetti-mod {
   background: $color-gmk-abs-U9;
   color: $color-gmk-abs-V4;
-  input {
+  input, .key-contents {
     background: lighten($color-gmk-abs-U9, 40%);
   }
 }
@@ -286,14 +288,15 @@
 .gmk-olivia-key {
   background: $color-gmk-abs-CP;
   color: #363434;
-  input {
+  input, .key-contents {
     background: lighten($color-gmk-abs-CP, 40%);
   }
 }
 .gmk-olivia-mod {
   background: #363434;
   color: #e8c4b8;
-  input {
+  input, .key-contents {
+    color: lighten(#e8c4b8, 20%);
     background: lighten(#363434, 40%);
   }
 }
@@ -327,10 +330,18 @@
 .gmk-metaverse-key {
   background: $color-gmk-abs-WS1;
   color: $color-gmk-abs-CR;
+  input, .key-contents {
+    background: $color-gmk-abs-WS1;
+    color: $color-gmk-abs-CR;
+  }
 }
 .gmk-metaverse-mod {
   background: $color-gmk-abs-CR;
   color: $color-gmk-abs-WS1;
+  input, .key-contents {
+    color: $color-gmk-abs-WS1;
+    background: lighten($color-gmk-abs-CR, 40%);
+  }
 }
 .gmk-metaverse-accent {
   background: $color-gmk-abs-RO2;
diff --git a/src/store/modules/keycodes/quantum.js b/src/store/modules/keycodes/quantum.js
index 49ce0a1f44..3325533a64 100644
--- a/src/store/modules/keycodes/quantum.js
+++ b/src/store/modules/keycodes/quantum.js
@@ -1,3 +1,13 @@
+// make a Layer Tap Key Keycode Definition
+function makeLT(layer) {
+  return {
+    name: `LT ${layer}`,
+    code: `LT(${layer},kc)`,
+    type: 'layer-container',
+    layer: layer,
+    title: `kc on tap, switch to layer ${layer} while held`
+  };
+}
 export default [
   { label: 'Quantum', width: 'label', group: true },
 
@@ -21,7 +31,7 @@ export default [
     title: 'Manually enter any QMK keycode'
   },
 
-  { label: 'Layer functions', width: 'label' },
+  { label: 'Layer and Layer Tap functions', width: 'label' },
 
   {
     name: 'MO',
@@ -67,6 +77,26 @@ export default [
     title: 'Switch to layer for one keypress'
   },
 
+  { width: 500 },
+
+  makeLT(0),
+  makeLT(1),
+  makeLT(2),
+  makeLT(3),
+  makeLT(4),
+  makeLT(5),
+  makeLT(6),
+  makeLT(7),
+  { width: 250 },
+  makeLT(8),
+  makeLT(9),
+  makeLT(10),
+  makeLT(11),
+  makeLT(12),
+  makeLT(13),
+  makeLT(14),
+  makeLT(15),
+
   {
     label:
       'Mod key combinations (A = Alt, C = Control, G = Windows/Command, S = Shift)',
diff --git a/src/store/modules/keymap.js b/src/store/modules/keymap.js
index 3ffa3b83cf..5f4e940707 100644
--- a/src/store/modules/keymap.js
+++ b/src/store/modules/keymap.js
@@ -62,7 +62,10 @@ const getters = {
           function(acc, key, i) {
             var keycode = key.code;
             if (keycode) {
-              if (keycode.indexOf('(kc)') !== -1) {
+              if (
+                keycode.indexOf('(kc)') !== -1 ||
+                keycode.indexOf(',kc)') !== -1
+              ) {
                 if (key.contents) {
                   keycode = keycode.replace('kc', key.contents.code);
                 } else {
@@ -122,7 +125,7 @@ const mutations = {
   setSelected(state, index) {
     state.selectedIndex = index;
   },
-  setKeycode(state, _code) {
+  setKeycode(state, { _code, layer }) {
     if (isUndefined(state.selectedIndex)) {
       return;
     }
@@ -136,6 +139,12 @@ const mutations = {
     if (type === 'layer') {
       Vue.set(state.keymap[state.layer][state.selectedIndex], 'layer', 0);
     }
+    if (type === 'layer-container') {
+      if (state.keymap[layer] === undefined) {
+        mutations.initLayer(state, layer);
+      }
+      Vue.set(state.keymap[state.layer][state.selectedIndex], 'layer', layer);
+    }
     mutations.setSelected(state, undefined);
     mutations.setDirty(state);
   },