diff --git a/src/views/app.html b/src/views/app.html
index 9a61a8506..5c7398e5c 100644
--- a/src/views/app.html
+++ b/src/views/app.html
@@ -382,7 +382,7 @@
         <div class="row">
           <div class="col-md-12">
             <fieldset>
-              <form role="form" name="resourcesForm" ng-submit="resources.submit()" autocomplete="off">
+              <form role="form" name="resourcesForm" ng-submit="resources.submitMemoryLimit()" autocomplete="off">
                 <div class="form-group">
                   <label class="control-label" for="memoryLimit">Memory Limit <sup><a ng-href="{{ config.webServerOrigin }}/documentation/apps/#increasing-the-memory-limit-of-an-app" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup> : <b>{{ resources.memoryLimit ? resources.memoryLimit / 1024 / 1024 + 'MB' : 'Default (256 MB)' }}</b></label>
                   <br/>
@@ -391,14 +391,6 @@
                   </div>
                 </div>
 
-                <!-- We do not show this currently -->
-                <div ng-if="false" class="form-group" ng-class="{ 'has-error': !resourcesForm.dataDir.$dirty && resources.error.dataDir }">
-                  <input type="checkbox" id="resourcesEnableDataDir" ng-model="resources.dataDirEnabled">
-                  <label class="control-label" for="resourcesEnableDataDir">Custom Data Directory</label>
-                  <div class="control-label" ng-show="resources.error.dataDir">{{resources.error.dataDir}}</div>
-                  <input type="text" class="form-control" id="resourcesDataDirInput" name="dataDir" ng-disabled="!resources.dataDirEnabled" placeholder="/mnt/appdata" ng-model="resources.dataDir">
-                </div>
-
                 <input class="ng-hide" type="submit" ng-disabled="resources.memoryLimit === resources.currentMemoryLimit || resourcesForm.$invalid || resources.busy"/>
               </form>
             </fieldset>
@@ -406,7 +398,29 @@
         </div>
         <div class="row">
           <div class="col-md-12 text-right">
-            <button class="btn btn-outline btn-primary pull-right" ng-click="resources.submit()" ng-disabled="resources.memoryLimit === resources.currentMemoryLimit || resources.$invalid || resources.busy"><i class="fa fa-circle-notch fa-spin" ng-show="resources.busy"></i> Save</button>
+            <button class="btn btn-outline btn-primary pull-right" ng-click="resources.submitMemoryLimit()" ng-disabled="resources.memoryLimit === resources.currentMemoryLimit || resourcesForm.$invalid || resources.busy"><i class="fa fa-circle-notch fa-spin" ng-show="resources.busy"></i> Save</button>
+          </div>
+        </div>
+        <hr/>
+        <div class="row">
+          <div class="col-md-12">
+            <fieldset>
+              <form role="form" name="resourcesDataDirForm" ng-submit="resources.submitDataDir()" autocomplete="off">
+                <div class="form-group" ng-class="{ 'has-error': resourcesDataDirForm.$dirty && resources.error.dataDir }">
+                  <input type="checkbox" id="resourcesEnableDataDir" ng-model="resources.dataDirEnabled">
+                  <label class="control-label" for="resourcesEnableDataDir">Custom Data Directory</label>
+                  <div class="control-label" ng-show="resources.error.dataDir">{{ resources.error.dataDir }}</div>
+                  <input type="text" class="form-control" name="dataDir" ng-disabled="!resources.dataDirEnabled" placeholder="/mnt/appdata" ng-model="resources.dataDir" ng-required="resources.dataDirEnabled">
+                </div>
+
+                <input class="ng-hide" type="submit" ng-disabled="!resourcesDataDirForm.$dirty || resourcesDataDirForm.$invalid || resources.busyDataDir"/>
+              </form>
+            </fieldset>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12 text-right">
+            <button class="btn btn-outline btn-primary pull-right" ng-click="resources.submitDataDir()" ng-disabled="!resourcesDataDirForm.$dirty || resourcesDataDirForm.$invalid || resources.busyDataDir"><i class="fa fa-circle-notch fa-spin" ng-show="resources.busyDataDir"></i> Save</button>
           </div>
         </div>
       </div>
diff --git a/src/views/app.js b/src/views/app.js
index 9d6e46321..b675c9880 100644
--- a/src/views/app.js
+++ b/src/views/app.js
@@ -286,13 +286,14 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
 
     $scope.resources = {
         busy: false,
+        busyDataDir: false,
         error: {},
-        success: false,
 
         currentMemoryLimit: 0,
         memoryLimit: 0,
         memoryTicks: [],
         dataDir: null,
+        currentDataDirEnabled: false,
         dataDirEnabled: false,
 
         show: function () {
@@ -301,6 +302,7 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
             $scope.resources.currentMemoryLimit = app.memoryLimit || app.manifest.memoryLimit || (256 * 1024 * 1024);
             $scope.resources.memoryLimit = $scope.resources.currentMemoryLimit;
             $scope.resources.dataDirEnabled = !!app.dataDir;
+            $scope.resources.currentDataDirEnabled = $scope.resources.dataDirEnabled
             $scope.resources.dataDir = app.dataDir;
 
             // create ticks starting from manifest memory limit. the memory limit here is currently split into ram+swap (and thus *2 below)
@@ -315,20 +317,37 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
             }
         },
 
-        submit: function () {
+        submitMemoryLimit: function () {
             $scope.resources.busy = true;
             $scope.resources.error = {};
 
-            // TODO handle data dir once we show it
-
             var memoryLimit = $scope.resources.memoryLimit === $scope.resources.memoryTicks[0] ? 0 : $scope.resources.memoryLimit;
             Client.configureApp($scope.app.id, 'memory_limit', { memoryLimit: memoryLimit }, function (error) {
                 if (error) return Client.error(error);
 
                 $scope.resources.currentMemoryLimit = $scope.resources.memoryLimit;
-                $scope.resources.success = true;
                 $scope.resources.busy = false;
 
+                refreshApp();
+            });
+        },
+
+        submitDataDir: function () {
+            $scope.resources.busyDataDir = true;
+            $scope.resources.error = {};
+
+            Client.configureApp($scope.app.id, 'data_dir', { dataDir: $scope.resources.dataDirEnabled ? $scope.resources.dataDir : null }, function (error) {
+                if (error && error.statusCode === 400) {
+                    $scope.resources.error.dataDir = error.message;
+                    $scope.resources.busyDataDir = false;
+                    return;
+                }
+                if (error) return Client.error(error);
+
+                $scope.resources.currentDataDirEnabled = $scope.resources.dataDirEnabled;
+                $scope.resourcesDataDirForm.$setPristine();
+                $scope.resources.busyDataDir = false;
+
                 refreshApp();
             });
         }