diff --git a/assets/css/src/settings.styl b/assets/css/src/settings.styl
index b08b1975c9..93968ef228 100644
--- a/assets/css/src/settings.styl
+++ b/assets/css/src/settings.styl
@@ -1,7 +1,10 @@
-.mailpoet_form .form-table th
+#mailpoet_role_permissions
+  margin-top: 20px;
+
+#mailpoet_settings .form-table th
   width:20em
 
 // responsive
 @media screen and (max-width: 782px)
-  .mailpoet_form .form-table th
+  #mailpoet_settings .form-table th
     width: auto
\ No newline at end of file
diff --git a/assets/js/src/newsletters/list.jsx b/assets/js/src/newsletters/list.jsx
index 6a9fd55295..46f4d44ad1 100644
--- a/assets/js/src/newsletters/list.jsx
+++ b/assets/js/src/newsletters/list.jsx
@@ -80,7 +80,10 @@ define(
       render: function() {
         return (
           <div>
-            <h1>Newsletters <Link className="add-new-h2" to="new">New</Link></h1>
+            <h2 className="title">
+              Newsletters <Link className="add-new-h2" to="new">New</Link>
+            </h2>
+
             <Listing
               endpoint="newsletters"
               onRenderItem={this.renderItem}
diff --git a/assets/js/src/newsletters/newsletters.jsx b/assets/js/src/newsletters/newsletters.jsx
index 0f15dd791b..453b9246aa 100644
--- a/assets/js/src/newsletters/newsletters.jsx
+++ b/assets/js/src/newsletters/newsletters.jsx
@@ -24,7 +24,7 @@ define(
     var App = React.createClass({
       render: function() {
         return (
-          <RouteHandler/>
+          <RouteHandler />
         );
       }
     });
diff --git a/assets/js/src/segments/form.jsx b/assets/js/src/segments/form.jsx
index 0bd8ff19ab..06e2938a19 100644
--- a/assets/js/src/segments/form.jsx
+++ b/assets/js/src/segments/form.jsx
@@ -1,11 +1,13 @@
 define(
   [
     'react',
+    'react-router',
     'mailpoet',
     'form/form.jsx'
   ],
   function(
     React,
+    Router,
     MailPoet,
     Form
   ) {
@@ -27,15 +29,22 @@ define(
       }
     };
 
+    var Link = Router.Link;
+
     var SegmentForm = React.createClass({
       render: function() {
-
         return (
-          <Form
-            endpoint="segments"
-            fields={ fields }
-            params={ this.props.params }
-            messages={ messages } />
+          <div>
+            <h2 className="title">
+              Segment <Link className="add-new-h2" to="/">Back to list</Link>
+            </h2>
+
+            <Form
+              endpoint="segments"
+              fields={ fields }
+              params={ this.props.params }
+              messages={ messages } />
+          </div>
         );
       }
     });
diff --git a/assets/js/src/segments/list.jsx b/assets/js/src/segments/list.jsx
index 25fc720bee..287be13d1c 100644
--- a/assets/js/src/segments/list.jsx
+++ b/assets/js/src/segments/list.jsx
@@ -1,11 +1,13 @@
 define(
   [
     'react',
+    'react-router',
     'listing/listing.jsx',
     'classnames'
   ],
   function(
     React,
+    Router,
     Listing,
     classNames
   ) {
@@ -34,6 +36,8 @@ define(
       }
     ];
 
+    var Link = Router.Link;
+
     var SegmentList = React.createClass({
       renderItem: function(segment, actions) {
         var rowClasses = classNames(
@@ -61,11 +65,17 @@ define(
       },
       render: function() {
         return (
-          <Listing
-            endpoint="segments"
-            onRenderItem={this.renderItem}
-            columns={columns}
-            bulk_actions={ bulk_actions } />
+          <div>
+            <h2 className="title">
+              Segments <Link className="add-new-h2" to="new">New</Link>
+            </h2>
+
+            <Listing
+              endpoint="segments"
+              onRenderItem={this.renderItem}
+              columns={columns}
+              bulk_actions={ bulk_actions } />
+          </div>
         );
       }
     });
diff --git a/assets/js/src/segments/segments.jsx b/assets/js/src/segments/segments.jsx
index 9c62a4a011..2d460e2144 100644
--- a/assets/js/src/segments/segments.jsx
+++ b/assets/js/src/segments/segments.jsx
@@ -20,15 +20,7 @@ define(
     var App = React.createClass({
       render: function() {
         return (
-          <div>
-            <h1>
-              { MailPoetI18n.pageTitle }
-              &nbsp;
-              <Link className="add-new-h2" to="new">New</Link>
-            </h1>
-
-            <RouteHandler/>
-          </div>
+          <RouteHandler />
         );
       }
     });
diff --git a/assets/js/src/settings/tabs.js b/assets/js/src/settings/tabs.js
new file mode 100644
index 0000000000..cc4aad1f24
--- /dev/null
+++ b/assets/js/src/settings/tabs.js
@@ -0,0 +1,79 @@
+define(
+  [
+    'backbone',
+    'jquery',
+    'mailpoet'
+  ],
+  function(
+    Backbone,
+    jQuery,
+    MailPoet
+  ) {
+    if(jQuery('#mailpoet_settings').length === 0) {
+      return;
+    }
+
+    MailPoet.Router = new (Backbone.Router.extend({
+      routes: {
+        'mta(/:method)': 'sendingMethod',
+        '(:tab)': 'tabs',
+      },
+      sendingMethod: function(method) {
+        // display mta tab
+        this.tabs('mta');
+
+        // hide all sending methods' settings
+        jQuery(
+          '#mailpoet_sending_method_setup, .mailpoet_sending_method'
+        ).hide();
+
+        // hide "save settings" button
+        jQuery('.mailpoet_settings_submit').hide();
+
+        if(method === null) {
+          // show sending methods
+          jQuery('.mailpoet_sending_methods').fadeIn();
+        } else {
+          // hide DKIM option when using MailPoet's API
+          jQuery('#mailpoet_mta_dkim')[
+            (method === 'mailpoet')
+            ? 'hide'
+            : 'show'
+          ]();
+
+          // hide sending methods
+          jQuery('.mailpoet_sending_methods').hide();
+
+          // display selected sending method's settings
+          jQuery('.mailpoet_sending_method[data-method="'+ method +'"]').show();
+          jQuery('#mailpoet_sending_method_setup').fadeIn();
+        }
+      },
+      tabs: function(tab, section) {
+        // set default tab
+        tab = tab || 'basics';
+
+        // reset all active tabs
+        jQuery('.nav-tab-wrapper a').removeClass('nav-tab-active');
+
+        // hide panels & sections
+        jQuery('.mailpoet_panel, .mailpoet_section').hide();
+
+        // set active tab
+        jQuery('a.nav-tab[href="#'+tab+'"]').addClass('nav-tab-active').blur();
+
+        // show selected panel
+        if(jQuery('.mailpoet_panel[data-tab="'+ tab +'"]').length > 0) {
+          jQuery('.mailpoet_panel[data-tab="'+ tab +'"]').show();
+        }
+
+        // show "save settings" button
+        jQuery('.mailpoet_settings_submit').show();
+      }
+    }));
+
+    jQuery(document).ready(function() {
+      Backbone.history.start();
+    });
+  }
+);
\ No newline at end of file
diff --git a/assets/js/src/subscribers/form.jsx b/assets/js/src/subscribers/form.jsx
index 63fb31ac33..2db90ca0fd 100644
--- a/assets/js/src/subscribers/form.jsx
+++ b/assets/js/src/subscribers/form.jsx
@@ -1,11 +1,13 @@
 define(
   [
     'react',
+    'react-router',
     'mailpoet',
     'form/form.jsx'
   ],
   function(
     React,
+    Router,
     MailPoet,
     Form
   ) {
@@ -47,15 +49,22 @@ define(
       }
     };
 
+    var Link = Router.Link;
+
     var SubscriberForm = React.createClass({
       render: function() {
-
         return (
-          <Form
-            endpoint="subscribers"
-            fields={ fields }
-            params={ this.props.params }
-            messages={ messages } />
+          <div>
+            <h2 className="title">
+              Subscriber <Link className="add-new-h2" to="/">Back to list</Link>
+            </h2>
+
+            <Form
+              endpoint="subscribers"
+              fields={ fields }
+              params={ this.props.params }
+              messages={ messages } />
+          </div>
         );
       }
     });
diff --git a/assets/js/src/subscribers/list.jsx b/assets/js/src/subscribers/list.jsx
index f63b6dadf7..68ba2e749b 100644
--- a/assets/js/src/subscribers/list.jsx
+++ b/assets/js/src/subscribers/list.jsx
@@ -177,11 +177,17 @@ define(
       },
       render: function() {
         return (
-          <Listing
-            endpoint="subscribers"
-            onRenderItem={ this.renderItem }
-            columns={ columns }
-            bulk_actions={ bulk_actions } />
+          <div>
+            <h2 className="title">
+              Subscribers <Link className="add-new-h2" to="new">New</Link>
+            </h2>
+
+            <Listing
+              endpoint="subscribers"
+              onRenderItem={ this.renderItem }
+              columns={ columns }
+              bulk_actions={ bulk_actions } />
+          </div>
         );
       }
     });
diff --git a/assets/js/src/subscribers/subscribers.jsx b/assets/js/src/subscribers/subscribers.jsx
index 4de3b14a6c..eddd29dae5 100644
--- a/assets/js/src/subscribers/subscribers.jsx
+++ b/assets/js/src/subscribers/subscribers.jsx
@@ -20,15 +20,7 @@ define(
     var App = React.createClass({
       render: function() {
         return (
-          <div>
-            <h1>
-              { MailPoetI18n.pageTitle }
-              &nbsp;
-              <Link className="add-new-h2" to="new">New</Link>
-            </h1>
-
-            <RouteHandler/>
-          </div>
+          <RouteHandler />
         );
       }
     });
diff --git a/views/settings.html b/views/settings.html
index da8df3598b..3ec114ccf8 100644
--- a/views/settings.html
+++ b/views/settings.html
@@ -3,7 +3,7 @@
 <% block content %>
   <div id="mailpoet_settings">
 
-    <h1 class="title"><%= __('Settings') %></h1>
+    <h2 class="title"><%= __('Settings') %></h2>
 
     <!-- settings form  -->
     <form
@@ -22,32 +22,31 @@
       </h2>
 
       <!-- basics -->
-
-      <div id="mailpoet_settings_basics" class="mailpoet_panel">
-         <% include 'settings/basics.html' %>
+      <div data-tab="basics" class="mailpoet_panel">
+        <% include 'settings/basics.html' %>
       </div>
 
       <!-- signup confirmation -->
-      <div id="mailpoet_settings_signup" class="mailpoet_panel">
+      <div data-tab="signup" class="mailpoet_panel">
         <% include 'settings/signup.html' %>
       </div>
-<#
+
       <!-- sending method -->
-      <div id="mailpoet_settings_mta" class="mailpoet_panel">
+      <div data-tab="mta" class="mailpoet_panel">
         <% include 'settings/mta.html' %>
       </div>
-#>
+
       <!-- advanced -->
-      <div id="mailpoet_settings_advanced" class="mailpoet_panel">
+      <div data-tab="advanced" class="mailpoet_panel">
         <% include 'settings/advanced.html' %>
       </div>
-<#
+
       <!-- bounce -->
-      <div id="mailpoet_settings_bounce" class="mailpoet_panel">
+      <div data-tab="bounce" class="mailpoet_panel">
         <% include 'settings/bounce.html' %>
       </div>
-#>
-      <p>
+
+      <p class="submit mailpoet_settings_submit">
         <input
           type="submit"
           class="button button-primary"
@@ -62,7 +61,6 @@
     jQuery(function($) {
       // on dom loaded
       $(function() {
-
         // setup toggle checkboxes
         function toggleContent() {
           $('#'+$(this).data('toggle'))[
diff --git a/views/settings/advanced.html b/views/settings/advanced.html
index 2887f182e5..8ffb5d4887 100644
--- a/views/settings/advanced.html
+++ b/views/settings/advanced.html
@@ -1,4 +1,4 @@
-<table class="widefat fixed">
+<table id="mailpoet_role_permissions" class="widefat fixed">
   <thead>
     <tr>
       <th class="manage-column">
@@ -85,7 +85,7 @@
               <% if(settings.analytics) %>
                 checked="checked"
               <% endif %>
-            /> <%= __('Yes') %>
+            /><%= __('Yes') %>
           </label>
           &nbsp;
           <label>
@@ -96,7 +96,7 @@
               <% if not(settings.analytics) %>
                 checked="checked"
               <% endif %>
-            /> <%= __('No') %>
+            /><%= __('No') %>
           </label>
         </p>
       </td>
diff --git a/views/settings/mta.html b/views/settings/mta.html
index f7f122e53a..e69de29bb2 100644
--- a/views/settings/mta.html
+++ b/views/settings/mta.html
@@ -1 +0,0 @@
-mta.html
\ No newline at end of file
diff --git a/views/settings/signup.html b/views/settings/signup.html
index c453e01543..b91cd235d4 100644
--- a/views/settings/signup.html
+++ b/views/settings/signup.html
@@ -113,7 +113,10 @@
           <% if(settings.signup_confirmation_email_subject) %>
             value="<%= settings.signup_confirmation_email_subject %>"
           <% else %>
-            value="<%= __('Confirm your subscription to %1$s') %>"
+            value="<%=
+              __('Confirm your subscription to %1$s')
+              | format(get_option('blogname'))
+            %>"
           <% endif %>
         />
       </td>
diff --git a/webpack.config.js b/webpack.config.js
index cea931fda3..051aee0c36 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -68,7 +68,8 @@ config.push(_.extend({}, baseConfig, {
     admin: [
       'subscribers/subscribers.jsx',
       'newsletters/newsletters.jsx',
-      'segments/segments.jsx'
+      'segments/segments.jsx',
+      'settings/tabs.js'
     ],
     newsletter_editor: [
       'underscore',