diff --git a/packages/uikit-workshop/src/html/index.html b/packages/uikit-workshop/src/html/index.html
index 7c514fd7b..075adf628 100644
--- a/packages/uikit-workshop/src/html/index.html
+++ b/packages/uikit-workshop/src/html/index.html
@@ -30,7 +30,13 @@
   </head>
 
   <body class="pl-c-body">
-    <pl-layout></pl-layout>
+    <pl-layout>
+      <pl-header></pl-header>
+      <div class="pl-c-viewport-modal-wrapper">
+        <pl-iframe></pl-iframe>
+        <pl-drawer></pl-drawer>
+      </div>
+    </pl-layout>
 
     <!-- the template for the modal slider -->
     <script type="text/mustache" class="pl-js-panel-template-base">
diff --git a/packages/uikit-workshop/src/html/partials/base-template.html b/packages/uikit-workshop/src/html/partials/base-template.html
index eefa7ceeb..2fbe8ae72 100755
--- a/packages/uikit-workshop/src/html/partials/base-template.html
+++ b/packages/uikit-workshop/src/html/partials/base-template.html
@@ -37,35 +37,41 @@ <h2 class="pl-c-pattern-info__title">
   <!--end pl-c-pattern-info__description-->
   {{/ patternDescExists }} {{# lineageExists }}
   <p class="pl-c-lineage pl-js-lineage">
-    The <em>{{ patternName }}</em> pattern contains the following patterns: {{#
-    lineage }}
+    The
+    <em>{{ patternName }}</em>
+    pattern contains the following patterns: {{# lineage }}
     <a
       href="{{ lineagePath }}"
       class="pl-c-lineage__link pl-js-lineage-link"
-      data-patternPartial="{{ lineagePattern }}"
+      data-patternpartial="{{ lineagePattern }}"
     >
       {{ lineagePattern }} {{# lineageState }}<span
         class="pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}"
         title="{{ lineageState }}"
-      />{{/ lineageState }} </a
-    ><!--end pl-c-lineage__link-->
+      />
+      {{/ lineageState }}
+    </a>
+    <!--end pl-c-lineage__link-->
     {{# hasComma }}, {{/ hasComma }} {{/ lineage }}
   </p>
   <!--end pl-c-lineage-->
   {{/ lineageExists }} {{# lineageRExists }}
   <p class="pl-c-lineage">
-    The <em>{{ patternName }}</em> pattern is included in the following
-    patterns: {{# lineageR }}
+    The
+    <em>{{ patternName }}</em>
+    pattern is included in the following patterns: {{# lineageR }}
     <a
       href="{{ lineagePath }}"
       class="pl-c-lineage__link pl-js-lineage-link"
-      data-patternPartial="{{ lineagePattern }}"
+      data-patternpartial="{{ lineagePattern }}"
     >
       {{ lineagePattern }} {{# lineageState }}<span
         class="pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}"
         title="{{ lineageState }}"
-      />{{/ lineageState }} </a
-    ><!--end pl-c-lineage__link-->
+      />
+      {{/ lineageState }}
+    </a>
+    <!--end pl-c-lineage__link-->
     {{# hasComma }}, {{/ hasComma }} {{/ lineageR }}
   </p>
   <!--end pl-c-lineage-->
@@ -105,6 +111,7 @@ <h3 class="pl-c-annotations__item-title">{{ title }}</h3>
             id="pl-{{ patternPartial }}-{{ id }}-tab"
             data-patternpartial="{{ patternPartial }}"
             data-panelid="{{ id }}"
+            no-smooth-scroll
             >{{ name }}</a
           >
         </li>
@@ -123,11 +130,40 @@ <h3 class="pl-c-annotations__item-title">{{ title }}</h3>
       >
         <button
           class="pl-c-code-copy-btn pl-js-code-copy-btn"
+          size="small"
           data-clipboard-target="#pl-{{ patternPartial }}-{{ id }}-panel code"
         >
-          Copy
-        </button>
+          <span class="pl-c-code-copy-btn__icon-text">Copy</span>
+          <svg
+            viewbox="0 0 24 24"
+            width="20"
+            height="20"
+            class="pl-c-code-copy-btn__icon pl-c-code-copy-btn__icon--copy"
+          >
+            <title>copy icon</title>
+            <path
+              fill="currentColor"
+              d="M18.984 21v-14.016h-10.969v14.016h10.969zM18.984 5.016c1.078 0 2.016 0.891 2.016 1.969v14.016c0 1.078-0.938 2.016-2.016 2.016h-10.969c-1.078 0-2.016-0.938-2.016-2.016v-14.016c0-1.078 0.938-1.969 2.016-1.969h10.969zM15.984 0.984v2.016h-12v14.016h-1.969v-14.016c0-1.078 0.891-2.016 1.969-2.016h12z"
+            ></path>
+          </svg>
 
+          <svg
+            class="pl-c-code-copy-btn__icon pl-c-code-copy-btn__icon--paste"
+            viewbox="0 0 16 16"
+            width="20"
+            height="20"
+          >
+            <title>clipboard</title>
+            <path
+              fill="currentColor"
+              d="M14.5 2h-4.5c0-1.105-0.895-2-2-2s-2 0.895-2 2h-4.5c-0.276 0-0.5 0.224-0.5 0.5v13c0 0.276 0.224 0.5 0.5 0.5h13c0.276 0 0.5-0.224 0.5-0.5v-13c0-0.276-0.224-0.5-0.5-0.5zM8 1c0.552 0 1 0.448 1 1s-0.448 1-1 1c-0.552 0-1-0.448-1-1s0.448-1 1-1zM14 15h-12v-12h2v1.5c0 0.276 0.224 0.5 0.5 0.5h7c0.276 0 0.5-0.224 0.5-0.5v-1.5h2v12z"
+            ></path>
+            <path
+              fill="currentColor"
+              d="M7 13.414l-3.207-3.707 0.914-0.914 2.293 1.793 4.293-3.793 0.914 0.914z"
+            ></path>
+          </svg>
+        </button>
         {{{ content }}}
       </div>
       <!--end pl-c-tabs__panel-->
diff --git a/packages/uikit-workshop/src/icons/code-collapse.svg b/packages/uikit-workshop/src/icons/code-collapse.svg
new file mode 100644
index 000000000..10e66e73a
--- /dev/null
+++ b/packages/uikit-workshop/src/icons/code-collapse.svg
@@ -0,0 +1,6 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 16" width="20" height="20">
+<title>hide-code</title>
+<path fill="currentColor" d="M13 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path>
+<path fill="currentColor" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>
+<path fill="currentColor" d="M10.958 2.352l1.085 0.296-3 11-1.085-0.296 3-11z"></path>
+</svg>
diff --git a/packages/uikit-workshop/src/icons/code-expand.svg b/packages/uikit-workshop/src/icons/code-expand.svg
new file mode 100644
index 000000000..feb7446ce
--- /dev/null
+++ b/packages/uikit-workshop/src/icons/code-expand.svg
@@ -0,0 +1,5 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20">
+<title>show-code</title>
+<path fill="currentColor" d="M9 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path>
+<path fill="currentColor" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/uikit-workshop/src/icons/copy.svg b/packages/uikit-workshop/src/icons/copy.svg
new file mode 100644
index 000000000..5354f8d85
--- /dev/null
+++ b/packages/uikit-workshop/src/icons/copy.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" width="20" height="20">
+<title>copy</title>
+<path fill="currentColor" d="M18.984 21v-14.016h-10.969v14.016h10.969zM18.984 5.016c1.078 0 2.016 0.891 2.016 1.969v14.016c0 1.078-0.938 2.016-2.016 2.016h-10.969c-1.078 0-2.016-0.938-2.016-2.016v-14.016c0-1.078 0.938-1.969 2.016-1.969h10.969zM15.984 0.984v2.016h-12v14.016h-1.969v-14.016c0-1.078 0.891-2.016 1.969-2.016h12z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/uikit-workshop/src/sass/pattern-lab--iframe-loader.scss b/packages/uikit-workshop/src/sass/pattern-lab--iframe-loader.scss
index b23c481bc..6ab2b8386 100644
--- a/packages/uikit-workshop/src/sass/pattern-lab--iframe-loader.scss
+++ b/packages/uikit-workshop/src/sass/pattern-lab--iframe-loader.scss
@@ -1,17 +1,6 @@
 @import 'scss/01-abstracts/variables';
 @import 'scss/01-abstracts/mixins';
 
-@keyframes animateIn {
-  from {
-    transform: translate3d(-50%, -100%, 0px);
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(-50%, calc(3rem - 50%), 0px);
-  }
-}
-
 @keyframes rotate {
   0% {
     transform: rotate(0deg);
@@ -21,21 +10,34 @@
   }
 }
 
+.pl-c-loader-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.pl-c-loader-wrapper:not(:last-child){
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
 .pl-c-loader {
   z-index: 1000;
   position: absolute;
-  top: 0;
+  top: 50%;
   left: 50%;
   margin: auto;
   max-width: $pl-space * 25;
   width: calc(90vw - #{$pl-doublespace});
   border-radius: $pl-border-radius;
   background: rgba($pl-color-black, 0.9);
-  transform: translate3d(-50%, -100%, 0px);
+  transform: translate3d(-50%, -50%, 0px);
   transition: opacity 0.3s ease, transform 0.3s ease;
   pointer-events: none;
-  opacity: 0;
-  animation: animateIn ease 0.3s forwards;
+  opacity: 1;
 }
 
 .pl-c-loader__content {
diff --git a/packages/uikit-workshop/src/sass/pattern-lab.scss b/packages/uikit-workshop/src/sass/pattern-lab.scss
index b2c84c4ec..959529f50 100755
--- a/packages/uikit-workshop/src/sass/pattern-lab.scss
+++ b/packages/uikit-workshop/src/sass/pattern-lab.scss
@@ -62,6 +62,16 @@
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
+
+  @supports (position: sticky){
+    transform: translateY(-0.7rem);
+    float: right;
+    position: sticky;
+    top: 1rem;
+    right: 0;
+    margin-top: -2rem;
+  }
+
   padding: 0.2rem 0.4rem;
   background-color: $pl-color-gray-07;
   color: $pl-color-gray-87;
@@ -81,9 +91,32 @@
   }
 }
 
+.pl-c-code-copy-btn__icon {
+  height: 1em;
+  width: 1em;
+}
+
+.pl-c-code-copy-btn__icon--paste {
+  display: none;
+
+  .is-copied & {
+    display: inline-block;
+  }
+}
+
+.pl-c-code-copy-btn__icon--copy {
+  display: inline-block;
+
+  .is-copied & {
+    display: none;
+  }
+}
+
 .pl-c-main {
   overflow: hidden;
   max-width: 100vw;
+  padding-left: .5rem;
+  padding-right: .5rem;
 }
 
 /*------------------------------------*\
diff --git a/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss b/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss
index 6cb0e5a73..799c60aea 100644
--- a/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss
+++ b/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss
@@ -80,9 +80,9 @@
   * 1. WIP -- part of broader UI refactor
   */
   &.pl-is-active {
-    max-height: calc(100vh - #{$offset-top} - 1rem);
+    max-height: calc(95vh - #{$offset-top} - 1rem);
     max-height: calc(
-      var(--pl-viewport-height, calc(100vh - #{$offset-top})) - 1rem
+      var(--pl-viewport-height, calc(95vh - #{$offset-top})) - 1rem
     ); /* [1] */
     overflow: auto;
     -webkit-overflow-scrolling: touch;
diff --git a/packages/uikit-workshop/src/sass/scss/02-base/_body.scss b/packages/uikit-workshop/src/sass/scss/02-base/_body.scss
index bda277ca3..64d45da07 100644
--- a/packages/uikit-workshop/src/sass/scss/02-base/_body.scss
+++ b/packages/uikit-workshop/src/sass/scss/02-base/_body.scss
@@ -9,16 +9,17 @@
 */
 .pl-c-html {
   min-height: 100%;
+  display: flex;
 }
 
 .pl-c-body {
   margin: 0;
   padding: 0;
+  width: 100%;
   -webkit-text-size-adjust: 100%;
   display: flex; // Required for IE 11 to display overall PL layout correctly
 }
 
-// @todo: refactor to make colors more generic to PL:
 .pl-c-body--theme-dark,
 :root {
   --theme-bg: #161b3c;
diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-lineage.scss b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-lineage.scss
index 9bd4c18ba..4587bc090 100644
--- a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-lineage.scss
+++ b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-lineage.scss
@@ -6,7 +6,7 @@
  * Pattern Lineage info
  */
 .pl-c-lineage {
-  font-size: $pl-font-size-sm-2;
+  font-size: $pl-font-size-norm;
   line-height: 1.7;
   margin-top: 0;
 }
@@ -16,9 +16,9 @@
  */
 .pl-c-lineage__link {
   font-style: italic;
-  color: inherit;
+  color: inherit; // light vs dark text
   text-decoration: underline;
-  display: inline-flex;
+  display: inline;
   align-items: center;
   transition: opacity $pl-animate-quick ease;
 
diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss b/packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss
index fc667e1ae..e3aa7686d 100644
--- a/packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss
+++ b/packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss
@@ -67,24 +67,22 @@
 * 1) This is the button that twirls down extra pattern info
 */
 .pl-c-pattern__extra-toggle {
-  font-size: 9px;
+  font-size: 0.8rem;
   position: absolute;
   bottom: -1px;
   right: 0;
   z-index: 1;
-  padding: 0.65em 0.65em 0.5em;
-  line-height: 1;
+  padding: 0.4rem 0.5rem;
   color: $pl-color-gray-50;
   background-color: transparent;
+  cursor: pointer;
   font-weight: normal;
-  border: 1px solid $pl-color-gray-13;
-  border-top-left-radius: $pl-border-radius-med;
-  border-top-right-radius: $pl-border-radius-med;
-  transition: background-color $pl-animate-quick ease-out;
-
-  .pl-c-pattern__toggle-icon {
-    display: inline-block;
-  }
+  transition: all $pl-animate-quick ease-out;
+  font-family: $pl-font;
+  border-color: #ddd;
+  border-width: 1px; // fix for different browser defaults 
+  display: flex;
+  align-items: center;
 
   &:hover,
   &:focus,
@@ -95,16 +93,68 @@
 
   &:focus {
     outline: 1px dotted $pl-color-gray-70;
+    outline-offset: -1px;
   }
 
   &.pl-is-active {
     border-bottom-color: $pl-color-gray-02;
+  }
+}
+
+.pl-c-pattern__toggle-icon-wrapper {
+  position: relative;
+  height: 1rem;
+  width: 1rem;
+}
+
+.pl-c-pattern__toggle-icon {
+  height: 0.9rem;
+  width: 0.9rem;
+  display: inline-block;
+  vertical-align: middle;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  transition: transform .1s linear, opacity .1s linear;
+}
+
+.pl-c-pattern__toggle-icon--expand {
+  z-index: 1;
+
+  .pl-is-active & {
+    opacity: 0;
+  }
+}
+
+.pl-c-pattern__toggle-icon--collapse {
+  opacity: 0;
+  z-index: 2;
+  height: 1rem;
+  width: 1rem;
+
+  .pl-is-active & {
+    opacity: 1;
+  }
+}
+
+.pl-c-pattern__extra-toggle-text ~ .pl-c-pattern__toggle-icon-wrapper {
+  margin-left: 0.25rem;
+}
 
-    .pl-c-pattern__toggle-icon {
-      -webkit-transform: rotate(180deg);
-      -ms-transform: rotate(180deg);
-      transform: rotate(180deg);
-    }
+.pl-c-pattern__extra-toggle-text--collapse {
+  display: none;
+
+  .pl-is-active & {
+    display: inline-block;
+  }
+}
+
+.pl-c-pattern__extra-toggle-text--expand {
+  display: inline-block;
+
+  .pl-is-active & {
+    display: none;
   }
 }
 
@@ -126,10 +176,6 @@
     border: 1px solid $pl-color-gray-13;
     border-radius: $pl-border-radius-med;
     border-top-right-radius: 0;
-    max-height: 150rem;
+    max-height: 9999px;
   }
 }
-
-.pl-c-pattern-index {
-  padding: 0 0.5rem;
-}
diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss b/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss
index 86380c946..2cb2965c2 100644
--- a/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss
+++ b/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss
@@ -16,7 +16,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  max-height: 100%;
   flex-grow: 1;
 }
 
@@ -65,6 +65,22 @@
   }
 }
 
+.pl-c-tabs__header {
+  position: sticky;
+  top: 0px;
+  border-top: 1px solid #ddd;
+  margin-left: calc(-0.5rem - 1px);
+  margin-right: calc(-0.5rem - 1px);
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  border: 1px solid #ddd;
+  margin-bottom: .5rem;
+  margin-top: -1px;
+  background-color: inherit;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
 /**
  * Tab Content
  * 1) Tab content contains the tab panels
@@ -74,7 +90,6 @@
   flex-shrink: 1;
   display: flex;
   flex-basis: auto;
-  overflow: auto;
   -webkit-overflow-scrolling: touch;
   height: 100%;
 
@@ -98,7 +113,6 @@
 
   &.pl-is-active-tab {
     display: block;
-    display: flex;
   }
 
   /**
@@ -114,6 +128,7 @@
     border: 0;
     display: block;
     width: 100%;
+    min-height: 100%;
   }
 
   code[class*='language-'] {
diff --git a/packages/uikit-workshop/src/scripts/components/base-component.js b/packages/uikit-workshop/src/scripts/components/base-component.js
index fcbcc9c83..bce76c746 100644
--- a/packages/uikit-workshop/src/scripts/components/base-component.js
+++ b/packages/uikit-workshop/src/scripts/components/base-component.js
@@ -1,8 +1,6 @@
 /* eslint-disable no-unused-vars */
 import { withComponent, shadow, name } from 'skatejs';
-
 import { store } from '../store.js';
-// import { extend, supportsShadowDom } from '../utils/index.js';
 import withLitHtml from './with-lit-html';
 import { LitElement } from 'lit-element';
 import { SkatePreactElement } from './base-skate-preact-element';
diff --git a/packages/uikit-workshop/src/scripts/components/copy-to-clipboard.js b/packages/uikit-workshop/src/scripts/components/copy-to-clipboard.js
index 3cc09ed68..5b8d0b16e 100644
--- a/packages/uikit-workshop/src/scripts/components/copy-to-clipboard.js
+++ b/packages/uikit-workshop/src/scripts/components/copy-to-clipboard.js
@@ -8,7 +8,18 @@ const clipboard = new Clipboard('.pl-js-code-copy-btn');
 clipboard.on('success', function(e) {
   const copyButton = document.querySelectorAll('.pl-js-code-copy-btn');
   for (let i = 0; i < copyButton.length; i++) {
-    copyButton[i].innerText = 'Copy';
+    copyButton[i].querySelector('.pl-c-code-copy-btn__icon-text').innerText =
+      'Copy';
   }
-  e.trigger.textContent = 'Copied';
+  e.trigger.classList.add('is-copied');
+  e.trigger.querySelector('.pl-c-code-copy-btn__icon-text').textContent =
+    'Copied';
+
+  setTimeout(() => {
+    e.trigger.classList.remove('is-copied');
+    e.trigger.querySelector('.pl-c-code-copy-btn__icon-text').textContent =
+      'Copy';
+    e.clearSelection();
+    e.trigger.blur();
+  }, 2000);
 });
diff --git a/packages/uikit-workshop/src/scripts/components/modal-styleguide.js b/packages/uikit-workshop/src/scripts/components/modal-styleguide.js
index 6e5f5daed..c63907a8b 100644
--- a/packages/uikit-workshop/src/scripts/components/modal-styleguide.js
+++ b/packages/uikit-workshop/src/scripts/components/modal-styleguide.js
@@ -19,13 +19,14 @@ export const modalStyleguide = {
    */
   onReady() {
     // go through the panel toggles and add click event to the pattern extra toggle button
-    const els = document.querySelectorAll('.pl-js-pattern-extra-toggle');
-    for (let i = 0; i < els.length; ++i) {
-      els[i].onclick = function(e) {
-        const patternPartial = this.getAttribute('data-patternpartial');
+    const toggles = document.querySelectorAll('.pl-js-pattern-extra-toggle');
+
+    toggles.forEach(toggle => {
+      toggle.addEventListener('click', e => {
+        const patternPartial = toggle.getAttribute('data-patternpartial');
         modalStyleguide.toggle(patternPartial);
-      };
-    }
+      });
+    });
   },
 
   /**
@@ -63,15 +64,17 @@ export const modalStyleguide = {
     content = panelsUtil.addClickEvents(content, patternPartial);
 
     // make sure the modal viewer and other options are off just in case
-    modalStyleguide.close(patternPartial);
+    // modalStyleguide.close(patternPartial);
 
     // note it's turned on in the viewer
     modalStyleguide.active[patternPartial] = true;
 
     // make sure there's no content
     div = document.getElementById('pl-pattern-extra-' + patternPartial);
-    if (div.childNodes.length > 0) {
-      div.removeChild(div.childNodes[0]);
+    if (div && div.childNodes) {
+      if (div.childNodes.length > 0) {
+        div.removeChild(div.childNodes[0]);
+      }
     }
 
     // add the content
@@ -108,9 +111,11 @@ export const modalStyleguide = {
       toggle.classList.remove('pl-is-active');
     }
 
-    document
-      .getElementById('pl-pattern-extra-' + patternPartial)
-      .classList.remove('pl-is-active');
+    if (document.getElementById('pl-pattern-extra-' + patternPartial)) {
+      document
+        .getElementById('pl-pattern-extra-' + patternPartial)
+        .classList.remove('pl-is-active');
+    }
   },
 
   /**
diff --git a/packages/uikit-workshop/src/scripts/components/modal-viewer.js b/packages/uikit-workshop/src/scripts/components/modal-viewer.js
index 631855048..cb29fd21e 100644
--- a/packages/uikit-workshop/src/scripts/components/modal-viewer.js
+++ b/packages/uikit-workshop/src/scripts/components/modal-viewer.js
@@ -167,7 +167,9 @@ export const modalViewer = {
 
       // Clear out any existing children before appending the new panel content
       if (contentContainer.firstChild !== null) {
-        contentContainer.removeChild(contentContainer.firstChild);
+        while (contentContainer.firstChild !== null) {
+          contentContainer.removeChild(contentContainer.firstChild);
+        }
       }
 
       contentContainer.appendChild(templateRendered);
@@ -195,11 +197,6 @@ export const modalViewer = {
    * @param  {Boolean}      if the text in the dropdown should be switched
    */
   refresh(patternData, iframePassback, switchText) {
-    // if this is a styleguide view close the modal
-    if (iframePassback) {
-      modalViewer.close();
-    }
-
     modalViewer.patternData = patternData;
 
     // gather the data that will fill the modal window
@@ -348,9 +345,6 @@ export const modalViewer = {
           data.iframePassback,
           data.switchText
         );
-
-        modalViewer.panelRendered = true;
-        modalViewer.previouslyRenderedPattern = data.patternData.patternPartial;
       }
     } else if (
       data.event !== undefined &&
@@ -382,9 +376,11 @@ export const modalViewer = {
   },
 
   _stateChanged(state) {
-    modalViewer.active = state.app.drawerOpened;
-    if (modalViewer.iframeElement) {
-      modalViewer._handleInitialModalViewerState();
+    if (modalViewer.active !== state.app.drawerOpened) {
+      modalViewer.active = state.app.drawerOpened;
+      if (modalViewer.iframeElement) {
+        modalViewer._handleInitialModalViewerState();
+      }
     }
   },
 };
diff --git a/packages/uikit-workshop/src/scripts/components/pl-copy-to-clipboard/pl-copy-to-clipboard.js b/packages/uikit-workshop/src/scripts/components/pl-copy-to-clipboard/pl-copy-to-clipboard.js
old mode 100644
new mode 100755
index 3cc09ed68..5b8d0b16e
--- a/packages/uikit-workshop/src/scripts/components/pl-copy-to-clipboard/pl-copy-to-clipboard.js
+++ b/packages/uikit-workshop/src/scripts/components/pl-copy-to-clipboard/pl-copy-to-clipboard.js
@@ -8,7 +8,18 @@ const clipboard = new Clipboard('.pl-js-code-copy-btn');
 clipboard.on('success', function(e) {
   const copyButton = document.querySelectorAll('.pl-js-code-copy-btn');
   for (let i = 0; i < copyButton.length; i++) {
-    copyButton[i].innerText = 'Copy';
+    copyButton[i].querySelector('.pl-c-code-copy-btn__icon-text').innerText =
+      'Copy';
   }
-  e.trigger.textContent = 'Copied';
+  e.trigger.classList.add('is-copied');
+  e.trigger.querySelector('.pl-c-code-copy-btn__icon-text').textContent =
+    'Copied';
+
+  setTimeout(() => {
+    e.trigger.classList.remove('is-copied');
+    e.trigger.querySelector('.pl-c-code-copy-btn__icon-text').textContent =
+      'Copy';
+    e.clearSelection();
+    e.trigger.blur();
+  }, 2000);
 });
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js
index 1444fd232..4d2434725 100644
--- a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js
+++ b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js
@@ -52,12 +52,10 @@ const SubSubList = props => {
               )}
             </a>
 
-            {nonViewAllItems.length && (
+            {nonViewAllItems.length >= 1 && (
               <SpecialButton
                 aria-controls={category}
                 onClick={elem.toggleSpecialNavPanel}
-                isOpen={false}
-                isOpenClass={elem.isOpenClass}
               >
                 {category}
               </SpecialButton>
@@ -65,12 +63,7 @@ const SubSubList = props => {
           </div>
         ))
       ) : (
-        <Button
-          aria-controls={category}
-          onClick={elem.toggleNavPanel}
-          isOpen={false}
-          isOpenClass={elem.isOpenClass}
-        >
+        <Button aria-controls={category} onClick={elem.toggleNavPanel}>
           {category}
         </Button>
       )}
@@ -118,9 +111,7 @@ const SubSubList = props => {
 const SpecialButton = props => {
   return (
     <button
-      className={`pl-c-nav__link pl-c-nav__link--section-dropdown pl-js-acc-handle ${
-        props.isOpen ? props.isOpenClass : ''
-      }`}
+      className={`pl-c-nav__link pl-c-nav__link--section-dropdown pl-js-acc-handle`}
       role="tab"
       {...props}
     >
@@ -138,9 +129,7 @@ const SpecialButton = props => {
 const Button = props => {
   return (
     <button
-      className={`pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle ${
-        props.isOpen ? props.isOpenClass : ''
-      }`}
+      className={`pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle`}
       role="tab"
       {...props}
     >
@@ -158,9 +147,7 @@ const Button = props => {
 const ButtonTitle = props => {
   return (
     <button
-      className={`pl-c-nav__link pl-c-nav__link--title pl-js-acc-handle ${
-        props.isOpen ? props.isOpenClass : ''
-      }`}
+      className={`pl-c-nav__link pl-c-nav__link--title pl-js-acc-handle`}
       role="tab"
       {...props}
     >
@@ -185,13 +172,27 @@ class Nav extends BaseComponent {
     self.toggleSpecialNavPanel = self.toggleSpecialNavPanel.bind(self);
     self.handleClick = self.handleClick.bind(self);
     self.handleURLChange = self.handleURLChange.bind(self);
+    self.handlePageClick = self.handlePageClick.bind(self);
     self._hasInitiallyRendered = false;
-    self.handleURLChangeOnRender = false;
     self.receiveIframeMessage = self.receiveIframeMessage.bind(self);
     self.useShadow = false;
     return self;
   }
 
+  handlePageClick(e) {
+    if (
+      e.target.closest('.pl-c-nav') === null &&
+      e.target.closest('.pl-js-nav-trigger') === null &&
+      e.target.closest('svg') === null &&
+      e.target.closest('pl-toggle-layout') === null
+    ) {
+      if (this.layoutMode !== 'vertical' && window.innerWidth > 670) {
+        console.log('handlePageClick + cleaning up...');
+        this.cleanupActiveNav(true);
+      }
+    }
+  }
+
   connected() {
     this.isOpenClass = 'pl-is-active';
     const self = this;
@@ -202,25 +203,23 @@ class Nav extends BaseComponent {
     this.previousActiveLinks = [];
     this.iframeElem = document.querySelector('pl-iframe');
 
-    Mousetrap(this).bind('esc', () => {
-      self.cleanupActiveNav();
-    });
-
     window.addEventListener('message', this.receiveIframeMessage, false);
+    document.body.addEventListener('click', this.handlePageClick);
+  }
 
-    document.body.addEventListener('click', function(e) {
-      if (
-        e.target.closest('.pl-c-nav') === null &&
-        e.target.closest('.pl-js-nav-trigger') === null &&
-        e.target.closest('svg') === null
-      ) {
-        self.cleanupActiveNav();
+  connectedCallback() {
+    super.connectedCallback && super.connectedCallback();
+
+    Mousetrap.bind('esc', () => {
+      if (this.layoutMode !== 'vertical' && window.innerWidth > 670) {
+        this.cleanupActiveNav(true);
       }
     });
   }
 
   disconnected() {
     super.disconnected && super.disconnected();
+    document.body.removeEventListener('click', this.handlePageClick);
     window.removeEventListener('message', this.receiveIframeMessage);
   }
 
@@ -230,8 +229,15 @@ class Nav extends BaseComponent {
     }
 
     if (this.currentPattern !== state.app.currentPattern) {
+      if (
+        state.app.currentPattern !== '' &&
+        this.currentPattern !== state.app.currentPattern &&
+        this._hasInitiallyRendered === true
+      ) {
+        this.handleURLChange(); // so the nav logic is always correct (ex. layout changes)
+      }
+
       this.currentPattern = state.app.currentPattern;
-      this.handleURLChange(); // so the nav logic is always correct (ex. layout changes)
     }
   }
 
@@ -256,11 +262,8 @@ class Nav extends BaseComponent {
 
     if (data.event !== undefined && data.event === 'patternLab.pageClick') {
       try {
-        if (
-          window.innerWidth <= 670 ||
-          (window.innerWidth >= 670 && self.layoutMode !== 'vertical')
-        ) {
-          self.cleanupActiveNav();
+        if (self.layoutMode !== 'vertical') {
+          self.cleanupActiveNav(true);
         }
       } catch (error) {
         console.log(error);
@@ -276,16 +279,14 @@ class Nav extends BaseComponent {
       '.pl-c-nav__link--title.pl-is-active'
     );
 
-    if (topLevelOnly === true) {
+    if (topLevelOnly === true && window.innerWidth > 670) {
       this.navContainer.classList.remove('pl-is-active');
       this.topLevelTriggers.forEach(trigger => {
         trigger.classList.remove('pl-is-active');
+        trigger.nextSibling.classList.remove('pl-is-active');
       });
     } else {
-      if (
-        window.matchMedia('(max-width: calc(42em - 1px))').matches ||
-        this.layoutMode !== 'vertical'
-      ) {
+      if (this.layoutMode !== 'vertical') {
         this.navContainer.classList.remove('pl-is-active');
         this.navAccordionTriggers.forEach(trigger => {
           trigger.classList.remove('pl-is-active');
@@ -306,14 +307,7 @@ class Nav extends BaseComponent {
   }
 
   handleURLChange() {
-    if (!this._hasInitiallyRendered) {
-      this.handleURLChangeOnRender = true;
-      return;
-    }
-
-    const shouldAutoOpenNav =
-      window.matchMedia('(min-width: calc(42em))').matches &&
-      this.layoutMode === 'vertical';
+    const shouldAutoOpenNav = true;
 
     const currentPattern = this.currentPattern;
     const activeLink = document.querySelector(
@@ -421,6 +415,7 @@ class Nav extends BaseComponent {
       ...props.boolean,
       ...{ default: true },
     },
+    currentPattern: props.string,
     layoutMode: props.string,
     collapsedByDefault: {
       ...props.boolean,
@@ -503,9 +498,10 @@ class Nav extends BaseComponent {
       this._hasInitiallyRendered = true;
     }
 
-    if (this.handleURLChangeOnRender === true) {
-      this.handleURLChangeOnRender = false;
-      this.handleURLChange();
+    this.handleURLChange();
+
+    if (this.layoutMode !== 'vertical' && window.innerWidth > 670) {
+      this.cleanupActiveNav(true);
     }
   }
 
@@ -526,8 +522,6 @@ class Nav extends BaseComponent {
               <ButtonTitle
                 aria-controls={item.patternTypeLC}
                 onClick={this.toggleNavPanel}
-                isOpen={false}
-                isOpenClass={this.isOpenClass}
               >
                 {item.patternTypeUC}
               </ButtonTitle>
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.scss b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.scss
index efc581b5d..85c2fb5b1 100644
--- a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.scss
+++ b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.scss
@@ -13,12 +13,10 @@ pl-nav {
     display: flex; // vertically align children
   }
 
-  @media all and (min-width: $pl-bp-med) {
-    .pl-c-body--theme-sidebar & {
-      display: block;
-      max-height: 100%;
-      overflow-y: scroll;
-    }
+  .pl-c-body--theme-sidebar & {
+    display: block;
+    max-height: 100%;
+    overflow-y: scroll;
   }
 }
 
@@ -38,12 +36,60 @@ pl-nav {
   flex-direction: column;
   transition: max-height $pl-animate-quick ease-out;
   flex-shrink: 1;
+  visibility: hidden;
+  transition: transform 0.2s ease-out, opacity 0 0.2s ease-out;
 
-  @media all and (min-width: $pl-bp-med) {
-    .pl-c-body--theme-sidebar & {
-      display: block;
-      display: flex;
-      overflow: hidden;
+  @media all and (max-width: $pl-bp-med) {
+    position: fixed;
+    top: 44px;
+    bottom: 0;
+    height: auto;
+    z-index: -1;
+  }
+
+  &.pl-is-active {
+    visibility: visible;
+  }
+
+  .pl-c-body--theme-sidebar & {
+    display: block;
+    display: flex;
+    overflow: hidden;
+    visibility: visible;
+    flex-shrink: 0;
+
+    @media all and (min-height: 500px) {
+      flex-shrink: 1;
+    }
+
+    @media all and (max-width: $pl-bp-med) {
+      max-width: 240px;
+
+      position: fixed;
+      top: 44px;
+      bottom: 0;
+      height: auto;
+      max-height: calc(100% - 2rem);
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+      transform: translateX(-100%);
+      transition: all 0.3s ease;
+      opacity: 0;
+      box-shadow: 0 3px 6px rgba(21,22,25,.16), 0 3px 6px rgba(21,22,25,.23);
+      visibility: visible;
+
+      &.pl-is-active {
+        transform: translateX(0);
+        opacity: 1;
+        transition: transform 0.2s ease-out;
+      }
+    }
+  }
+
+  @media all and (max-width: $pl-bp-med) {
+    &.pl-is-active {
+      padding-top: 1rem;
+      padding-bottom: 1rem;
     }
   }
 
@@ -51,6 +97,7 @@ pl-nav {
   @media all and (min-width: $pl-bp-med) {
     overflow: visible;
     max-height: none;
+    visibility: visible;
 
     &.pl-is-active {
       overflow: visible;
@@ -65,10 +112,10 @@ pl-nav {
     */
   &.pl-is-active {
     @media all and (max-width: $pl-bp-med - 1) {
-      box-shadow: 0 1px 1px $pl-color-black;
+      box-shadow: 0 2px 4px $pl-color-black;
 
       .pl-c-body--theme-light & {
-        box-shadow: 0 1px 1px darken($pl-color-gray-20, 15%);
+        box-shadow: 0 2px 4px darken($pl-color-gray-20, 15%);
       }
     }
 
@@ -140,9 +187,7 @@ pl-nav {
 .pl-c-nav__link {
   @include linkStyle;
   outline: 0;
-  min-height: 40px;
   color: inherit;
-  line-height: 1.5;
   display: flex;
   align-items: center;
   margin: 0; // remove default button margin in Safari
@@ -194,7 +239,6 @@ pl-nav {
 .pl-c-nav__link--sublink {
   text-transform: none;
   font-size: 0.78rem;
-  line-height: 1;
   padding-left: $pl-space + ($pl-space / 2);
   padding-right: $pl-space + ($pl-space / 2);
 
@@ -237,7 +281,9 @@ pl-nav {
 }
 
 .pl-c-nav__link--overview-wrapper.pl-is-active > .pl-c-nav__link--section-dropdown > .pl-c-nav__link-icon,
-.pl-is-active > .pl-c-nav__link-icon {
+.pl-c-nav__link--title.pl-is-active > .pl-c-nav__link-icon,
+.pl-c-nav__link--section-dropdown.pl-is-active > .pl-c-nav__link-icon,
+.pl-c-nav__link--dropdown.pl-is-active > .pl-c-nav__link-icon {
   transform: rotate(0);
 }
 
@@ -255,18 +301,25 @@ pl-nav {
     top: 100%; /* 1 */
     left: 0;
     min-width: 12rem;
-    border-bottom-left-radius: $pl-border-radius-med;
-    border-bottom-right-radius: $pl-border-radius-med;
-  }
-}
-
+    border-radius: $pl-border-radius-med;
+    border-style: solid;
+    border-width: 1px;
+    box-shadow: 0 2px 5px rgba(0,0,0,.1);
+    transition: all .2s ease;
+    transform: translateY(12px);
+    z-index: 1;
 
-.pl-c-nav__subsublist--dropdow {
-  @media all and (min-width: $pl-bp-med) {
     .pl-c-body--theme-sidebar & {
-      > .pl-c-nav__item {
-        padding-bottom: 0.5rem;
-      }
+      border-width: 0;
+      transform: none;
+    }
+
+    .pl-c-body--theme-light & {
+      border-color: rgba($pl-color-black, .2);
+    }
+
+    .pl-c-body--theme-dark & {
+      border-color: rgba($pl-color-white, .2);
     }
   }
 }
@@ -312,15 +365,14 @@ pl-nav {
 .pl-c-nav__sublist--dropdown.pl-is-active,
 .pl-c-nav__subsublist--dropdown.pl-is-active {
   visibility: visible;
-  max-height: none;
 
   @media all and (min-width: $pl-bp-med) {
-    height: auto;
     max-height: calc(100vh - #{$offset-top} - 2rem); /* 1 */
   }
 
   .pl-c-body--theme-sidebar & {
     max-height: none;
+    transform: translateY(0);
   }
 }
 
@@ -334,6 +386,7 @@ pl-nav {
     border-right-color: $pl-color-gray-87;
     border-left-color: rgba(var(--theme-text-rgb), 0.1);
     border-right-color: rgba(var(--theme-text-rgb), 0.1);
+    transform: translateY(-6px);
   }
 
   .pl-c-body--theme-sidebar & {
@@ -361,7 +414,6 @@ pl-nav {
     top: 0;
     bottom: 0;
     background-color: currentColor;
-    z-index: 1;
     pointer-events: none;
   }
 
@@ -376,7 +428,6 @@ pl-nav {
     bottom: 0;
     border-top: 1px solid rgba(0, 0, 0, .1);
     border-bottom: 1px solid rgba(0, 0, 0, .1);
-    z-index: 1;
     pointer-events: none;
   }
 
@@ -409,7 +460,6 @@ pl-nav {
 
 .pl-c-nav__link--overview.pl-c-nav__link--overview.pl-c-nav__link--overview {
   font-size: 0.85rem;
-  line-height: 1;
   padding-right: 0.5rem;
   padding-left: 1.5rem;
   position: relative;
@@ -421,11 +471,13 @@ pl-nav {
 }
 
 .pl-c-nav__link--title {
-  font-size: 0.85rem;
-  line-height: 1;
+  font-size: 0.8rem;
   color: $pl-color-gray-20;
   color: var(--theme-text, $pl-color-gray-20);
 
+  > .pl-c-nav__link-icon {
+    font-size: inherit;
+  }
 
   .pl-c-body--theme-light & {
     color: $pl-color-black;
@@ -500,3 +552,17 @@ pl-nav {
   position: relative;
   display: flex;
 }
+
+.pl-is-active + .pl-js-acc-panel {
+  visibility: visible;
+  max-height: none;
+
+  .pl-c-body--theme-horizontal & {
+    overflow: auto;
+  }
+
+  @media all and (min-width: $pl-bp-med) {
+    height: auto;
+    max-height: calc(100vh - #{$offset-top} - 2rem); /* 1 */
+  }
+}
diff --git a/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss b/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss
index 47672315c..288aca9b1 100644
--- a/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss
+++ b/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss
@@ -18,18 +18,24 @@ pl-search {
   padding: 0.4rem 0.5rem;
   display: inline-block;
   align-self: stretch;
+  transition: all 0.2s ease;
 
   @media screen and (min-width: $pl-bp-med) {
-    margin-left: 1rem;
     flex-direction: row;
     flex-shrink: 1;
     order: 2; // Display after nav list items on wider screens
     align-self: center;
 
+    // grow in size when focusing on inner input
+    &:focus-within {
+      flex-shrink: .5;
+    }
+
     .pl-c-body--theme-sidebar & {
       flex-direction: column;
       margin-left: 0;
       width: 100%;
+      margin-bottom: 0.5rem;
     }
   }
 }
@@ -77,6 +83,7 @@ pl-search {
   background-color: rgba(var(--theme-text-rgb), 0.05);
   color: rgba(var(--theme-text-rgb), 0.67);
   border-color: rgba(0, 0, 0, .1);
+  border-color: rgba(var(--theme-text-rgb), 0.17);
   text-overflow: ellipsis;
   border-width: 1px;
   border-style: solid;
@@ -87,6 +94,7 @@ pl-search {
   width: 100%;
   outline-offset: -3px;
   outline-width: 2px;
+  border-radius: 3px;
   -webkit-appearance: none; // removes default styling (ex. heavy box shadow) in Safari
 
   @media all and (min-width: 900px) {
@@ -123,12 +131,14 @@ pl-search {
     color: $pl-color-gray-70;
     color: rgba(var(--theme-text-rgb), 0.67);
 
-    &::-moz-input-placeholder {
-      color: $pl-color-gray-87 !important;
+    &::-webkit-input-placeholder {
+      color: black !important;
+      transition: all 0.1s ease;
     }
 
-    &::-webkit-input-placeholder {
-      color: $pl-color-gray-87 !important;
+    &::-moz-input-placeholder {
+      color: black !important;
+      transition: all 0.1s ease;
     }
   }
 
@@ -148,12 +158,13 @@ pl-search {
 
     .pl-c-body--theme-light & {
       color: $pl-color-gray-87 !important;
+    }
 
-      &::-moz-input-placeholder {
-        color: $pl-color-gray-87 !important;
-      }
+    &::-moz-input-placeholder,
+    &::-webkit-input-placeholder {
+      color: $pl-color-white !important;
 
-      &::-webkit-input-placeholder {
+      .pl-c-body--theme-light & {
         color: $pl-color-gray-87 !important;
       }
     }
@@ -187,8 +198,8 @@ pl-search {
   }
 
   &.pl-is-open {
-    max-height: 120rem;
-    max-height: calc(var(--viewport-height) - 4rem);
+    max-height: 90vh;
+    overflow: auto;
     opacity: 1;
   }
 
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.js b/packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.js
index b546d69ef..f3bfdc9a1 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.js
@@ -1,5 +1,5 @@
 import { LitElement, html } from 'lit-element';
-import { Slotify } from './slotify';
+import { Slotify } from '../slotify';
 import styles from './pl-button.scss?external';
 
 // This decorator defines the element.
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.js b/packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.js
index 51a729bb8..85360c25c 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.js
@@ -145,7 +145,37 @@ class Drawer extends LitElement {
                 </pl-button>
               </div>
             </div>
-            <div class="pl-c-drawer__content pl-js-drawer-content"></div>
+            <div class="pl-c-drawer__content pl-js-drawer-content">
+              <div
+                class="pl-c-loader-wrapper pl-c-body--theme-${this.themeMode}"
+              >
+                <div class="pl-c-loader">
+                  <div class="pl-c-loader__content">
+                    <div class="pl-c-loader__message">Loading Code Panel</div>
+                    <div class="pl-c-loader__spinner">
+                      <svg class="pl-c-loader-svg" viewBox="0 0 268 255">
+                        <circle
+                          class="pl-c-loader-svg__outer-circle"
+                          cx="134.2"
+                          cy="127.6"
+                          r="115.1"
+                        />
+                        <circle
+                          class="pl-c-loader-svg__inner-circle"
+                          cx="134.2"
+                          cy="127.6"
+                          r="66.3"
+                        />
+                        <path
+                          class="pl-c-loader-svg__electron"
+                          d="M253,56.3c0,15.6-12.6,28.2-28.2,28.2s-28.2-12.6-28.2-28.2s12.6-28.2,28.2-28.2C240.3,28.1,253,40.7,253,56.3z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -153,6 +183,9 @@ class Drawer extends LitElement {
   }
 
   _stateChanged(state) {
+    if (this.themeMode !== state.app.themeMode) {
+      this.themeMode = state.app.themeMode || 'dark';
+    }
     if (this.drawerOpened !== state.app.drawerOpened) {
       this.drawerOpened = state.app.drawerOpened;
     }
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js b/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js
index 3c78edbce..d90204299 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js
@@ -3,45 +3,87 @@ import { store } from '../../store.js'; // connect to redux
 import { html } from 'lit-html';
 import { BaseLitComponent } from '../../components/base-component';
 import { customElement } from 'lit-element';
+import Mousetrap from 'mousetrap';
 import styles from './pl-header.scss?external';
 
 @customElement('pl-header')
 class Header extends BaseLitComponent {
   constructor() {
     super();
+    this._wasInitiallyRendered = false;
+    this.receiveIframeMessage = this.receiveIframeMessage.bind(this);
+    this.handleExternalClicks = this.handleExternalClicks.bind(this);
     this.toggleNav = this.toggleNav.bind(this);
   }
 
+  static get properties() {
+    return {
+      themeMode: String,
+      isActive: Boolean,
+      currentPattern: String,
+    };
+  }
+
   connectedCallback() {
     super.connectedCallback && super.connectedCallback();
     styles.use();
     const state = store.getState();
+    this.currentPattern = state.app.currentPattern || '';
     this.themeMode = state.app.themeMode || 'dark';
+
+    window.addEventListener('message', this.receiveIframeMessage, false);
+    document.addEventListener('click', this.handleExternalClicks);
+
+    Mousetrap(this).bind('esc', () => {
+      if (window.innerWidth <= 670) {
+        this.isActive = false;
+      }
+    });
   }
 
   disconnectedCallback() {
     super.disconnectedCallback && super.disconnectedCallback();
     styles.unuse();
+    window.removeEventListener('message', this.receiveIframeMessage);
+    document.removeEventListener('click', this.handleExternalClicks);
   }
 
-  static get properties() {
-    return {
-      themeMode: String,
-    };
+  _stateChanged(state) {
+    if (this.themeMode !== state.app.themeMode) {
+      this.themeMode = state.app.themeMode || 'dark';
+    }
+
+    if (this.currentPattern !== state.app.currentPattern) {
+      if (this.isActive === true) {
+        this.isActive = false;
+      }
+      this.currentPattern = state.app.currentPattern;
+    }
   }
 
-  _stateChanged(state) {
-    this.themeMode = state.app.themeMode || 'dark';
-    this.requestUpdate();
+  handleExternalClicks(e) {
+    if (window.innerWidth <= 670) {
+      if (
+        e.target !== this.navToggle &&
+        !e.target.closest('.pl-js-nav-container') &&
+        this.isActive === true
+      ) {
+        this.isActive = false;
+      }
+    }
   }
 
-  shouldUpdate(prevProps, prevState) {
-    return true;
+  firstUpdated() {
+    this.navToggle = this.renderRoot.querySelector('.pl-js-nav-trigger');
+    this.navTarget = this.querySelector('.pl-js-nav-target');
+
+    if (!window.__PRERENDER_INJECTED) {
+      this._wasInitiallyRendered = true;
+    }
   }
 
   toggleNav() {
-    const navTarget = this.querySelector('.pl-js-nav-target');
-    navTarget.classList.toggle('pl-is-active'); // @todo: refactor to have this add based on the component's state
+    this.isActive = !this.isActive;
   }
 
   render() {
@@ -52,12 +94,12 @@ class Header extends BaseLitComponent {
           @click="${this.toggleNav}"
         >
           <pl-icon
-            name="menu"
+            name="${this.isActive ? 'close' : 'menu'}"
             height="20"
             width="20"
             fill="currentColor"
           ></pl-icon>
-          <span class="is-vishidden">Menu</span>
+          <span class="is-vishidden">Toggle Menu</span>
         </button>
 
         ${window.config?.theme?.logo !== false
@@ -84,7 +126,9 @@ class Header extends BaseLitComponent {
           : ''}
 
         <nav
-          class="pl-c-nav pl-js-nav-target pl-js-nav-container"
+          class="pl-c-nav pl-js-nav-target pl-js-nav-container ${this.isActive
+            ? 'pl-is-active'
+            : ''}"
           role="navigation"
         >
           <pl-search max-results="10" placeholder="Find a Pattern"></pl-search>
@@ -94,6 +138,39 @@ class Header extends BaseLitComponent {
       </header>
     `;
   }
+
+  receiveIframeMessage(event) {
+    const self = this;
+
+    // does the origin sending the message match the current host? if not dev/null the request
+    if (
+      window.location.protocol !== 'file:' &&
+      event.origin !== window.location.protocol + '//' + window.location.host
+    ) {
+      return;
+    }
+
+    let data = {};
+    try {
+      data =
+        typeof event.data !== 'string' ? event.data : JSON.parse(event.data);
+    } catch (e) {
+      // @todo: how do we want to handle exceptions here?
+    }
+
+    if (data.event !== undefined && data.event === 'patternLab.pageClick') {
+      try {
+        if (
+          window.innerWidth <= 670 ||
+          (window.innerWidth >= 670 && self.layoutMode !== 'vertical')
+        ) {
+          this.isActive = false;
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    }
+  }
 }
 
 export { Header };
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-icon/pl-icon.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-icon/pl-icon.scss
index ee59bdf43..392a1ba29 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-icon/pl-icon.scss
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-icon/pl-icon.scss
@@ -2,13 +2,14 @@
 
 pl-icon {
   display: block;
-  width: 1em;
-  height: 1em;
+  width: 1.2em;
+  height: 1.2em;
+  pointer-events: none; // so click events aren't disrupted when clicking into an SVG;
 }
 
 // @todo: build out additional icon sizes
 .c-icon {
   display: block;
-  width: 1em;
-  height: 1em;
+  width: 1.2em;
+  height: 1.2em;
 }
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-layout/pl-layout.js b/packages/uikit-workshop/src/scripts/lit-components/pl-layout/pl-layout.js
index 3fd11a591..fe5707275 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-layout/pl-layout.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-layout/pl-layout.js
@@ -16,18 +16,11 @@ class Layout extends BaseLitComponent {
         : window.location.protocol + '//' + window.location.host;
   }
 
-  static get properties() {
-    return {
-      layoutMode: String,
-      themeMode: String,
-    };
-  }
-
   connectedCallback() {
     super.connectedCallback && super.connectedCallback();
     styles.use();
     const state = store.getState();
-    this.layoutMode = state.app.layoutMode || 'vertical';
+    this.layoutMode = state.app.layoutMode;
     this.themeMode = state.app.themeMode;
   }
 
@@ -41,17 +34,30 @@ class Layout extends BaseLitComponent {
   }
 
   _stateChanged(state) {
-    this.layoutMode = state.app.layoutMode || 'vertical';
-    this.themeMode = state.app.themeMode;
-    this.iframeElement = document.querySelector('.pl-js-iframe');
-    const layoutModeClass =
-      this.layoutMode === 'vertical' ? 'sidebar' : 'horizontal';
+    let hasChanged = false;
+    if (this.layoutMode !== state.app.layoutMode) {
+      hasChanged = true;
+      this.layoutMode = state.app.layoutMode || 'vertical';
+    }
+
+    if (this.themeMode !== state.app.themeMode) {
+      hasChanged = true;
+      this.themeMode = state.app.themeMode;
+    }
 
-    const classes = classNames(`pl-c-body--theme-${layoutModeClass}`, {
-      [`pl-c-body--theme-${this.themeMode}`]: this.themeMode !== undefined,
-    });
+    if (hasChanged === true) {
+      hasChanged = false;
+      const layoutModeClass =
+        this.layoutMode === 'vertical' ? 'sidebar' : 'horizontal';
 
-    this.className = classes;
+      const classes = classNames(`pl-c-body--theme-${layoutModeClass}`, {
+        [`pl-c-body--theme-${this.themeMode}`]: this.themeMode !== undefined,
+      });
+
+      this.className = classes;
+    }
+
+    this.iframeElement = document.querySelector('.pl-js-iframe');
 
     if (this.iframeElement) {
       const obj = JSON.stringify({
@@ -61,16 +67,6 @@ class Layout extends BaseLitComponent {
       this.iframeElement.contentWindow.postMessage(obj, this.targetOrigin);
     }
   }
-
-  render() {
-    return html`
-      <pl-header></pl-header>
-      <div class="pl-c-viewport-modal-wrapper">
-        <pl-iframe></pl-iframe>
-        <pl-drawer></pl-drawer>
-      </div>
-    `;
-  }
 }
 
 customElements.define('pl-layout', Layout);
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-layout/pl-layout.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-layout/pl-layout.scss
index d841f0fda..1d4cf9253 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-layout/pl-layout.scss
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-layout/pl-layout.scss
@@ -4,7 +4,7 @@ pl-layout {
   display: flex;
   flex-direction: column;
   width: 100%;
-  min-height: 100vh;
+  min-height: 100%;
   max-width: 100vw;
   background-color: $pl-color-white;
   overflow: initial;
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-info/pl-toggle-info.js b/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-info/pl-toggle-info.js
index b1ab61383..6e6d2fd52 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-info/pl-toggle-info.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-info/pl-toggle-info.js
@@ -67,11 +67,11 @@ class InfoToggle extends LitElement {
     return html`
       <pl-button @click="${this.handleClick}">
         <span slot="default"
-          >${this.isDrawerOpen ? 'Hide' : 'Show'}
-          ${this.isViewallPage ? 'all' : ''} Pattern Info</span
+          >${this.isDrawerOpen ? 'Collapse' : 'Expand'}
+          ${this.isViewallPage ? 'All Panels' : 'Panel'}</span
         >
         <pl-icon
-          name="${this.isDrawerOpen ? 'hide' : 'show'}"
+          name="${this.isDrawerOpen ? 'code-collapse' : 'code-expand'}"
           slot="after"
         ></pl-icon>
       </pl-button>
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.js b/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.js
index e540dce3d..07cd2f9cc 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.js
@@ -18,13 +18,13 @@ class ToolsMenu extends BaseLitComponent {
     return {
       isOpen: Boolean,
       layoutMode: String,
+      currentUrl: String,
     };
   }
 
   _stateChanged(state) {
     if (this.currentUrl !== state.app.currentUrl) {
-      this.currentUrl =
-        state.app.currentUrl || urlHandler.getFileName(patternName);
+      this.currentUrl = state.app.currentUrl;
     }
 
     if (this.layoutMode !== state.app.layoutMode) {
@@ -44,8 +44,7 @@ class ToolsMenu extends BaseLitComponent {
     styles.use();
     const state = store.getState();
     const { ishControlsHide } = window.ishControls;
-    this.currentUrl =
-      state.app.currentUrl || urlHandler.getFileName(patternName);
+    this.currentUrl = state.app.currentUrl || '';
     this.ishControlsHide = ishControlsHide;
 
     window.addEventListener('message', this.receiveIframeMessage, false);
@@ -160,7 +159,11 @@ class ToolsMenu extends BaseLitComponent {
           ${!this.ishControlsHide['views-new']
             ? html`
                 <li class="pl-c-tools__item">
-                  <pl-button href="${this.currentUrl}" target="_blank">
+                  <pl-button
+                    href="${this.currentUrl}"
+                    target="_blank"
+                    class="pl-js-open-new-window"
+                  >
                     Open In New Tab
                     <pl-icon name="new-tab" slot="after"></pl-icon>
                   </pl-button>
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size/pl-viewport-size.js b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size/pl-viewport-size.js
index 3df160994..337047df5 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size/pl-viewport-size.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size/pl-viewport-size.js
@@ -53,13 +53,15 @@ class ViewportSize extends BaseLitComponent {
   }
 
   render() {
-    return html`
-      <form class="pl-c-viewport-size" method="post" action="#">
-        <span class="pl-c-viewport-size__input">${this.px - 40}px</span
-        >&nbsp;/&nbsp;
-        <span class="pl-c-viewport-size__input">${this.em}em</span>
-      </form>
-    `;
+    if (!window.__PRERENDER_INJECTED) {
+      return html`
+        <form class="pl-c-viewport-size" method="post" action="#">
+          <span class="pl-c-viewport-size__input">${this.px - 40}px</span
+          >&nbsp;/&nbsp;
+          <span class="pl-c-viewport-size__input">${this.em}em</span>
+        </form>
+      `;
+    }
   }
 }
 
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.js b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.js
index 9afda5411..233f15af2 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.js
@@ -233,6 +233,9 @@ class IFrame extends BaseLitComponent {
   // Accepted values are 'px' and 'em'
   // 'target' is what inputs to update. Defaults to both
   updateSizeReading(size, unit, target) {
+    if (size === 0) {
+      return;
+    }
     let emSize, pxSize;
 
     if (unit === 'em') {
@@ -339,6 +342,7 @@ class IFrame extends BaseLitComponent {
     this.iframe = this.querySelector('.pl-js-iframe');
     this.iframeContainer = this.querySelector('.pl-js-vp-iframe-container');
     this.iframeCover = this.querySelector('.pl-js-viewport-cover');
+    this.updateSizeReading(this.iframeContainer.clientWidth);
   }
 
   handleIframeLoaded() {
@@ -451,39 +455,6 @@ class IFrame extends BaseLitComponent {
 
     return false;
   }
-
-  // receiveIframeMessage(event) {
-  //   const self = this;
-
-  //   // does the origin sending the message match the current host? if not dev/null the request
-  //   if (
-  //     window.location.protocol !== 'file:' &&
-  //     event.origin !== window.location.protocol + '//' + window.location.host
-  //   ) {
-  //     return;
-  //   }
-
-  //   let data = {};
-  //   try {
-  //     data =
-  //       typeof event.data !== 'string' ? event.data : JSON.parse(event.data);
-  //   } catch (e) {
-  //     // @todo: how do we want to handle exceptions here?
-  //   }
-
-  //   if (data.event !== undefined && data.event === 'patternLab.pageLoad') {
-  //     try {
-  //       // add a slight delay to make sure the URL params have had a chance to update first before updating the current url
-  //       // if(self.usingBrowserNav === true){
-  //       //   self.handleUpdatingCurrentPattern(event.data.details.patternData.patternPartial, true);
-  //       // }
-
-  //       // check and share the initial iframe width once ready
-  //     } catch(error){
-  //       console.log(error);
-  //     }
-  //   }
-  // }
 }
 
 export { IFrame };
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-button/slotify.js b/packages/uikit-workshop/src/scripts/lit-components/slotify.js
similarity index 100%
rename from packages/uikit-workshop/src/scripts/lit-components/pl-button/slotify.js
rename to packages/uikit-workshop/src/scripts/lit-components/slotify.js
diff --git a/packages/uikit-workshop/src/scripts/localstorage.js b/packages/uikit-workshop/src/scripts/localstorage.js
index 0c8d2ddcb..f93c837f0 100644
--- a/packages/uikit-workshop/src/scripts/localstorage.js
+++ b/packages/uikit-workshop/src/scripts/localstorage.js
@@ -43,14 +43,24 @@ export const loadState = () => {
 
     if (state.app.themeMode === undefined) {
       try {
-        if (window.patternlab.config.theme.color !== undefined) {
-          state.app.themeMode = window.patternlab.config.theme.color;
+        if (window.config.theme.color !== undefined) {
+          state.app.themeMode = window.config.theme.color;
         }
       } catch (e) {
         state.app.themeMode = 'dark';
       }
     }
 
+    if (state.app.layoutMode === undefined) {
+      try {
+        if (window.config.theme.layout !== undefined) {
+          state.app.layoutMode = window.config.theme.layout;
+        }
+      } catch (e) {
+        state.app.layoutMode = 'vertical';
+      }
+    }
+
     return state;
   } else {
     return undefined;
diff --git a/packages/uikit-workshop/views-twig/partials/patternSection.twig b/packages/uikit-workshop/views-twig/partials/patternSection.twig
index e085c40c4..bafaefc20 100755
--- a/packages/uikit-workshop/views-twig/partials/patternSection.twig
+++ b/packages/uikit-workshop/views-twig/partials/patternSection.twig
@@ -1,5 +1,5 @@
 <div id="{{ partial.patternPartial }}" class="pl-c-pattern">
-    
+
   <div class="pl-c-pattern__header">
     <h3 class="pl-c-pattern__title">
       <a href="../../patterns/{{ partial.patternLink }}" class="pl-c-pattern__title-link patternLink" data-patternpartial="{{ partial.patternPartial }}" title="Link to Pattern">
@@ -9,7 +9,7 @@
         {% endif %}
       </a>
     </h3>
-    
+
     <!-- @todo: why doesn't PL node have breadcrumbs?? -- keeping in the Twig version -->
     <div class="sg-pattern-breadcrumb pl-c-pattern-breadcrumb">
       {{ partial.patternBreadcrumb }}
@@ -17,8 +17,21 @@
 
 
     <button class="pl-c-pattern__extra-toggle pl-js-pattern-extra-toggle" id="pl-pattern-extra-toggle-{{partial.patternPartial}}" data-patternpartial="{{ partial.patternPartial }}" title="View Pattern Info">
-      <span class="pl-c-pattern__toggle-icon">&#9660;</span>
-    </button><!--end pl-c-pattern__extra-toggle-->
+        <span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--expand">Expand</span>
+        <span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--collapse">Collapse</span>
+        <div class="pl-c-pattern__toggle-icon-wrapper">
+          <svg viewBox="0 0 16 16" width="20" height="20" class="pl-c-pattern__toggle-icon pl-c-pattern__toggle-icon--expand">
+            <path fill="currentColor" d="M9 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path>
+            <path fill="currentColor" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>
+          </svg>
+
+          <svg viewBox="0 0 20 16" width="20" height="20" class="pl-c-pattern__toggle-icon pl-c-pattern__toggle-icon--collapse">
+            <path fill="currentColor" d="M13 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path>
+            <path fill="currentColor" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>
+            <path fill="currentColor" d="M10.958 2.352l1.085 0.296-3 11-1.085-0.296 3-11z"></path>
+          </svg>
+        </div>
+      </button>
   </div><!--end pl-c-pattern__header-->
 
   <div class="pl-c-pattern__extra pl-js-pattern-extra" id="pl-pattern-extra-{{ partial.patternPartial }}"></div><!--end pl-c-pattern__extra-->
diff --git a/packages/uikit-workshop/views/partials/patternSection.mustache b/packages/uikit-workshop/views/partials/patternSection.mustache
old mode 100644
new mode 100755
index 1620cba9f..bdb523877
--- a/packages/uikit-workshop/views/partials/patternSection.mustache
+++ b/packages/uikit-workshop/views/partials/patternSection.mustache
@@ -3,10 +3,10 @@
 	<div class="pl-c-pattern__header">
 
 		<h3 class="pl-c-pattern__title">
-				
+
 			<a href="../../patterns/{{ patternLink }}" class="pl-c-pattern__title-link patternLink" data-patternpartial="{{ patternPartial }}" title="Link to Pattern">
 				{{ patternName }}
-				
+
 				{{# patternState }}
 				<span class="pl-c-pattern-state pl-c-pattern-state--{{ patternState }}" title="{{ patternState }}"></span>
 				{{/ patternState }}
@@ -15,12 +15,25 @@
 
 		</h3><!--end pl-c-pattern__title-->
 
-		<button class="pl-c-pattern__extra-toggle pl-js-pattern-extra-toggle" id="pl-pattern-extra-toggle-{{patternPartial}}" data-patternpartial="{{ patternPartial }}" title="View Pattern Info">
-			<span class="pl-c-pattern__toggle-icon">&#9660;</span>
-		</button><!--end pl-c-pattern__extra-toggle-->
-		
+		<button class="pl-c-pattern__extra-toggle pl-js-pattern-extra-toggle" id="pl-pattern-extra-toggle-{{ patternPartial }}" data-patternpartial="{{ patternPartial }}" title="View Pattern Info">
+			<span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--expand">Expand</span>
+			<span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--collapse">Collapse</span>
+			<div class="pl-c-pattern__toggle-icon-wrapper">
+				<svg viewBox="0 0 16 16" width="20" height="20" class="pl-c-pattern__toggle-icon pl-c-pattern__toggle-icon--expand">
+					<path fill="currentColor" d="M9 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path>
+					<path fill="currentColor" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>
+				</svg>
+
+				<svg viewBox="0 0 20 16" width="20" height="20" class="pl-c-pattern__toggle-icon pl-c-pattern__toggle-icon--collapse">
+					<path fill="currentColor" d="M13 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path>
+					<path fill="currentColor" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>
+					<path fill="currentColor" d="M10.958 2.352l1.085 0.296-3 11-1.085-0.296 3-11z"></path>
+				</svg>
+			</div>
+		</button>
+
 	</div><!--end pl-c-pattern__header-->
-  
+
 	<div class="pl-c-pattern__extra pl-js-pattern-extra" id="pl-pattern-extra-{{ patternPartial }}">
     </div><!--end pl-c-pattern__extra-->
 
