diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/templatesections/templatesections.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/templatesections/templatesections.controller.js
index d8cc93c1b8..36d7c0f4ed 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/templatesections/templatesections.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/templatesections/templatesections.controller.js
@@ -1,35 +1,47 @@
 (function () {
     "use strict";
 
-    function TemplateSectionsOverlayController($scope) {
+    function TemplateSectionsController($scope, formHelper) {
 
         var vm = this;
 
+        vm.select = select;
+        vm.submit = submit;
+        vm.close = close;
+
         $scope.model.mandatoryRenderSection = false;
 
         if(!$scope.model.title) {
             $scope.model.title = "Sections";
         }
 
-        vm.select = select;
-
         function onInit() {
-
             if($scope.model.hasMaster) {
                 $scope.model.insertType = 'addSection';
             } else {
                 $scope.model.insertType = 'renderBody';
             }
-
         }
 
         function select(type) {
             $scope.model.insertType = type;
         }
 
+        function submit(model) {
+            if (formHelper.submitForm({scope: $scope})) {
+                $scope.model.submit($scope.model);
+            }
+        }
+
+        function close() {
+            if($scope.model.close) {
+                $scope.model.close();
+            }
+        }
+
         onInit();
 
     }
 
-    angular.module("umbraco").controller("Umbraco.Overlays.TemplateSectionsOverlay", TemplateSectionsOverlayController);
+    angular.module("umbraco").controller("Umbraco.Editors.TemplateSectionsController", TemplateSectionsController);
 })();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/templatesections/templatesections.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/templatesections/templatesections.html
index b97057302e..d6e3996287 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/templatesections/templatesections.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/templatesections/templatesections.html
@@ -1,64 +1,105 @@
-<div ng-controller="Umbraco.Overlays.TemplateSectionsOverlay as vm">
+<div ng-controller="Umbraco.Editors.TemplateSectionsController as vm">
 
-    <ng-form name="templateSectionForm">
-        <div class="umb-insert-code-box" ng-click="vm.select('renderBody')">
-            <div class="umb-insert-code-box__check" ng-class="{'umb-insert-code-box__check--checked': model.insertType === 'renderBody'  }"><i class="icon icon-check"></i></div>
+    <form name="templateSectionsForm" novalidate val-form-manager>
 
-            <div class="umb-insert-code-box__title"><localize key="template_renderBody" /></div>
+    <umb-editor-view>
 
-            <div class="umb-insert-code-box__description">
-                <localize key="template_renderBodyDesc" />
-            </div>
-        </div>
+        <umb-editor-header
+            name="model.title"
+            name-locked="true"
+            hide-alias="true"
+            hide-icon="true"
+            hide-description="true">
+        </umb-editor-header>
 
-        <div class="umb-insert-code-box" ng-click="vm.select('renderSection')">
+        <umb-editor-container>
+            <umb-box>
+                <umb-box-content>
 
-            <div class="umb-insert-code-box__check" ng-class="{'umb-insert-code-box__check--checked': model.insertType === 'renderSection' }"><i class="icon icon-check"></i></div>
-            <div class="umb-insert-code-box__title"><localize key="template_renderSection" /></div>
-            <div class="umb-insert-code-box__description">
-                <localize key="template_renderSectionDesc" />
-            </div>
-
-            <div ng-if="model.insertType === 'renderSection'" style="margin-top: 20px;">
-                <div style="margin-bottom: 20px;">
-                    <label class="bold"><localize key="template_sectionName" /> <span class="red">*</span></label>
-                    <input type="text" name="renderSectionName" class="-full-width-input" ng-model="model.renderSectionName" required umb-auto-focus />
-                    <span ng-messages="templateSectionForm.renderSectionName.$error" show-validation-on-submit>
-                        <small class="red" ng-message="required"><localize key="required" /></small>
-                    </span>
-                </div>
-
-                <div>
-                    <label>
-                        <input type="checkbox" ng-model="model.mandatoryRenderSection" /> <localize key="template_sectionMandatory" />
-                    </label>
-
-                    <div class="umb-insert-code-box__description">
-                        <localize key="template_sectionMandatoryDesc" />
+                    <div class="umb-insert-code-box" ng-click="vm.select('renderBody')">
+                        <div class="umb-insert-code-box__check" ng-class="{'umb-insert-code-box__check--checked': model.insertType === 'renderBody'  }"><i class="icon icon-check"></i></div>
+            
+                        <div class="umb-insert-code-box__title"><localize key="template_renderBody" /></div>
+            
+                        <div class="umb-insert-code-box__description">
+                            <localize key="template_renderBodyDesc" />
+                        </div>
+                    </div>
+            
+                    <div class="umb-insert-code-box" ng-click="vm.select('renderSection')">
+            
+                        <div class="umb-insert-code-box__check" ng-class="{'umb-insert-code-box__check--checked': model.insertType === 'renderSection' }"><i class="icon icon-check"></i></div>
+                        <div class="umb-insert-code-box__title"><localize key="template_renderSection" /></div>
+                        <div class="umb-insert-code-box__description">
+                            <localize key="template_renderSectionDesc" />
+                        </div>
+            
+                        <div ng-if="model.insertType === 'renderSection'" style="margin-top: 20px;">
+                            <div style="margin-bottom: 20px;">
+                                <label class="bold"><localize key="template_sectionName" /> <span class="red">*</span></label>
+                                <input type="text" name="renderSectionName" class="-full-width-input" ng-model="model.renderSectionName" required umb-auto-focus />
+                                <span ng-messages="templateSectionsForm.renderSectionName.$error" show-validation-on-submit>
+                                    <small class="red" ng-message="required"><localize key="required" /></small>
+                                </span>
+                            </div>
+            
+                            <div>
+                                <label>
+                                    <input type="checkbox" ng-model="model.mandatoryRenderSection" /> <localize key="template_sectionMandatory" />
+                                </label>
+            
+                                <div class="umb-insert-code-box__description">
+                                    <localize key="template_sectionMandatoryDesc" />
+                                </div>
+                            </div>
+                        </div>
+            
+                    </div>
+            
+                    <div class="umb-insert-code-box" ng-click="vm.select('addSection')">
+            
+                        <div class="umb-insert-code-box__check" ng-class="{'umb-insert-code-box__check--checked': model.insertType === 'addSection'  }"><i class="icon icon-check"></i></div>
+                        <div class="umb-insert-code-box__title"><localize key="template_defineSection" /></div>
+                        <div class="umb-insert-code-box__description">
+                            <localize key="template_defineSectionDesc" />
+                        </div>
+            
+                        <div ng-if="model.insertType === 'addSection'" style="margin-top: 20px;">
+                            <div>
+                                <label class="bold"><localize key="template_sectionName" /> <span class="red">*</span></label>
+                                <input type="text" name="sectionName" class="-full-width-input" ng-model="model.sectionName" required umb-auto-focus />
+                                <span ng-messages="templateSectionsForm.sectionName.$error" show-validation-on-submit>
+                                    <small class="red" ng-message="required"><localize key="required" /></small>
+                                </span>
+                            </div>
+                        </div>
+            
                     </div>
-                </div>
-            </div>
 
-        </div>
+                </umb-box-content>
+            </umb-box>
 
-        <div class="umb-insert-code-box" ng-click="vm.select('addSection')">
+        </umb-editor-container>
 
-            <div class="umb-insert-code-box__check" ng-class="{'umb-insert-code-box__check--checked': model.insertType === 'addSection'  }"><i class="icon icon-check"></i></div>
-            <div class="umb-insert-code-box__title"><localize key="template_defineSection" /></div>
-            <div class="umb-insert-code-box__description">
-                <localize key="template_defineSectionDesc" />
-            </div>
+        <umb-editor-footer>
+            <umb-editor-footer-content-right>
+                <umb-button
+                    type="button"
+                    button-style="link"
+                    label-key="general_close"
+                    action="vm.close()">
+                </umb-button>
+                <umb-button
+                    type="button"
+                    button-style="success"
+                    label-key="general_submit"
+                    action="vm.submit(model)">
+                </umb-button>
+            </umb-editor-footer-content-right>
+        </umb-editor-footer>
 
-            <div ng-if="model.insertType === 'addSection'" style="margin-top: 20px;">
-                <div>
-                    <label class="bold"><localize key="template_sectionName" /> <span class="red">*</span></label>
-                    <input type="text" name="sectionName" class="-full-width-input" ng-model="model.sectionName" required umb-auto-focus />
-                    <span ng-messages="templateSectionForm.sectionName.$error" show-validation-on-submit>
-                        <small class="red" ng-message="required"><localize key="required" /></small>
-                    </span>
-                </div>
-            </div>
+    </umb-editor-view>
+
+    </form>
 
-        </div>
-    </ng-form>
 </div>