diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tabs/umbtab.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tabs/umbtab.directive.js
deleted file mode 100644
index f25909affe..0000000000
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tabs/umbtab.directive.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
-* @ngdoc directive
-* @name umbraco.directives.directive:umbTab
-* @restrict E
-**/
-angular.module("umbraco.directives")
-.directive('umbTab', function ($parse, $timeout) {
-    return {
-		restrict: 'E',
-		replace: true,
-        transclude: 'true',
-		templateUrl: 'views/components/tabs/umb-tab.html'		
-    };
-});
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tabs/umbtabcontent.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tabs/umbtabcontent.directive.js
new file mode 100644
index 0000000000..6c27183a6b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/tabs/umbtabcontent.directive.js
@@ -0,0 +1,16 @@
+/**
+* @ngdoc directive
+* @name umbraco.directives.directive:umbTab
+* @restrict E
+**/
+(function () {
+    'use strict';
+
+    angular
+        .module('umbraco.directives')
+        .component('umbTabContent', {
+            transclude: true,
+            templateUrl: 'views/components/tabs/umb-tab-content.html'
+        });
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tabs/umbtabs.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tabs/umbtabs.directive.js
deleted file mode 100644
index 494c4a3f7d..0000000000
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tabs/umbtabs.directive.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
-* @ngdoc directive
-* @name umbraco.directives.directive:umbTabs 
-* @restrict A
-* @description Used to bind to bootstrap tab events so that sub directives can use this API to listen to tab changes
-**/
-angular.module("umbraco.directives")
-.directive('umbTabs', function () {
-    return {
-		restrict: 'A',
-        controller: function ($scope, $element, $attrs, eventsService) {
-            
-		    var callbacks = [];
-		    this.onTabShown = function(cb) {
-		        callbacks.push(cb);
-		    };
-
-            function tabShown(event) {
-
-                var curr = $(event.target);         // active tab
-                var prev = $(event.relatedTarget);  // previous tab
-				
-				// emit tab change event
-				var tabId = Number(curr.context.hash.replace("#tab", ""));
-				var args = { id: tabId, hash: curr.context.hash };
-				
-                eventsService.emit("app.tabChange", args);
-
-				$scope.$apply();
-
-                for (var c in callbacks) {
-                    callbacks[c].apply(this, [{current: curr, previous: prev}]);
-                }
-                
-            }
-            
-		    //NOTE: it MUST be done this way - binding to an ancestor element that exists
-		    // in the DOM to bind to the dynamic elements that will be created.
-		    // It would be nicer to create this event handler as a directive for which child
-		    // directives can attach to.
-            $element.on('shown', '.nav-tabs a', tabShown);
-
-		    //ensure to unregister
-            $scope.$on('$destroy', function () {
-		        $element.off('shown', '.nav-tabs a', tabShown);
-
-		        for (var c in callbacks) {
-		            delete callbacks[c];
-		        }
-		        callbacks = null;
-		    });
-		}
-    };
-});
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tabs/umbtabscontent.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tabs/umbtabscontent.directive.js
deleted file mode 100644
index f567e21b6a..0000000000
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tabs/umbtabscontent.directive.js
+++ /dev/null
@@ -1,25 +0,0 @@
-(function() {
-  'use strict';
-
-  function UmbTabsContentDirective() {
-
-    function link(scope, el, attr, ctrl) {
-
-      scope.view = attr.view;
-
-   }
-
-    var directive = {
-      restrict: "E",
-      replace: true,
-      transclude: 'true',
-      templateUrl: "views/components/tabs/umb-tabs-content.html",
-      link: link
-    };
-
-    return directive;
-  }
-
-  angular.module('umbraco.directives').directive('umbTabsContent', UmbTabsContentDirective);
-
-})();
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tabs/umbtabsnav.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tabs/umbtabsnav.directive.js
index 50c4775ef9..0ee8981d67 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tabs/umbtabsnav.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/tabs/umbtabsnav.directive.js
@@ -1,57 +1,33 @@
-(function() {
-  'use strict';
-
-  function UmbTabsNavDirective($timeout) {
-
-    function link(scope, el, attr) {
-
-      function activate() {
-
-        $timeout(function () {
-
-          //use bootstrap tabs API to show the first one
-          el.find("a:first").tab('show');
-
-          //enable the tab drop
-          el.tabdrop();
+(function () {
+    'use strict';
 
+    angular
+        .module('umbraco.directives')
+        .component('umbTabsNav', {
+            transclude: true,
+            templateUrl: "views/components/tabs/umb-tabs-nav.html",
+            controller: UmbTabsNavController,
+            controllerAs: 'vm',
+            bindings: {
+                tabs: "<",
+                onTabChange: "&"
+            }
         });
 
-      }
+    function UmbTabsNavController(eventsService) {
 
-      var unbindModelWatch = scope.$watch('model', function(newValue, oldValue){
+        var vm = this;
 
-        activate();
+        vm.clickTab = clickTab;
 
-      });
-
-
-      scope.$on('$destroy', function () {
-
-          //ensure to destroy tabdrop (unbinds window resize listeners)
-          el.tabdrop("destroy");
-
-          unbindModelWatch();
-
-      });
+        function clickTab($event, tab) {
+            if (vm.onTabChange) {
+                var args = { "tab": tab, "tabs": vm.tabs };
+                eventsService.emit("app.tabChange", args);
+                vm.onTabChange({ "event": $event, "tab": tab });
+            }
+        }
 
     }
 
-    var directive = {
-      restrict: "E",
-      replace: true,
-      templateUrl: "views/components/tabs/umb-tabs-nav.html",
-      scope: {
-        model: "=",
-        tabdrop: "=",
-        idSuffix: "@"
-      },
-      link: link
-    };
-
-    return directive;
-  }
-
-  angular.module('umbraco.directives').directive('umbTabsNav', UmbTabsNavDirective);
-
-})();
+})();
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less
index 4f3fd94bde..08df3b9f3e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less
@@ -1,3 +1,31 @@
-.umb-nav-tabs {
-  position: relative;
+.umb-tabs-nav {
+    position: relative;
+    margin-left: 0;
+    margin-bottom: 0;
+    list-style: none;
 }
+
+.umb-tab {
+    display: inline-flex;
+    margin-right: 15px;
+}
+
+.umb-tab > a {
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    color: @gray-3;
+    padding-bottom: 15px;
+}
+
+.umb-tab > a:hover {
+    color: @black;
+}
+
+.umb-tab--active > a,
+.umb-tab--active > a:hover,
+.umb-tab--active > a:focus {
+  color: @black;
+  border-bottom-color: @turquoise;
+  cursor: default;
+  text-decoration: none !important;
+}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tab.html b/src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tab-content.html
similarity index 96%
rename from src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tab.html
rename to src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tab-content.html
index 3696b81980..8ee6fb4c99 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tab.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tab-content.html
@@ -1,5 +1,5 @@
-<div class='umb-tab-pane tab-pane'>
-    <div class='umb-tab-pane-inner'>
-        <div ng-transclude></div>
-    </div>
-</div>
+<div class='umb-tab-pane tab-pane'>
+    <div class='umb-tab-pane-inner'>
+        <div ng-transclude></div>
+    </div>
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tabs-content.html b/src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tabs-content.html
deleted file mode 100644
index 8e1c7d4d67..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tabs-content.html
+++ /dev/null
@@ -1 +0,0 @@
-<div class="tab-content" ng-class="{'umb-tab-content': !view}" ng-transclude></div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tabs-nav.html b/src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tabs-nav.html
index 96c4adf783..0c39840c10 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tabs-nav.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tabs-nav.html
@@ -1,5 +1,5 @@
-<ul class="nav nav-tabs umb-nav-tabs">
-  <li data-element="tab-{{tab.alias}}" ng-class="{'tab-error': tabHasError}" ng-repeat="tab in model" val-tab>
-    <a data-toggle="tab" href="#tab{{tab.id}}{{idSuffix}}">{{ tab.label }}</a>
-  </li>
+<ul class="umb-tabs-nav">
+    <li class="umb-tab" data-element="tab-{{tab.alias}}" ng-class="{'umb-tab--active': tab.active, 'tab-error': tabHasError}" ng-repeat="tab in vm.tabs" val-tab>
+        <a ng-href="" ng-click="vm.clickTab($event, tab)">{{ tab.label }}</a>
+    </li>
 </ul>