diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css
index d5f12ea05..9b44fa50e 100644
--- a/modules/backend/assets/css/october.css
+++ b/modules/backend/assets/css/october.css
@@ -10857,35 +10857,39 @@ html.cssanimations .cursor-loading-indicator.hide {
 }
 .control-filelist.hero ul li {
   background: #ffffff;
-  border-bottom: 1px solid #ecf0f1;
+  border-bottom: none;
 }
-.control-filelist.hero ul li a {
+.control-filelist.hero ul li > a {
   padding: 16px 45px 15px 50px;
   font-size: 13px;
+  border-bottom: 1px solid #ecf0f1;
 }
-.control-filelist.hero ul li a span.title {
+.control-filelist.hero ul li > a span.title {
   font-size: 13px;
   font-weight: 600;
   color: #2b3e50;
 }
-.control-filelist.hero ul li a:hover {
+.control-filelist.hero ul li > a:hover {
   background: #58b6f7;
+  border-bottom: 1px solid #58b6f7 !important;
 }
-.control-filelist.hero ul li a:hover span.title,
-.control-filelist.hero ul li a:hover span.description {
+.control-filelist.hero ul li > a:hover span.title,
+.control-filelist.hero ul li > a:hover span.description {
   color: #ffffff !important;
 }
 .control-filelist.hero ul li .checkbox {
   top: 17px;
   right: 17px;
 }
-.control-filelist.hero ul li.active a:after {
+.control-filelist.hero ul li.active > a {
+  border-bottom: 1px solid #dddddd;
+}
+.control-filelist.hero ul li.active > a:after {
   top: -1px;
   bottom: -1px;
   height: auto;
 }
-.control-filelist.hero ul li.active a > span.borders:before,
-.control-filelist.hero ul li.active a > span.borders:after {
+.control-filelist.hero ul li.active > a > span.borders:before {
   content: ' ';
   position: absolute;
   width: 100%;
@@ -10894,11 +10898,19 @@ html.cssanimations .cursor-loading-indicator.hide {
   left: 0;
   background-color: #dddddd;
 }
-.control-filelist.hero ul li.active a > span.borders:before {
+.control-filelist.hero ul li.active > a > span.borders:before {
   top: -1px;
 }
-.control-filelist.hero ul li.active a > span.borders:after {
-  bottom: -1px;
+.control-filelist.hero ul li.active > a:hover > span.borders:before {
+  background-color: #58b6f7;
+}
+.control-filelist.hero ul li > h4 {
+  padding-top: 7px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid #ecf0f1;
+}
+.control-filelist.hero ul > li.group > ul > li > a {
+  padding-left: 66px;
 }
 .touch .control-filelist li:not(.active) a:hover {
   background: transparent;
@@ -11443,8 +11455,6 @@ body.dropdown-open .dropdown-overlay {
   color: #cccccc;
   background: #f9f9f9;
   font-weight: 400;
-  max-width: 150px;
-  text-overflow: ellipsis;
   overflow: hidden;
 }
 .control-tabs > ul.nav-tabs > li a:hover,
@@ -11458,6 +11468,16 @@ body.dropdown-open .dropdown-overlay {
 .control-tabs > div > div > ul.nav-tabs > li a:before {
   font-size: 14px;
 }
+.control-tabs > ul.nav-tabs > li a > span.title > span,
+.control-tabs > div > ul.nav-tabs > li a > span.title > span,
+.control-tabs > div > div > ul.nav-tabs > li a > span.title > span {
+  max-width: 150px;
+  height: 16px;
+  margin-bottom: -4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+}
 .control-tabs > ul.nav-tabs > li span.tab-close,
 .control-tabs > div > ul.nav-tabs > li span.tab-close,
 .control-tabs > div > div > ul.nav-tabs > li span.tab-close {
diff --git a/modules/backend/assets/js/october.tab.js b/modules/backend/assets/js/october.tab.js
index 2420f74c1..a094a6433 100644
--- a/modules/backend/assets/js/october.tab.js
+++ b/modules/backend/assets/js/october.tab.js
@@ -142,7 +142,7 @@
         var html = $a.html()
 
         $a.html('')
-        $a.append($('<span class="title"></span>').html(html))
+        $a.append($('<span class="title"></span>').append($('<span></span>').html(html)))
 
         var pane = $('> .tab-pane', this.$pagesContainer).eq(tabIndex).attr('id', targetId)
         $(li).append($('<span class="tab-close"><i>&times;</i></span>').click(function(){
diff --git a/modules/backend/assets/less/controls/filelist.less b/modules/backend/assets/less/controls/filelist.less
index eccaaeae7..31e82171b 100644
--- a/modules/backend/assets/less/controls/filelist.less
+++ b/modules/backend/assets/less/controls/filelist.less
@@ -3,9 +3,7 @@
 // --------------------------------------------------
 
 .control-filelist {
-    .listPaddings (@level) when (@level > 0) {
-        @offset-base: 27px;
-
+    .listPaddings (@level, @offset-base) when (@level > 0) {
         > li.group {
             > ul {
                 > li > a {
@@ -13,11 +11,11 @@
                     margin-left: -1*@level*@offset-base;
                 }
 
-                .listPaddings(@level - 1);
+                .listPaddings(@level - 1, @offset-base);
             }
         }
     }
-    .listPaddings (0) {}
+    .listPaddings (0, 27px) {}
 
     p.no-data {
         padding: 18px 0;
@@ -136,7 +134,7 @@
 
                     > li.group {padding-left: 20px;}
 
-                    .listPaddings(10);
+                    .listPaddings(10, 27px);
                 }
 
                 &[data-status=collapsed] {
@@ -170,11 +168,12 @@
         ul {
             li {
                 background: @color-filelist-hero-item-bg;
-                border-bottom: 1px solid @color-panel-light;
+                border-bottom: none;
 
-                a {
+                > a {
                     padding: 16px 45px 15px 50px;
                     font-size: 13px;
+                    border-bottom: 1px solid @color-panel-light;
 
                     span.title {
                         font-size: 13px;
@@ -184,6 +183,7 @@
 
                     &:hover {
                         background: @color-filelist-hero-hover-bg;
+                        border-bottom: 1px solid @color-filelist-hero-hover-bg!important;
                         span.title, span.description {
                             color: @color-filelist-hero-hover-text!important;
                         }
@@ -196,7 +196,9 @@
                 }
 
                 &.active {
-                    a {
+                    > a {
+                        border-bottom: 1px solid @color-list-active;
+
                         &:after {
                             top: -1px;
                             bottom: -1px;
@@ -204,7 +206,7 @@
                         }
 
                         > span.borders {
-                            &:before, &:after {
+                            &:before {
                                 content: ' ';
                                 position: absolute;
                                 width: 100%;
@@ -215,12 +217,25 @@
                             }
 
                             &:before {top: -1px;}
-                            &:after {bottom: -1px;}
                         }
 
-
+                        &:hover > span.borders:before {
+                            background-color: @color-filelist-hero-hover-bg;
+                        }
                     }
                 }
+
+                > h4 {
+                    padding-top: 7px;
+                    padding-bottom: 6px;
+                    border-bottom: 1px solid @color-panel-light;
+                }
+            }
+
+            > li.group {
+                > ul > li > a {
+                    padding-left: 66px;
+                }
             }
         }
     }
diff --git a/modules/backend/assets/less/controls/tab.less b/modules/backend/assets/less/controls/tab.less
index 8a2684f34..b3a85e520 100644
--- a/modules/backend/assets/less/controls/tab.less
+++ b/modules/backend/assets/less/controls/tab.less
@@ -47,8 +47,6 @@
                 background: @color-body-bg;
                 font-weight: 400;
 
-                max-width: 150px;
-                text-overflow: ellipsis;
                 overflow: hidden;
 
                 &:hover {
@@ -59,6 +57,15 @@
                 &:before {
                     font-size: 14px;
                 }
+
+                > span.title > span {
+                    max-width: 150px;
+                    height: 16px;
+                    margin-bottom: -4px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: inline-block;
+                }
             }
 
             span.tab-close {
diff --git a/modules/backend/formwidgets/codeeditor/assets/js/codeeditor.js b/modules/backend/formwidgets/codeeditor/assets/js/codeeditor.js
index bf5073c9e..78ee0615a 100644
--- a/modules/backend/formwidgets/codeeditor/assets/js/codeeditor.js
+++ b/modules/backend/formwidgets/codeeditor/assets/js/codeeditor.js
@@ -267,6 +267,21 @@
 
     $.fn.codeEditor.Constructor = CodeEditor
 
+    if ($.oc === undefined)
+        $.oc = {}
+
+    $.oc.codeEditorExtensionModes = {
+        'htm': 'html',
+        'html': 'html',
+        'md': 'markdown',
+        'txt': 'plain_text',
+        'js': 'javascript',
+        'less': 'less',
+        'scss': 'scss',
+        'sass': 'sass',
+        'css': 'css'
+    }
+
     // CODEEDITOR NO CONFLICT
     // =================
 
diff --git a/modules/cms/assets/js/october.cmspage.js b/modules/cms/assets/js/october.cmspage.js
index ccf903e0d..2a12c3f76 100644
--- a/modules/cms/assets/js/october.cmspage.js
+++ b/modules/cms/assets/js/october.cmspage.js
@@ -389,16 +389,7 @@
                 parts = fileName.split('.'),
                 extension = 'txt',
                 mode = 'plain_text',
-                modes = {
-                    'htm': 'html',
-                    'md': 'markdown',
-                    'txt': 'plain_text',
-                    'js': 'javascript',
-                    'less': 'less',
-                    'scss': 'scss',
-                    'sass': 'sass',
-                    'css': 'css'
-                },
+                modes = $.oc.codeEditorExtensionModes,
                 editor = $('[data-control=codeeditor]', pane)
 
             if (parts.length >= 2)
diff --git a/modules/cms/classes/CmsCompoundObject.php b/modules/cms/classes/CmsCompoundObject.php
index 634595ed3..158f4ddd9 100644
--- a/modules/cms/classes/CmsCompoundObject.php
+++ b/modules/cms/classes/CmsCompoundObject.php
@@ -8,6 +8,10 @@ use October\Rain\Support\ValidationException;
 use Cms\Classes\ViewBag;
 use Cache;
 use Config;
+use Twig_Environment;
+use System\Twig\Extension as SystemTwigExtension;
+use Cms\Twig\Extension as CmsTwigExtension;
+use Cms\Twig\Loader as TwigLoader;
 
 /**
  * This is a base class for CMS objects that have multiple sections - pages, partials and layouts.
@@ -332,6 +336,24 @@ class CmsCompoundObject extends CmsObject
         Cache::forget($key);
     }
 
+    /**
+     * Returns Twig node tree generated from the object's markup.
+     * This method is used by the system internally and shouldn't
+     * participate in the front-end request processing.
+     * @link http://twig.sensiolabs.org/doc/internals.html Twig internals
+     * @return Twig_Node_Module A node tree
+     */
+    public function getTwigNodeTree()
+    {
+        $loader = new TwigLoader();
+        $twig = new Twig_Environment($loader, []);
+        $twig->addExtension(new CmsTwigExtension());
+        $twig->addExtension(new SystemTwigExtension);
+
+        $stream = $twig->tokenize($this->markup, 'getTwigNodeTree');
+        return $twig->parse($stream);
+    }
+
     /**
      * Parses the settings array.
      * Child classes can override this method in order to update
diff --git a/modules/cms/twig/Extension.php b/modules/cms/twig/Extension.php
index 3b78af578..0ac43c54f 100644
--- a/modules/cms/twig/Extension.php
+++ b/modules/cms/twig/Extension.php
@@ -28,7 +28,7 @@ class Extension extends Twig_Extension
      * Creates the extension instance.
      * @param \Cms\Classes\Controller $controller The CMS controller object.
      */
-    public function __construct(Controller $controller)
+    public function __construct(Controller $controller = null)
     {
         $this->controller = $controller;
     }
diff --git a/modules/cms/widgets/TemplateList.php b/modules/cms/widgets/TemplateList.php
index 73b36debf..e45a4e0aa 100644
--- a/modules/cms/widgets/TemplateList.php
+++ b/modules/cms/widgets/TemplateList.php
@@ -58,6 +58,16 @@ class TemplateList extends WidgetBase
      */
     public $itemType;
 
+    /**
+     * @var string Extra CSS class name to apply to the control.
+     */
+    public $controlClass = null;
+
+    /**
+     * @var string A list of directories to suppress / hide.
+     */
+    public $suppressDirectories = [];
+
     /*
      * Public methods
      */
@@ -134,8 +144,17 @@ class TemplateList extends WidgetBase
         $items = call_user_func($this->dataSource);
 
         $normalizedItems = [];
-        foreach ($items as $item)
+        foreach ($items as $item) {
+            if ($this->suppressDirectories) {
+                $filelName = $item->getBaseFileName();
+                $dir = dirname($filelName);
+
+                if (in_array($dir, $this->suppressDirectories))
+                    continue;
+            }
+
             $normalizedItems[] = $this->normalizeItem($item);
+        }
 
         usort($normalizedItems, function($a, $b) {
             return strcmp($a->title, $b->title);
@@ -211,9 +230,9 @@ class TemplateList extends WidgetBase
         $titleProperty = $this->titleProperty;
 
         if ($titleProperty)
-            return $item->$titleProperty ?: $item->getFileName();
+            return $item->$titleProperty ?: basename($item->getFileName());
 
-        return $item->getFileName();
+        return basename($item->getFileName());
     }
 
     protected function setSearchTerm($term)
diff --git a/modules/cms/widgets/templatelist/partials/_items.htm b/modules/cms/widgets/templatelist/partials/_items.htm
index 1a37e578f..6a8f924d1 100644
--- a/modules/cms/widgets/templatelist/partials/_items.htm
+++ b/modules/cms/widgets/templatelist/partials/_items.htm
@@ -23,6 +23,7 @@
 
                             <?= e($item->description) ?>
                         </span>
+                        <span class="borders"></span>
                     </a>
 
                     <input type="hidden" name="template[<?= e($item->fileName) ?>]" value="0"/>
diff --git a/modules/cms/widgets/templatelist/partials/_templates.htm b/modules/cms/widgets/templatelist/partials/_templates.htm
index 12609a2b2..4809055db 100644
--- a/modules/cms/widgets/templatelist/partials/_templates.htm
+++ b/modules/cms/widgets/templatelist/partials/_templates.htm
@@ -1,6 +1,6 @@
 <div class="layout-absolute">
     <div class="control-scrollbar" data-control="scrollbar">
-        <div class="control-filelist" data-control="filelist" data-group-status-handler="<?= $this->getEventHandler('onGroupStatusUpdate') ?>" id="<?= $this->getId('template-list') ?>">
+        <div class="control-filelist <?= $this->controlClass ?>" data-control="filelist" data-group-status-handler="<?= $this->getEventHandler('onGroupStatusUpdate') ?>" id="<?= $this->getId('template-list') ?>">
             <?= $this->makePartial('items', ['items'=>$data]) ?>
         </div>
     </div>