diff --git a/app/components/main-content.js b/app/components/monitor-content-height.js
similarity index 76%
rename from app/components/main-content.js
rename to app/components/monitor-content-height.js
index 27ab3d7a19..44eb58c95a 100644
--- a/app/components/main-content.js
+++ b/app/components/monitor-content-height.js
@@ -1,10 +1,12 @@
 import Component from '@ember/component';
-import { schedule } from '@ember/runloop';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { task, timeout } from 'ember-concurrency';
 
 // Currently used to determine the height of list-views
 export default Component.extend({
+  tagName: '',
+
   /**
    * Layout service. We inject it to keep its `contentHeight` property
    * up-to-date.
@@ -14,15 +16,29 @@ export default Component.extend({
    */
   layoutService: service('layout'),
 
-  didInsertElement() {
+  /**
+   * Reference to drag-handle on mousedown
+   *
+   * @property el
+   * @type {DOMNode|null}
+   * @default null
+   */
+  el: null,
+
+  setupListeners: action(function(element) {
+    this.el = element;
+
     this._performUpdateHeight = () => {
       this.updateHeightDebounce.perform();
     };
 
     window.addEventListener('resize', this._performUpdateHeight);
-    schedule('afterRender', this, this.updateHeight);
-    return this._super(...arguments);
-  },
+    this.updateHeight();
+  }),
+
+  destroyListeners: action(function() {
+    window.removeEventListener('resize', this._performUpdateHeight);
+  }),
 
   /**
    * Restartable Ember Concurrency task that triggers
@@ -48,11 +64,6 @@ export default Component.extend({
    * @method updateHeight
    */
   updateHeight() {
-    this.layoutService.updateContentHeight(this.element.clientHeight);
+    this.layoutService.updateContentHeight(this.el.clientHeight);
   },
-
-  willDestroyElement() {
-    window.removeEventListener('resize', this._performUpdateHeight);
-    return this._super(...arguments);
-  }
 });
diff --git a/app/components/x-app.js b/app/components/x-app.js
deleted file mode 100644
index 7ea8c1718e..0000000000
--- a/app/components/x-app.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import Component from '@ember/component';
-import { not } from '@ember/object/computed';
-export default Component.extend({
-  classNames: ['app'],
-
-  classNameBindings: [
-    'inactive',
-    'isDragging'
-  ],
-
-  attributeBindings: ['tabindex'],
-  tabindex: 1,
-
-  isDragging: false,
-
-  /**
-   * Bound to application controller.
-   *
-   * @property active
-   * @type {Boolean}
-   * @default false
-   */
-  active: false,
-
-  inactive: not('active'),
-
-  focusIn() {
-    if (!this.active) {
-      this.set('active', true);
-    }
-  },
-
-  focusOut() {
-    if (this.active) {
-      this.set('active', false);
-    }
-  }
-});
diff --git a/app/controllers/application.js b/app/controllers/application.js
index 4fe3440349..cb06d5da85 100644
--- a/app/controllers/application.js
+++ b/app/controllers/application.js
@@ -74,6 +74,10 @@ export default Controller.extend({
     });
   }),
 
+  setActive: action(function(bool) {
+    this.set('active', bool);
+  }),
+
   /*
    * Called when inspecting an object from outside of the ObjectInspector
   */
@@ -106,10 +110,4 @@ export default Controller.extend({
     }
 
   },
-
-  actions: {
-    setIsDragging(isDragging) {
-      this.set('isDragging', isDragging);
-    },
-  }
 });
diff --git a/app/controllers/container-types.js b/app/controllers/container-types.js
index f19d747fcb..fadbc7ac7d 100644
--- a/app/controllers/container-types.js
+++ b/app/controllers/container-types.js
@@ -1,9 +1,7 @@
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { sort } from '@ember/object/computed';
 
 export default Controller.extend({
-  application: controller(),
-
   sorted: sort('model', 'sortProperties'),
 
   init() {
diff --git a/app/controllers/info.js b/app/controllers/info.js
index 39983f6f09..278e915367 100644
--- a/app/controllers/info.js
+++ b/app/controllers/info.js
@@ -1,5 +1,5 @@
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 
 export default Controller.extend({
-  application: controller()
+  navWidth: 180,
 });
diff --git a/app/controllers/model-types.js b/app/controllers/model-types.js
index f13f38ba5b..eff25f8791 100644
--- a/app/controllers/model-types.js
+++ b/app/controllers/model-types.js
@@ -1,4 +1,4 @@
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { get, computed } from '@ember/object';
 import LocalStorageService from 'ember-inspector/services/storage/local';
 import { sort } from '@ember/object/computed';
@@ -9,7 +9,6 @@ import {
 } from 'ember-inspector/utils/local-storage-keys';
 
 export default Controller.extend({
-  application: controller(),
   navWidth: 180,
   storage: service(`storage/${LocalStorageService.STORAGE_TYPE_TO_USE}`),
 
diff --git a/app/controllers/promise-tree.js b/app/controllers/promise-tree.js
index e98b9151cd..2878f5b654 100644
--- a/app/controllers/promise-tree.js
+++ b/app/controllers/promise-tree.js
@@ -1,12 +1,10 @@
 import { action, observer } from '@ember/object';
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { isEmpty } from '@ember/utils';
 import { equal, bool, and, not, filter } from '@ember/object/computed';
 import { debounce, next, once } from '@ember/runloop';
 
 export default Controller.extend({
-  application: controller(),
-
   queryParams: ['filter'],
 
   createdAfter: null,
diff --git a/app/controllers/render-tree.js b/app/controllers/render-tree.js
index d8b423505b..c6ad52918e 100644
--- a/app/controllers/render-tree.js
+++ b/app/controllers/render-tree.js
@@ -1,6 +1,6 @@
 import { action, computed, get } from '@ember/object';
 import { isEmpty } from '@ember/utils';
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import escapeRegExp from "ember-inspector/utils/escape-reg-exp";
 import debounceComputed from "ember-inspector/computed/debounce";
@@ -8,7 +8,6 @@ import LocalStorageService from "ember-inspector/services/storage/local";
 import { and, equal } from '@ember/object/computed';
 
 export default Controller.extend({
-  application: controller(),
   initialEmpty: false,
   modelEmpty: equal('model.length', 0),
   showEmpty: and('initialEmpty', 'modelEmpty'),
diff --git a/app/services/layout.js b/app/services/layout.js
index ff20c4b08b..8e7fc94836 100644
--- a/app/services/layout.js
+++ b/app/services/layout.js
@@ -16,7 +16,7 @@ import Evented from '@ember/object/evented';
 export default Service.extend(Evented, {
   /**
    * Stores the app's content height. This property is kept up-to-date
-   * by the `main-content` component.
+   * by the `monitor-content-height` component.
    *
    * @property contentHeight
    * @type {Number}
@@ -24,7 +24,7 @@ export default Service.extend(Evented, {
   contentHeight: null,
 
   /**
-   * This is called by `main-content` whenever a window resize is detected
+   * This is called by `monitor-content-height` whenever a window resize is detected
    * and the app's content height has changed. We therefore update the
    * `contentHeight` property and notify all listeners (mostly lists).
    *
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 37af671cb8..6f482a373f 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -18,10 +18,6 @@
   z-index: 0;
 }
 
-.app.is-dragging {
-  cursor: col-resize;
-}
-
 @import "base";
 @import "colors";
 @import "utils";
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index d54f3bbb4f..08d30a344f 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -1,84 +1,80 @@
-<div class="ember-view">
-  {{#x-app
-    active=this.active
-    isDragging=this.isDragging
-  }}
-    {{#if isEmberApplication}}
-      <div class="split">
-        <div class="split__panel">
-          {{!-- Begin main --}}
-          <div class="split split--main">
-            {{#draggable-column
-              width=this.navWidth
-              classes="split__panel split__panel--sidebar-1"
-              setIsDragging=(action "setIsDragging")
-            }}
-              <div class="split__panel__hd">
-                {{app-picker}}
-              </div>
-              <div class="split__panel__bd">
-                <SideNav @deprecationCount={{this.deprecationCount}} />
-              </div>
-              <div class="split__panel__ft">
-                <a target="_blank" href="https://github.com/emberjs/ember-inspector/issues">
-                  Submit an Issue
-                </a>
-              </div>
-            {{/draggable-column}}
-
-            <div class="split__panel">
-              <div class="split__panel__hd">
-                {{outlet "toolbar"}}
-                <button
-                  class="sidebar-toggle toolbar__icon-button {{if this.inspectorExpanded "flip"}}"
-                  {{on "click" this.toggleInspector}}
-                >
-                  {{svg-jar "sidebar-toggle" width="16" height="16"}}
-                </button>
-              </div>
+<div
+  class="ember-view app {{if this.active "" "inactive"}}"
+  tabindex="1"
+  {{on "focusin" (fn this.setActive true)}}
+  {{on "focusout" (fn this.setActive false)}}
+>
+  {{#if this.isEmberApplication}}
+    <div class="split">
+      <div class="split__panel">
+        <div class="split split--main">
+          <Ui::DraggableColumn
+            @classes="split__panel split__panel--sidebar-1"
+            @side="left"
+            @width={{this.navWidth}}
+          >
+            <div class="split__panel__hd">
+              {{app-picker}}
+            </div>
+            <div class="split__panel__bd">
+              <SideNav @deprecationCount={{this.deprecationCount}} />
+            </div>
+            <div class="split__panel__ft">
+              <a target="_blank" href="https://github.com/emberjs/ember-inspector/issues">
+                Submit an Issue
+              </a>
+            </div>
+          </Ui::DraggableColumn>
 
-              {{#main-content class="split__panel__bd"}}
-                {{outlet}}
-              {{/main-content}}
+          <div class="split__panel">
+            <div class="split__panel__hd">
+              {{outlet "toolbar"}}
+              <button
+                class="sidebar-toggle toolbar__icon-button {{if this.inspectorExpanded "flip"}}"
+                {{on "click" this.toggleInspector}}
+              >
+                {{svg-jar "sidebar-toggle" width="16" height="16"}}
+              </button>
             </div>
-          </div>
 
-          {{!-- End main --}}
+            <MonitorContentHeight class="split__panel__bd">
+              {{outlet}}
+            </MonitorContentHeight>
+          </div>
         </div>
-
-        {{#if this.inspectorExpanded}}
-          {{#draggable-column
-            side="right"
-            width=this.inspectorWidth
-            classes="split__panel"
-            setIsDragging=(action "setIsDragging")
-          }}
-            <ObjectInspector
-              @popMixinDetails={{this.popMixinDetails}}
-              @model={{this.mixinStack}}
-              @mixinDetails={{this.mixinDetails}}
-            />
-          {{/draggable-column}}
-        {{/if}}
       </div>
-    {{else}}
-      <Ui::ErrorPage @description="Ember application not detected!">
-        <ul>
-          <li>This is not an Ember application.</li>
-          <li>You are using an old version of Ember (&lt; rc5).</li>
-          {{#if this.isChrome}}
-            <li>
-              You are using the file:// protocol (instead of http://), in which case:
 
-              <ul>
-                <li>Visit the URL: chrome://extensions.</li>
-                <li>Find the Ember Inspector.</li>
-                <li>Make sure "Allow access to file URLs" is checked.</li>
-              </ul>
-            </li>
-          {{/if}}
-        </ul>
-      </Ui::ErrorPage>
-    {{/if}}
-  {{/x-app}}
+      {{#if this.inspectorExpanded}}
+        <Ui::DraggableColumn
+          @classes="split__panel"
+          @side="right"
+          @width={{this.inspectorWidth}}
+        >
+          <ObjectInspector
+            @popMixinDetails={{this.popMixinDetails}}
+            @model={{this.mixinStack}}
+            @mixinDetails={{this.mixinDetails}}
+          />
+        </Ui::DraggableColumn>
+      {{/if}}
+    </div>
+  {{else}}
+    <Ui::ErrorPage @description="Ember application not detected!">
+      <ul>
+        <li>This is not an Ember application.</li>
+        <li>You are using an old version of Ember (&lt; rc5).</li>
+        {{#if this.isChrome}}
+          <li>
+            You are using the file:// protocol (instead of http://), in which case:
+
+            <ul>
+              <li>Visit the URL: chrome://extensions.</li>
+              <li>Find the Ember Inspector.</li>
+              <li>Make sure "Allow access to file URLs" is checked.</li>
+            </ul>
+          </li>
+        {{/if}}
+      </ul>
+    </Ui::ErrorPage>
+  {{/if}}
 </div>
diff --git a/app/templates/components/drag-handle.hbs b/app/templates/components/drag-handle.hbs
deleted file mode 100644
index bfe0dfff4b..0000000000
--- a/app/templates/components/drag-handle.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<div class="drag-handle__border"></div>
diff --git a/app/templates/components/draggable-column.hbs b/app/templates/components/draggable-column.hbs
deleted file mode 100644
index 23e2e5dcd4..0000000000
--- a/app/templates/components/draggable-column.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-{{#resizable-column
-  class=classes
-  width=width
-}}
-  {{yield}}
-{{/resizable-column}}
-
-{{drag-handle
-  minWidth=minWidth
-  on-drag=(action "didDrag")
-  position=width
-  setIsDragging=setIsDragging
-  side=side
-}}
diff --git a/app/templates/components/item-types.hbs b/app/templates/components/item-types.hbs
index a46a8d4b09..0d7c5943a7 100644
--- a/app/templates/components/item-types.hbs
+++ b/app/templates/components/item-types.hbs
@@ -1,9 +1,9 @@
 <div class="split">
-  {{#draggable-column
-    classes="split__panel split__panel--sidebar-2 nav"
-    setIsDragging=@setIsDragging
-    width=@width
-  }}
+  <Ui::DraggableColumn
+    @classes="split__panel split__panel--sidebar-2 nav"
+    @side="left"
+    @width={{@width}}
+  >
     <div class="split__panel__bd">
       <h1 class="nav__title">{{@header}}</h1>
 
@@ -25,7 +25,7 @@
         {{/each}}
       </ul>
     </div>
-  {{/draggable-column}}
+  </Ui::DraggableColumn>
 
   <div class="split__panel">
     <div class="split__panel__bd">
diff --git a/app/templates/components/list.hbs b/app/templates/components/list.hbs
index 4485b6df3d..73981cf605 100644
--- a/app/templates/components/list.hbs
+++ b/app/templates/components/list.hbs
@@ -42,15 +42,14 @@
 
 {{#each columns key="id" as |column|}}
   {{#if (and column.visible (not-eq column columns.lastObject))}}
-    {{drag-handle
-      faded=true
-      left=column.left
-      minWidth=minWidth
-      maxWidth=column.maxWidth
-      on-drag=(action "didResize" column.id)
-      position=(one-way column.width)
-      setIsDragging=@setIsDragging
-      side="left"
-    }}
+    <Ui::DragHandle
+      @faded={{true}}
+      @left={{column.left}}
+      @minWidth={{this.minWidth}}
+      @maxWidth={{column.maxWidth}}
+      @on-drag={{action "didResize" column.id}}
+      @position={{one-way column.width}}
+      @side="left"
+    />
   {{/if}}
 {{/each}}
diff --git a/app/templates/components/monitor-content-height.hbs b/app/templates/components/monitor-content-height.hbs
new file mode 100644
index 0000000000..d41bd24c32
--- /dev/null
+++ b/app/templates/components/monitor-content-height.hbs
@@ -0,0 +1,7 @@
+<div
+  {{did-insert this.setupListeners}}
+  {{will-destroy this.destroyListeners}}
+  ...attributes
+>
+  {{yield}}
+</div>
\ No newline at end of file
diff --git a/app/templates/container-types.hbs b/app/templates/container-types.hbs
index 398fbda8c8..5b0611ea7b 100644
--- a/app/templates/container-types.hbs
+++ b/app/templates/container-types.hbs
@@ -1,6 +1,5 @@
 <ItemTypes
   @header="Types"
-  @setIsDragging={{action "setIsDragging" target=application}}
   @sorted={{readonly sorted}}
   @type="container"
   @width={{180}}
diff --git a/app/templates/info.hbs b/app/templates/info.hbs
index cdb1ccd0ba..6484f3ba86 100644
--- a/app/templates/info.hbs
+++ b/app/templates/info.hbs
@@ -1,9 +1,9 @@
 <div class="split">
-  {{#draggable-column
-    classes="split__panel split__panel--sidebar-2 nav"
-    setIsDragging=(action "setIsDragging" target=this.application)
-    width=180
-  }}
+  <Ui::DraggableColumn
+    @classes="split__panel split__panel--sidebar-2 nav"
+    @side="left"
+    @width={{this.navWidth}}
+  >
     <div class="split__panel__bd">
       <ul>
         <li>
@@ -18,7 +18,7 @@
         </li>
       </ul>
     </div>
-  {{/draggable-column}}
+  </Ui::DraggableColumn>
 
   <div class="split__panel">
     <div class="split__panel__bd">
diff --git a/app/templates/model-types.hbs b/app/templates/model-types.hbs
index 885539c84f..910a67deb7 100644
--- a/app/templates/model-types.hbs
+++ b/app/templates/model-types.hbs
@@ -1,6 +1,5 @@
 <ItemTypes
   @header="Model Types"
-  @setIsDragging={{action "setIsDragging" target=application}}
   @sorted={{readonly (if this.orderByRecordCount this.sortByDescCount this.sortByName)}}
   @type="model"
   @width={{this.navWidth}}
diff --git a/app/templates/promise-tree.hbs b/app/templates/promise-tree.hbs
index 50a3af592b..ec77e4fa54 100644
--- a/app/templates/promise-tree.hbs
+++ b/app/templates/promise-tree.hbs
@@ -6,8 +6,7 @@
 {{else}}
   <List
     class="js-promise-tree"
-    @schema={{schema-for "promise-tree"}}
-    @setIsDragging={{action "setIsDragging" target=this.application}} as |list|
+    @schema={{schema-for "promise-tree"}} as |list|
   >
     {{#list.vertical-collection this.filtered as |content index|}}
       <tr class="list__row js-promise-tree-item {{if (mod index 2) "striped"}}">
diff --git a/app/templates/render-tree.hbs b/app/templates/render-tree.hbs
index 50c2e0b4f8..a400b05f5c 100644
--- a/app/templates/render-tree.hbs
+++ b/app/templates/render-tree.hbs
@@ -14,8 +14,7 @@
   <List
     class="js-render-tree list--css-striping"
     @headerHeight={{this.headerHeight}}
-    @schema={{schema-for "render-tree"}}
-    @setIsDragging={{action "setIsDragging" target=this.application}} as |list|
+    @schema={{schema-for "render-tree"}} as |list|
   >
     <tbody>
       {{#each this.filtered as |item|}}
diff --git a/app/components/drag-handle.js b/lib/ui/addon/components/drag-handle.js
similarity index 81%
rename from app/components/drag-handle.js
rename to lib/ui/addon/components/drag-handle.js
index 6ab898c6eb..34d9df8acd 100644
--- a/app/components/drag-handle.js
+++ b/lib/ui/addon/components/drag-handle.js
@@ -1,18 +1,27 @@
 import { equal } from '@ember/object/computed';
 import Component from '@ember/component';
-import { computed } from '@ember/object';
+import { action, computed } from '@ember/object';
 import { htmlSafe } from '@ember/string';
+import layout from '../templates/components/drag-handle';
 
 export default Component.extend({
-  classNames: ['drag-handle'],
-  classNameBindings: ['isLeft:drag-handle--left', 'isRight:drag-handle--right', 'faded:drag-handle--faded'],
-  attributeBindings: ['style'],
+  layout,
+  tagName: '',
   position: 0,
   side: '',
   isRight: equal('side', 'right'),
   isLeft: equal('side', 'left'),
   minWidth: 60,
 
+  /**
+   * Reference to drag-handle on mousedown
+   *
+   * @property el
+   * @type {DOMNode|null}
+   * @default null
+   */
+  el: null,
+
   /**
    * The maximum width this handle can be dragged to.
    *
@@ -50,9 +59,6 @@ export default Component.extend({
   'on-drag'() {},
 
   startDragging() {
-
-    this.setIsDragging(true);
-
     this._mouseMoveHandler = this.mouseMoveHandler.bind(this);
     this._stopDragging = this.stopDragging.bind(this);
     document.body.addEventListener(`mousemove`, this._mouseMoveHandler);
@@ -61,7 +67,6 @@ export default Component.extend({
   },
 
   stopDragging() {
-    this.setIsDragging(false);
     document.body.removeEventListener(`mousemove`, this._mouseMoveHandler);
     document.body.removeEventListener(`mouseup`, this._stopDragging);
     document.body.removeEventListener(`mouseleave`, this._stopDragging);
@@ -72,23 +77,20 @@ export default Component.extend({
     this.stopDragging();
   },
 
-  mouseDown() {
+  mouseDownHandler: action(function(e) {
+    e.preventDefault();
+    this.el = e.target;
     this.startDragging();
-    return false;
-  },
+  }),
 
   style: computed('side', 'position', 'left', function() {
-    let string;
-    if (this.side) {
-      string = `${this.side}: ${(this.position + this.left)}px;`;
-    } else {
-      string = '';
-    }
-    return htmlSafe(string);
+    return htmlSafe(
+      this.side ? `${this.side}: ${(this.position + this.left)}px;` : ''
+    );
   }),
 
   mouseMoveHandler(e) {
-    let container = this.element.parentNode;
+    let container = this.el.parentNode;
     let containerOffsetLeft = getOffsetLeft(container);
     let containerOffsetRight = containerOffsetLeft + container.offsetWidth;
 
diff --git a/app/components/draggable-column.js b/lib/ui/addon/components/draggable-column.js
similarity index 61%
rename from app/components/draggable-column.js
rename to lib/ui/addon/components/draggable-column.js
index 8869adada4..c5527ddf74 100644
--- a/app/components/draggable-column.js
+++ b/lib/ui/addon/components/draggable-column.js
@@ -1,13 +1,11 @@
-// DraggableColumn
-// ===============
-// A wrapper for a resizable-column and a drag-handle component
-
+import { action } from '@ember/object';
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
+import layout from '../templates/components/draggable-column';
 
 export default Component.extend({
-  tagName: '', // Prevent wrapping in a div
-  side: 'left',
+  layout,
+  tagName: '',
   minWidth: 60,
 
   /**
@@ -26,19 +24,7 @@ export default Component.extend({
    *
    * @method triggerResize
    */
-  triggerResize() {
+  triggerResize: action(function() {
     this.layoutService.trigger('resize', { source: 'draggable-column' });
-  },
-
-  actions: {
-    /**
-     * Action called whenever the draggable column has been
-     * resized.
-     *
-     * @method didDrag
-     */
-    didDrag() {
-      this.triggerResize();
-    }
-  }
+  }),
 });
diff --git a/app/components/resizable-column.js b/lib/ui/addon/components/resizable-column.js
similarity index 68%
rename from app/components/resizable-column.js
rename to lib/ui/addon/components/resizable-column.js
index 0f1477bf87..cb6451d7b5 100644
--- a/app/components/resizable-column.js
+++ b/lib/ui/addon/components/resizable-column.js
@@ -1,18 +1,15 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { htmlSafe } from '@ember/string';
+import layout from '../templates/components/resizable-column';
+
 export default Component.extend({
-  width: null,
+  layout,
+  tagName: '',
 
-  attributeBindings: ['style'],
+  width: null,
 
   style: computed('width', function () {
     return htmlSafe(`-webkit-flex: none; flex: none; width: ${this.width}px;`);
   }),
-
-  didInsertElement() {
-    if (!this.width) {
-      this.set('width', this.element.clientWidth);
-    }
-  }
 });
diff --git a/lib/ui/addon/styles/_drag-handle.scss b/lib/ui/addon/styles/_drag-handle.scss
index 87666f56a1..0d61215d51 100644
--- a/lib/ui/addon/styles/_drag-handle.scss
+++ b/lib/ui/addon/styles/_drag-handle.scss
@@ -4,31 +4,52 @@
  The drag handle used for resizing elements
 */
 
+:root {
+  --drag-handle-width: 6px;
+  --drag-handle-active-width: 60px;
+}
+
 .drag-handle {
   bottom: 0;
   cursor: col-resize;
   position: absolute;
   top: 0;
-  width: 6px;
+  width: var(--drag-handle-width);
   z-index: 500;
 }
 
 .drag-handle--right {
-  margin-right: -3px;
+  margin-right: calc(var(--drag-handle-width) / 2 * -1);
 }
 
 .drag-handle--left {
-  margin-left: -3px;
+  margin-left: calc(var(--drag-handle-width) / 2 * -1);
 }
 
 .drag-handle__border {
   border-left: 1px solid var(--base06);
   height: 100%;
-  margin-left: 3px;
+  margin-left: calc(var(--drag-handle-width) / 2);
   pointer-events: none;
   width: 1px;
 }
 
+.drag-handle:active {
+  width: var(--drag-handle-active-width);
+
+  &.drag-handle--right {
+    margin-right: calc(var(--drag-handle-active-width) / 2 * -1);
+  }
+
+  &.drag-handle--left {
+    margin-left: calc(var(--drag-handle-active-width) / 2 * -1);
+  }
+
+  .drag-handle__border {
+    margin-left: calc(var(--drag-handle-active-width) / 2);
+  }
+}
+
 .drag-handle--faded {
   opacity: 0.3;
 }
diff --git a/lib/ui/addon/styles/_nav.scss b/lib/ui/addon/styles/_nav.scss
index faf5884278..61350764ce 100644
--- a/lib/ui/addon/styles/_nav.scss
+++ b/lib/ui/addon/styles/_nav.scss
@@ -40,10 +40,6 @@
   &:focus { outline: none; }
 }
 
-.app.is-dragging .nav__item {
-  cursor: col-resize;
-}
-
 .nav__item.active {
   background: var(--focus);
   color: var(--focus-text);
diff --git a/lib/ui/addon/templates/components/drag-handle.hbs b/lib/ui/addon/templates/components/drag-handle.hbs
new file mode 100644
index 0000000000..1d7646e068
--- /dev/null
+++ b/lib/ui/addon/templates/components/drag-handle.hbs
@@ -0,0 +1,7 @@
+<div
+  class="drag-handle {{if this.isLeft "drag-handle--left"}} {{if this.isRight "drag-handle--right"}} {{if @faded "drag-handle--faded"}}"
+  style={{this.style}}
+  {{on "mousedown" this.mouseDownHandler}}
+>
+  <div class="drag-handle__border"></div>
+</div>
diff --git a/lib/ui/addon/templates/components/draggable-column.hbs b/lib/ui/addon/templates/components/draggable-column.hbs
new file mode 100644
index 0000000000..3c41dbf180
--- /dev/null
+++ b/lib/ui/addon/templates/components/draggable-column.hbs
@@ -0,0 +1,13 @@
+<Ui::ResizableColumn
+  class={{@classes}}
+  @width={{@width}}
+>
+  {{yield}}
+</Ui::ResizableColumn>
+
+<Ui::DragHandle
+  @minWidth={{this.minWidth}}
+  @on-drag={{this.triggerResize}}
+  @position={{@width}}
+  @side={{@side}}
+/>
diff --git a/lib/ui/addon/templates/components/resizable-column.hbs b/lib/ui/addon/templates/components/resizable-column.hbs
new file mode 100644
index 0000000000..e5507ec69f
--- /dev/null
+++ b/lib/ui/addon/templates/components/resizable-column.hbs
@@ -0,0 +1,6 @@
+<div
+  style={{this.style}}
+  ...attributes
+>
+  {{yield}}
+</div>
\ No newline at end of file
diff --git a/lib/ui/app/components/ui/drag-handle.js b/lib/ui/app/components/ui/drag-handle.js
new file mode 100644
index 0000000000..09a1a7561a
--- /dev/null
+++ b/lib/ui/app/components/ui/drag-handle.js
@@ -0,0 +1 @@
+export { default } from 'ui/components/drag-handle';
diff --git a/lib/ui/app/components/ui/draggable-column.js b/lib/ui/app/components/ui/draggable-column.js
new file mode 100644
index 0000000000..1600f8a152
--- /dev/null
+++ b/lib/ui/app/components/ui/draggable-column.js
@@ -0,0 +1 @@
+export { default } from 'ui/components/draggable-column';
diff --git a/lib/ui/app/components/ui/resizable-column.js b/lib/ui/app/components/ui/resizable-column.js
new file mode 100644
index 0000000000..902ce877a6
--- /dev/null
+++ b/lib/ui/app/components/ui/resizable-column.js
@@ -0,0 +1 @@
+export { default } from 'ui/components/resizable-column';
diff --git a/package.json b/package.json
index bc525f0273..7596058ee4 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
   "devDependencies": {
     "@ember/edition-utils": "^1.1.1",
     "@ember/optional-features": "^1.0.0",
+    "@ember/render-modifiers": "^1.0.1",
     "@glimmer/component": "^0.14.0-alpha.12",
     "@html-next/vertical-collection": "^1.0.0",
     "amd-name-resolver": "^1.2.1",
diff --git a/yarn.lock b/yarn.lock
index 70fa03125c..ec63b83250 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -763,6 +763,14 @@
     silent-error "^1.1.1"
     util.promisify "^1.0.0"
 
+"@ember/render-modifiers@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@ember/render-modifiers/-/render-modifiers-1.0.1.tgz#a85e746e4bb9fd51302cc43e726e2c641261a7c2"
+  integrity sha512-HHZwL84jCVAaIDFtPZHAnM41aB8XgvDiutD1tKnll43fw7/rhejGj/LDWdB1jrPF+vryFSSQwSJ85gk4J7W86g==
+  dependencies:
+    ember-cli-babel "^7.10.0"
+    ember-modifier-manager-polyfill "^1.1.0"
+
 "@ember/test-helpers@^1.6.0":
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/@ember/test-helpers/-/test-helpers-1.6.1.tgz#5eb0b58486524c54f1b617a83e4ab327b7c62f07"
@@ -5535,6 +5543,15 @@ ember-maybe-import-regenerator@^0.1.5, ember-maybe-import-regenerator@^0.1.6:
     ember-cli-babel "^6.0.0-beta.4"
     regenerator-runtime "^0.9.5"
 
+ember-modifier-manager-polyfill@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/ember-modifier-manager-polyfill/-/ember-modifier-manager-polyfill-1.2.0.tgz#cf4444e11a42ac84f5c8badd85e635df57565dda"
+  integrity sha512-bnaKF1LLKMkBNeDoetvIJ4vhwRPKIIumWr6dbVuW6W6p4QV8ZiO+GdF8J7mxDNlog9CeL9Z/7wam4YS86G8BYA==
+  dependencies:
+    ember-cli-babel "^7.10.0"
+    ember-cli-version-checker "^2.1.2"
+    ember-compatibility-helpers "^1.2.0"
+
 ember-native-dom-helpers@^0.5.3:
   version "0.5.10"
   resolved "https://registry.yarnpkg.com/ember-native-dom-helpers/-/ember-native-dom-helpers-0.5.10.tgz#9c7172e4ddfa5dd86830c46a936e2f8eca3e5896"