diff --git a/UI/Content/base.less b/UI/Content/base.less
index 63446cdf0..ce5ff5c37 100644
--- a/UI/Content/base.less
+++ b/UI/Content/base.less
@@ -79,6 +79,10 @@ html {
   margin-bottom: 30px;
 }
 
+.page-container {
+  min-height: 600px;
+}
+
 button::-moz-focus-inner, a::-moz-focus-inner {
   border: 0;
 }
diff --git a/UI/Index.html b/UI/Index.html
index 96b565b08..cae35c5a2 100644
--- a/UI/Index.html
+++ b/UI/Index.html
@@ -103,6 +103,7 @@
 <script src="/templates.js"></script>
 
 <script src="/Mixins/backbone.marionette.templates.js"></script>
+<script src="/Mixins/backbone.marionette.region.mixin.js"></script>
 <script src="/Mixins/backbone.ajax.js"></script>
 <script src="/Mixins/tablesorter.extensions.js"></script>
 <script src="/Mixins/spoon.js"></script>
diff --git a/UI/Mixins/backbone.marionette.region.mixin.js b/UI/Mixins/backbone.marionette.region.mixin.js
new file mode 100644
index 000000000..9a5f330d1
--- /dev/null
+++ b/UI/Mixins/backbone.marionette.region.mixin.js
@@ -0,0 +1,20 @@
+"use strict";
+
+(function () {
+
+    var _originalRegionClose = Marionette.Region.prototype.close;
+
+    Marionette.Region.prototype.open = function (view) {
+        var self = this;
+
+        this.$el.fadeOut(200, function () {
+            _originalRegionClose.apply(this, arguments);
+            self.$el.html(view.el);
+            self.$el.fadeIn(150);
+        });
+    };
+
+    Marionette.Region.prototype.close = function () {
+        //do nothing. we close the region as part of open so we can chain the animation
+    };
+}());