diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index f7faeede26..89fdc122b2 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -1,8 +1,10 @@
 <div content="jquery-wrapper" class="abs holder-all browse-mode">
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area outline abs" ng-controller="BrowseController">
-        <div class='split-layout vertical contents abs'>
-            <div class='split-pane-component treeview pane' style="width: 200px;">
+        <div class='split-layout vertical contents abs'
+             ng-controller="SplitPaneController as splitter">
+            <div class='split-pane-component treeview pane'
+                 ng-style="{ width: splitter.state() + 'px'}">
                 <mct-representation key="'create-button'" mct-object="navigatedObject">
                 </mct-representation>
                 <div class='holder tree-holder abs'>
@@ -12,8 +14,12 @@
                     </mct-representation>
                 </div>
             </div>
-            <div class="splitter" style="left: 200px"></div>
-            <div class='split-pane-component items pane' style="right:0; left:200px;">
+            <div class="splitter"
+                 ng-style="{ left: splitter.state() + 'px'}"
+                 mct-drag-down="splitter.startMove()"
+                 mct-drag="splitter.move(delta[0])"></div>
+            <div class='split-pane-component items pane'
+                 ng-style="{ left: splitter.state() + 'px', right: '0px' }">
                 <div class='holder abs' id='content-area'>
                     <mct-representation mct-object="navigatedObject" key="'browse-object'">
                     </mct-representation>
diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 9ca5549096..f7b60b096d 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -84,6 +84,10 @@
                 "key": "GetterSetterController",
                 "implementation": "controllers/GetterSetterController.js",
                 "depends": [ "$scope" ]
+            },
+            {
+                "key": "SplitPaneController",
+                "implementation": "controllers/SplitPaneController.js"
             }
         ],
         "directives": [
diff --git a/platform/commonUI/general/res/templates/containers/split-pane.html b/platform/commonUI/general/res/templates/containers/split-pane.html
new file mode 100644
index 0000000000..05dc2a5df3
--- /dev/null
+++ b/platform/commonUI/general/res/templates/containers/split-pane.html
@@ -0,0 +1,9 @@
+<span ng-controller="SplitPaneController as splitter">
+    <div class="splitter" ng-style="splitter.style()"
+         mct-drag="splitter.move(delta.x)">
+    </div>
+    <div class='split-pane-component items pane' style="right:0;"
+         ng-style="splitter.style()"
+         ng-transclude>
+    </div>
+</span>
\ No newline at end of file
diff --git a/platform/commonUI/general/src/controllers/SplitPaneController.js b/platform/commonUI/general/src/controllers/SplitPaneController.js
new file mode 100644
index 0000000000..85ecb6061a
--- /dev/null
+++ b/platform/commonUI/general/src/controllers/SplitPaneController.js
@@ -0,0 +1,54 @@
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * Controller for the splitter in Browse mode. Current implementation
+         * uses many hard-coded constants; this could be generalized.
+         * @constructor
+         */
+        function SplitPaneController() {
+            var minimum = 120,
+                maximum = 600,
+                current = 200,
+                start = 200;
+
+            return {
+                /**
+                 * Get the current position of the splitter, in pixels
+                 * from the left edge.
+                 * @returns {number} position of the splitter, in pixels
+                 */
+                state: function () {
+                    return current;
+                },
+                /**
+                 * Begin moving the splitter; this will note the splitter's
+                 * current position, which is necessary for correct
+                 * interpretation of deltas provided by mct-drag.
+                 */
+                startMove: function () {
+                    start = current;
+                },
+                /**
+                 * Move the splitter a number of pixels to the right
+                 * (negative numbers move the splitter to the left.)
+                 * This movement is relative to the position of the
+                 * splitter when startMove was last invoked.
+                 * @param {number} delta number of pixels to move
+                 */
+                move: function (delta) {
+                    current = Math.min(
+                        maximum,
+                        Math.max(minimum, start + delta)
+                    );
+                }
+            };
+        }
+
+        return SplitPaneController;
+    }
+);
\ No newline at end of file
diff --git a/platform/commonUI/general/test/controllers/SplitPaneControllerSpec.js b/platform/commonUI/general/test/controllers/SplitPaneControllerSpec.js
new file mode 100644
index 0000000000..03b65dac62
--- /dev/null
+++ b/platform/commonUI/general/test/controllers/SplitPaneControllerSpec.js
@@ -0,0 +1,46 @@
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ["../../src/controllers/SplitPaneController"],
+    function (SplitPaneController) {
+        "use strict";
+
+        describe("The split pane controller", function () {
+            var controller;
+
+            beforeEach(function () {
+                controller = new SplitPaneController();
+            });
+
+            it("has an initial position", function () {
+                expect(controller.state() > 0).toBeTruthy();
+            });
+
+            it("can be moved", function () {
+                var initialState = controller.state();
+                controller.startMove();
+                controller.move(50);
+                expect(controller.state()).toEqual(initialState + 50);
+            });
+
+            it("clamps its position", function () {
+                var initialState = controller.state();
+                controller.startMove();
+                // Move some really extreme number
+                controller.move(-100000);
+                // Shouldn't have moved below 0...
+                expect(controller.state() > 0).toBeTruthy();
+                // ...but should have moved left somewhere
+                expect(controller.state() < initialState).toBeTruthy();
+
+                // Then do the same to the right
+                controller.move(100000);
+                // Shouldn't have moved below 0...
+                expect(controller.state() < 100000).toBeTruthy();
+                // ...but should have moved left somewhere
+                expect(controller.state() > initialState).toBeTruthy();
+            });
+
+        });
+    }
+);
\ No newline at end of file
diff --git a/platform/commonUI/general/test/suite.json b/platform/commonUI/general/test/suite.json
index 0aa52f1503..ae3a54f37b 100644
--- a/platform/commonUI/general/test/suite.json
+++ b/platform/commonUI/general/test/suite.json
@@ -4,6 +4,7 @@
     "controllers/ClickAwayController",
     "controllers/ContextMenuController",
     "controllers/GetterSetterController",
+    "controllers/SplitPaneController",
     "controllers/ToggleController",
     "controllers/TreeNodeController",
     "controllers/ViewSwitcherController",