diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css
index 150987fe1..47a6ebabc 100644
--- a/modules/backend/assets/css/october.css
+++ b/modules/backend/assets/css/october.css
@@ -11935,11 +11935,27 @@ div.popover-overlay {
   padding-left: 20px;
   padding-right: 20px;
 }
+.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs,
+.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs {
+  margin-left: -8px;
+}
+.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li,
+.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li {
+  margin-left: -10px;
+}
+.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li span.tab-close,
+.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li span.tab-close {
+  top: 9px;
+  right: -3px;
+  left: auto;
+  z-index: 110;
+}
 .fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li span.tab-close i,
 .fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li span.tab-close i {
   top: 4px;
   right: 1px;
-  color: #e39664 !important;
+  color: rgba(255, 255, 255, 0.3) !important;
+  font: 14px bold "Helvetica Neue", Helvetica, Arial, sans-seri8;
 }
 .fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li span.tab-close i:hover,
 .fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li span.tab-close i:hover {
@@ -11949,18 +11965,104 @@ div.popover-overlay {
 .fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a {
   border-bottom: none;
   background: transparent;
-  padding: 11px 15px 12px 5px;
   font-size: 14px;
   color: #e39664;
+  padding: 6px 0 0 0;
+  overflow: visible;
+}
+.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title,
+.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title {
+  position: relative;
+  display: inline-block;
+  padding: 8px 5px 9px 5px;
+  font-size: 13px;
+  z-index: 100;
+  background-color: #b9530f;
+}
+.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:before,
+.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:before,
+.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:after,
+.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:after {
+  content: ' ';
+  position: absolute;
+  background: transparent url(../images/tab-shape.svg) no-repeat left -80px;
+  width: 20px;
+  display: block;
+  height: 30px;
+  top: 0;
+  z-index: 100;
+}
+.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:before,
+.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:before {
+  left: -20px;
+}
+.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:after,
+.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:after {
+  right: -20px;
+  background-position: -80px -80px;
+}
+.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a:before,
+.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a:before {
+  z-index: 110;
+  position: relative;
+  margin-right: -12px;
+}
+.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a[class*=icon] > span.title,
+.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a[class*=icon] > span.title {
+  padding-left: 18px;
 }
 .fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active a,
 .fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active a {
+  z-index: 107;
   color: #ffffff;
 }
 .fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active span.tab-close i,
 .fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active span.tab-close i {
   color: #ffffff;
 }
+.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active a > span.title,
+.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active a > span.title {
+  background-color: #e67e22;
+  z-index: 105;
+}
+.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active a > span.title:before,
+.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active a > span.title:before {
+  background-position: left -40px;
+  z-index: 107;
+}
+.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active a > span.title:after,
+.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li.active a > span.title:after {
+  background-position: -80px -40px;
+  z-index: 107;
+}
+.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li[data-modified] span.tab-close i,
+.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li[data-modified] span.tab-close i {
+  top: 4px;
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li[data-modified] span.tab-close i:before,
+.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li[data-modified] span.tab-close i:before {
+  font-family: FontAwesome;
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  -webkit-font-smoothing: antialiased;
+  *margin-right: .3em;
+  content: "\f111";
+  font-size: 9px;
+}
+.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li:first-child,
+.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li:first-child {
+  margin-left: 0;
+}
+.fancy-layout .control-tabs.master[data-closable] > div > div.tabs-container > ul.nav-tabs > li a > span.title,
+.fancy-layout.control-tabs.master[data-closable] > div > div.tabs-container > ul.nav-tabs > li a > span.title {
+  padding-right: 10px;
+}
 .fancy-layout .control-tabs.master.has-tabs:before,
 .fancy-layout.control-tabs.master.has-tabs:before,
 .fancy-layout .control-tabs.master.has-tabs:after,
diff --git a/modules/backend/assets/images/tab-shape.svg b/modules/backend/assets/images/tab-shape.svg
new file mode 100644
index 000000000..d90911ca0
--- /dev/null
+++ b/modules/backend/assets/images/tab-shape.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="100px" height="110px" viewBox="0 0 100 110" enable-background="new 0 0 100 110" xml:space="preserve">
+<defs>
+</defs>
+<path d="M0,30C5,30,10,0,20,0c5,0,60,0,65,0c10,0,10,30,15,30"/>
+<path fill="#E67E22" d="M0,70c5,0,10-30,20-30c0,10,0,15,0,15v15"/>
+<path fill="#E67E22" d="M100,70c-5,0-10-30-20-30c0,10,0,15,0,15v15"/>
+<path fill="#B9530F" d="M0,110c5,0,10-30,20-30c0,10,0,15,0,15v15"/>
+<path fill="#B9530F" d="M100,110c-5,0-10-30-20-30c0,10,0,15,0,15v15"/>
+</svg>
diff --git a/modules/backend/assets/js/october.tab.js b/modules/backend/assets/js/october.tab.js
index 25e6c40dc..4e8dd214b 100644
--- a/modules/backend/assets/js/october.tab.js
+++ b/modules/backend/assets/js/october.tab.js
@@ -139,8 +139,13 @@
         if (!$a.attr('title'))
             $a.attr('title', $a.text())
 
+        var html = $a.html()
+
+        $a.html('')
+        $a.append($('<span class="title"></span>').html(html))
+
         var pane = $('> .tab-pane', this.$pagesContainer).eq(tabIndex).attr('id', targetId)
-        $(li).append($('<span class="tab-close"><i class="icon-times"></i></span>').click(function(){
+        $(li).append($('<span class="tab-close"><i>&times;</i></span>').click(function(){
             $(this).trigger('close.oc.tab')
             return false
         }))
diff --git a/modules/backend/assets/less/controls/fancylayout.less b/modules/backend/assets/less/controls/fancylayout.less
index 44efc6366..bc9cf08bb 100644
--- a/modules/backend/assets/less/controls/fancylayout.less
+++ b/modules/backend/assets/less/controls/fancylayout.less
@@ -52,26 +52,122 @@
                 padding-right: 20px;
 
                 > ul.nav-tabs {
+                    margin-left: -8px;
                     > li {
-                        span.tab-close i {
-                            top: 4px;
-                            right: 1px;
-                            color: @color-fancy-master-tabs-inactive-text!important;
+                        margin-left: -10px;
 
-                            &:hover {color: @color-fancy-master-tabs-active-text!important;}
+                        span.tab-close{
+                            top: 9px;
+                            right: -3px;
+                            left: auto;
+                            z-index: 110;
+
+                            i {
+                                top: 4px;
+                                right: 1px;
+                                color: rgba(255, 255, 255, 0.3)!important;
+                                font: 14px bold "Helvetica Neue", Helvetica, Arial, sans-seri8;
+    
+                                &:hover {color: @color-fancy-master-tabs-active-text!important;}
+                            }
+                        
                         }
 
                         a {
                             border-bottom: none;
                             background: transparent;
-                            padding: 11px 15px 12px 5px;
                             font-size: 14px;
                             color: @color-fancy-master-tabs-inactive-text;
+                            padding: 6px 0 0 0;
+                            overflow: visible;
+
+                            > span.title {
+                                position: relative;
+                                display: inline-block;
+                                padding: 8px 5px 9px 5px;
+                                font-size: 13px;
+                                z-index: 100;
+                                background-color: @color-fancy-form-inactive-tab;
+
+                                &:before, &:after {
+                                    content: ' ';
+                                    position: absolute;
+                                    background: transparent url(../images/tab-shape.svg) no-repeat left -80px;
+                                    width: 20px;
+                                    display: block;
+                                    height: 30px;
+                                    top: 0;
+                                    z-index: 100;
+                                }
+
+                                &:before {
+                                    left: -20px;
+                                }
+
+                                &:after {
+                                    right: -20px;
+                                    background-position: -80px -80px;
+                                }
+                            }
+
+                            &:before {
+                                z-index: 110;
+                                position: relative;
+                                margin-right: -12px;
+                            }
+
+                            &[class*=icon] > span.title {
+                                padding-left: 18px;
+                            }
                         }
 
                         &.active {
-                            a {color: @color-fancy-master-tabs-active-text;}
+                            a {
+                                z-index: 107;
+                                color: @color-fancy-master-tabs-active-text;
+                            }
                             span.tab-close i {color: @color-fancy-master-tabs-active-text;}
+
+                            a > span.title {
+                                background-color: @color-fancy-form-tabless-fields-bg;
+                                z-index: 105;
+                                &:before {
+                                    background-position: left -40px;
+                                    z-index: 107;
+                                }
+                                &:after {
+                                    background-position: -80px -40px;
+                                    z-index: 107;
+                                }
+                            }
+                        }
+
+                            &[data-modified] {
+                                span.tab-close i {
+                                    top: 4px;
+                                    .hide-text();
+
+                                    &:before {
+                                        .icon(@circle);
+                                        font-size: 9px;
+                                    }
+                                }
+                            }
+
+                        &:first-child {
+                            margin-left: 0;
+                        }
+                    }
+                }
+            }
+
+            &[data-closable] {
+                > div > div.tabs-container {
+                    > ul.nav-tabs {
+                        > li {
+                            a > span.title {
+                                padding-right: 10px;
+                            }
                         }
                     }
                 }
diff --git a/modules/backend/assets/less/core/variables.less b/modules/backend/assets/less/core/variables.less
index ad765bb43..99e18463c 100644
--- a/modules/backend/assets/less/core/variables.less
+++ b/modules/backend/assets/less/core/variables.less
@@ -221,6 +221,7 @@
 @color-fancy-form-text:                      #ffffff;
 @color-fancy-form-text-selection:            #d35400;
 @color-fancy-form-placeholder:               #f4c69e;
+@color-fancy-form-inactive-tab:              #b9530f;
 
 @color-popup-header-bg:                      #d35400;
 @color-popup-header-text:                    #ECF0F1;