diff --git a/src/styles-new/_constants-snow.scss b/src/styles-new/_constants-snow.scss
index b8059b6c6d..3569665b0d 100644
--- a/src/styles-new/_constants-snow.scss
+++ b/src/styles-new/_constants-snow.scss
@@ -236,7 +236,7 @@ $scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
 
 // Splitter
 $splitterD: 7px;
-$splitterCollapseBtnD: (10px, 35px);
+$splitterCollapseBtnD: (15px, 35px);
 $splitterHandleD: 2px;
 $splitterGrippyD: ($splitterHandleD - 4, 75px, 50px); // thickness, length, min-length
 $colorSplitterBaseBg: $colorBodyBg;
@@ -244,9 +244,9 @@ $colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);
 $colorSplitterFg: $colorBodyBg;
 $colorSplitterHover: $colorKey; // pullForward($colorSplitterBg, $hoverRatioPercent * 2);
 $colorSplitterActive: $colorKey;
-$colorSplitterButtonBg: rgba($colorBodyFg, 0.1); //pullForward($colorSplitterBaseBg, 20%);
-$colorSplitterButtonFg: $colorBodyFg;
-$colorSplitterButtonHoverBg: rgba($colorKey, 0.5);
+$colorSplitterButtonBg: $colorSplitterBg; //rgba($colorBodyFg, 0.1); //pullForward($colorSplitterBaseBg, 20%);
+$colorSplitterButtonFg: $colorBodyBg; //rgba($colorBodyFg, 0.6);
+$colorSplitterButtonHoverBg: rgba($colorKey, 1);
 $colorSplitterButtonHoverFg: $colorBodyBg;
 $colorSplitterGrippy: pullForward($colorSplitterBaseBg, 30%);
 $splitterShdw: none;
diff --git a/src/ui/components/controls/pane.vue b/src/ui/components/controls/pane.vue
index f7d6afe7c3..8fcc2d8b1d 100644
--- a/src/ui/components/controls/pane.vue
+++ b/src/ui/components/controls/pane.vue
@@ -14,7 +14,9 @@
         </div>
         <a class="l-pane__collapse-button"
            @click="toggleCollapse"
-           v-if="collapsable"></a>
+           v-if="collapsable">
+            <span class="l-pane__label">{{ label }}</span>
+        </a>
         <div class="l-pane__contents">
             <slot></slot>
         </div>
@@ -31,12 +33,14 @@
         pointer-events: inherit;
         transition: transOut;
 
-        &__handle {
-            // __handle doesn't appear in mobile
+        &__handle,
+        &__label {
+            // __handle and __label don't appear in mobile
             display: none;
         }
 
         &__collapse-button {
+            // Mobile-first
             position: absolute;
             display: flex;
             align-items: center;
@@ -62,6 +66,7 @@
         /************************ CONTENTS */
         &__contents {
             opacity: 1;
+            padding: $interiorMargin;
             pointer-events: inherit;
             transition: opacity 250ms ease 250ms;
             height: 100%;
@@ -91,6 +96,7 @@
                 transition: $transOut;
 
                 &:before {
+                    // Extended hit area
                     content: '';
                     display: block;
                     position: absolute;
@@ -106,12 +112,16 @@
             &__collapse-button {
                 background: $colorSplitterButtonBg;
                 color: $colorSplitterButtonFg;
+                font-size: nth($splitterCollapseBtnD, 1) * .7;
+                position: relative;
+                justify-content: start;
                 transition: $transOut;
 
-                &:before {
-                    content: $glyph-icon-arrow-right;
+                &:after {
+                    // Close icon
+                    content: $glyph-icon-x;
                     font-family: symbolsfont;
-                    font-size: .5rem;
+                    font-size: .8em;
                 }
 
                 &:hover {
@@ -121,6 +131,14 @@
                 }
             }
 
+            &__label {
+                // Name of the pane
+                display: block;
+                text-transform: uppercase;
+                transform-origin: top left;
+                flex: 1 0 90%;
+            }
+
             &[class*="--collapsed"] {
                 $d: nth($splitterCollapseBtnD, 1);
                 flex-basis: $d;
@@ -135,21 +153,6 @@
             &[class*="--horizontal"] {
                 $splitterHorzPad: nth($splitterCollapseBtnD, 1) + $interiorMargin;
 
-                &[class*="--collapsed"] {
-                    > .l-pane__handle {
-
-                    }
-
-                    > .l-pane__collapse-button {
-                        bottom: 0; height: auto;
-                        border-radius: unset;
-
-                        &:before {
-                            transform: scaleX(-1);
-                        }
-                    }
-                }
-
                 > .l-pane__handle {
                     cursor: col-resize;
                     top: 0;
@@ -166,56 +169,45 @@
                 }
 
                 > .l-pane__collapse-button {
-                    //border-bottom-right-radius: $controlCr;
-                    bottom: 0;
-                    height: auto;
-                    width: nth($splitterCollapseBtnD, 1);
+                    height: nth($splitterCollapseBtnD, 1);
+                    padding: $interiorMarginSm $interiorMarginSm;
+                }
+
+                &[class*="--collapsed"] {
+                    > .l-pane__collapse-button {
+                        position: absolute;
+                        bottom: 0; left: 0;
+                        height: auto;
+
+                        [class*="label"] {
+                            position: absolute;
+                            transform: translate($interiorMarginLg, 15px) rotate(90deg);
+                            top: 0;
+                        }
+
+                        &:after {
+                            content: $glyph-icon-plus;
+                            position: absolute;
+                            top: $interiorMarginSm;
+
+                        }
+                    }
                 }
 
                 /************************** Horizontal Splitter Before */
                 &[class*="-before"] {
-                    padding-left: $splitterHorzPad;
-
-                    &.l-pane--holds-multipane {
-                        padding-left: nth($splitterCollapseBtnD, 1);
-                    }
-
-                    > .l-pane__handle,
-                    > .l-pane__collapse-button {
+                    > .l-pane__handle {
                         left: 0;
                         transform: translateX(floor($splitterHandleD / -2)); // Center over the pane edge
                     }
-
-                    &[class*="--collapsed"] {
-                        > .l-pane__collapse-button {
-                           // transform: scaleX(-1);
-                        }
-                    }
                 }
 
                 /************************** Horizontal Splitter After */
                 &[class*="-after"] {
-                    padding-right: $splitterHorzPad;
-
-                    &.l-pane--holds-multipane {
-                        padding-right: nth($splitterCollapseBtnD, 1);
-                    }
-
-                    > .l-pane__handle,
-                    > .l-pane__collapse-button {
+                    > .l-pane__handle {
                         right: 0;
                         transform: translateX(floor($splitterHandleD / 2));
                     }
-
-                    > .l-pane__collapse-button {
-                        transform: scaleX(-1);
-                    }
-
-                    &[class*="--collapsed"] {
-                        > .l-pane__collapse-button {
-                           // transform: scaleX(1);
-                        }
-                    }
                 }
             }
 
@@ -235,11 +227,6 @@
                     }
                 }
 
-                > .l-pane__collapse-button {
-                    width: nth($splitterCollapseBtnD, 2);
-                    height: nth($splitterCollapseBtnD, 1);
-                }
-
             }
         } // Ends .body.desktop
     } // Ends .l-pane
@@ -254,7 +241,8 @@ export default {
                 return ['before', 'after'].indexOf(value) !== -1;
             }
         },
-        collapsable: Boolean
+        collapsable: Boolean,
+        label: String
     },
     data() {
         return {
@@ -264,11 +252,6 @@ export default {
     beforeMount() {
         this.type = this.$parent.type;
         this.styleProp = 'flex-basis';
-/*        if (this.type === 'horizontal') {
-            this.styleProp = 'width';
-        } else {
-            this.styleProp = 'height';
-        }*/
     },
     methods: {
         toggleCollapse: function () {
diff --git a/src/ui/components/layout/Layout.vue b/src/ui/components/layout/Layout.vue
index 86a5fbcb82..bc08eed1da 100644
--- a/src/ui/components/layout/Layout.vue
+++ b/src/ui/components/layout/Layout.vue
@@ -8,6 +8,7 @@
                    type="horizontal">
             <pane class="l-shell__pane-tree"
                   handle="after"
+                  label="Browse"
                   collapsable>
                 <div class="l-shell__search">
                     <search class="c-search--major" ref="shell-search"></search>
@@ -21,6 +22,7 @@
             </pane>
             <pane class="l-shell__pane-inspector l-pane--holds-multipane"
                   handle="before"
+                  label="Inspect"
                   collapsable>
                 <MctInspector ref="inspector"></MctInspector>
             </pane>
@@ -70,7 +72,7 @@
 
         &__pane-tree {
             background: $colorTreeBg;
-            padding: $m;
+            //padding: $m;
             backface-visibility: hidden;
             flex-basis: 40%;
 
@@ -107,7 +109,7 @@
 
         &__pane-inspector {
             display: flex;
-            padding: $m;
+            //padding: $m;
 
             body.mobile & {
                 display: none;
@@ -156,7 +158,7 @@
 
         &__object-view {
             flex: 1 1 auto;
-            padding: $interiorMarginLg;
+            //padding: $interiorMarginLg;
         }
 
         &__time-conductor {