diff --git a/.gitignore b/.gitignore
index 57bd729..3ec9837 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,4 @@
-/mpp-sw.txt
-/examples/smartwizard-bs.html
-/examples/Wizard Button.html
+/ref.txt
 /node_modules/
 /bower_components/
 /vendor/
diff --git a/.npmignore b/.npmignore
index 3ce91cf..b1cef55 100644
--- a/.npmignore
+++ b/.npmignore
@@ -58,9 +58,7 @@ Thumbs.db
 .Spotlight-V100
 .Trashes
 
-/mpp-sw.txt
-/examples/smartwizard-bs.html
-/examples/Wizard Button.html
+/ref.txt
 /node_modules/
 /bower_components/
 /vendor/
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 2aca3c0..c8e4e51 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,7 +1,7 @@
 # Contributing
 
 ## How can I contribute?
-- Fix a bug you found or already reported on the [GitHub Issues Tracker](https://github.com/techlab/SmartWizard/issues/).
+- Fix a bug you found or already reported on the [GitHub Issues Tracker](https://github.com/techlab/jquery-smartwizard/issues/).
 - Add new features to the project.
 - Create new themes  
 - Add new test cases.
@@ -12,7 +12,7 @@
 ## How to contribute code?
 Here are the basic steps to get started contributing code:
 
-1. Fork the [repo](https://github.com/techlab/SmartWizard/) and get development running on your computer.
+1. Fork the [repo](https://github.com/techlab/jquery-smartwizard/) and get development running on your computer.
 2. Install gulp and karma `npm install gulp-cli karma-cli -g` 
 3. Install the npm development dependencies by the command `npm install` on the project folder (Should have NodeJS installed).
 4. Replicate the issue you're trying to fix or spec out the feature you're trying to add.
@@ -22,7 +22,7 @@ Here are the basic steps to get started contributing code:
 8. Run the test cases by running `npm test` or `gulp test`, you can also add more test cases based on your new change.
 9. Verify that your fix or feature works.
 10. Commit your changes with an informative description.
-11. Open a pull request to the [dev](https://github.com/techlab/SmartWizard/tree/dev) branch of the [repo](https://github.com/techlab/SmartWizard/) with your new commit and a descriptive message about what the PR does.
+11. Open a pull request to the [dev](https://github.com/techlab/jquery-smartwizard/tree/dev) branch of the [repo](https://github.com/techlab/jquery-smartwizard/) with your new commit and a descriptive message about what the PR does.
 
 Thank you for your contribution!
 
@@ -39,8 +39,8 @@ Before reporting the bug, please make sure that the bug is in the project and no
 #### Try the latest version
 Bugs in the older versions of the project may have already been fixed.
 In order to avoid reporting known issues, make sure you are always testing against the latest release.
-Also make sure the problem hasn't already been reported on the [GitHub Issues Tracker](https://github.com/techlab/SmartWizard/issues/).
+Also make sure the problem hasn't already been reported on the [GitHub Issues Tracker](https://github.com/techlab/jquery-smartwizard/issues/).
 If not, create a new issue there and include your test case.
 
 ## Contributors
-Million thanks to all our [Code Contributors](https://github.com/techlab/SmartWizard/graphs/contributors) and Supporters.
+Million thanks to all our [Code Contributors](https://github.com/techlab/jquery-smartwizard/graphs/contributors) and Supporters.
diff --git a/README.md b/README.md
index 19aef73..994a973 100644
--- a/README.md
+++ b/README.md
@@ -1,39 +1,44 @@
-# jQuery Smart Wizard 4
-#### The awesome jQuery step wizard plugin with Bootstrap support.
+# jQuery Smart Wizard v5
+#### The awesome jQuery step wizard plugin.
 
 [![Build Status](https://travis-ci.org/techlab/jquery-smartwizard.svg?branch=master)](https://travis-ci.org/techlab/jquery-smartwizard)
 [![npm version](https://badge.fury.io/js/smartwizard.svg)](https://badge.fury.io/js/smartwizard)
 [![Latest Stable Version](https://poser.pugx.org/techlab/smartwizard/v/stable)](https://packagist.org/packages/techlab/smartwizard)
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/techlab/SmartWizard/master/LICENSE)
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/techlab/jquery-smartwizard/master/LICENSE)
 [![Donate on Paypal](https://img.shields.io/badge/PayPal-dipuraj-blue.svg)](https://www.paypal.me/dipuraj)
 
-Smart Wizard is a flexible and heavily customizable **jQuery step wizard plugin** with **Bootstrap** support. It is easy to implement and gives a neat and stylish interface for your forms, checkout screen, registration steps etc. Based on the feedback from our users over the past years we have come up with the **best ever built jQuery wizard plugin of all time**, all new Smart Wizard 4. The plugin is been completely rewritten from scratch, made it more powerful, robust, scalable and customizable. We have added a lot of features not limited to Bootstrap 4 support, themes, customizable toolbars, customizable options, public methods, event support and a lot more.
 
-+ [Homepage](http://techlaboratory.net/smartwizard)
-+ [Documentation](http://techlaboratory.net/smartwizard#documentation)
-+ [Demos](http://techlaboratory.net/smartwizard#demo)
+**jQuery Smart Wizard** is a step wizard plugin for jQuery.
+Provides a neat and stylish interface for your forms, checkout screen, registration steps, etc.
+Easy implementation,  Bootstrap compatiblity, customizable toolbars, themes, events and Ajax support are few of the features.
+
+
++ [Homepage](http://techlaboratory.net/jquery-smartwizard)
++ [Documentation](http://techlaboratory.net/jquery-smartwizard#documentation)
++ [Demos](http://techlaboratory.net/jquery-smartwizard#demo)
 + [StackOverflow Q&A](http://stackoverflow.com/questions/tagged/smart-wizard)
-+ [GitHub Issues](https://github.com/techlab/SmartWizard/issues)
++ [GitHub Issues](https://github.com/techlab/jquery-smartwizard/issues)
+
+Demos
+-----
++ [Basic Example](http://techlaboratory.net/projects/demo/jquery-smart-wizard/v5)
++ [Ajax Example](http://techlaboratory.net/projects/demo/jquery-smart-wizard/v5/ajax)
++ [Multiple Wizard Example](http://techlaboratory.net/projects/demo/jquery-smart-wizard/v5/multiple)
 
 Screenshots
 -----
-![Smart Wizard Screenshot1](http://techlaboratory.net/assets/media/products/SmartWizard43_1.png?v1)   
+![Smart Wizard Default](http://techlaboratory.net/assets/media/jquery-smart-wizard/jquery-smartwizard-v5-default.png)   
 
-![Smart Wizard Screenshot2](http://techlaboratory.net/assets/media/products/SmartWizard43_2.png?v1)   
+![Smart Wizard Arrows](http://techlaboratory.net/assets/media/jquery-smart-wizard/jquery-smartwizard-v5-arrows.png)   
 
-![Smart Wizard Screenshot3](http://techlaboratory.net/assets/media/products/SmartWizard43_3.png?v1)   
+![Smart Wizard Black](http://techlaboratory.net/assets/media/jquery-smart-wizard/jquery-smartwizard-v5-dark.png)   
+
+![Smart Wizard Dots](http://techlaboratory.net/assets/media/jquery-smart-wizard/jquery-smartwizard-v5-dots.png)  
 
-Demos
------
-  + [Basic Example](http://techlaboratory.net/projects/demo/jquery-smart-wizard/v4/basic)
-  + [Input Validation](http://techlaboratory.net/projects/demo/jquery-smart-wizard/v4/validation)
-  + [Events](http://techlaboratory.net/projects/demo/jquery-smart-wizard/v4/events)
-  + [With Modal Dialog](http://techlaboratory.net/projects/demo/jquery-smart-wizard/v4/modal)
 
 Requirements
 -----
-  + [Bootstrap 4.0.0](http://getbootstrap.com/getting-started/#download)
-  + [jQuery](http://jquery.com/) (supports jQuery 1.9+, jQuery 2+ and jQuery 3+)
+  + [jQuery](http://jquery.com/) (supports from jQuery-1.11.1+ to the latest jQuery-3.5)
 
 Installation
 -----
@@ -51,93 +56,151 @@ Installation
     composer require techlab/smartwizard
 
 ### Download
-#### [Download from GitHub](https://github.com/techlab/jquery-smartwizard/archive/master.zip)    
+#### [Download from GitHub](https://github.com/techlab/jquery-smartwizard/archive/master.zip)
+
+Features
+-----
+
+- Standalone CSS
+- Bootstrap compatible
+- Various themes included
+- Customizable CSS
+- URL navigation and selection
+- Event support
+- Ajax content loading support
+- Keyboard navigation
+- Auto content height adjustment
+- Cool transition animations (fade/slide-horizontal/slide-vertical/slide-swing)
+- External anchor support
+- Easy to implement and minimal HTML required
+- Customizable toolbar, option to add extra buttons
+- Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 2+, jQuery 3.5+)
+- Supports all modern browsers
+- Responsive design
+- In-built reset method
+- Easy navigation with step anchors and navigation buttons
 
 Usage
 -----
 
-Include Bootstrap CSS (*ignore this if you have already included on the page*).
-```html
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
-```
 Include SmartWizard CSS
 ```html
-<link href="../dist/css/smart_wizard.css" rel="stylesheet" type="text/css" />
+<link href="../dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
 ```
-Optionally, if you want to use the theme include the corresponding theme css
-```html
-<link href="../dist/css/smart_wizard_theme_arrows.css" rel="stylesheet" type="text/css" />
-```
-Include HTML (*This is the basic HTML markup for the Smart Wizard. You can customize it by adding your on steps contents*).
+
+Include HTML (*This is the basic HTML markup for the Smart Wizard. You can customize it by adding your on steps content*).
 ```html
 <div id="smartwizard">
-    <ul>
-        <li><a href="#step-1">Step Title<br /><small>Step description</small></a></li>
-        <li><a href="#step-2">Step Title<br /><small>Step description</small></a></li>
-        <li><a href="#step-3">Step Title<br /><small>Step description</small></a></li>
-        <li><a href="#step-4">Step Title<br /><small>Step description</small></a></li>
+
+    <ul class="nav">
+        <li class="nav-item">
+          <a class="nav-link" href="#step-1">
+            Step 1
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#step-2">
+            Step 2
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#step-3">
+            Step 3
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#step-4">
+            Step 4
+          </a>
+        </li>
     </ul>
 
-    <div>
-        <div id="step-1" class="">
-            Step Content
+    <div class="tab-content">
+        <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
+            Step 1 Content
         </div>
-        <div id="step-2" class="">
-            Step Content
+        <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
+            Step 2 Content
         </div>
-        <div id="step-3" class="">
-            Step Content
+        <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
+            Step 3 Content
         </div>
-        <div id="step-4" class="">
-            Step Content
+        <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
+            Step 4 Content
         </div>
     </div>
 </div>
 ```
-Include jQuery (*ignore this if you have already included on the page*).
+
+Include jQuery (*ignore this if you have already included on the page*).  
 ```html
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 ```
+
 Include SmartWizard plugin
 ```html
-<script type="text/javascript" src="../dist/js/jquery.smartWizard.min.js"></script>
+<script src="../dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
 ```
 Initialize the SmartWizard
-```javascript
+```html
 <script type="text/javascript">
-$(document).ready(function(){
+$(document).ready(function() {
 
     $('#smartwizard').smartWizard();
 
 });
 </script>
 ```
-That's it! Now you see the wizard on the page.  
-Please see the [documentation](http://techlaboratory.net/smartwizard#documentation) for more details on implementation and usage.  
-
-Features
------
-  + Bootstrap 3 & 4 support
-  + Responsive themes
-  + Heavily customizable toolbar, option to add extra buttons
-  + Theme support with various themes included
-  + Customizable css styles
-  + Url navigation and step selection
-  + Public methods for external function call
-  + Enhanced event support
-  + In-built wizard reset method
-  + Ajax content loading with option to specify individual url for steps
-  + Keyboard navigation
-  + Easy navigation with step anchors and navigation buttons
-  + Multiple wizard instance on same page
-  + Integratable to model window  
-  + Dynamically hide or disable steps
-  + Auto content height adjustment
-  + Compatible with latest jQuery versions (jQuery 1.9+, jQuery 2+, jQuery 3+)
-  + Easy to implement, Minimal HTML required
-  + and a lot more...  
-
-> Please use jQuery full version (`jquery-3.3.x.min.js`) as the jQuery slim version (`jquery-3.3.x.slim.min.js`) is not yet supported.
+That's it!   
+
+Please see the [documentation](http://techlaboratory.net/jquery-smartwizard#documentation) for more details on implementation and usage.  
+
+##### All options
+
+```JavaScript
+$('#smartwizard').smartWizard({
+    selected: 0, // Initial selected step, 0 = first step
+    theme: 'default', // theme for the wizard, related css need to include for other than default theme
+    justified: true, // Nav menu justification. true/false
+    autoAdjustHeight: true, // Automatically adjust content height
+    cycleSteps: false, // Allows to cycle the navigation of steps
+    backButtonSupport: true, // Enable the back button support
+    enableURLhash: true, // Enable selection of the step based on url hash
+    transition: {
+        animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
+        speed: '400', // Transion animation speed
+        easing:'' // Transition animation easing. Not supported without a jQuery easing plugin
+    },
+    toolbarSettings: {
+        toolbarPosition: 'bottom', // none, top, bottom, both
+        toolbarButtonPosition: 'right', // left, right, center
+        showNextButton: true, // show/hide a Next button
+        showPreviousButton: true, // show/hide a Previous button
+        toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
+    },
+    anchorSettings: {
+        anchorClickable: true, // Enable/Disable anchor navigation
+        enableAllAnchors: false, // Activates all anchors clickable all times
+        markDoneStep: true, // Add done state on navigation
+        markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
+        removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared
+        enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
+    },
+    keyboardSettings: {
+        keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
+        keyLeft: [37], // Left key code
+        keyRight: [39] // Right key code
+    },
+    lang: { // Language variables for button
+        next: 'Next',
+        previous: 'Previous'
+    },
+    disabledSteps: [], // Array Steps disabled
+    errorSteps: [], // Highlight step with errors
+    hiddenSteps: [] // Hidden steps
+});
+</script>
+```
 
 License
 ----
diff --git a/bower.json b/bower.json
deleted file mode 100644
index b4534d2..0000000
--- a/bower.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-    "name": "smartwizard",
-    "version": "v4.4.1",
-    "homepage": "https://github.com/techlab/SmartWizard",
-    "authors": [
-        "Dipu Raj <hello@techlaboratory.net>"
-    ],
-    "description": "The awesome jQuery step wizard plugin with Bootstrap support",
-    "main": [
-        "./dist/css/smart_wizard.min.css",
-        "./dist/js/jquery.smartWizard.min.js"
-    ],
-    "keywords": [
-        "bootstrap",
-        "tabs",
-        "wizard",
-        "step",
-        "ui",
-        "jquery-plugin",
-        "jquery"
-    ],
-    "dependencies": {
-        "jquery": ">= 3.3.1",
-        "bootstrap": ">= 4.0.0"
-    },
-    "license": "MIT",
-    "ignore": [
-        "**/.*",
-        "node_modules",
-        "composer.json",
-        "examples",
-        "bower_components",
-        ".git*",
-        ".travis*",
-        "*bower.json",
-        "*jquery.json",
-        "test"
-    ]
-}
diff --git a/composer.json b/composer.json
index f495557..046b169 100644
--- a/composer.json
+++ b/composer.json
@@ -1,12 +1,12 @@
 {
     "name": "techlab/smartwizard",
-    "description": "The awesome jQuery step wizard plugin with Bootstrap support",
-    "homepage": "http://techlaboratory.net/smartwizard",
+    "description": "The awesome jQuery step wizard plugin",
+    "homepage": "http://techlaboratory.net/jquery-smartwizard",
     "license": "MIT",
     "support": {
-        "source": "https://github.com/techlab/SmartWizard",
-        "issues": "https://github.com/techlab/SmartWizard/issues",
-        "docs": "http://techlaboratory.net/smartwizard/documentation"
+        "source": "https://github.com/techlab/jquery-smartwizard",
+        "issues": "https://github.com/techlab/jquery-smartwizard/issues",
+        "docs": "http://techlaboratory.net/jquery-smartwizard#documentation"
         },
     "keywords": [
         "bootstrap",
@@ -20,8 +20,8 @@
     "authors": [
         {
             "name": "Dipu Raj",
-            "email": "hello@techlaboratory.net",
-            "homepage": "http://dipuraj.me"
+            "email": "hello.techlab@gmail.com",
+            "homepage": "http://dipu.me"
         }
     ],
     "require": {
diff --git a/dist/css/smart_wizard.css b/dist/css/smart_wizard.css
index 5f073d2..6957d7e 100644
--- a/dist/css/smart_wizard.css
+++ b/dist/css/smart_wizard.css
@@ -1,203 +1,153 @@
 /*!
- * SmartWizard v4.4.x
+ * jQuery SmartWizard v5
  * jQuery Wizard Plugin
  * http://www.techlaboratory.net/smartwizard
  *
  * Created by Dipu Raj
- * http://dipuraj.me
+ * http://dipu.me
  *
  * Licensed under the terms of MIT License
- * https://github.com/techlab/SmartWizard/blob/master/LICENSE
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
  */
-
-/* SmartWizard Basic CSS */
-.sw-main {
+/* SmartWizard Base Styles */
+.sw {
     position: relative;
-    display: block;
-    margin: 0;
-    padding: 0;
-    border-radius: .25rem!important;
 }
 
-.sw-main .sw-container {
-    display: block;
-    margin: 0;
-    padding: 0;
-    position: relative;
+.sw *,
+.sw *::before,
+.sw *::after {
+    box-sizing: border-box;
 }
 
-.sw-main .step-content {
-    display: none;
+.sw > .tab-content {
     position: relative;
-    margin: 0;
-}
-
-.sw-main .sw-toolbar {
-    margin-left: 0;
-}
-
-/* SmartWizard Theme: White */
-.sw-theme-default {
-    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
-}
-
-.sw-theme-default .sw-container {
-    min-height: 250px;
-}
-
-.sw-theme-default .step-content {
-    padding: 10px;
-    border: 0px solid #D4D4D4;
-    background-color: #FFF;
-    text-align: left;
+    overflow: hidden;
 }
 
-.sw-theme-default .sw-toolbar {
-    background: #f9f9f9;
-    border-radius: 0 !important;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding: 10px;
-    margin-bottom: 0 !important;
+.sw .toolbar {
+    padding: .8rem;
 }
 
-.sw-theme-default .sw-toolbar-top {
-    border-bottom-color: #ddd !important;
-}
-
-.sw-theme-default .sw-toolbar-bottom {
-    border-top-color: #ddd !important;
-}
-
-.sw-theme-default > ul.step-anchor > li {
-    position: relative;
-    margin-right: 2px;
-}
-
-.sw-theme-default > ul.step-anchor > li > a, .sw-theme-default > ul.step-anchor > li > a:hover {
-    border: none !important;
-    color: #bbb;
+.sw .toolbar > .btn {
+    display: inline-block;
     text-decoration: none;
-    outline-style: none;
-    background: transparent !important;
-    border: none !important;
-    cursor: not-allowed;
+    text-align: center;
+    text-transform: none;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    margin-left: .2rem;
+    margin-right: .2rem;
+    cursor: pointer;
 }
 
-.sw-theme-default > ul.step-anchor > li.clickable > a:hover {
-    color: #4285F4 !important;
-    background: transparent !important;
-    cursor: pointer;
+.sw .toolbar > .btn.disabled, .sw .toolbar > .btn:disabled {
+    opacity: .65;
 }
 
-.sw-theme-default > ul.step-anchor > li > a::after {
-    content: "";
-    background: #4285F4;
-    height: 2px;
-    position: absolute;
-    width: 100%;
-    left: 0px;
-    bottom: 0px;
-    -webkit-transition: all 250ms ease 0s;
-    transition: all 250ms ease 0s;
-    -webkit-transform: scale(0);
-    transform: scale(0);
+.sw > .nav {
+    display: -webkit-box;
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
-.sw-theme-default > ul.step-anchor > li.active > a {
-    border: none !important;
-    color: #4285F4 !important;
-    background: transparent !important;
-    cursor: pointer;
+@media screen and (max-width: 640px) {
+    .sw > .nav {
+        -webkit-box-orient: vertical !important;
+        -webkit-box-direction: normal !important;
+        flex-direction: column !important;
+        -webkit-box-flex: 1;
+        flex: 1 auto;
+    }
 }
 
-.sw-theme-default > ul.step-anchor > li.active > a::after {
-    -webkit-transform: scale(1);
-    transform: scale(1);
+.sw > .nav .nav-link {
+    display: block;
+    padding: .5rem 1rem;
+    text-decoration: none;
+    outline: 0 !important;
 }
 
-.sw-theme-default > ul.step-anchor > li.done > a {
-    border: none !important;
-    color: #000 !important;
-    background: transparent !important;
-    cursor: pointer;
+.sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus {
+    text-decoration: none;
+    outline: 0 !important;
 }
 
-.sw-theme-default > ul.step-anchor > li.done > a::after {
-    background: #5cb85c;
-    -webkit-transform: scale(1);
-    transform: scale(1);
+.sw > .nav .nav-link::-moz-focus-inner {
+    border: 0 !important;
 }
 
-.sw-theme-default > ul.step-anchor > li.danger > a {
-    border: none !important;
-    color: #d9534f !important;
-    /* background: #d9534f !important; */
-    cursor: pointer;
+.sw > .nav .nav-link.disabled {
+    color: #ccc !important;
+    pointer-events: none;
+    cursor: default;
 }
 
-.sw-theme-default > ul.step-anchor > li.danger > a::after {
-    background: #d9534f;
-    border-left-color: #f8d7da;
-    -webkit-transform: scale(1);
-    transform: scale(1);
+.sw > .nav .nav-link.hidden {
+    display: none !important;
 }
 
-.sw-theme-default > ul.step-anchor > li.disabled > a, .sw-theme-default > ul.step-anchor > li.disabled > a:hover {
-    color: #eee !important;
-    cursor: not-allowed;
+.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
+    flex-basis: 0;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    text-align: center;
 }
 
-/* Responsive CSS */
-@media screen and (max-width: 768px) {
-    .sw-theme-default > .nav-tabs > li {
-        float: none !important;
-    }
+.sw.sw-loading {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
-/* Common Loader */
-.sw-loading::after {
-    position: absolute;
+.sw.sw-loading::after {
+    content: "";
     display: block;
+    position: absolute;
     opacity: 1;
-    content: "";
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
-    background: rgba(255,255,255,.7);
+    background: rgba(255, 255, 255, 0.7);
+    z-index: 2;
     -webkit-transition: all .2s ease;
     transition: all .2s ease;
-    z-index: 2;
 }
 
-.sw-loading::before {
+.sw.sw-loading::before {
     content: '';
     display: inline-block;
     position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: 10;
+    top: 45%;
+    left: 45%;
+    width: 2rem;
+    height: 2rem;
     border: 10px solid #f3f3f3;
-    border-radius: 50%;
     border-top: 10px solid #3498db;
-    width: 80px;
-    height: 80px;
-    margin-top: -40px;
-    margin-left: -40px;
+    border-radius: 50%;
+    z-index: 10;
     -webkit-animation: spin 1s linear infinite;
- /* Safari */
     animation: spin 1s linear infinite;
 }
 
-/* Safari */
 @-webkit-keyframes spin {
     0% {
         -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
     }
 
     100% {
         -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
     }
 }
 
@@ -212,3 +162,90 @@
         transform: rotate(360deg);
     }
 }
+
+/* SmartWizard Theme: Default */
+.sw-theme-default {
+    border: 1px solid #eeeeee;
+}
+
+.sw-theme-default > .tab-content > .tab-pane {
+    padding: 10px;
+}
+
+.sw-theme-default .toolbar > .btn {
+    color: #fff;
+    background-color: #17a2b8;
+    border: 1px solid #17a2b8;
+    padding: .375rem .75rem;
+    border-radius: .25rem;
+    font-weight: 400;
+}
+
+.sw-theme-default > .nav {
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1) !important;
+}
+
+.sw-theme-default > .nav .nav-link {
+    position: relative;
+    height: 100%;
+    min-height: 100%;
+}
+
+.sw-theme-default > .nav .nav-link::after {
+    content: "";
+    position: absolute;
+    height: 2px;
+    width: 100%;
+    left: 0px;
+    bottom: -1px;
+    background: #999999;
+    -webkit-transition: all 250ms ease 0s;
+    transition: all 250ms ease 0s;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+}
+
+.sw-theme-default > .nav .nav-link.inactive {
+    color: #999999;
+    cursor: not-allowed;
+}
+
+.sw-theme-default > .nav .nav-link.active {
+    color: #17a2b8 !important;
+    cursor: pointer;
+}
+
+.sw-theme-default > .nav .nav-link.active::after {
+    background: #17a2b8 !important;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+}
+
+.sw-theme-default > .nav .nav-link.done {
+    color: #5cb85c !important;
+    cursor: pointer;
+}
+
+.sw-theme-default > .nav .nav-link.done::after {
+    background: #5cb85c;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+}
+
+.sw-theme-default > .nav .nav-link.disabled {
+    color: #f9f9f9 !important;
+    cursor: not-allowed;
+}
+
+.sw-theme-default > .nav .nav-link.disabled::after {
+    background: #f9f9f9;
+}
+
+.sw-theme-default > .nav .nav-link.danger {
+    color: #d9534f !important;
+    cursor: pointer;
+}
+
+.sw-theme-default > .nav .nav-link.danger::after {
+    background: #d9534f;
+}
diff --git a/dist/css/smart_wizard.min.css b/dist/css/smart_wizard.min.css
index e8fe084..914dacc 100644
--- a/dist/css/smart_wizard.min.css
+++ b/dist/css/smart_wizard.min.css
@@ -1,11 +1,11 @@
 /*!
- * SmartWizard v4.4.x
+ * jQuery SmartWizard v5
  * jQuery Wizard Plugin
  * http://www.techlaboratory.net/smartwizard
  *
  * Created by Dipu Raj
- * http://dipuraj.me
+ * http://dipu.me
  *
  * Licensed under the terms of MIT License
- * https://github.com/techlab/SmartWizard/blob/master/LICENSE
- */.sw-main{position:relative;display:block;margin:0;padding:0;border-radius:.25rem!important}.sw-main .sw-container{display:block;margin:0;padding:0;position:relative}.sw-main .step-content{display:none;position:relative;margin:0}.sw-main .sw-toolbar{margin-left:0}.sw-theme-default{box-shadow:0 1px 3px rgba(0,0,0,.3)}.sw-theme-default .sw-container{min-height:250px}.sw-theme-default .step-content{padding:10px;border:0 solid #d4d4d4;background-color:#fff;text-align:left}.sw-theme-default .sw-toolbar{background:#f9f9f9;border-radius:0!important;padding-left:10px;padding-right:10px;padding:10px;margin-bottom:0!important}.sw-theme-default .sw-toolbar-top{border-bottom-color:#ddd!important}.sw-theme-default .sw-toolbar-bottom{border-top-color:#ddd!important}.sw-theme-default>ul.step-anchor>li{position:relative;margin-right:2px}.sw-theme-default>ul.step-anchor>li>a,.sw-theme-default>ul.step-anchor>li>a:hover{border:none!important;color:#bbb;text-decoration:none;outline-style:none;background:0 0!important;border:none!important;cursor:not-allowed}.sw-theme-default>ul.step-anchor>li.clickable>a:hover{color:#4285f4!important;background:0 0!important;cursor:pointer}.sw-theme-default>ul.step-anchor>li>a::after{content:"";background:#4285f4;height:2px;position:absolute;width:100%;left:0;bottom:0;-webkit-transition:all 250ms ease 0s;transition:all 250ms ease 0s;-webkit-transform:scale(0);transform:scale(0)}.sw-theme-default>ul.step-anchor>li.active>a{border:none!important;color:#4285f4!important;background:0 0!important;cursor:pointer}.sw-theme-default>ul.step-anchor>li.active>a::after{-webkit-transform:scale(1);transform:scale(1)}.sw-theme-default>ul.step-anchor>li.done>a{border:none!important;color:#000!important;background:0 0!important;cursor:pointer}.sw-theme-default>ul.step-anchor>li.done>a::after{background:#5cb85c;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-default>ul.step-anchor>li.danger>a{border:none!important;color:#d9534f!important;cursor:pointer}.sw-theme-default>ul.step-anchor>li.danger>a::after{background:#d9534f;border-left-color:#f8d7da;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-default>ul.step-anchor>li.disabled>a,.sw-theme-default>ul.step-anchor>li.disabled>a:hover{color:#eee!important;cursor:not-allowed}@media screen and (max-width:768px){.sw-theme-default>.nav-tabs>li{float:none!important}}.sw-loading::after{position:absolute;display:block;opacity:1;content:"";top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);-webkit-transition:all .2s ease;transition:all .2s ease;z-index:2}.sw-loading::before{content:'';display:inline-block;position:absolute;top:50%;left:50%;z-index:10;border:10px solid #f3f3f3;border-radius:50%;border-top:10px solid #3498db;width:80px;height:80px;margin-top:-40px;margin-left:-40px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
\ No newline at end of file
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:-webkit-box;display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;flex-direction:column!important;-webkit-box-flex:1;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none;outline:0!important}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none;outline:0!important}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;-webkit-box-flex:1;flex-grow:1;text-align:center}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;-webkit-transition:all .2s ease;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.sw-theme-default{border:1px solid #eee}.sw-theme-default>.tab-content>.tab-pane{padding:10px}.sw-theme-default .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-default>.nav{box-shadow:0 .125rem .25rem rgba(0,0,0,.1)!important}.sw-theme-default>.nav .nav-link{position:relative;height:100%;min-height:100%}.sw-theme-default>.nav .nav-link::after{content:"";position:absolute;height:2px;width:100%;left:0;bottom:-1px;background:#999;-webkit-transition:all 250ms ease 0s;transition:all 250ms ease 0s;-webkit-transform:scale(0);transform:scale(0)}.sw-theme-default>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-default>.nav .nav-link.active{color:#17a2b8!important;cursor:pointer}.sw-theme-default>.nav .nav-link.active::after{background:#17a2b8!important;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-default>.nav .nav-link.done{color:#5cb85c!important;cursor:pointer}.sw-theme-default>.nav .nav-link.done::after{background:#5cb85c;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-default>.nav .nav-link.disabled{color:#f9f9f9!important;cursor:not-allowed}.sw-theme-default>.nav .nav-link.disabled::after{background:#f9f9f9}.sw-theme-default>.nav .nav-link.danger{color:#d9534f!important;cursor:pointer}.sw-theme-default>.nav .nav-link.danger::after{background:#d9534f}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_all.css b/dist/css/smart_wizard_all.css
new file mode 100644
index 0000000..0aaf526
--- /dev/null
+++ b/dist/css/smart_wizard_all.css
@@ -0,0 +1,578 @@
+/*!
+ * jQuery SmartWizard v5
+ * jQuery Wizard Plugin
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipu.me
+ *
+ * Licensed under the terms of MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */
+/* SmartWizard Base Styles */
+.sw {
+    position: relative;
+}
+
+.sw *,
+.sw *::before,
+.sw *::after {
+    box-sizing: border-box;
+}
+
+.sw > .tab-content {
+    position: relative;
+    overflow: hidden;
+}
+
+.sw .toolbar {
+    padding: .8rem;
+}
+
+.sw .toolbar > .btn {
+    display: inline-block;
+    text-decoration: none;
+    text-align: center;
+    text-transform: none;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    margin-left: .2rem;
+    margin-right: .2rem;
+    cursor: pointer;
+}
+
+.sw .toolbar > .btn.disabled, .sw .toolbar > .btn:disabled {
+    opacity: .65;
+}
+
+.sw > .nav {
+    display: -webkit-box;
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+@media screen and (max-width: 640px) {
+    .sw > .nav {
+        -webkit-box-orient: vertical !important;
+        -webkit-box-direction: normal !important;
+        flex-direction: column !important;
+        -webkit-box-flex: 1;
+        flex: 1 auto;
+    }
+}
+
+.sw > .nav .nav-link {
+    display: block;
+    padding: .5rem 1rem;
+    text-decoration: none;
+    outline: 0 !important;
+}
+
+.sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus {
+    text-decoration: none;
+    outline: 0 !important;
+}
+
+.sw > .nav .nav-link::-moz-focus-inner {
+    border: 0 !important;
+}
+
+.sw > .nav .nav-link.disabled {
+    color: #ccc !important;
+    pointer-events: none;
+    cursor: default;
+}
+
+.sw > .nav .nav-link.hidden {
+    display: none !important;
+}
+
+.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
+    flex-basis: 0;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    text-align: center;
+}
+
+.sw.sw-loading {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.sw.sw-loading::after {
+    content: "";
+    display: block;
+    position: absolute;
+    opacity: 1;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.7);
+    z-index: 2;
+    -webkit-transition: all .2s ease;
+    transition: all .2s ease;
+}
+
+.sw.sw-loading::before {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 45%;
+    left: 45%;
+    width: 2rem;
+    height: 2rem;
+    border: 10px solid #f3f3f3;
+    border-top: 10px solid #3498db;
+    border-radius: 50%;
+    z-index: 10;
+    -webkit-animation: spin 1s linear infinite;
+    animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+/* SmartWizard Theme: Default */
+.sw-theme-default {
+    border: 1px solid #eeeeee;
+}
+
+.sw-theme-default > .tab-content > .tab-pane {
+    padding: 10px;
+}
+
+.sw-theme-default .toolbar > .btn {
+    color: #fff;
+    background-color: #17a2b8;
+    border: 1px solid #17a2b8;
+    padding: .375rem .75rem;
+    border-radius: .25rem;
+    font-weight: 400;
+}
+
+.sw-theme-default > .nav {
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1) !important;
+}
+
+.sw-theme-default > .nav .nav-link {
+    position: relative;
+    height: 100%;
+    min-height: 100%;
+}
+
+.sw-theme-default > .nav .nav-link::after {
+    content: "";
+    position: absolute;
+    height: 2px;
+    width: 100%;
+    left: 0px;
+    bottom: -1px;
+    background: #999999;
+    -webkit-transition: all 250ms ease 0s;
+    transition: all 250ms ease 0s;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+}
+
+.sw-theme-default > .nav .nav-link.inactive {
+    color: #999999;
+    cursor: not-allowed;
+}
+
+.sw-theme-default > .nav .nav-link.active {
+    color: #17a2b8 !important;
+    cursor: pointer;
+}
+
+.sw-theme-default > .nav .nav-link.active::after {
+    background: #17a2b8 !important;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+}
+
+.sw-theme-default > .nav .nav-link.done {
+    color: #5cb85c !important;
+    cursor: pointer;
+}
+
+.sw-theme-default > .nav .nav-link.done::after {
+    background: #5cb85c;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+}
+
+.sw-theme-default > .nav .nav-link.disabled {
+    color: #f9f9f9 !important;
+    cursor: not-allowed;
+}
+
+.sw-theme-default > .nav .nav-link.disabled::after {
+    background: #f9f9f9;
+}
+
+.sw-theme-default > .nav .nav-link.danger {
+    color: #d9534f !important;
+    cursor: pointer;
+}
+
+.sw-theme-default > .nav .nav-link.danger::after {
+    background: #d9534f;
+}
+
+/* SmartWizard Theme: Arrows */
+.sw-theme-arrows {
+    border: 1px solid #eeeeee;
+}
+
+.sw-theme-arrows > .tab-content > .tab-pane {
+    padding: 10px;
+}
+
+.sw-theme-arrows .toolbar > .btn {
+    color: #fff;
+    background-color: #17a2b8;
+    border: 1px solid #17a2b8;
+    padding: .375rem .75rem;
+    border-radius: .25rem;
+    font-weight: 400;
+}
+
+.sw-theme-arrows > .nav {
+    overflow: hidden;
+    border-bottom: 1px solid #eeeeee;
+}
+
+.sw-theme-arrows > .nav .nav-link {
+    position: relative;
+    height: 100%;
+    min-height: 100%;
+    margin-right: 30px;
+    margin-left: -30px;
+    padding-left: 40px;
+}
+
+@media screen and (max-width: 640px) {
+    .sw-theme-arrows > .nav .nav-link {
+        overflow: hidden;
+        margin-bottom: 1px;
+        margin-right: unset;
+    }
+}
+
+.sw-theme-arrows > .nav .nav-link::after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    top: 50%;
+    left: 100%;
+    margin-top: -50px;
+    border-top: 50px solid transparent;
+    border-bottom: 50px solid transparent;
+    border-left: 30px solid #f8f8f8;
+    z-index: 2;
+}
+
+.sw-theme-arrows > .nav .nav-link::before {
+    content: " ";
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    top: 50%;
+    left: 100%;
+    margin-top: -50px;
+    margin-left: 1px;
+    border-top: 50px solid transparent;
+    border-bottom: 50px solid transparent;
+    border-left: 30px solid #eeeeee;
+    z-index: 1;
+}
+
+.sw-theme-arrows > .nav .nav-link.inactive {
+    color: #999999;
+    border-color: #f8f8f8;
+    background: #f8f8f8;
+    cursor: not-allowed;
+}
+
+.sw-theme-arrows > .nav .nav-link.active {
+    color: #ffffff !important;
+    border-color: #5bc0de !important;
+    background: #5bc0de !important;
+    cursor: pointer;
+}
+
+.sw-theme-arrows > .nav .nav-link.active::after {
+    border-left-color: #5bc0de !important;
+}
+
+.sw-theme-arrows > .nav .nav-link.done {
+    color: #ffffff;
+    border-color: #5cb85c;
+    background: #5cb85c;
+    cursor: pointer;
+}
+
+.sw-theme-arrows > .nav .nav-link.done::after {
+    border-left-color: #5cb85c;
+}
+
+.sw-theme-arrows > .nav .nav-link.disabled {
+    color: #eeeeee;
+    border-color: #f9f9f9;
+    background: #f9f9f9;
+    cursor: not-allowed;
+}
+
+.sw-theme-arrows > .nav .nav-link.disabled::after {
+    border-left-color: #f9f9f9;
+}
+
+.sw-theme-arrows > .nav .nav-link.danger {
+    color: #ffffff;
+    border-color: #d9534f;
+    background: #d9534f;
+    cursor: pointer;
+}
+
+.sw-theme-arrows > .nav .nav-link.danger::after {
+    border-left-color: #d9534f;
+}
+
+/* SmartWizard Theme: Dots */
+.sw-theme-dots > .tab-content > .tab-pane {
+    padding: 10px;
+}
+
+.sw-theme-dots .toolbar > .btn {
+    color: #fff;
+    background-color: #17a2b8;
+    border: 1px solid #17a2b8;
+    padding: .375rem .75rem;
+    border-radius: .25rem;
+    font-weight: 400;
+}
+
+.sw-theme-dots > .nav {
+    position: relative;
+    margin-bottom: 10px;
+}
+
+.sw-theme-dots > .nav::before {
+    content: " ";
+    position: absolute;
+    top: 18px;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    background-color: #eee;
+    border-radius: 3px;
+    z-index: 1;
+}
+
+.sw-theme-dots > .nav .nav-link {
+    position: relative;
+    margin-top: 40px;
+}
+
+.sw-theme-dots > .nav .nav-link::before {
+    content: " ";
+    position: absolute;
+    display: block;
+    top: -36px;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: none;
+    background: #f5f5f5;
+    color: #428bca;
+    text-decoration: none;
+    z-index: 98;
+}
+
+.sw-theme-dots > .nav .nav-link::after {
+    content: " ";
+    position: absolute;
+    display: block;
+    top: -28px;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    z-index: 99;
+}
+
+.sw-theme-dots > .nav .nav-link.inactive {
+    color: #999999;
+    cursor: not-allowed;
+}
+
+.sw-theme-dots > .nav .nav-link.inactive::after {
+    background-color: #999999;
+}
+
+.sw-theme-dots > .nav .nav-link.active {
+    color: #5bc0de !important;
+    cursor: pointer;
+}
+
+.sw-theme-dots > .nav .nav-link.active::after {
+    background-color: #5bc0de !important;
+}
+
+.sw-theme-dots > .nav .nav-link.done {
+    color: #5cb85c;
+    cursor: pointer;
+}
+
+.sw-theme-dots > .nav .nav-link.done::after {
+    background-color: #5cb85c;
+}
+
+.sw-theme-dots > .nav .nav-link.disabled {
+    color: #f9f9f9;
+    cursor: not-allowed;
+}
+
+.sw-theme-dots > .nav .nav-link.disabled::after {
+    background-color: #f9f9f9;
+}
+
+.sw-theme-dots > .nav .nav-link.danger {
+    color: #d9534f;
+    cursor: pointer;
+}
+
+.sw-theme-dots > .nav .nav-link.danger::after {
+    background-color: #d9534f;
+}
+
+/* SmartWizard Theme: Dark */
+.sw-theme-dark {
+    border: 1px solid #eeeeee;
+    box-shadow: 0 1px 10px rgba(130, 130, 134, 0.1);
+    color: rgba(255, 255, 255, 0.95);
+    background: #181c20;
+}
+
+.sw-theme-dark > .tab-content > .tab-pane {
+    padding: 10px;
+}
+
+.sw-theme-dark .toolbar > .btn {
+    color: #fff;
+    background-color: #17a2b8;
+    border: 1px solid #17a2b8;
+    padding: .375rem .75rem;
+    border-radius: .25rem;
+    font-weight: 400;
+}
+
+.sw-theme-dark > .nav {
+    background: #0D0F12;
+}
+
+.sw-theme-dark > .nav .nav-link {
+    position: relative;
+    height: 100%;
+    min-height: 100%;
+}
+
+.sw-theme-dark > .nav .nav-link::after {
+    content: "";
+    position: absolute;
+    height: 2px;
+    width: 100%;
+    left: 0px;
+    bottom: -1px;
+    background: #999999;
+    -webkit-transition: all 250ms ease 0s;
+    transition: all 250ms ease 0s;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+}
+
+.sw-theme-dark > .nav .nav-link.inactive {
+    color: #999999;
+    cursor: not-allowed;
+}
+
+.sw-theme-dark > .nav .nav-link.active {
+    color: #17a2b8 !important;
+    cursor: pointer;
+}
+
+.sw-theme-dark > .nav .nav-link.active::after {
+    background: #17a2b8 !important;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+}
+
+.sw-theme-dark > .nav .nav-link.done {
+    color: #5cb85c !important;
+    cursor: pointer;
+}
+
+.sw-theme-dark > .nav .nav-link.done::after {
+    background: #5cb85c;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+}
+
+.sw-theme-dark > .nav .nav-link.disabled {
+    color: #f9f9f9 !important;
+    cursor: not-allowed;
+}
+
+.sw-theme-dark > .nav .nav-link.disabled::after {
+    background: #f9f9f9;
+}
+
+.sw-theme-dark > .nav .nav-link.danger {
+    color: #d9534f !important;
+    cursor: pointer;
+}
+
+.sw-theme-dark > .nav .nav-link.danger::after {
+    background: #d9534f;
+}
diff --git a/dist/css/smart_wizard_all.min.css b/dist/css/smart_wizard_all.min.css
new file mode 100644
index 0000000..c07761c
--- /dev/null
+++ b/dist/css/smart_wizard_all.min.css
@@ -0,0 +1,11 @@
+/*!
+ * jQuery SmartWizard v5
+ * jQuery Wizard Plugin
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipu.me
+ *
+ * Licensed under the terms of MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:-webkit-box;display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;flex-direction:column!important;-webkit-box-flex:1;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none;outline:0!important}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none;outline:0!important}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;-webkit-box-flex:1;flex-grow:1;text-align:center}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;-webkit-transition:all .2s ease;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.sw-theme-default{border:1px solid #eee}.sw-theme-default>.tab-content>.tab-pane{padding:10px}.sw-theme-default .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-default>.nav{box-shadow:0 .125rem .25rem rgba(0,0,0,.1)!important}.sw-theme-default>.nav .nav-link{position:relative;height:100%;min-height:100%}.sw-theme-default>.nav .nav-link::after{content:"";position:absolute;height:2px;width:100%;left:0;bottom:-1px;background:#999;-webkit-transition:all 250ms ease 0s;transition:all 250ms ease 0s;-webkit-transform:scale(0);transform:scale(0)}.sw-theme-default>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-default>.nav .nav-link.active{color:#17a2b8!important;cursor:pointer}.sw-theme-default>.nav .nav-link.active::after{background:#17a2b8!important;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-default>.nav .nav-link.done{color:#5cb85c!important;cursor:pointer}.sw-theme-default>.nav .nav-link.done::after{background:#5cb85c;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-default>.nav .nav-link.disabled{color:#f9f9f9!important;cursor:not-allowed}.sw-theme-default>.nav .nav-link.disabled::after{background:#f9f9f9}.sw-theme-default>.nav .nav-link.danger{color:#d9534f!important;cursor:pointer}.sw-theme-default>.nav .nav-link.danger::after{background:#d9534f}.sw-theme-arrows{border:1px solid #eee}.sw-theme-arrows>.tab-content>.tab-pane{padding:10px}.sw-theme-arrows .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-arrows>.nav{overflow:hidden;border-bottom:1px solid #eee}.sw-theme-arrows>.nav .nav-link{position:relative;height:100%;min-height:100%;margin-right:30px;margin-left:-30px;padding-left:40px}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link{overflow:hidden;margin-bottom:1px;margin-right:unset}}.sw-theme-arrows>.nav .nav-link::after{content:"";position:absolute;display:block;width:0;height:0;top:50%;left:100%;margin-top:-50px;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #f8f8f8;z-index:2}.sw-theme-arrows>.nav .nav-link::before{content:" ";position:absolute;display:block;width:0;height:0;top:50%;left:100%;margin-top:-50px;margin-left:1px;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #eee;z-index:1}.sw-theme-arrows>.nav .nav-link.inactive{color:#999;border-color:#f8f8f8;background:#f8f8f8;cursor:not-allowed}.sw-theme-arrows>.nav .nav-link.active{color:#fff!important;border-color:#5bc0de!important;background:#5bc0de!important;cursor:pointer}.sw-theme-arrows>.nav .nav-link.active::after{border-left-color:#5bc0de!important}.sw-theme-arrows>.nav .nav-link.done{color:#fff;border-color:#5cb85c;background:#5cb85c;cursor:pointer}.sw-theme-arrows>.nav .nav-link.done::after{border-left-color:#5cb85c}.sw-theme-arrows>.nav .nav-link.disabled{color:#eee;border-color:#f9f9f9;background:#f9f9f9;cursor:not-allowed}.sw-theme-arrows>.nav .nav-link.disabled::after{border-left-color:#f9f9f9}.sw-theme-arrows>.nav .nav-link.danger{color:#fff;border-color:#d9534f;background:#d9534f;cursor:pointer}.sw-theme-arrows>.nav .nav-link.danger::after{border-left-color:#d9534f}.sw-theme-dots>.tab-content>.tab-pane{padding:10px}.sw-theme-dots .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-dots>.nav{position:relative;margin-bottom:10px}.sw-theme-dots>.nav::before{content:" ";position:absolute;top:18px;left:0;width:100%;height:5px;background-color:#eee;border-radius:3px;z-index:1}.sw-theme-dots>.nav .nav-link{position:relative;margin-top:40px}.sw-theme-dots>.nav .nav-link::before{content:" ";position:absolute;display:block;top:-36px;left:0;right:0;margin-left:auto;margin-right:auto;width:32px;height:32px;border-radius:50%;border:none;background:#f5f5f5;color:#428bca;text-decoration:none;z-index:98}.sw-theme-dots>.nav .nav-link::after{content:" ";position:absolute;display:block;top:-28px;left:0;right:0;margin-left:auto;margin-right:auto;width:16px;height:16px;border-radius:50%;z-index:99}.sw-theme-dots>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-dots>.nav .nav-link.inactive::after{background-color:#999}.sw-theme-dots>.nav .nav-link.active{color:#5bc0de!important;cursor:pointer}.sw-theme-dots>.nav .nav-link.active::after{background-color:#5bc0de!important}.sw-theme-dots>.nav .nav-link.done{color:#5cb85c;cursor:pointer}.sw-theme-dots>.nav .nav-link.done::after{background-color:#5cb85c}.sw-theme-dots>.nav .nav-link.disabled{color:#f9f9f9;cursor:not-allowed}.sw-theme-dots>.nav .nav-link.disabled::after{background-color:#f9f9f9}.sw-theme-dots>.nav .nav-link.danger{color:#d9534f;cursor:pointer}.sw-theme-dots>.nav .nav-link.danger::after{background-color:#d9534f}.sw-theme-dark{border:1px solid #eee;box-shadow:0 1px 10px rgba(130,130,134,.1);color:rgba(255,255,255,.95);background:#181c20}.sw-theme-dark>.tab-content>.tab-pane{padding:10px}.sw-theme-dark .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-dark>.nav{background:#0d0f12}.sw-theme-dark>.nav .nav-link{position:relative;height:100%;min-height:100%}.sw-theme-dark>.nav .nav-link::after{content:"";position:absolute;height:2px;width:100%;left:0;bottom:-1px;background:#999;-webkit-transition:all 250ms ease 0s;transition:all 250ms ease 0s;-webkit-transform:scale(0);transform:scale(0)}.sw-theme-dark>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-dark>.nav .nav-link.active{color:#17a2b8!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.active::after{background:#17a2b8!important;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-dark>.nav .nav-link.done{color:#5cb85c!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.done::after{background:#5cb85c;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-dark>.nav .nav-link.disabled{color:#f9f9f9!important;cursor:not-allowed}.sw-theme-dark>.nav .nav-link.disabled::after{background:#f9f9f9}.sw-theme-dark>.nav .nav-link.danger{color:#d9534f!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.danger::after{background:#d9534f}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_arrows.css b/dist/css/smart_wizard_arrows.css
new file mode 100644
index 0000000..45e53d0
--- /dev/null
+++ b/dist/css/smart_wizard_arrows.css
@@ -0,0 +1,286 @@
+/*!
+ * jQuery SmartWizard v5
+ * jQuery Wizard Plugin
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipu.me
+ *
+ * Licensed under the terms of MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */
+/* SmartWizard Base Styles */
+.sw {
+    position: relative;
+}
+
+.sw *,
+.sw *::before,
+.sw *::after {
+    box-sizing: border-box;
+}
+
+.sw > .tab-content {
+    position: relative;
+    overflow: hidden;
+}
+
+.sw .toolbar {
+    padding: .8rem;
+}
+
+.sw .toolbar > .btn {
+    display: inline-block;
+    text-decoration: none;
+    text-align: center;
+    text-transform: none;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    margin-left: .2rem;
+    margin-right: .2rem;
+    cursor: pointer;
+}
+
+.sw .toolbar > .btn.disabled, .sw .toolbar > .btn:disabled {
+    opacity: .65;
+}
+
+.sw > .nav {
+    display: -webkit-box;
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+@media screen and (max-width: 640px) {
+    .sw > .nav {
+        -webkit-box-orient: vertical !important;
+        -webkit-box-direction: normal !important;
+        flex-direction: column !important;
+        -webkit-box-flex: 1;
+        flex: 1 auto;
+    }
+}
+
+.sw > .nav .nav-link {
+    display: block;
+    padding: .5rem 1rem;
+    text-decoration: none;
+    outline: 0 !important;
+}
+
+.sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus {
+    text-decoration: none;
+    outline: 0 !important;
+}
+
+.sw > .nav .nav-link::-moz-focus-inner {
+    border: 0 !important;
+}
+
+.sw > .nav .nav-link.disabled {
+    color: #ccc !important;
+    pointer-events: none;
+    cursor: default;
+}
+
+.sw > .nav .nav-link.hidden {
+    display: none !important;
+}
+
+.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
+    flex-basis: 0;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    text-align: center;
+}
+
+.sw.sw-loading {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.sw.sw-loading::after {
+    content: "";
+    display: block;
+    position: absolute;
+    opacity: 1;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.7);
+    z-index: 2;
+    -webkit-transition: all .2s ease;
+    transition: all .2s ease;
+}
+
+.sw.sw-loading::before {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 45%;
+    left: 45%;
+    width: 2rem;
+    height: 2rem;
+    border: 10px solid #f3f3f3;
+    border-top: 10px solid #3498db;
+    border-radius: 50%;
+    z-index: 10;
+    -webkit-animation: spin 1s linear infinite;
+    animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+/* SmartWizard Theme: Arrows */
+.sw-theme-arrows {
+    border: 1px solid #eeeeee;
+}
+
+.sw-theme-arrows > .tab-content > .tab-pane {
+    padding: 10px;
+}
+
+.sw-theme-arrows .toolbar > .btn {
+    color: #fff;
+    background-color: #17a2b8;
+    border: 1px solid #17a2b8;
+    padding: .375rem .75rem;
+    border-radius: .25rem;
+    font-weight: 400;
+}
+
+.sw-theme-arrows > .nav {
+    overflow: hidden;
+    border-bottom: 1px solid #eeeeee;
+}
+
+.sw-theme-arrows > .nav .nav-link {
+    position: relative;
+    height: 100%;
+    min-height: 100%;
+    margin-right: 30px;
+    margin-left: -30px;
+    padding-left: 40px;
+}
+
+@media screen and (max-width: 640px) {
+    .sw-theme-arrows > .nav .nav-link {
+        overflow: hidden;
+        margin-bottom: 1px;
+        margin-right: unset;
+    }
+}
+
+.sw-theme-arrows > .nav .nav-link::after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    top: 50%;
+    left: 100%;
+    margin-top: -50px;
+    border-top: 50px solid transparent;
+    border-bottom: 50px solid transparent;
+    border-left: 30px solid #f8f8f8;
+    z-index: 2;
+}
+
+.sw-theme-arrows > .nav .nav-link::before {
+    content: " ";
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    top: 50%;
+    left: 100%;
+    margin-top: -50px;
+    margin-left: 1px;
+    border-top: 50px solid transparent;
+    border-bottom: 50px solid transparent;
+    border-left: 30px solid #eeeeee;
+    z-index: 1;
+}
+
+.sw-theme-arrows > .nav .nav-link.inactive {
+    color: #999999;
+    border-color: #f8f8f8;
+    background: #f8f8f8;
+    cursor: not-allowed;
+}
+
+.sw-theme-arrows > .nav .nav-link.active {
+    color: #ffffff !important;
+    border-color: #5bc0de !important;
+    background: #5bc0de !important;
+    cursor: pointer;
+}
+
+.sw-theme-arrows > .nav .nav-link.active::after {
+    border-left-color: #5bc0de !important;
+}
+
+.sw-theme-arrows > .nav .nav-link.done {
+    color: #ffffff;
+    border-color: #5cb85c;
+    background: #5cb85c;
+    cursor: pointer;
+}
+
+.sw-theme-arrows > .nav .nav-link.done::after {
+    border-left-color: #5cb85c;
+}
+
+.sw-theme-arrows > .nav .nav-link.disabled {
+    color: #eeeeee;
+    border-color: #f9f9f9;
+    background: #f9f9f9;
+    cursor: not-allowed;
+}
+
+.sw-theme-arrows > .nav .nav-link.disabled::after {
+    border-left-color: #f9f9f9;
+}
+
+.sw-theme-arrows > .nav .nav-link.danger {
+    color: #ffffff;
+    border-color: #d9534f;
+    background: #d9534f;
+    cursor: pointer;
+}
+
+.sw-theme-arrows > .nav .nav-link.danger::after {
+    border-left-color: #d9534f;
+}
diff --git a/dist/css/smart_wizard_arrows.min.css b/dist/css/smart_wizard_arrows.min.css
new file mode 100644
index 0000000..857f3ad
--- /dev/null
+++ b/dist/css/smart_wizard_arrows.min.css
@@ -0,0 +1,11 @@
+/*!
+ * jQuery SmartWizard v5
+ * jQuery Wizard Plugin
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipu.me
+ *
+ * Licensed under the terms of MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:-webkit-box;display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;flex-direction:column!important;-webkit-box-flex:1;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none;outline:0!important}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none;outline:0!important}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;-webkit-box-flex:1;flex-grow:1;text-align:center}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;-webkit-transition:all .2s ease;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.sw-theme-arrows{border:1px solid #eee}.sw-theme-arrows>.tab-content>.tab-pane{padding:10px}.sw-theme-arrows .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-arrows>.nav{overflow:hidden;border-bottom:1px solid #eee}.sw-theme-arrows>.nav .nav-link{position:relative;height:100%;min-height:100%;margin-right:30px;margin-left:-30px;padding-left:40px}@media screen and (max-width:640px){.sw-theme-arrows>.nav .nav-link{overflow:hidden;margin-bottom:1px;margin-right:unset}}.sw-theme-arrows>.nav .nav-link::after{content:"";position:absolute;display:block;width:0;height:0;top:50%;left:100%;margin-top:-50px;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #f8f8f8;z-index:2}.sw-theme-arrows>.nav .nav-link::before{content:" ";position:absolute;display:block;width:0;height:0;top:50%;left:100%;margin-top:-50px;margin-left:1px;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #eee;z-index:1}.sw-theme-arrows>.nav .nav-link.inactive{color:#999;border-color:#f8f8f8;background:#f8f8f8;cursor:not-allowed}.sw-theme-arrows>.nav .nav-link.active{color:#fff!important;border-color:#5bc0de!important;background:#5bc0de!important;cursor:pointer}.sw-theme-arrows>.nav .nav-link.active::after{border-left-color:#5bc0de!important}.sw-theme-arrows>.nav .nav-link.done{color:#fff;border-color:#5cb85c;background:#5cb85c;cursor:pointer}.sw-theme-arrows>.nav .nav-link.done::after{border-left-color:#5cb85c}.sw-theme-arrows>.nav .nav-link.disabled{color:#eee;border-color:#f9f9f9;background:#f9f9f9;cursor:not-allowed}.sw-theme-arrows>.nav .nav-link.disabled::after{border-left-color:#f9f9f9}.sw-theme-arrows>.nav .nav-link.danger{color:#fff;border-color:#d9534f;background:#d9534f;cursor:pointer}.sw-theme-arrows>.nav .nav-link.danger::after{border-left-color:#d9534f}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_dark.css b/dist/css/smart_wizard_dark.css
new file mode 100644
index 0000000..f84bfbf
--- /dev/null
+++ b/dist/css/smart_wizard_dark.css
@@ -0,0 +1,254 @@
+/*!
+ * jQuery SmartWizard v5
+ * jQuery Wizard Plugin
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipu.me
+ *
+ * Licensed under the terms of MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */
+/* SmartWizard Base Styles */
+.sw {
+    position: relative;
+}
+
+.sw *,
+.sw *::before,
+.sw *::after {
+    box-sizing: border-box;
+}
+
+.sw > .tab-content {
+    position: relative;
+    overflow: hidden;
+}
+
+.sw .toolbar {
+    padding: .8rem;
+}
+
+.sw .toolbar > .btn {
+    display: inline-block;
+    text-decoration: none;
+    text-align: center;
+    text-transform: none;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    margin-left: .2rem;
+    margin-right: .2rem;
+    cursor: pointer;
+}
+
+.sw .toolbar > .btn.disabled, .sw .toolbar > .btn:disabled {
+    opacity: .65;
+}
+
+.sw > .nav {
+    display: -webkit-box;
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+@media screen and (max-width: 640px) {
+    .sw > .nav {
+        -webkit-box-orient: vertical !important;
+        -webkit-box-direction: normal !important;
+        flex-direction: column !important;
+        -webkit-box-flex: 1;
+        flex: 1 auto;
+    }
+}
+
+.sw > .nav .nav-link {
+    display: block;
+    padding: .5rem 1rem;
+    text-decoration: none;
+    outline: 0 !important;
+}
+
+.sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus {
+    text-decoration: none;
+    outline: 0 !important;
+}
+
+.sw > .nav .nav-link::-moz-focus-inner {
+    border: 0 !important;
+}
+
+.sw > .nav .nav-link.disabled {
+    color: #ccc !important;
+    pointer-events: none;
+    cursor: default;
+}
+
+.sw > .nav .nav-link.hidden {
+    display: none !important;
+}
+
+.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
+    flex-basis: 0;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    text-align: center;
+}
+
+.sw.sw-loading {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.sw.sw-loading::after {
+    content: "";
+    display: block;
+    position: absolute;
+    opacity: 1;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.7);
+    z-index: 2;
+    -webkit-transition: all .2s ease;
+    transition: all .2s ease;
+}
+
+.sw.sw-loading::before {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 45%;
+    left: 45%;
+    width: 2rem;
+    height: 2rem;
+    border: 10px solid #f3f3f3;
+    border-top: 10px solid #3498db;
+    border-radius: 50%;
+    z-index: 10;
+    -webkit-animation: spin 1s linear infinite;
+    animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+/* SmartWizard Theme: Dark */
+.sw-theme-dark {
+    border: 1px solid #eeeeee;
+    box-shadow: 0 1px 10px rgba(130, 130, 134, 0.1);
+    color: rgba(255, 255, 255, 0.95);
+    background: #181c20;
+}
+
+.sw-theme-dark > .tab-content > .tab-pane {
+    padding: 10px;
+}
+
+.sw-theme-dark .toolbar > .btn {
+    color: #fff;
+    background-color: #17a2b8;
+    border: 1px solid #17a2b8;
+    padding: .375rem .75rem;
+    border-radius: .25rem;
+    font-weight: 400;
+}
+
+.sw-theme-dark > .nav {
+    background: #0D0F12;
+}
+
+.sw-theme-dark > .nav .nav-link {
+    position: relative;
+    height: 100%;
+    min-height: 100%;
+}
+
+.sw-theme-dark > .nav .nav-link::after {
+    content: "";
+    position: absolute;
+    height: 2px;
+    width: 100%;
+    left: 0px;
+    bottom: -1px;
+    background: #999999;
+    -webkit-transition: all 250ms ease 0s;
+    transition: all 250ms ease 0s;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+}
+
+.sw-theme-dark > .nav .nav-link.inactive {
+    color: #999999;
+    cursor: not-allowed;
+}
+
+.sw-theme-dark > .nav .nav-link.active {
+    color: #17a2b8 !important;
+    cursor: pointer;
+}
+
+.sw-theme-dark > .nav .nav-link.active::after {
+    background: #17a2b8 !important;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+}
+
+.sw-theme-dark > .nav .nav-link.done {
+    color: #5cb85c !important;
+    cursor: pointer;
+}
+
+.sw-theme-dark > .nav .nav-link.done::after {
+    background: #5cb85c;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+}
+
+.sw-theme-dark > .nav .nav-link.disabled {
+    color: #f9f9f9 !important;
+    cursor: not-allowed;
+}
+
+.sw-theme-dark > .nav .nav-link.disabled::after {
+    background: #f9f9f9;
+}
+
+.sw-theme-dark > .nav .nav-link.danger {
+    color: #d9534f !important;
+    cursor: pointer;
+}
+
+.sw-theme-dark > .nav .nav-link.danger::after {
+    background: #d9534f;
+}
diff --git a/dist/css/smart_wizard_dark.min.css b/dist/css/smart_wizard_dark.min.css
new file mode 100644
index 0000000..4180d09
--- /dev/null
+++ b/dist/css/smart_wizard_dark.min.css
@@ -0,0 +1,11 @@
+/*!
+ * jQuery SmartWizard v5
+ * jQuery Wizard Plugin
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipu.me
+ *
+ * Licensed under the terms of MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:-webkit-box;display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;flex-direction:column!important;-webkit-box-flex:1;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none;outline:0!important}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none;outline:0!important}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;-webkit-box-flex:1;flex-grow:1;text-align:center}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;-webkit-transition:all .2s ease;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.sw-theme-dark{border:1px solid #eee;box-shadow:0 1px 10px rgba(130,130,134,.1);color:rgba(255,255,255,.95);background:#181c20}.sw-theme-dark>.tab-content>.tab-pane{padding:10px}.sw-theme-dark .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-dark>.nav{background:#0d0f12}.sw-theme-dark>.nav .nav-link{position:relative;height:100%;min-height:100%}.sw-theme-dark>.nav .nav-link::after{content:"";position:absolute;height:2px;width:100%;left:0;bottom:-1px;background:#999;-webkit-transition:all 250ms ease 0s;transition:all 250ms ease 0s;-webkit-transform:scale(0);transform:scale(0)}.sw-theme-dark>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-dark>.nav .nav-link.active{color:#17a2b8!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.active::after{background:#17a2b8!important;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-dark>.nav .nav-link.done{color:#5cb85c!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.done::after{background:#5cb85c;-webkit-transform:scale(1);transform:scale(1)}.sw-theme-dark>.nav .nav-link.disabled{color:#f9f9f9!important;cursor:not-allowed}.sw-theme-dark>.nav .nav-link.disabled::after{background:#f9f9f9}.sw-theme-dark>.nav .nav-link.danger{color:#d9534f!important;cursor:pointer}.sw-theme-dark>.nav .nav-link.danger::after{background:#d9534f}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_dots.css b/dist/css/smart_wizard_dots.css
new file mode 100644
index 0000000..af06561
--- /dev/null
+++ b/dist/css/smart_wizard_dots.css
@@ -0,0 +1,279 @@
+/*!
+ * jQuery SmartWizard v5
+ * jQuery Wizard Plugin
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipu.me
+ *
+ * Licensed under the terms of MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */
+/* SmartWizard Base Styles */
+.sw {
+    position: relative;
+}
+
+.sw *,
+.sw *::before,
+.sw *::after {
+    box-sizing: border-box;
+}
+
+.sw > .tab-content {
+    position: relative;
+    overflow: hidden;
+}
+
+.sw .toolbar {
+    padding: .8rem;
+}
+
+.sw .toolbar > .btn {
+    display: inline-block;
+    text-decoration: none;
+    text-align: center;
+    text-transform: none;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    margin-left: .2rem;
+    margin-right: .2rem;
+    cursor: pointer;
+}
+
+.sw .toolbar > .btn.disabled, .sw .toolbar > .btn:disabled {
+    opacity: .65;
+}
+
+.sw > .nav {
+    display: -webkit-box;
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+@media screen and (max-width: 640px) {
+    .sw > .nav {
+        -webkit-box-orient: vertical !important;
+        -webkit-box-direction: normal !important;
+        flex-direction: column !important;
+        -webkit-box-flex: 1;
+        flex: 1 auto;
+    }
+}
+
+.sw > .nav .nav-link {
+    display: block;
+    padding: .5rem 1rem;
+    text-decoration: none;
+    outline: 0 !important;
+}
+
+.sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus {
+    text-decoration: none;
+    outline: 0 !important;
+}
+
+.sw > .nav .nav-link::-moz-focus-inner {
+    border: 0 !important;
+}
+
+.sw > .nav .nav-link.disabled {
+    color: #ccc !important;
+    pointer-events: none;
+    cursor: default;
+}
+
+.sw > .nav .nav-link.hidden {
+    display: none !important;
+}
+
+.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
+    flex-basis: 0;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    text-align: center;
+}
+
+.sw.sw-loading {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.sw.sw-loading::after {
+    content: "";
+    display: block;
+    position: absolute;
+    opacity: 1;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.7);
+    z-index: 2;
+    -webkit-transition: all .2s ease;
+    transition: all .2s ease;
+}
+
+.sw.sw-loading::before {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 45%;
+    left: 45%;
+    width: 2rem;
+    height: 2rem;
+    border: 10px solid #f3f3f3;
+    border-top: 10px solid #3498db;
+    border-radius: 50%;
+    z-index: 10;
+    -webkit-animation: spin 1s linear infinite;
+    animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+/* SmartWizard Theme: Dots */
+.sw-theme-dots > .tab-content > .tab-pane {
+    padding: 10px;
+}
+
+.sw-theme-dots .toolbar > .btn {
+    color: #fff;
+    background-color: #17a2b8;
+    border: 1px solid #17a2b8;
+    padding: .375rem .75rem;
+    border-radius: .25rem;
+    font-weight: 400;
+}
+
+.sw-theme-dots > .nav {
+    position: relative;
+    margin-bottom: 10px;
+}
+
+.sw-theme-dots > .nav::before {
+    content: " ";
+    position: absolute;
+    top: 18px;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    background-color: #eee;
+    border-radius: 3px;
+    z-index: 1;
+}
+
+.sw-theme-dots > .nav .nav-link {
+    position: relative;
+    margin-top: 40px;
+}
+
+.sw-theme-dots > .nav .nav-link::before {
+    content: " ";
+    position: absolute;
+    display: block;
+    top: -36px;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: none;
+    background: #f5f5f5;
+    color: #428bca;
+    text-decoration: none;
+    z-index: 98;
+}
+
+.sw-theme-dots > .nav .nav-link::after {
+    content: " ";
+    position: absolute;
+    display: block;
+    top: -28px;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    z-index: 99;
+}
+
+.sw-theme-dots > .nav .nav-link.inactive {
+    color: #999999;
+    cursor: not-allowed;
+}
+
+.sw-theme-dots > .nav .nav-link.inactive::after {
+    background-color: #999999;
+}
+
+.sw-theme-dots > .nav .nav-link.active {
+    color: #5bc0de !important;
+    cursor: pointer;
+}
+
+.sw-theme-dots > .nav .nav-link.active::after {
+    background-color: #5bc0de !important;
+}
+
+.sw-theme-dots > .nav .nav-link.done {
+    color: #5cb85c;
+    cursor: pointer;
+}
+
+.sw-theme-dots > .nav .nav-link.done::after {
+    background-color: #5cb85c;
+}
+
+.sw-theme-dots > .nav .nav-link.disabled {
+    color: #f9f9f9;
+    cursor: not-allowed;
+}
+
+.sw-theme-dots > .nav .nav-link.disabled::after {
+    background-color: #f9f9f9;
+}
+
+.sw-theme-dots > .nav .nav-link.danger {
+    color: #d9534f;
+    cursor: pointer;
+}
+
+.sw-theme-dots > .nav .nav-link.danger::after {
+    background-color: #d9534f;
+}
diff --git a/dist/css/smart_wizard_dots.min.css b/dist/css/smart_wizard_dots.min.css
new file mode 100644
index 0000000..c681d4c
--- /dev/null
+++ b/dist/css/smart_wizard_dots.min.css
@@ -0,0 +1,11 @@
+/*!
+ * jQuery SmartWizard v5
+ * jQuery Wizard Plugin
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipu.me
+ *
+ * Licensed under the terms of MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */.sw{position:relative}.sw *,.sw ::after,.sw ::before{box-sizing:border-box}.sw>.tab-content{position:relative;overflow:hidden}.sw .toolbar{padding:.8rem}.sw .toolbar>.btn{display:inline-block;text-decoration:none;text-align:center;text-transform:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-left:.2rem;margin-right:.2rem;cursor:pointer}.sw .toolbar>.btn.disabled,.sw .toolbar>.btn:disabled{opacity:.65}.sw>.nav{display:-webkit-box;display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin-top:0;margin-bottom:0}@media screen and (max-width:640px){.sw>.nav{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;flex-direction:column!important;-webkit-box-flex:1;flex:1 auto}}.sw>.nav .nav-link{display:block;padding:.5rem 1rem;text-decoration:none;outline:0!important}.sw>.nav .nav-link:active,.sw>.nav .nav-link:focus,.sw>.nav .nav-link:hover{text-decoration:none;outline:0!important}.sw>.nav .nav-link::-moz-focus-inner{border:0!important}.sw>.nav .nav-link.disabled{color:#ccc!important;pointer-events:none;cursor:default}.sw>.nav .nav-link.hidden{display:none!important}.sw.sw-justified>.nav .nav-link,.sw.sw-justified>.nav>li{flex-basis:0;-webkit-box-flex:1;flex-grow:1;text-align:center}.sw.sw-loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sw.sw-loading::after{content:"";display:block;position:absolute;opacity:1;top:0;left:0;height:100%;width:100%;background:rgba(255,255,255,.7);z-index:2;-webkit-transition:all .2s ease;transition:all .2s ease}.sw.sw-loading::before{content:'';display:inline-block;position:absolute;top:45%;left:45%;width:2rem;height:2rem;border:10px solid #f3f3f3;border-top:10px solid #3498db;border-radius:50%;z-index:10;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.sw-theme-dots>.tab-content>.tab-pane{padding:10px}.sw-theme-dots .toolbar>.btn{color:#fff;background-color:#17a2b8;border:1px solid #17a2b8;padding:.375rem .75rem;border-radius:.25rem;font-weight:400}.sw-theme-dots>.nav{position:relative;margin-bottom:10px}.sw-theme-dots>.nav::before{content:" ";position:absolute;top:18px;left:0;width:100%;height:5px;background-color:#eee;border-radius:3px;z-index:1}.sw-theme-dots>.nav .nav-link{position:relative;margin-top:40px}.sw-theme-dots>.nav .nav-link::before{content:" ";position:absolute;display:block;top:-36px;left:0;right:0;margin-left:auto;margin-right:auto;width:32px;height:32px;border-radius:50%;border:none;background:#f5f5f5;color:#428bca;text-decoration:none;z-index:98}.sw-theme-dots>.nav .nav-link::after{content:" ";position:absolute;display:block;top:-28px;left:0;right:0;margin-left:auto;margin-right:auto;width:16px;height:16px;border-radius:50%;z-index:99}.sw-theme-dots>.nav .nav-link.inactive{color:#999;cursor:not-allowed}.sw-theme-dots>.nav .nav-link.inactive::after{background-color:#999}.sw-theme-dots>.nav .nav-link.active{color:#5bc0de!important;cursor:pointer}.sw-theme-dots>.nav .nav-link.active::after{background-color:#5bc0de!important}.sw-theme-dots>.nav .nav-link.done{color:#5cb85c;cursor:pointer}.sw-theme-dots>.nav .nav-link.done::after{background-color:#5cb85c}.sw-theme-dots>.nav .nav-link.disabled{color:#f9f9f9;cursor:not-allowed}.sw-theme-dots>.nav .nav-link.disabled::after{background-color:#f9f9f9}.sw-theme-dots>.nav .nav-link.danger{color:#d9534f;cursor:pointer}.sw-theme-dots>.nav .nav-link.danger::after{background-color:#d9534f}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_theme_arrows.css b/dist/css/smart_wizard_theme_arrows.css
deleted file mode 100644
index 7f41b90..0000000
--- a/dist/css/smart_wizard_theme_arrows.css
+++ /dev/null
@@ -1,190 +0,0 @@
-/*!
- * SmartWizard v4.4.x
- * jQuery Wizard Plugin
- * http://www.techlaboratory.net/smartwizard
- *
- * Created by Dipu Raj
- * http://dipuraj.me
- *
- * Licensed under the terms of MIT License
- * https://github.com/techlab/SmartWizard/blob/master/LICENSE
- */
-
-/* SmartWizard Theme: Arrows */
-.sw-theme-arrows {
-    border-radius: 5px;
-    border: 1px solid #ddd;
-}
-
-.sw-theme-arrows > .sw-container {
-    min-height: 200px;
-}
-
-.sw-theme-arrows .step-content {
-    padding: 0 10px;
-    border: 0px solid #D4D4D4;
-    background-color: #FFF;
-    text-align: left;
-}
-
-.sw-theme-arrows .sw-toolbar {
-    padding: 10px;
-    margin-bottom: 0 !important;
-}
-
-.sw-theme-arrows > .sw-toolbar-top {
-}
-
-.sw-theme-arrows > .sw-toolbar-bottom {
-}
-
-.sw-theme-arrows > ul.step-anchor {
-    border: 0;
-    border-bottom: 1px solid #ddd;
-    padding: 0px;
-    background: #f5f5f5;
-    border-radius: 0;
-    border-top-right-radius: 5px;
-    list-style: none;
-    overflow: hidden;
-}
-
-.sw-theme-arrows > ul.step-anchor li+li:before {
-    padding: 0;
-}
-
-.sw-theme-arrows > ul.step-anchor > li {
-}
-
-.sw-theme-arrows > ul.step-anchor > li > a, .sw-theme-arrows > ul.step-anchor > li > a:hover {
-    color: #bbb;
-    text-decoration: none;
-    padding: 10px 0 10px 45px;
-    position: relative;
-    display: block;
-    border: 0 !important;
-    border-radius: 0;
-    outline-style: none;
-    background: #f5f5f5;
-}
-
-.sw-theme-arrows > ul.step-anchor > li > a:after {
-    content: " ";
-    display: block;
-    width: 0;
-    height: 0;
-    border-top: 50px solid transparent;
-    border-bottom: 50px solid transparent;
-    border-left: 30px solid #f5f5f5;
-    position: absolute;
-    top: 50%;
-    margin-top: -50px;
-    left: 100%;
-    z-index: 2;
-}
-
-.sw-theme-arrows > ul.step-anchor > li > a:before {
-    content: " ";
-    display: block;
-    width: 0;
-    height: 0;
-    border-top: 50px solid transparent;
-           /* Go big on the size, and let overflow hide */
-    border-bottom: 50px solid transparent;
-    border-left: 30px solid #ddd;
-    position: absolute;
-    top: 50%;
-    margin-top: -50px;
-    margin-left: 1px;
-    left: 100%;
-    z-index: 1;
-}
-
-.sw-theme-arrows > ul.step-anchor > li:first-child > a {
-    padding-left: 15px;
-}
-
-.sw-theme-arrows > ul.step-anchor > li > a:hover {
-    color: #bbb;
-    text-decoration: none;
-    outline-style: none;
-    background: #f5f5f5;
-    border-color: #f5f5f5;
-}
-
-.sw-theme-arrows > ul.step-anchor > li > a:hover:after {
-    border-left-color: #f5f5f5;
-}
-
-.sw-theme-arrows > ul.step-anchor > li > a small {
-}
-
-.sw-theme-arrows > ul.step-anchor > li.clickable > a:hover {
-    color: #4285F4 !important;
-    background: #46b8da !important;
-}
-
-.sw-theme-arrows > ul.step-anchor > li.active > a {
-    border-color: #5cb85c !important;
-    color: #fff !important;
-    background: #5cb85c !important;
-}
-
-.sw-theme-arrows > ul.step-anchor > li.active > a:after {
-    border-left: 30px solid #5cb85c !important;
-}
-
-.sw-theme-arrows > ul.step-anchor > li.done > a {
-    border-color: #b1dfbb !important;
- /*  #5cb85c */
-    color: #fff !important;
-    background: #b1dfbb !important;
-}
-
-.sw-theme-arrows > ul.step-anchor > li.done > a:after {
-    border-left: 30px solid #b1dfbb;
- /* c3e6cb */;
-}
-
-.sw-theme-arrows > ul.step-anchor > li.danger > a {
-    border-color: #d9534f !important;
-    color: #fff !important;
-    background: #d9534f !important;
-}
-
-.sw-theme-arrows > ul.step-anchor > li.danger > a:after {
-    border-left: 30px solid #d9534f !important;
-}
-
-.sw-theme-arrows > ul.step-anchor > li.disabled > a, .sw-theme-arrows > ul.step-anchor > li.disabled > a:hover {
-    color: #eee !important;
-}
-
-/* Responsive CSS */
-@media screen and (max-width: 768px) {
-    .sw-theme-arrows > ul.step-anchor {
-        border: 0;
-        background: #ddd !important;
-    }
-
-    .sw-theme-arrows > .nav-tabs > li {
-        float: none !important;
-        margin-bottom: 0;
-    }
-
-    .sw-theme-arrows > ul.step-anchor > li > a, .sw-theme-arrows > ul.step-anchor > li > a:hover {
-        padding-left: 15px;
-        margin-right: 0;
-        margin-bottom: 1px;
-    }
-
-    .sw-theme-arrows > ul.step-anchor > li > a:after, .sw-theme-arrows > ul.step-anchor > li > a:before {
-        display: none;
-    }
-}
-
-/* Loader Custom Style */
-.sw-theme-arrows::before {
-    border: 10px solid #f3f3f3;
-    border-top: 10px solid #5cb85c;
-}
diff --git a/dist/css/smart_wizard_theme_arrows.min.css b/dist/css/smart_wizard_theme_arrows.min.css
deleted file mode 100644
index 2a5c411..0000000
--- a/dist/css/smart_wizard_theme_arrows.min.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/*!
- * SmartWizard v4.4.x
- * jQuery Wizard Plugin
- * http://www.techlaboratory.net/smartwizard
- *
- * Created by Dipu Raj
- * http://dipuraj.me
- *
- * Licensed under the terms of MIT License
- * https://github.com/techlab/SmartWizard/blob/master/LICENSE
- */.sw-theme-arrows{border-radius:5px;border:1px solid #ddd}.sw-theme-arrows>.sw-container{min-height:200px}.sw-theme-arrows .step-content{padding:0 10px;border:0 solid #d4d4d4;background-color:#fff;text-align:left}.sw-theme-arrows .sw-toolbar{padding:10px;margin-bottom:0!important}.sw-theme-arrows>ul.step-anchor{border:0;border-bottom:1px solid #ddd;padding:0;background:#f5f5f5;border-radius:0;border-top-right-radius:5px;list-style:none;overflow:hidden}.sw-theme-arrows>ul.step-anchor li+li:before{padding:0}.sw-theme-arrows>ul.step-anchor>li>a,.sw-theme-arrows>ul.step-anchor>li>a:hover{color:#bbb;text-decoration:none;padding:10px 0 10px 45px;position:relative;display:block;border:0!important;border-radius:0;outline-style:none;background:#f5f5f5}.sw-theme-arrows>ul.step-anchor>li>a:after{content:" ";display:block;width:0;height:0;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #f5f5f5;position:absolute;top:50%;margin-top:-50px;left:100%;z-index:2}.sw-theme-arrows>ul.step-anchor>li>a:before{content:" ";display:block;width:0;height:0;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:30px solid #ddd;position:absolute;top:50%;margin-top:-50px;margin-left:1px;left:100%;z-index:1}.sw-theme-arrows>ul.step-anchor>li:first-child>a{padding-left:15px}.sw-theme-arrows>ul.step-anchor>li>a:hover{color:#bbb;text-decoration:none;outline-style:none;background:#f5f5f5;border-color:#f5f5f5}.sw-theme-arrows>ul.step-anchor>li>a:hover:after{border-left-color:#f5f5f5}.sw-theme-arrows>ul.step-anchor>li.clickable>a:hover{color:#4285f4!important;background:#46b8da!important}.sw-theme-arrows>ul.step-anchor>li.active>a{border-color:#5cb85c!important;color:#fff!important;background:#5cb85c!important}.sw-theme-arrows>ul.step-anchor>li.active>a:after{border-left:30px solid #5cb85c!important}.sw-theme-arrows>ul.step-anchor>li.done>a{border-color:#b1dfbb!important;color:#fff!important;background:#b1dfbb!important}.sw-theme-arrows>ul.step-anchor>li.done>a:after{border-left:30px solid #b1dfbb}.sw-theme-arrows>ul.step-anchor>li.danger>a{border-color:#d9534f!important;color:#fff!important;background:#d9534f!important}.sw-theme-arrows>ul.step-anchor>li.danger>a:after{border-left:30px solid #d9534f!important}.sw-theme-arrows>ul.step-anchor>li.disabled>a,.sw-theme-arrows>ul.step-anchor>li.disabled>a:hover{color:#eee!important}@media screen and (max-width:768px){.sw-theme-arrows>ul.step-anchor{border:0;background:#ddd!important}.sw-theme-arrows>.nav-tabs>li{float:none!important;margin-bottom:0}.sw-theme-arrows>ul.step-anchor>li>a,.sw-theme-arrows>ul.step-anchor>li>a:hover{padding-left:15px;margin-right:0;margin-bottom:1px}.sw-theme-arrows>ul.step-anchor>li>a:after,.sw-theme-arrows>ul.step-anchor>li>a:before{display:none}}.sw-theme-arrows::before{border:10px solid #f3f3f3;border-top:10px solid #5cb85c}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_theme_circles.css b/dist/css/smart_wizard_theme_circles.css
deleted file mode 100644
index ddd98e6..0000000
--- a/dist/css/smart_wizard_theme_circles.css
+++ /dev/null
@@ -1,133 +0,0 @@
-/*!
- * SmartWizard v4.4.x
- * jQuery Wizard Plugin
- * http://www.techlaboratory.net/smartwizard
- *
- * Created by Dipu Raj
- * http://dipuraj.me
- *
- * Licensed under the terms of MIT License
- * https://github.com/techlab/SmartWizard/blob/master/LICENSE
- */
-
-/* SmartWizard Theme: Circles */
-.sw-theme-circles {
-}
-
-.sw-theme-circles .sw-container {
-    min-height: 300px;
-}
-
-.sw-theme-circles .step-content {
-    padding: 10px 0;
-    background-color: #FFF;
-    text-align: left;
-}
-
-.sw-theme-circles .sw-toolbar {
-    background: #fff;
-    padding-left: 10px;
-    padding-right: 10px;
-    margin-bottom: 0 !important;
-}
-
-.sw-theme-circles .sw-toolbar-top {
-}
-
-.sw-theme-circles .sw-toolbar-bottom {
-    border-top-color: #ddd !important;
-    border-bottom-color: #ddd !important;
-}
-
-.sw-theme-circles > ul.step-anchor {
-    position: relative;
-    background: #fff;
-    border: none;
-    list-style: none;
-    margin-bottom: 40px;
-}
-
-.sw-theme-circles > ul.step-anchor:before {
-    content: " ";
-    position: absolute;
-    top: 50%;
-    bottom: 0;
-    width: 100%;
-    height: 5px;
-    background-color: #f5f5f5;
-    border-radius: 3px;
-    z-index: 0;
-}
-
-.sw-theme-circles > ul.step-anchor > li {
-    border: none;
-    margin-left: 40px;
-    z-index: 98;
-}
-
-.sw-theme-circles > ul.step-anchor > li > a {
-    border: 2px solid #f5f5f5;
-    background: #f5f5f5;
-    width: 75px;
-    height: 75px;
-    text-align: center;
-    padding: 25px 0;
-    border-radius: 50%;
-    box-shadow: inset 0px 0px 0px 3px #fff !important;
-    text-decoration: none;
-    outline-style: none;
-    z-index: 99;
-    color: #bbb;
-    background: #f5f5f5;
-    line-height: 1;
-}
-
-.sw-theme-circles > ul.step-anchor > li > a:hover {
-    color: #bbb;
-    background: #f5f5f5;
-    border-width: 2px;
-}
-
-.sw-theme-circles > ul.step-anchor > li > a > small {
-    position: relative;
-    bottom: -40px;
-    color: #ccc;
-}
-
-.sw-theme-circles > ul.step-anchor > li.clickable > a:hover {
-    color: #4285F4 !important;
-}
-
-.sw-theme-circles > ul.step-anchor > li.active > a {
-    border-color: #5bc0de;
-    color: #fff;
-    background: #5bc0de;
-}
-
-.sw-theme-circles > ul.step-anchor > li.active > a > small {
-    color: #5bc0de;
-}
-
-.sw-theme-circles > ul.step-anchor > li.done > a {
-    border-color: #5cb85c;
-    color: #fff;
-    background: #5cb85c;
-}
-
-.sw-theme-circles > ul.step-anchor > li.done > a > small {
-    color: #5cb85c;
-}
-
-.sw-theme-circles > ul.step-anchor > li.danger > a {
-    border-color: #d9534f;
-    color: #d9534f;
-    background: #fff;
-}
-
-.sw-theme-circles > ul.step-anchor > li.danger > a > small {
-    color: #d9534f;
-}
-
-.sw-theme-circles > ul.step-anchor > li.disabled > a, .sw-theme-circles > ul.step-anchor > li.disabled > a:hover {
-    color: #eee !important;
-}
diff --git a/dist/css/smart_wizard_theme_circles.min.css b/dist/css/smart_wizard_theme_circles.min.css
deleted file mode 100644
index b526165..0000000
--- a/dist/css/smart_wizard_theme_circles.min.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/*!
- * SmartWizard v4.4.x
- * jQuery Wizard Plugin
- * http://www.techlaboratory.net/smartwizard
- *
- * Created by Dipu Raj
- * http://dipuraj.me
- *
- * Licensed under the terms of MIT License
- * https://github.com/techlab/SmartWizard/blob/master/LICENSE
- */.sw-theme-circles .sw-container{min-height:300px}.sw-theme-circles .step-content{padding:10px 0;background-color:#fff;text-align:left}.sw-theme-circles .sw-toolbar{background:#fff;padding-left:10px;padding-right:10px;margin-bottom:0!important}.sw-theme-circles .sw-toolbar-bottom{border-top-color:#ddd!important;border-bottom-color:#ddd!important}.sw-theme-circles>ul.step-anchor{position:relative;background:#fff;border:none;list-style:none;margin-bottom:40px}.sw-theme-circles>ul.step-anchor:before{content:" ";position:absolute;top:50%;bottom:0;width:100%;height:5px;background-color:#f5f5f5;border-radius:3px;z-index:0}.sw-theme-circles>ul.step-anchor>li{border:none;margin-left:40px;z-index:98}.sw-theme-circles>ul.step-anchor>li>a{border:2px solid #f5f5f5;background:#f5f5f5;width:75px;height:75px;text-align:center;padding:25px 0;border-radius:50%;box-shadow:inset 0 0 0 3px #fff!important;text-decoration:none;outline-style:none;z-index:99;color:#bbb;background:#f5f5f5;line-height:1}.sw-theme-circles>ul.step-anchor>li>a:hover{color:#bbb;background:#f5f5f5;border-width:2px}.sw-theme-circles>ul.step-anchor>li>a>small{position:relative;bottom:-40px;color:#ccc}.sw-theme-circles>ul.step-anchor>li.clickable>a:hover{color:#4285f4!important}.sw-theme-circles>ul.step-anchor>li.active>a{border-color:#5bc0de;color:#fff;background:#5bc0de}.sw-theme-circles>ul.step-anchor>li.active>a>small{color:#5bc0de}.sw-theme-circles>ul.step-anchor>li.done>a{border-color:#5cb85c;color:#fff;background:#5cb85c}.sw-theme-circles>ul.step-anchor>li.done>a>small{color:#5cb85c}.sw-theme-circles>ul.step-anchor>li.danger>a{border-color:#d9534f;color:#d9534f;background:#fff}.sw-theme-circles>ul.step-anchor>li.danger>a>small{color:#d9534f}.sw-theme-circles>ul.step-anchor>li.disabled>a,.sw-theme-circles>ul.step-anchor>li.disabled>a:hover{color:#eee!important}
\ No newline at end of file
diff --git a/dist/css/smart_wizard_theme_dots.css b/dist/css/smart_wizard_theme_dots.css
deleted file mode 100644
index ff44019..0000000
--- a/dist/css/smart_wizard_theme_dots.css
+++ /dev/null
@@ -1,201 +0,0 @@
-/*!
- * SmartWizard v4.4.x
- * jQuery Wizard Plugin
- * http://www.techlaboratory.net/smartwizard
- *
- * Created by Dipu Raj
- * http://dipuraj.me
- *
- * Licensed under the terms of MIT License
- * https://github.com/techlab/SmartWizard/blob/master/LICENSE
- */
-
-/* SmartWizard Theme: Dots */
-.sw-theme-dots {
-}
-
-.sw-theme-dots .sw-container {
-    min-height: 300px;
-}
-
-.sw-theme-dots .step-content {
-    padding: 10px 0;
-    border: none;
-    background-color: #FFF;
-    text-align: left;
-}
-
-.sw-theme-dots .sw-toolbar {
-    background: #fff;
-    border-radius: 0 !important;
-    padding-left: 10px;
-    padding-right: 10px;
-    margin-bottom: 0 !important;
-}
-
-.sw-theme-dots .sw-toolbar-top {
-    border-bottom-color: #ddd !important;
-}
-
-.sw-theme-dots .sw-toolbar-bottom {
-    border-top-color: #ddd !important;
-    border-bottom-color: #ddd !important;
-}
-
-.sw-theme-dots > ul.step-anchor {
-    position: relative;
-    background: #fff;
-    border: 0px solid #ccc !important;
-    list-style: none;
-}
-
-.sw-theme-dots > ul.step-anchor:before {
-    content: " ";
-    position: absolute;
-    top: 70px;
-    bottom: 0;
-    width: 100%;
-    height: 5px;
-    background-color: #f5f5f5;
-    border-radius: 3px;
-    z-order: 0;
-    z-index: 95;
-}
-
-.sw-theme-dots > ul.step-anchor > li {
-    border: none;
-}
-/* Anchors styles */
-.sw-theme-dots > ul.step-anchor > li > a {
-    position: relative;
-    text-align: center;
-    font-weight: bold;
-    background: transparent;
-    border: none;
-    color: #ccc;
-    text-decoration: none;
-    outline-style: none;
-    z-index: 96;
-    display: block;
-}
-
-.sw-theme-dots > ul.step-anchor > li > a:before {
-    content: ' ';
-    position: absolute;
-    bottom: 2px;
-    left: 40%;
-    margin-top: 10px;
-    display: block;
-    border-radius: 50%;
-    color: #428bca;
-    background: #f5f5f5;
-    border: none;
-    width: 30px;
-    height: 30px;
-    text-decoration: none;
-    z-index: 98;
-}
-
-.sw-theme-dots > ul.step-anchor > li > a:after {
-    content: ' ';
-    position: relative;
-    left: 43%;
-    bottom: 2px;
-    margin-top: 10px;
-    display: block;
-    width: 15px;
-    height: 15px;
-    background: #f5f5f5;
-    border-radius: 50%;
-    z-index: 99;
-}
-
-.sw-theme-dots > ul.step-anchor > li > a:hover {
-    color: #ccc;
-    background: transparent;
-}
-
-.sw-theme-dots > ul.step-anchor > li > a:focus {
-    color: #ccc;
-    border: none;
-}
-
-.sw-theme-dots > ul.step-anchor > li.clickable > a:hover {
-    color: #999;
-}
-/* Active anchors */
-.sw-theme-dots > ul.step-anchor > li.active > a {
-    color: #5bc0de;
-}
-
-.sw-theme-dots > ul.step-anchor > li.active > a:hover {
-    border: none;
-}
-
-.sw-theme-dots > ul.step-anchor > li.active > a:after {
-    background: #5bc0de;
-}
-/* Done anchors */
-.sw-theme-dots > ul.step-anchor > li.done > a {
-    color: #5cb85c;
-}
-
-.sw-theme-dots > ul.step-anchor > li.done > a:after {
-    background: #5cb85c;
-}
-/* Danger anchors */
-.sw-theme-dots > ul.step-anchor > li.danger > a {
-    color: #d9534f;
-}
-
-.sw-theme-dots > ul.step-anchor > li.danger > a:after {
-    background: #d9534f;
-}
-
-.sw-theme-dots > ul.step-anchor > li.disabled > a, .sw-theme-dots > ul.step-anchor > li.disabled > a:hover {
-    color: #eee !important;
-}
-
-.sw-theme-dots > ul.step-anchor > li.disabled > a:after {
-    background: #eee;
-}
-
-/* Responsive CSS */
-@media screen and (max-width: 768px) {
-    .sw-theme-dots > ul.step-anchor:before {
-        top: 0;
-        bottom: 0;
-        left: 10px;
-        width: 5px;
-        height: 100%;
-        background-color: #f5f5f5;
-        display: block;
-        margin-right: 10px;
-    }
-
-    .sw-theme-dots > ul.step-anchor > li {
-        margin-left: 20px;
-        display: block;
-        clear: both;
-    }
-
-    .sw-theme-dots > ul.step-anchor > li > a {
-        text-align: left;
-        margin-left: 0;
-        display: block;
-    }
-
-    .sw-theme-dots > ul.step-anchor > li > a:before {
-        top: 5px;
-        left: -23px;
-        margin-right: 10px;
-        display: block;
-    }
-
-    .sw-theme-dots > ul.step-anchor > li > a:after {
-        top: -38px;
-        left: -31px;
-        margin-right: 10px;
-        display: block;
-    }
-}
diff --git a/dist/css/smart_wizard_theme_dots.min.css b/dist/css/smart_wizard_theme_dots.min.css
deleted file mode 100644
index 7c6d2d0..0000000
--- a/dist/css/smart_wizard_theme_dots.min.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/*!
- * SmartWizard v4.4.x
- * jQuery Wizard Plugin
- * http://www.techlaboratory.net/smartwizard
- *
- * Created by Dipu Raj
- * http://dipuraj.me
- *
- * Licensed under the terms of MIT License
- * https://github.com/techlab/SmartWizard/blob/master/LICENSE
- */.sw-theme-dots .sw-container{min-height:300px}.sw-theme-dots .step-content{padding:10px 0;border:none;background-color:#fff;text-align:left}.sw-theme-dots .sw-toolbar{background:#fff;border-radius:0!important;padding-left:10px;padding-right:10px;margin-bottom:0!important}.sw-theme-dots .sw-toolbar-top{border-bottom-color:#ddd!important}.sw-theme-dots .sw-toolbar-bottom{border-top-color:#ddd!important;border-bottom-color:#ddd!important}.sw-theme-dots>ul.step-anchor{position:relative;background:#fff;border:0 solid #ccc!important;list-style:none}.sw-theme-dots>ul.step-anchor:before{content:" ";position:absolute;top:70px;bottom:0;width:100%;height:5px;background-color:#f5f5f5;border-radius:3px;z-order:0;z-index:95}.sw-theme-dots>ul.step-anchor>li{border:none}.sw-theme-dots>ul.step-anchor>li>a{position:relative;text-align:center;font-weight:700;background:0 0;border:none;color:#ccc;text-decoration:none;outline-style:none;z-index:96;display:block}.sw-theme-dots>ul.step-anchor>li>a:before{content:' ';position:absolute;bottom:2px;left:40%;margin-top:10px;display:block;border-radius:50%;color:#428bca;background:#f5f5f5;border:none;width:30px;height:30px;text-decoration:none;z-index:98}.sw-theme-dots>ul.step-anchor>li>a:after{content:' ';position:relative;left:43%;bottom:2px;margin-top:10px;display:block;width:15px;height:15px;background:#f5f5f5;border-radius:50%;z-index:99}.sw-theme-dots>ul.step-anchor>li>a:hover{color:#ccc;background:0 0}.sw-theme-dots>ul.step-anchor>li>a:focus{color:#ccc;border:none}.sw-theme-dots>ul.step-anchor>li.clickable>a:hover{color:#999}.sw-theme-dots>ul.step-anchor>li.active>a{color:#5bc0de}.sw-theme-dots>ul.step-anchor>li.active>a:hover{border:none}.sw-theme-dots>ul.step-anchor>li.active>a:after{background:#5bc0de}.sw-theme-dots>ul.step-anchor>li.done>a{color:#5cb85c}.sw-theme-dots>ul.step-anchor>li.done>a:after{background:#5cb85c}.sw-theme-dots>ul.step-anchor>li.danger>a{color:#d9534f}.sw-theme-dots>ul.step-anchor>li.danger>a:after{background:#d9534f}.sw-theme-dots>ul.step-anchor>li.disabled>a,.sw-theme-dots>ul.step-anchor>li.disabled>a:hover{color:#eee!important}.sw-theme-dots>ul.step-anchor>li.disabled>a:after{background:#eee}@media screen and (max-width:768px){.sw-theme-dots>ul.step-anchor:before{top:0;bottom:0;left:10px;width:5px;height:100%;background-color:#f5f5f5;display:block;margin-right:10px}.sw-theme-dots>ul.step-anchor>li{margin-left:20px;display:block;clear:both}.sw-theme-dots>ul.step-anchor>li>a{text-align:left;margin-left:0;display:block}.sw-theme-dots>ul.step-anchor>li>a:before{top:5px;left:-23px;margin-right:10px;display:block}.sw-theme-dots>ul.step-anchor>li>a:after{top:-38px;left:-31px;margin-right:10px;display:block}}
\ No newline at end of file
diff --git a/dist/js/jquery.smartWizard.js b/dist/js/jquery.smartWizard.js
index cdb9ced..331f582 100644
--- a/dist/js/jquery.smartWizard.js
+++ b/dist/js/jquery.smartWizard.js
@@ -1,13 +1,23 @@
+"use strict";
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
 /*!
- * SmartWizard v4.4.1
- * The awesome jQuery step wizard plugin with Bootstrap support
- * http://www.techlaboratory.net/smartwizard
+ * jQuery SmartWizard v5.0.0
+ * The awesome jQuery step wizard plugin
+ * http://www.techlaboratory.net/jquery-smartwizard
  *
  * Created by Dipu Raj
- * http://dipuraj.me
+ * http://dipu.me
  *
- * Licensed under the terms of the MIT License
- * https://github.com/techlab/SmartWizard/blob/master/LICENSE
+ * @license Licensed under the terms of the MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
  */
 ;
 
@@ -17,28 +27,31 @@
   var defaults = {
     selected: 0,
     // Initial selected step, 0 = first step
-    keyNavigation: true,
-    // Enable/Disable keyboard navigation(left and right keys are used if enabled)
+    theme: 'default',
+    // theme for the wizard, related css need to include for other than default theme
+    justified: true,
+    // Nav menu justification. true/false
     autoAdjustHeight: true,
     // Automatically adjust content height
     cycleSteps: false,
     // Allows to cycle the navigation of steps
     backButtonSupport: true,
     // Enable the back button support
-    useURLhash: true,
+    enableURLhash: true,
     // Enable selection of the step based on url hash
-    showStepURLhash: true,
-    // Show url hash based on step
-    lang: {
-      // Language variables for button
-      next: 'Next',
-      previous: 'Previous'
+    transition: {
+      animation: 'none',
+      // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
+      speed: '400',
+      // Transion animation speed
+      easing: '' // Transition animation easing. Not supported without a jQuery easing plugin
+
     },
     toolbarSettings: {
       toolbarPosition: 'bottom',
       // none, top, bottom, both
-      toolbarButtonPosition: 'end',
-      // start, end
+      toolbarButtonPosition: 'right',
+      // left, right, center
       showNextButton: true,
       // show/hide a Next button
       showPreviousButton: true,
@@ -52,7 +65,7 @@
       enableAllAnchors: false,
       // Activates all anchors clickable all times
       markDoneStep: true,
-      // Add done css
+      // Add done state on navigation
       markAllPreviousStepsAsDone: true,
       // When a step selected by url hash, all previous steps are marked done
       removeDoneStepOnNavigateBack: false,
@@ -60,688 +73,943 @@
       enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
 
     },
-    contentURL: null,
-    // content url, Enables Ajax content loading. Can also set as data data-content-url on anchor
-    contentCache: true,
-    // cache step contents, if false content is fetched always from ajax url
-    ajaxSettings: {},
-    // Ajax extra settings
+    keyboardSettings: {
+      keyNavigation: true,
+      // Enable/Disable keyboard navigation(left and right keys are used if enabled)
+      keyLeft: [37],
+      // Left key code
+      keyRight: [39] // Right key code
+
+    },
+    lang: {
+      // Language variables for button
+      next: 'Next',
+      previous: 'Previous'
+    },
     disabledSteps: [],
     // Array Steps disabled
     errorSteps: [],
     // Highlight step with errors
-    hiddenSteps: [],
-    // Hidden steps
-    theme: 'default',
-    // theme for the wizard, related css need to include for other than default theme
-    transitionEffect: 'none',
-    // Effect on navigation, none/slide/fade
-    transitionSpeed: '400'
-  }; // The plugin constructor
+    hiddenSteps: [] // Hidden steps
 
-  function SmartWizard(element, options) {
-    // Merge user settings with default, recursively
-    this.options = $.extend(true, {}, defaults, options); // Main container element
+  };
 
-    this.main = $(element); // Navigation bar element
+  var SmartWizard =
+  /*#__PURE__*/
+  function () {
+    function SmartWizard(element, options) {
+      _classCallCheck(this, SmartWizard);
 
-    this.nav = this.main.children('ul'); // Step anchor elements
+      // Merge user settings with default
+      this.options = $.extend(true, {}, defaults, options); // Main container element
 
-    this.steps = $("li > a", this.nav); // Content container
+      this.main = $(element); // Navigation bar element
 
-    this.container = this.main.children('div'); // Content pages
+      this.nav = this._getFirstDescendant('.nav'); // Step anchor elements
 
-    this.pages = this.container.children('div'); // Active step index
+      this.steps = this.nav.find('.nav-link'); // Content container
 
-    this.current_index = null; // Backward compatibility
+      this.container = this._getFirstDescendant('.tab-content'); // Content pages
 
-    this.options.toolbarSettings.toolbarButtonPosition = this.options.toolbarSettings.toolbarButtonPosition === 'right' ? 'end' : this.options.toolbarSettings.toolbarButtonPosition;
-    this.options.toolbarSettings.toolbarButtonPosition = this.options.toolbarSettings.toolbarButtonPosition === 'left' ? 'start' : this.options.toolbarSettings.toolbarButtonPosition; // Default fix
+      this.pages = this.container.children('.tab-pane'); // Assign options
 
-    this.options.theme = this.options.theme === null || this.options.theme === '' ? 'default' : this.options.theme; // Call initial method
+      this._initOptions(); // Initial load
 
-    this.init();
-  }
 
-  $.extend(SmartWizard.prototype, {
-    init: function () {
-      // Set the elements
-      this._setElements(); // Add toolbar
+      this._initLoad();
+    } // Initial Load Method
 
 
-      this._setToolbar(); // Assign plugin events
+    _createClass(SmartWizard, [{
+      key: "_initLoad",
+      value: function _initLoad() {
+        // Clean the elements
+        this.pages.hide();
+        this.steps.removeClass('done active'); // Active step index
 
+        this.current_index = null; // Get the initial step index
 
-      this._setEvents();
+        var idx = this._getStepIndex(); // Mark any previous steps done
 
-      var idx = this.options.selected; // Get selected step from the url
 
-      if (this.options.useURLhash) {
-        // Get step number from url hash if available
-        var hash = window.location.hash;
+        this._setPreviousStepsDone(idx); // Show the initial step
 
-        if (hash && hash.length > 0) {
-          var elm = $("a[href*='" + hash + "']", this.nav);
 
-          if (elm.length > 0) {
-            var id = this.steps.index(elm);
-            idx = id >= 0 ? id : idx;
-          }
-        }
-      }
+        this._showStep(idx);
+      } // Initialize options
 
-      if (idx > 0 && this.options.anchorSettings.markDoneStep && this.options.anchorSettings.markAllPreviousStepsAsDone) {
-        // Mark previous steps of the active step as done
-        this.steps.eq(idx).parent('li').prevAll().addClass("done");
-      } // Show the initial step
+    }, {
+      key: "_initOptions",
+      value: function _initOptions() {
+        // Set the elements
+        this._setElements(); // Add toolbar
 
 
-      this._showStep(idx);
-    },
-    // PRIVATE FUNCTIONS
-    _setElements: function () {
-      // Set the main element
-      this.main.addClass('sw-main sw-theme-' + this.options.theme); // Set anchor elements
-
-      this.nav.addClass('nav nav-tabs step-anchor').children('li').addClass('nav-item').children('a').addClass('nav-link'); // nav-justified  nav-pills
-      // Make the anchor clickable
+        this._setToolbar(); // Assign plugin events
 
-      if (this.options.anchorSettings.enableAllAnchors !== false && this.options.anchorSettings.anchorClickable !== false) {
-        this.steps.parent('li').addClass('clickable');
-      } // Set content container
 
+        this._setEvents();
+      }
+    }, {
+      key: "_getFirstDescendant",
+      value: function _getFirstDescendant(selector) {
+        // Check for first level element
+        var elm = this.main.children(selector);
 
-      this.container.addClass('sw-container tab-content'); // Set content pages
+        if (elm.length > 0) {
+          return elm;
+        } // Check for second level element
 
-      this.pages.addClass('tab-pane step-content'); // Disabled steps
 
-      var mi = this;
+        this.main.children().each(function (i, n) {
+          var tmp = $(n).children(selector);
 
-      if (this.options.disabledSteps && this.options.disabledSteps.length > 0) {
-        $.each(this.options.disabledSteps, function (i, n) {
-          mi.steps.eq(n).parent('li').addClass('disabled');
+          if (tmp.length > 0) {
+            elm = tmp;
+            return false;
+          }
         });
-      } // Error steps
 
+        if (elm.length > 0) {
+          return elm;
+        } // Element not found
 
-      if (this.options.errorSteps && this.options.errorSteps.length > 0) {
-        $.each(this.options.errorSteps, function (i, n) {
-          mi.steps.eq(n).parent('li').addClass('danger');
-        });
-      } // Hidden steps
 
+        this._showError("Element not found " + selector);
 
-      if (this.options.hiddenSteps && this.options.hiddenSteps.length > 0) {
-        $.each(this.options.hiddenSteps, function (i, n) {
-          mi.steps.eq(n).parent('li').addClass('hidden');
-        });
+        return false;
       }
+    }, {
+      key: "_setElements",
+      value: function _setElements() {
+        // Set the main element
+        this.main.addClass('sw');
 
-      return true;
-    },
-    _setToolbar: function () {
-      // Skip right away if the toolbar is not enabled
-      if (this.options.toolbarSettings.toolbarPosition === 'none') {
-        return true;
-      } // Create the toolbar buttons
+        this._setTheme(this.options.theme);
 
+        this._setJustify(this.options.justified); // Set the anchor default style
 
-      var btnNext = this.options.toolbarSettings.showNextButton !== false ? $('<button></button>').text(this.options.lang.next).addClass('btn btn-secondary sw-btn-next').attr('type', 'button') : null;
-      var btnPrevious = this.options.toolbarSettings.showPreviousButton !== false ? $('<button></button>').text(this.options.lang.previous).addClass('btn btn-secondary sw-btn-prev').attr('type', 'button') : null;
-      var btnGroup = $('<div></div>').addClass('btn-group mr-2 sw-btn-group').attr('role', 'group').append(btnPrevious, btnNext); // Add extra toolbar buttons
 
-      var btnGroupExtra = null;
+        if (this.options.anchorSettings.enableAllAnchors !== true || this.options.anchorSettings.anchorClickable !== true) {
+          this.steps.addClass('inactive');
+        } // Disabled steps
 
-      if (this.options.toolbarSettings.toolbarExtraButtons && this.options.toolbarSettings.toolbarExtraButtons.length > 0) {
-        btnGroupExtra = $('<div></div>').addClass('btn-group mr-2 sw-btn-group-extra').attr('role', 'group');
-        $.each(this.options.toolbarSettings.toolbarExtraButtons, function (i, n) {
-          btnGroupExtra.append(n.clone(true));
-        });
+
+        this._setCSSClass(this.options.disabledSteps, "disabled"); // Error steps
+
+
+        this._setCSSClass(this.options.errorSteps, "danger"); // Hidden steps
+
+
+        this._setCSSClass(this.options.hiddenSteps, "hidden");
       }
+    }, {
+      key: "_setEvents",
+      value: function _setEvents() {
+        var _this = this;
 
-      var toolbarTop, toolbarBottom; // Append toolbar based on the position
+        // Check if event handler already exists
+        if (this.main.data('click-init')) {
+          return true;
+        } // Flag item to prevent attaching handler again
 
-      switch (this.options.toolbarSettings.toolbarPosition) {
-        case 'top':
-          toolbarTop = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-top justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
-          toolbarTop.append(btnGroup);
 
-          if (this.options.toolbarSettings.toolbarButtonPosition === 'start') {
-            toolbarTop.prepend(btnGroupExtra);
-          } else {
-            toolbarTop.append(btnGroupExtra);
-          }
+        this.main.data('click-init', true); // Anchor click event
 
-          this.container.before(toolbarTop);
-          break;
+        $(this.steps).on("click", function (e) {
+          e.preventDefault();
 
-        case 'bottom':
-          toolbarBottom = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-bottom justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
-          toolbarBottom.append(btnGroup);
+          if (_this.options.anchorSettings.anchorClickable === false) {
+            return true;
+          } // Get the step index
 
-          if (this.options.toolbarSettings.toolbarButtonPosition === 'start') {
-            toolbarBottom.prepend(btnGroupExtra);
-          } else {
-            toolbarBottom.append(btnGroupExtra);
-          }
 
-          this.container.after(toolbarBottom);
-          break;
+          var idx = _this.steps.index(e.currentTarget);
 
-        case 'both':
-          toolbarTop = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-top justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
-          toolbarTop.append(btnGroup);
+          if (idx === _this.current_index) {
+            return true;
+          }
 
-          if (this.options.toolbarSettings.toolbarButtonPosition === 'start') {
-            toolbarTop.prepend(btnGroupExtra);
-          } else {
-            toolbarTop.append(btnGroupExtra);
+          if (_this.options.anchorSettings.enableAnchorOnDoneStep === false && _this._isDone(idx)) {
+            return true;
           }
 
-          this.container.before(toolbarTop);
-          toolbarBottom = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-bottom justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
-          toolbarBottom.append(btnGroup.clone(true));
+          if (_this.options.anchorSettings.enableAllAnchors !== false || _this._isDone(idx)) {
+            _this._showStep(idx);
+          }
+        }); // Next button event
 
-          if (btnGroupExtra !== null) {
-            if (this.options.toolbarSettings.toolbarButtonPosition === 'start') {
-              toolbarBottom.prepend(btnGroupExtra.clone(true));
-            } else {
-              toolbarBottom.append(btnGroupExtra.clone(true));
+        this.main.find('.sw-btn-next').on("click", function (e) {
+          e.preventDefault();
+
+          _this._showNext();
+        }); // Previous button event
+
+        this.main.find('.sw-btn-prev').on("click", function (e) {
+          e.preventDefault();
+
+          _this._showPrevious();
+        }); // Keyboard navigation event
+
+        if (this.options.keyboardSettings.keyNavigation) {
+          $(document).keyup(function (e) {
+            _this._keyNav(e);
+          });
+        } // Back/forward browser button event
+
+
+        if (this.options.backButtonSupport) {
+          $(window).on('hashchange', function (e) {
+            var idx = _this._getURLHashIndex();
+
+            if (idx !== false) {
+              e.preventDefault();
+
+              _this._showStep(idx);
             }
-          }
+          });
+        }
+      }
+    }, {
+      key: "_setToolbar",
+      value: function _setToolbar() {
+        // Skip right away if the toolbar is not enabled
+        if (this.options.toolbarSettings.toolbarPosition === 'none') {
+          return true;
+        } // Append toolbar based on the position
+
 
-          this.container.after(toolbarBottom);
-          break;
+        switch (this.options.toolbarSettings.toolbarPosition) {
+          case 'top':
+            this.container.before(this._createToolbar('top'));
+            break;
 
-        default:
-          toolbarBottom = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-bottom justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
-          toolbarBottom.append(btnGroup);
+          case 'bottom':
+            this.container.after(this._createToolbar('bottom'));
+            break;
 
-          if (this.options.toolbarSettings.toolbarButtonPosition === 'start') {
-            toolbarBottom.append(btnGroupExtra);
-          } else {
-            toolbarBottom.append(btnGroupExtra);
-          }
+          case 'both':
+            this.container.before(this._createToolbar('top'));
+            this.container.after(this._createToolbar('bottom'));
+            break;
 
-          this.container.after(toolbarBottom);
-          break;
+          default:
+            this.container.after(this._createToolbar('bottom'));
+            break;
+        }
       }
+    }, {
+      key: "_createToolbar",
+      value: function _createToolbar(position) {
+        // Skip if the toolbar is already created
+        if (this.main.find('.toolbar-' + position).length > 0) {
+          return null;
+        }
 
-      return true;
-    },
-    _setEvents: function () {
-      // Anchor click event
-      var mi = this;
-      $(this.steps).on("click", function (e) {
-        e.preventDefault();
+        var toolbar = $('<div></div>').addClass('toolbar toolbar-' + position).attr('role', 'toolbar'); // Create the toolbar buttons
 
-        if (mi.options.anchorSettings.anchorClickable === false) {
-          return true;
+        var btnNext = this.options.toolbarSettings.showNextButton !== false ? $('<button></button>').text(this.options.lang.next).addClass('btn sw-btn-next').attr('type', 'button') : null;
+        var btnPrevious = this.options.toolbarSettings.showPreviousButton !== false ? $('<button></button>').text(this.options.lang.previous).addClass('btn sw-btn-prev').attr('type', 'button') : null;
+        toolbar.append(btnPrevious, btnNext); // Add extra toolbar buttons
+
+        if (this.options.toolbarSettings.toolbarExtraButtons && this.options.toolbarSettings.toolbarExtraButtons.length > 0) {
+          $.each(this.options.toolbarSettings.toolbarExtraButtons, function (_i, n) {
+            toolbar.append(n.clone(true));
+          });
         }
 
-        var idx = mi.steps.index(this);
+        toolbar.css('text-align', this.options.toolbarSettings.toolbarButtonPosition);
+        return toolbar;
+      }
+    }, {
+      key: "_showNext",
+      value: function _showNext() {
+        var si = this._getNextShowable(this.current_index);
 
-        if (mi.options.anchorSettings.enableAnchorOnDoneStep === false && mi.steps.eq(idx).parent('li').hasClass('done')) {
-          return true;
+        if (si === false) {
+          return false;
         }
 
-        if (idx !== mi.current_index) {
-          if (mi.options.anchorSettings.enableAllAnchors !== false && mi.options.anchorSettings.anchorClickable !== false) {
-            mi._showStep(idx);
-          } else {
-            if (mi.steps.eq(idx).parent('li').hasClass('done')) {
-              mi._showStep(idx);
-            }
-          }
+        this._showStep(si);
+      }
+    }, {
+      key: "_showPrevious",
+      value: function _showPrevious() {
+        var si = this._getPreviousShowable(this.current_index);
+
+        if (si === false) {
+          return false;
         }
-      }); // Next button event
 
-      $('.sw-btn-next', this.main).on("click", function (e) {
-        e.preventDefault();
+        this._showStep(si);
+      }
+    }, {
+      key: "_showStep",
+      value: function _showStep(idx) {
+        // If current step is requested again, skip
+        if (idx == this.current_index) {
+          return false;
+        } // If step not found, skip
 
-        mi._showNext();
-      }); // Previous button event
 
-      $('.sw-btn-prev', this.main).on("click", function (e) {
-        e.preventDefault();
+        if (!this.steps.eq(idx)) {
+          return false;
+        } // If it is a disabled step, skip
 
-        mi._showPrevious();
-      }); // Keyboard navigation event
 
-      if (this.options.keyNavigation) {
-        $(document).keyup(function (e) {
-          mi._keyNav(e);
-        });
-      } // Back/forward browser button event
+        if (!this._isShowable(idx)) {
+          return false;
+        } // Load step content
 
 
-      if (this.options.backButtonSupport) {
-        $(window).on('hashchange', function (e) {
-          if (!mi.options.useURLhash) {
-            return true;
+        this._loadStep(idx);
+      }
+    }, {
+      key: "_getNextShowable",
+      value: function _getNextShowable(idx) {
+        var si = false; // Find the next showable step
+
+        for (var i = idx + 1; i < this.steps.length; i++) {
+          if (this._isShowable(i)) {
+            si = i;
+            break;
           }
+        }
 
-          if (window.location.hash) {
-            var elm = $("a[href*='" + window.location.hash + "']", mi.nav);
+        if (si !== false && this.steps.length <= si) {
+          if (!this.options.cycleSteps) {
+            return false;
+          }
 
-            if (elm && elm.length > 0) {
-              e.preventDefault();
+          si = 0;
+        }
 
-              mi._showStep(mi.steps.index(elm));
-            }
-          }
-        });
+        return si;
       }
+    }, {
+      key: "_getPreviousShowable",
+      value: function _getPreviousShowable(idx) {
+        var si = false; // Find the previous showable step
+
+        for (var i = idx - 1; i >= 0; i--) {
+          if (this._isShowable(i)) {
+            si = i;
+            break;
+          }
+        }
 
-      return true;
-    },
-    _showNext: function () {
-      var si = this.current_index + 1; // Find the next not disabled step
+        if (si !== false && 0 > si) {
+          if (!this.options.cycleSteps) {
+            return false;
+          }
 
-      for (var i = si; i < this.steps.length; i++) {
-        if (!this.steps.eq(i).parent('li').hasClass('disabled') && !this.steps.eq(i).parent('li').hasClass('hidden')) {
-          si = i;
-          break;
+          si = this.steps.length - 1;
         }
+
+        return si;
       }
+    }, {
+      key: "_isShowable",
+      value: function _isShowable(idx) {
+        var elm = this.steps.eq(idx);
 
-      if (this.steps.length <= si) {
-        if (!this.options.cycleSteps) {
+        if (elm.hasClass('disabled') || elm.hasClass('hidden')) {
           return false;
         }
 
-        si = 0;
+        return true;
       }
+    }, {
+      key: "_isDone",
+      value: function _isDone(idx) {
+        var elm = this.steps.eq(idx);
 
-      this._showStep(si);
-
-      return true;
-    },
-    _showPrevious: function () {
-      var si = this.current_index - 1; // Find the previous not disabled step
+        if (elm.hasClass('done')) {
+          return true;
+        }
 
-      for (var i = si; i >= 0; i--) {
-        if (!this.steps.eq(i).parent('li').hasClass('disabled') && !this.steps.eq(i).parent('li').hasClass('hidden')) {
-          si = i;
-          break;
+        return false;
+      }
+    }, {
+      key: "_setPreviousStepsDone",
+      value: function _setPreviousStepsDone(idx) {
+        if (idx > 0 && this.options.anchorSettings.markDoneStep && this.options.anchorSettings.markAllPreviousStepsAsDone) {
+          // Mark previous steps of the active step as done
+          for (var i = idx; i >= 0; i--) {
+            this._setCSSClass(i, "done");
+          }
         }
       }
+    }, {
+      key: "_setCSSClass",
+      value: function _setCSSClass(idx, cls) {
+        var _this2 = this;
 
-      if (0 > si) {
-        if (!this.options.cycleSteps) {
+        if (idx === null) {
           return false;
         }
 
-        si = this.steps.length - 1;
+        var idxs = $.isArray(idx) ? idx : [idx];
+        idxs.map(function (i) {
+          _this2.steps.eq(i).addClass(cls);
+        });
       }
+    }, {
+      key: "_resetCSSClass",
+      value: function _resetCSSClass(idx, cls) {
+        var _this3 = this;
+
+        var idxs = $.isArray(idx) ? idx : [idx];
+        idxs.map(function (i) {
+          _this3.steps.eq(i).removeClass(cls);
+        });
+      }
+    }, {
+      key: "_getStepDirection",
+      value: function _getStepDirection(idx) {
+        if (this.current_index == null) {
+          return '';
+        }
 
-      this._showStep(si);
+        return this.current_index < idx ? "forward" : "backward";
+      }
+    }, {
+      key: "_getStepPosition",
+      value: function _getStepPosition(idx) {
+        var stepPosition = 'middle';
+
+        if (idx === 0) {
+          stepPosition = 'first';
+        } else if (idx === this.steps.length - 1) {
+          stepPosition = 'last';
+        }
 
-      return true;
-    },
-    _showStep: function (idx) {
-      // If step not found, skip
-      if (!this.steps.eq(idx)) {
-        return false;
-      } // If current step is requested again, skip
+        return stepPosition;
+      }
+    }, {
+      key: "_getStepAnchor",
+      value: function _getStepAnchor(idx) {
+        if (idx == null) {
+          return null;
+        }
 
+        return this.steps.eq(idx);
+      }
+    }, {
+      key: "_getStepPage",
+      value: function _getStepPage(idx) {
+        if (idx == null) {
+          return null;
+        }
 
-      if (idx == this.current_index) {
-        return false;
-      } // If it is a disabled step, skip
+        var anchor = this._getStepAnchor(idx);
 
+        return anchor.length > 0 ? this.main.find(anchor.attr("href")) : null;
+      }
+    }, {
+      key: "_setStepContent",
+      value: function _setStepContent(idx, html) {
+        var page = this._getStepPage(idx);
 
-      if (this.steps.eq(idx).parent('li').hasClass('disabled') || this.steps.eq(idx).parent('li').hasClass('hidden')) {
-        return false;
-      } // Load step content
+        if (page) {
+          page.html(html);
+        }
+      }
+    }, {
+      key: "_loadStep",
+      value: function _loadStep(idx) {
+        var _this4 = this;
 
+        // Get current step element
+        var curStep = this._getStepAnchor(this.current_index); // Get step direction
 
-      this._loadStepContent(idx);
 
-      return true;
-    },
-    _loadStepContent: function (idx) {
-      var mi = this; // Get current step elements
+        var stepDirection = this._getStepDirection(idx); // Get the direction of step navigation
 
-      var curTab = this.steps.eq(this.current_index); // Get the direction of step navigation
 
-      var stepDirection = '';
-      var elm = this.steps.eq(idx);
-      var contentURL = elm.data('content-url') && elm.data('content-url').length > 0 ? elm.data('content-url') : this.options.contentURL;
+        if (this.current_index !== null) {
+          // Trigger "leaveStep" event
+          if (this._triggerEvent("leaveStep", [curStep, this.current_index, stepDirection]) === false) {
+            return false;
+          }
+        } // Get next step element
 
-      if (this.current_index !== null && this.current_index !== idx) {
-        stepDirection = this.current_index < idx ? "forward" : "backward";
-      } // Trigger "leaveStep" event
 
+        var selStep = this._getStepAnchor(idx); // Get the content if used
 
-      if (this.current_index !== null && this._triggerEvent("leaveStep", [curTab, this.current_index, stepDirection]) === false) {
-        return false;
-      }
 
-      if (contentURL && contentURL.length > 0 && (!elm.data('has-content') || !this.options.contentCache)) {
-        // Get ajax content and then show step
-        var selPage = elm.length > 0 ? $(elm.attr("href"), this.main) : null;
-        var ajaxSettings = $.extend(true, {}, {
-          url: contentURL,
-          type: "POST",
-          data: {
-            step_number: idx
-          },
-          dataType: "text",
-          beforeSend: function () {
-            mi._loader('show');
-          },
-          error: function (jqXHR, status, message) {
-            mi._loader('hide');
-
-            $.error(message);
-          },
-          success: function (res) {
-            if (res && res.length > 0) {
-              elm.data('has-content', true);
-              selPage.html(res);
-            }
+        var getStepContent = this._triggerEvent("stepContent", [selStep, idx, stepDirection]);
+
+        if (getStepContent) {
+          if (_typeof(getStepContent) == "object") {
+            getStepContent.then(function (res) {
+              _this4._setStepContent(idx, res);
+
+              _this4._transitStep(idx);
+            })["catch"](function (err) {
+              console.error(err);
 
-            mi._loader('hide');
+              _this4._setStepContent(idx, err);
 
-            mi._transitPage(idx);
+              _this4._transitStep(idx);
+            });
+          } else if (typeof getStepContent == "string") {
+            this._setStepContent(idx, getStepContent);
+
+            this._transitStep(idx);
+          } else {
+            this._transitStep(idx);
           }
-        }, this.options.ajaxSettings);
-        $.ajax(ajaxSettings);
-      } else {
-        // Show step
-        this._transitPage(idx);
+        } else {
+          this._transitStep(idx);
+        }
       }
+    }, {
+      key: "_transitStep",
+      value: function _transitStep(idx) {
+        var _this5 = this;
 
-      return true;
-    },
-    _transitPage: function (idx) {
-      var mi = this; // Get current step elements
+        // Get step to show element
+        var selStep = this._getStepAnchor(idx); // Change the url hash to new step
 
-      var curTab = this.steps.eq(this.current_index);
-      var curPage = curTab.length > 0 ? $(curTab.attr("href"), this.main) : null; // Get step to show elements
 
-      var selTab = this.steps.eq(idx);
-      var selPage = selTab.length > 0 ? $(selTab.attr("href"), this.main) : null; // Get the direction of step navigation
+        this._setURLHash(selStep.attr("href")); // Update controls
 
-      var stepDirection = '';
 
-      if (this.current_index !== null && this.current_index !== idx) {
-        stepDirection = this.current_index < idx ? "forward" : "backward";
-      }
+        this._setAnchor(idx); // Animate the step
+
+
+        this._doStepAnimation(idx, function () {
+          // Fix height with content
+          _this5._fixHeight(idx); // Get the direction of step navigation
+
+
+          var stepDirection = _this5._getStepDirection(idx); // Get the position of step
+
 
-      var stepPosition = 'middle';
+          var stepPosition = _this5._getStepPosition(idx); // Trigger "showStep" event
 
-      if (idx === 0) {
-        stepPosition = 'first';
-      } else if (idx === this.steps.length - 1) {
-        stepPosition = 'final';
+
+          _this5._triggerEvent("showStep", [selStep, _this5.current_index, stepDirection, stepPosition]);
+        }); // Update the current index
+
+
+        this.current_index = idx; // Set the buttons based on the step
+
+        this._setButtons(idx);
       }
+    }, {
+      key: "_doStepAnimation",
+      value: function _doStepAnimation(idx, callback) {
+        var _this6 = this;
 
-      this.options.transitionEffect = this.options.transitionEffect.toLowerCase();
-      this.pages.finish();
+        // Get current step element
+        var curPage = this._getStepPage(this.current_index); // Get next step element
 
-      if (this.options.transitionEffect === 'slide') {
-        // normal slide
-        if (curPage && curPage.length > 0) {
-          curPage.slideUp('fast', this.options.transitionEasing, function () {
-            selPage.slideDown(mi.options.transitionSpeed, mi.options.transitionEasing);
-          });
-        } else {
-          selPage.slideDown(this.options.transitionSpeed, this.options.transitionEasing);
-        }
-      } else if (this.options.transitionEffect === 'fade') {
-        // normal fade
-        if (curPage && curPage.length > 0) {
-          curPage.fadeOut('fast', this.options.transitionEasing, function () {
-            selPage.fadeIn('fast', mi.options.transitionEasing, function () {
-              $(this).show();
-            });
-          });
-        } else {
-          selPage.fadeIn(this.options.transitionSpeed, this.options.transitionEasing, function () {
-            $(this).show();
-          });
-        }
-      } else {
-        if (curPage && curPage.length > 0) {
-          curPage.hide();
-        }
 
-        selPage.show();
-      } // Change the url hash to new step
+        var selPage = this._getStepPage(idx); // Get the animation
 
 
-      this._setURLHash(selTab.attr("href")); // Update controls
+        var animation = this.options.transition.animation.toLowerCase(); // Complete any ongoing animations
 
+        this._stopAnimations();
 
-      this._setAnchor(idx); // Set the buttons based on the step
+        switch (animation) {
+          case 'slide-horizontal':
+          case 'slide-h':
+            // horizontal slide
+            var containerWidth = this.container.width();
+            var curLastLeft = containerWidth;
+            var nextFirstLeft = containerWidth * -2; // Forward direction
 
+            if (idx > this.current_index) {
+              curLastLeft = containerWidth * -1;
+              nextFirstLeft = containerWidth;
+            } // First load set the container width
 
-      this._setButtons(idx); // Fix height with content
 
+            if (this.current_index == null) {
+              this.container.height(selPage.outerHeight());
+            }
 
-      this._fixHeight(idx); // Update the current index
+            var css_pos, css_left;
+
+            if (curPage) {
+              css_pos = curPage.css("position");
+              css_left = curPage.css("left");
+              curPage.css("position", 'absolute').css("left", 0).animate({
+                left: curLastLeft
+              }, this.options.transition.speed, this.options.transition.easing, function () {
+                $(this).hide();
+                curPage.css("position", css_pos).css("left", css_left);
+              });
+            }
 
+            css_pos = selPage.css("position");
+            css_left = selPage.css("left");
+            selPage.css("position", 'absolute').css("left", nextFirstLeft).outerWidth(containerWidth).show().animate({
+              left: 0
+            }, this.options.transition.speed, this.options.transition.easing, function () {
+              selPage.css("position", css_pos).css("left", css_left);
+              callback();
+            });
+            break;
 
-      this.current_index = idx; // Trigger "showStep" event
+          case 'slide-vertical':
+          case 'slide-v':
+            // vertical slide
+            var containerHeight = this.container.height();
+            var curLastTop = containerHeight;
+            var nextFirstTop = containerHeight * -2; // Forward direction
 
-      this._triggerEvent("showStep", [selTab, this.current_index, stepDirection, stepPosition]);
+            if (idx > this.current_index) {
+              curLastTop = containerHeight * -1;
+              nextFirstTop = containerHeight;
+            }
 
-      return true;
-    },
-    _setAnchor: function (idx) {
-      // Current step anchor > Remove other classes and add done class
-      this.steps.eq(this.current_index).parent('li').removeClass("active");
+            var css_vpos, css_vtop;
+
+            if (curPage) {
+              css_vpos = curPage.css("position");
+              css_vtop = curPage.css("top");
+              curPage.css("position", 'absolute').css("top", 0).animate({
+                top: curLastTop
+              }, this.options.transition.speed, this.options.transition.easing, function () {
+                $(this).hide();
+                curPage.css("position", css_vpos).css("top", css_vtop);
+              });
+            }
 
-      if (this.options.anchorSettings.markDoneStep !== false && this.current_index !== null) {
-        this.steps.eq(this.current_index).parent('li').addClass("done");
+            css_vpos = selPage.css("position");
+            css_vtop = selPage.css("top");
+            selPage.css("position", 'absolute').css("top", nextFirstTop).show().animate({
+              top: 0
+            }, this.options.transition.speed, this.options.transition.easing, function () {
+              selPage.css("position", css_vpos).css("top", css_vtop);
+              callback();
+            });
+            break;
 
-        if (this.options.anchorSettings.removeDoneStepOnNavigateBack !== false) {
-          this.steps.eq(idx).parent('li').nextAll().removeClass("done");
-        }
-      } // Next step anchor > Remove other classes and add active class
+          case 'slide-swing':
+          case 'slide-s':
+            // normal slide
+            if (curPage) {
+              curPage.slideUp('fast', this.options.transition.easing, function () {
+                selPage.slideDown(_this6.options.transition.speed, _this6.options.transition.easing, function () {
+                  callback();
+                });
+              });
+            } else {
+              selPage.slideDown(this.options.transition.speed, this.options.transition.easing, function () {
+                callback();
+              });
+            }
 
+            break;
 
-      this.steps.eq(idx).parent('li').removeClass("done").addClass("active");
-      return true;
-    },
-    _setButtons: function (idx) {
-      // Previous/Next Button enable/disable based on step
-      if (!this.options.cycleSteps) {
-        if (0 >= idx) {
-          $('.sw-btn-prev', this.main).addClass("disabled");
-        } else {
-          $('.sw-btn-prev', this.main).removeClass("disabled");
-        }
+          case 'fade':
+            // normal fade
+            if (curPage) {
+              curPage.fadeOut('fast', this.options.transition.easing, function () {
+                selPage.fadeIn('fast', _this6.options.transition.easing, function () {
+                  callback();
+                });
+              });
+            } else {
+              selPage.fadeIn(this.options.transition.speed, this.options.transition.easing, function () {
+                callback();
+              });
+            }
 
-        if (this.steps.length - 1 <= idx) {
-          $('.sw-btn-next', this.main).addClass("disabled");
-        } else {
-          $('.sw-btn-next', this.main).removeClass("disabled");
+            break;
+
+          default:
+            if (curPage) {
+              curPage.hide();
+            }
+
+            selPage.show();
+            callback();
+            break;
         }
       }
+    }, {
+      key: "_stopAnimations",
+      value: function _stopAnimations() {
+        this.pages.finish();
+        this.container.finish();
+      }
+    }, {
+      key: "_setAnchor",
+      value: function _setAnchor(idx) {
+        // Current step anchor > Remove other classes and add done class
+        this._resetCSSClass(this.current_index, "active");
 
-      return true;
-    },
-    // HELPER FUNCTIONS
-    _keyNav: function (e) {
-      var mi = this; // Keyboard navigation
-
-      switch (e.which) {
-        case 37:
-          // left
-          mi._showPrevious();
+        if (this.options.anchorSettings.markDoneStep !== false && this.current_index !== null) {
+          this._setCSSClass(this.current_index, "done");
 
-          e.preventDefault();
-          break;
+          if (this.options.anchorSettings.removeDoneStepOnNavigateBack !== false && this._getStepDirection(idx) === 'backward') {
+            this._resetCSSClass(this.current_index, "done");
+          }
+        } // Next step anchor > Remove other classes and add active class
 
-        case 39:
-          // right
-          mi._showNext();
 
-          e.preventDefault();
-          break;
+        this._resetCSSClass(idx, "done");
 
-        default:
-          return;
-        // exit this handler for other keys
-      }
-    },
-    _fixHeight: function (idx) {
-      // Auto adjust height of the container
-      if (this.options.autoAdjustHeight) {
-        var selPage = this.steps.eq(idx).length > 0 ? $(this.steps.eq(idx).attr("href"), this.main) : null;
-        this.container.finish().animate({
-          minHeight: selPage.outerHeight()
-        }, this.options.transitionSpeed, function () {});
+        this._setCSSClass(idx, "active");
       }
+    }, {
+      key: "_setButtons",
+      value: function _setButtons(idx) {
+        // Previous/Next Button enable/disable based on step
+        if (!this.options.cycleSteps) {
+          this.main.find('.sw-btn-prev').removeClass("disabled");
+          this.main.find('.sw-btn-next').removeClass("disabled");
 
-      return true;
-    },
-    _triggerEvent: function (name, params) {
-      // Trigger an event
-      var e = $.Event(name);
-      this.main.trigger(e, params);
+          switch (this._getStepPosition(idx)) {
+            case 'first':
+              this.main.find('.sw-btn-prev').addClass("disabled");
+              break;
 
-      if (e.isDefaultPrevented()) {
-        return false;
+            case 'last':
+              this.main.find('.sw-btn-next').addClass("disabled");
+              break;
+
+            default:
+              if (this._getNextShowable(idx) === false) {
+                this.main.find('.sw-btn-next').addClass("disabled");
+              }
+
+              if (this._getPreviousShowable(idx) === false) {
+                this.main.find('.sw-btn-prev').addClass("disabled");
+              }
+
+              break;
+          }
+        }
       }
+    }, {
+      key: "_getStepIndex",
+      value: function _getStepIndex() {
+        // Get selected step from the url
+        var idx = this._getURLHashIndex();
 
-      return e.result;
-    },
-    _setURLHash: function (hash) {
-      if (this.options.showStepURLhash && window.location.hash !== hash) {
-        window.location.hash = hash;
+        return idx === false ? this.options.selected : idx;
       }
-    },
-    _loader: function (action) {
-      switch (action) {
-        case 'show':
-          this.main.addClass('sw-loading');
-          break;
+    }, {
+      key: "_setTheme",
+      value: function _setTheme(theme) {
+        this.main.removeClass(function (index, className) {
+          return (className.match(/(^|\s)sw-theme-\S+/g) || []).join(' ');
+        }).addClass('sw-theme-' + theme);
+      }
+    }, {
+      key: "_setJustify",
+      value: function _setJustify(justified) {
+        if (justified === true) {
+          this.main.addClass('sw-justified');
+        } else {
+          this.main.removeClass('sw-justified');
+        }
+      } // HELPER FUNCTIONS
 
-        case 'hide':
-          this.main.removeClass('sw-loading');
-          break;
+    }, {
+      key: "_keyNav",
+      value: function _keyNav(e) {
+        // Keyboard navigation
+        if ($.inArray(e.which, this.options.keyboardSettings.keyLeft) > -1) {
+          // left
+          this._showPrevious();
 
-        default:
-          this.main.toggleClass('sw-loading');
-      }
-    },
-    // PUBLIC FUNCTIONS
-    goToStep: function (stepNum) {
-      this._transitPage(stepNum);
-    },
-    hiddenSteps: function (r) {
-      this.options.hiddenSteps = r; // Hidden steps
-
-      if (this.options.hiddenSteps && this.options.hiddenSteps.length > 0) {
-        var mi = this;
-        $.each(mi.steps, function (i, n) {
-          if ($.inArray(i, mi.options.hiddenSteps) > -1) {
-            $(n).parent('li').addClass('hidden');
-          } else {
-            $(n).parent('li').removeClass('hidden');
-          }
-        });
+          e.preventDefault();
+        } else if ($.inArray(e.which, this.options.keyboardSettings.keyRight) > -1) {
+          // right
+          this._showNext();
+
+          e.preventDefault();
+        } else {
+          return; // exit this handler for other keys
+        }
       }
-    },
-    theme: function (v) {
-      if (this.options.theme === v) {
-        return false;
+    }, {
+      key: "_fixHeight",
+      value: function _fixHeight(idx) {
+        // Auto adjust height of the container
+        if (this.options.autoAdjustHeight) {
+          var selPage = this._getStepPage(idx);
+
+          this.container.finish().animate({
+            height: selPage.outerHeight()
+          }, this.options.transition.speed);
+        }
       }
+    }, {
+      key: "_triggerEvent",
+      value: function _triggerEvent(name, params) {
+        // Trigger an event
+        var e = $.Event(name);
+        this.main.trigger(e, params);
+
+        if (e.isDefaultPrevented()) {
+          return false;
+        }
 
-      this.main.removeClass('sw-theme-' + this.options.theme);
-      this.options.theme = v;
-      this.main.addClass('sw-theme-' + this.options.theme); // Trigger "themeChanged" event
+        return e.result;
+      }
+    }, {
+      key: "_setURLHash",
+      value: function _setURLHash(hash) {
+        if (this.options.enableURLhash && window.location.hash !== hash) {
+          history.pushState(null, null, hash);
+        }
+      }
+    }, {
+      key: "_getURLHashIndex",
+      value: function _getURLHashIndex() {
+        if (this.options.enableURLhash) {
+          // Get step number from url hash if available
+          var hash = window.location.hash;
+
+          if (hash.length > 0) {
+            var elm = this.nav.find("a[href*='" + hash + "']");
+
+            if (elm.length > 0) {
+              return this.steps.index(elm);
+            }
+          }
+        }
 
-      this._triggerEvent("themeChanged", [this.options.theme]);
-    },
-    next: function () {
-      this._showNext();
-    },
-    prev: function () {
-      this._showPrevious();
-    },
-    reset: function () {
-      // Trigger "beginReset" event
-      if (this._triggerEvent("beginReset") === false) {
         return false;
-      } // Reset all elements and classes
-
+      }
+    }, {
+      key: "_loader",
+      value: function _loader(action) {
+        switch (action) {
+          case 'show':
+            this.main.addClass('sw-loading');
+            break;
 
-      this.container.stop(true);
-      this.pages.stop(true);
-      this.pages.hide();
-      this.current_index = null;
+          case 'hide':
+            this.main.removeClass('sw-loading');
+            break;
 
-      this._setURLHash(this.steps.eq(this.options.selected).attr("href"));
+          default:
+            this.main.toggleClass('sw-loading');
+        }
+      }
+    }, {
+      key: "_showError",
+      value: function _showError(msg) {
+        console.error(msg);
+      } // PUBLIC FUNCTIONS
+
+    }, {
+      key: "goToStep",
+      value: function goToStep(stepIndex) {
+        this._showStep(stepIndex);
+      }
+    }, {
+      key: "next",
+      value: function next() {
+        this._showNext();
+      }
+    }, {
+      key: "prev",
+      value: function prev() {
+        this._showPrevious();
+      }
+    }, {
+      key: "reset",
+      value: function reset() {
+        // Reset all
+        this._setURLHash('#');
 
-      $(".sw-toolbar", this.main).remove();
-      this.steps.removeClass();
-      this.steps.parents('li').removeClass();
-      this.steps.data('has-content', false);
-      this.init(); // Trigger "endReset" event
+        this._initOptions();
 
-      this._triggerEvent("endReset");
-    },
-    stepState: function (stepArray, state) {
-      var mi = this;
-      stepArray = $.isArray(stepArray) ? stepArray : [stepArray];
-      var selSteps = $.grep(this.steps, function (n, i) {
-        return $.inArray(i, stepArray) !== -1; //  && i !== mi.current_index
-      });
+        this._initLoad();
+      }
+    }, {
+      key: "stepState",
+      value: function stepState(stepArray, state) {
+        if (!stepArray) {
+          return false;
+        }
 
-      if (selSteps && selSteps.length > 0) {
         switch (state) {
           case 'disable':
-            $(selSteps).parents('li').addClass('disabled');
+            this._setCSSClass(stepArray, 'disabled');
+
             break;
 
           case 'enable':
-            $(selSteps).parents('li').removeClass('disabled');
+            this._resetCSSClass(stepArray, 'disabled');
+
             break;
 
           case 'hide':
-            $(selSteps).parents('li').addClass('hidden');
+            this._setCSSClass(stepArray, 'hidden');
+
             break;
 
           case 'show':
-            $(selSteps).parents('li').removeClass('hidden');
+            this._resetCSSClass(stepArray, 'hidden');
+
             break;
 
           case 'error-on':
-            $(selSteps).parents('li').addClass('danger');
+            this._setCSSClass(stepArray, 'danger');
+
             break;
 
           case 'error-off':
-            $(selSteps).parents('li').removeClass('danger');
+            this._resetCSSClass(stepArray, 'danger');
+
             break;
         }
       }
-    }
-  }); // Wrapper for the plugin
+    }, {
+      key: "setOptions",
+      value: function setOptions(options) {
+        this.options = $.extend(true, {}, this.options, options);
 
-  $.fn.smartWizard = function (options) {
-    var args = arguments;
-    var instance;
+        this._initOptions();
+      }
+    }, {
+      key: "getStepIndex",
+      value: function getStepIndex() {
+        return this.current_index;
+      }
+    }, {
+      key: "loader",
+      value: function loader(state) {
+        if (state === "show") {
+          this.main.addClass('sw-loading');
+        } else {
+          this.main.removeClass('sw-loading');
+        }
+      }
+    }]);
+
+    return SmartWizard;
+  }(); // Wrapper for the plugin
 
-    if (options === undefined || typeof options === 'object') {
+
+  $.fn.smartWizard = function (options) {
+    if (options === undefined || _typeof(options) === 'object') {
       return this.each(function () {
         if (!$.data(this, "smartWizard")) {
           $.data(this, "smartWizard", new SmartWizard(this, options));
         }
       });
     } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
-      instance = $.data(this[0], 'smartWizard');
+      var instance = $.data(this[0], 'smartWizard');
 
       if (options === 'destroy') {
         $.data(this, 'smartWizard', null);
       }
 
       if (instance instanceof SmartWizard && typeof instance[options] === 'function') {
-        return instance[options].apply(instance, Array.prototype.slice.call(args, 1));
+        return instance[options].apply(instance, Array.prototype.slice.call(arguments, 1));
       } else {
         return this;
       }
diff --git a/dist/js/jquery.smartWizard.min.js b/dist/js/jquery.smartWizard.min.js
index 42b664d..0bf8570 100644
--- a/dist/js/jquery.smartWizard.min.js
+++ b/dist/js/jquery.smartWizard.min.js
@@ -1,12 +1,12 @@
+"use strict";function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,e){for(var s=0;s<e.length;s++){var i=e[s];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function _createClass(t,e,s){return e&&_defineProperties(t.prototype,e),s&&_defineProperties(t,s),t}
 /*!
- * SmartWizard v4.4.1
- * The awesome jQuery step wizard plugin with Bootstrap support
- * http://www.techlaboratory.net/smartwizard
+ * jQuery SmartWizard v5.0.0
+ * The awesome jQuery step wizard plugin
+ * http://www.techlaboratory.net/jquery-smartwizard
  *
  * Created by Dipu Raj
- * http://dipuraj.me
+ * http://dipu.me
  *
- * Licensed under the terms of the MIT License
- * https://github.com/techlab/SmartWizard/blob/master/LICENSE
- */
-!function(h,i,t){"use strict";var e={selected:0,keyNavigation:!0,autoAdjustHeight:!0,cycleSteps:!1,backButtonSupport:!0,useURLhash:!0,showStepURLhash:!0,lang:{next:"Next",previous:"Previous"},toolbarSettings:{toolbarPosition:"bottom",toolbarButtonPosition:"end",showNextButton:!0,showPreviousButton:!0,toolbarExtraButtons:[]},anchorSettings:{anchorClickable:!0,enableAllAnchors:!1,markDoneStep:!0,markAllPreviousStepsAsDone:!0,removeDoneStepOnNavigateBack:!1,enableAnchorOnDoneStep:!0},contentURL:null,contentCache:!0,ajaxSettings:{},disabledSteps:[],errorSteps:[],hiddenSteps:[],theme:"default",transitionEffect:"none",transitionSpeed:"400"};function n(t,s){this.options=h.extend(!0,{},e,s),this.main=h(t),this.nav=this.main.children("ul"),this.steps=h("li > a",this.nav),this.container=this.main.children("div"),this.pages=this.container.children("div"),this.current_index=null,this.options.toolbarSettings.toolbarButtonPosition="right"===this.options.toolbarSettings.toolbarButtonPosition?"end":this.options.toolbarSettings.toolbarButtonPosition,this.options.toolbarSettings.toolbarButtonPosition="left"===this.options.toolbarSettings.toolbarButtonPosition?"start":this.options.toolbarSettings.toolbarButtonPosition,this.options.theme=null===this.options.theme||""===this.options.theme?"default":this.options.theme,this.init()}h.extend(n.prototype,{init:function(){this._setElements(),this._setToolbar(),this._setEvents();var t=this.options.selected;if(this.options.useURLhash){var s=i.location.hash;if(s&&0<s.length){var e=h("a[href*='"+s+"']",this.nav);if(0<e.length){var n=this.steps.index(e);t=0<=n?n:t}}}0<t&&this.options.anchorSettings.markDoneStep&&this.options.anchorSettings.markAllPreviousStepsAsDone&&this.steps.eq(t).parent("li").prevAll().addClass("done"),this._showStep(t)},_setElements:function(){this.main.addClass("sw-main sw-theme-"+this.options.theme),this.nav.addClass("nav nav-tabs step-anchor").children("li").addClass("nav-item").children("a").addClass("nav-link"),!1!==this.options.anchorSettings.enableAllAnchors&&!1!==this.options.anchorSettings.anchorClickable&&this.steps.parent("li").addClass("clickable"),this.container.addClass("sw-container tab-content"),this.pages.addClass("tab-pane step-content");var e=this;return this.options.disabledSteps&&0<this.options.disabledSteps.length&&h.each(this.options.disabledSteps,function(t,s){e.steps.eq(s).parent("li").addClass("disabled")}),this.options.errorSteps&&0<this.options.errorSteps.length&&h.each(this.options.errorSteps,function(t,s){e.steps.eq(s).parent("li").addClass("danger")}),this.options.hiddenSteps&&0<this.options.hiddenSteps.length&&h.each(this.options.hiddenSteps,function(t,s){e.steps.eq(s).parent("li").addClass("hidden")}),!0},_setToolbar:function(){if("none"===this.options.toolbarSettings.toolbarPosition)return!0;var t,s,e=!1!==this.options.toolbarSettings.showNextButton?h("<button></button>").text(this.options.lang.next).addClass("btn btn-secondary sw-btn-next").attr("type","button"):null,n=!1!==this.options.toolbarSettings.showPreviousButton?h("<button></button>").text(this.options.lang.previous).addClass("btn btn-secondary sw-btn-prev").attr("type","button"):null,i=h("<div></div>").addClass("btn-group mr-2 sw-btn-group").attr("role","group").append(n,e),o=null;switch(this.options.toolbarSettings.toolbarExtraButtons&&0<this.options.toolbarSettings.toolbarExtraButtons.length&&(o=h("<div></div>").addClass("btn-group mr-2 sw-btn-group-extra").attr("role","group"),h.each(this.options.toolbarSettings.toolbarExtraButtons,function(t,s){o.append(s.clone(!0))})),this.options.toolbarSettings.toolbarPosition){case"top":(t=h("<div></div>").addClass("btn-toolbar sw-toolbar sw-toolbar-top justify-content-"+this.options.toolbarSettings.toolbarButtonPosition)).append(i),"start"===this.options.toolbarSettings.toolbarButtonPosition?t.prepend(o):t.append(o),this.container.before(t);break;case"bottom":(s=h("<div></div>").addClass("btn-toolbar sw-toolbar sw-toolbar-bottom justify-content-"+this.options.toolbarSettings.toolbarButtonPosition)).append(i),"start"===this.options.toolbarSettings.toolbarButtonPosition?s.prepend(o):s.append(o),this.container.after(s);break;case"both":(t=h("<div></div>").addClass("btn-toolbar sw-toolbar sw-toolbar-top justify-content-"+this.options.toolbarSettings.toolbarButtonPosition)).append(i),"start"===this.options.toolbarSettings.toolbarButtonPosition?t.prepend(o):t.append(o),this.container.before(t),(s=h("<div></div>").addClass("btn-toolbar sw-toolbar sw-toolbar-bottom justify-content-"+this.options.toolbarSettings.toolbarButtonPosition)).append(i.clone(!0)),null!==o&&("start"===this.options.toolbarSettings.toolbarButtonPosition?s.prepend(o.clone(!0)):s.append(o.clone(!0))),this.container.after(s);break;default:(s=h("<div></div>").addClass("btn-toolbar sw-toolbar sw-toolbar-bottom justify-content-"+this.options.toolbarSettings.toolbarButtonPosition)).append(i),this.options.toolbarSettings.toolbarButtonPosition,s.append(o),this.container.after(s)}return!0},_setEvents:function(){var e=this;return h(this.steps).on("click",function(t){if(t.preventDefault(),!1===e.options.anchorSettings.anchorClickable)return!0;var s=e.steps.index(this);if(!1===e.options.anchorSettings.enableAnchorOnDoneStep&&e.steps.eq(s).parent("li").hasClass("done"))return!0;s!==e.current_index&&(!1!==e.options.anchorSettings.enableAllAnchors&&!1!==e.options.anchorSettings.anchorClickable?e._showStep(s):e.steps.eq(s).parent("li").hasClass("done")&&e._showStep(s))}),h(".sw-btn-next",this.main).on("click",function(t){t.preventDefault(),e._showNext()}),h(".sw-btn-prev",this.main).on("click",function(t){t.preventDefault(),e._showPrevious()}),this.options.keyNavigation&&h(t).keyup(function(t){e._keyNav(t)}),this.options.backButtonSupport&&h(i).on("hashchange",function(t){if(!e.options.useURLhash)return!0;if(i.location.hash){var s=h("a[href*='"+i.location.hash+"']",e.nav);s&&0<s.length&&(t.preventDefault(),e._showStep(e.steps.index(s)))}}),!0},_showNext:function(){for(var t=this.current_index+1,s=t;s<this.steps.length;s++)if(!this.steps.eq(s).parent("li").hasClass("disabled")&&!this.steps.eq(s).parent("li").hasClass("hidden")){t=s;break}if(this.steps.length<=t){if(!this.options.cycleSteps)return!1;t=0}return this._showStep(t),!0},_showPrevious:function(){for(var t=this.current_index-1,s=t;0<=s;s--)if(!this.steps.eq(s).parent("li").hasClass("disabled")&&!this.steps.eq(s).parent("li").hasClass("hidden")){t=s;break}if(t<0){if(!this.options.cycleSteps)return!1;t=this.steps.length-1}return this._showStep(t),!0},_showStep:function(t){return!!this.steps.eq(t)&&(t!=this.current_index&&(!this.steps.eq(t).parent("li").hasClass("disabled")&&!this.steps.eq(t).parent("li").hasClass("hidden")&&(this._loadStepContent(t),!0)))},_loadStepContent:function(s){var n=this,t=this.steps.eq(this.current_index),e="",i=this.steps.eq(s),o=i.data("content-url")&&0<i.data("content-url").length?i.data("content-url"):this.options.contentURL;if(null!==this.current_index&&this.current_index!==s&&(e=this.current_index<s?"forward":"backward"),null!==this.current_index&&!1===this._triggerEvent("leaveStep",[t,this.current_index,e]))return!1;if(!(o&&0<o.length)||i.data("has-content")&&this.options.contentCache)this._transitPage(s);else{var a=0<i.length?h(i.attr("href"),this.main):null,r=h.extend(!0,{},{url:o,type:"POST",data:{step_number:s},dataType:"text",beforeSend:function(){n._loader("show")},error:function(t,s,e){n._loader("hide"),h.error(e)},success:function(t){t&&0<t.length&&(i.data("has-content",!0),a.html(t)),n._loader("hide"),n._transitPage(s)}},this.options.ajaxSettings);h.ajax(r)}return!0},_transitPage:function(t){var s=this,e=this.steps.eq(this.current_index),n=0<e.length?h(e.attr("href"),this.main):null,i=this.steps.eq(t),o=0<i.length?h(i.attr("href"),this.main):null,a="";null!==this.current_index&&this.current_index!==t&&(a=this.current_index<t?"forward":"backward");var r="middle";return 0===t?r="first":t===this.steps.length-1&&(r="final"),this.options.transitionEffect=this.options.transitionEffect.toLowerCase(),this.pages.finish(),"slide"===this.options.transitionEffect?n&&0<n.length?n.slideUp("fast",this.options.transitionEasing,function(){o.slideDown(s.options.transitionSpeed,s.options.transitionEasing)}):o.slideDown(this.options.transitionSpeed,this.options.transitionEasing):"fade"===this.options.transitionEffect?n&&0<n.length?n.fadeOut("fast",this.options.transitionEasing,function(){o.fadeIn("fast",s.options.transitionEasing,function(){h(this).show()})}):o.fadeIn(this.options.transitionSpeed,this.options.transitionEasing,function(){h(this).show()}):(n&&0<n.length&&n.hide(),o.show()),this._setURLHash(i.attr("href")),this._setAnchor(t),this._setButtons(t),this._fixHeight(t),this.current_index=t,this._triggerEvent("showStep",[i,this.current_index,a,r]),!0},_setAnchor:function(t){return this.steps.eq(this.current_index).parent("li").removeClass("active"),!1!==this.options.anchorSettings.markDoneStep&&null!==this.current_index&&(this.steps.eq(this.current_index).parent("li").addClass("done"),!1!==this.options.anchorSettings.removeDoneStepOnNavigateBack&&this.steps.eq(t).parent("li").nextAll().removeClass("done")),this.steps.eq(t).parent("li").removeClass("done").addClass("active"),!0},_setButtons:function(t){return this.options.cycleSteps||(t<=0?h(".sw-btn-prev",this.main).addClass("disabled"):h(".sw-btn-prev",this.main).removeClass("disabled"),this.steps.length-1<=t?h(".sw-btn-next",this.main).addClass("disabled"):h(".sw-btn-next",this.main).removeClass("disabled")),!0},_keyNav:function(t){switch(t.which){case 37:this._showPrevious(),t.preventDefault();break;case 39:this._showNext(),t.preventDefault();break;default:return}},_fixHeight:function(t){if(this.options.autoAdjustHeight){var s=0<this.steps.eq(t).length?h(this.steps.eq(t).attr("href"),this.main):null;this.container.finish().animate({minHeight:s.outerHeight()},this.options.transitionSpeed,function(){})}return!0},_triggerEvent:function(t,s){var e=h.Event(t);return this.main.trigger(e,s),!e.isDefaultPrevented()&&e.result},_setURLHash:function(t){this.options.showStepURLhash&&i.location.hash!==t&&(i.location.hash=t)},_loader:function(t){switch(t){case"show":this.main.addClass("sw-loading");break;case"hide":this.main.removeClass("sw-loading");break;default:this.main.toggleClass("sw-loading")}},goToStep:function(t){this._transitPage(t)},hiddenSteps:function(t){if(this.options.hiddenSteps=t,this.options.hiddenSteps&&0<this.options.hiddenSteps.length){var e=this;h.each(e.steps,function(t,s){-1<h.inArray(t,e.options.hiddenSteps)?h(s).parent("li").addClass("hidden"):h(s).parent("li").removeClass("hidden")})}},theme:function(t){if(this.options.theme===t)return!1;this.main.removeClass("sw-theme-"+this.options.theme),this.options.theme=t,this.main.addClass("sw-theme-"+this.options.theme),this._triggerEvent("themeChanged",[this.options.theme])},next:function(){this._showNext()},prev:function(){this._showPrevious()},reset:function(){if(!1===this._triggerEvent("beginReset"))return!1;this.container.stop(!0),this.pages.stop(!0),this.pages.hide(),this.current_index=null,this._setURLHash(this.steps.eq(this.options.selected).attr("href")),h(".sw-toolbar",this.main).remove(),this.steps.removeClass(),this.steps.parents("li").removeClass(),this.steps.data("has-content",!1),this.init(),this._triggerEvent("endReset")},stepState:function(e,t){e=h.isArray(e)?e:[e];var s=h.grep(this.steps,function(t,s){return-1!==h.inArray(s,e)});if(s&&0<s.length)switch(t){case"disable":h(s).parents("li").addClass("disabled");break;case"enable":h(s).parents("li").removeClass("disabled");break;case"hide":h(s).parents("li").addClass("hidden");break;case"show":h(s).parents("li").removeClass("hidden");break;case"error-on":h(s).parents("li").addClass("danger");break;case"error-off":h(s).parents("li").removeClass("danger")}}}),h.fn.smartWizard=function(t){var s,e=arguments;return void 0===t||"object"==typeof t?this.each(function(){h.data(this,"smartWizard")||h.data(this,"smartWizard",new n(this,t))}):"string"==typeof t&&"_"!==t[0]&&"init"!==t?(s=h.data(this[0],"smartWizard"),"destroy"===t&&h.data(this,"smartWizard",null),s instanceof n&&"function"==typeof s[t]?s[t].apply(s,Array.prototype.slice.call(e,1)):this):void 0}}(jQuery,window,document);
\ No newline at end of file
+ * @license Licensed under the terms of the MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */!function(v,i,t){var n={selected:0,theme:"default",justified:!0,autoAdjustHeight:!0,cycleSteps:!1,backButtonSupport:!0,enableURLhash:!0,transition:{animation:"none",speed:"400",easing:""},toolbarSettings:{toolbarPosition:"bottom",toolbarButtonPosition:"right",showNextButton:!0,showPreviousButton:!0,toolbarExtraButtons:[]},anchorSettings:{anchorClickable:!0,enableAllAnchors:!1,markDoneStep:!0,markAllPreviousStepsAsDone:!0,removeDoneStepOnNavigateBack:!1,enableAnchorOnDoneStep:!0},keyboardSettings:{keyNavigation:!0,keyLeft:[37],keyRight:[39]},lang:{next:"Next",previous:"Previous"},disabledSteps:[],errorSteps:[],hiddenSteps:[]},s=function(){function s(t,e){_classCallCheck(this,s),this.options=v.extend(!0,{},n,e),this.main=v(t),this.nav=this._getFirstDescendant(".nav"),this.steps=this.nav.find(".nav-link"),this.container=this._getFirstDescendant(".tab-content"),this.pages=this.container.children(".tab-pane"),this._initOptions(),this._initLoad()}return _createClass(s,[{key:"_initLoad",value:function(){this.pages.hide(),this.steps.removeClass("done active"),this.current_index=null;var t=this._getStepIndex();this._setPreviousStepsDone(t),this._showStep(t)}},{key:"_initOptions",value:function(){this._setElements(),this._setToolbar(),this._setEvents()}},{key:"_getFirstDescendant",value:function(i){var n=this.main.children(i);return 0<n.length?n:(this.main.children().each(function(t,e){var s=v(e).children(i);if(0<s.length)return n=s,!1}),0<n.length?n:(this._showError("Element not found "+i),!1))}},{key:"_setElements",value:function(){this.main.addClass("sw"),this._setTheme(this.options.theme),this._setJustify(this.options.justified),!0===this.options.anchorSettings.enableAllAnchors&&!0===this.options.anchorSettings.anchorClickable||this.steps.addClass("inactive"),this._setCSSClass(this.options.disabledSteps,"disabled"),this._setCSSClass(this.options.errorSteps,"danger"),this._setCSSClass(this.options.hiddenSteps,"hidden")}},{key:"_setEvents",value:function(){var s=this;if(this.main.data("click-init"))return!0;this.main.data("click-init",!0),v(this.steps).on("click",function(t){if(t.preventDefault(),!1===s.options.anchorSettings.anchorClickable)return!0;var e=s.steps.index(t.currentTarget);return e===s.current_index||(!(!1!==s.options.anchorSettings.enableAnchorOnDoneStep||!s._isDone(e))||void(!1===s.options.anchorSettings.enableAllAnchors&&!s._isDone(e)||s._showStep(e)))}),this.main.find(".sw-btn-next").on("click",function(t){t.preventDefault(),s._showNext()}),this.main.find(".sw-btn-prev").on("click",function(t){t.preventDefault(),s._showPrevious()}),this.options.keyboardSettings.keyNavigation&&v(t).keyup(function(t){s._keyNav(t)}),this.options.backButtonSupport&&v(i).on("hashchange",function(t){var e=s._getURLHashIndex();!1!==e&&(t.preventDefault(),s._showStep(e))})}},{key:"_setToolbar",value:function(){if("none"===this.options.toolbarSettings.toolbarPosition)return!0;switch(this.options.toolbarSettings.toolbarPosition){case"top":this.container.before(this._createToolbar("top"));break;case"bottom":this.container.after(this._createToolbar("bottom"));break;case"both":this.container.before(this._createToolbar("top")),this.container.after(this._createToolbar("bottom"));break;default:this.container.after(this._createToolbar("bottom"))}}},{key:"_createToolbar",value:function(t){if(0<this.main.find(".toolbar-"+t).length)return null;var s=v("<div></div>").addClass("toolbar toolbar-"+t).attr("role","toolbar"),e=!1!==this.options.toolbarSettings.showNextButton?v("<button></button>").text(this.options.lang.next).addClass("btn sw-btn-next").attr("type","button"):null,i=!1!==this.options.toolbarSettings.showPreviousButton?v("<button></button>").text(this.options.lang.previous).addClass("btn sw-btn-prev").attr("type","button"):null;return s.append(i,e),this.options.toolbarSettings.toolbarExtraButtons&&0<this.options.toolbarSettings.toolbarExtraButtons.length&&v.each(this.options.toolbarSettings.toolbarExtraButtons,function(t,e){s.append(e.clone(!0))}),s.css("text-align",this.options.toolbarSettings.toolbarButtonPosition),s}},{key:"_showNext",value:function(){var t=this._getNextShowable(this.current_index);if(!1===t)return!1;this._showStep(t)}},{key:"_showPrevious",value:function(){var t=this._getPreviousShowable(this.current_index);if(!1===t)return!1;this._showStep(t)}},{key:"_showStep",value:function(t){return t!=this.current_index&&(!!this.steps.eq(t)&&(!!this._isShowable(t)&&void this._loadStep(t)))}},{key:"_getNextShowable",value:function(t){for(var e=!1,s=t+1;s<this.steps.length;s++)if(this._isShowable(s)){e=s;break}if(!1!==e&&this.steps.length<=e){if(!this.options.cycleSteps)return!1;e=0}return e}},{key:"_getPreviousShowable",value:function(t){for(var e=!1,s=t-1;0<=s;s--)if(this._isShowable(s)){e=s;break}if(!1!==e&&e<0){if(!this.options.cycleSteps)return!1;e=this.steps.length-1}return e}},{key:"_isShowable",value:function(t){var e=this.steps.eq(t);return!e.hasClass("disabled")&&!e.hasClass("hidden")}},{key:"_isDone",value:function(t){return!!this.steps.eq(t).hasClass("done")}},{key:"_setPreviousStepsDone",value:function(t){if(0<t&&this.options.anchorSettings.markDoneStep&&this.options.anchorSettings.markAllPreviousStepsAsDone)for(var e=t;0<=e;e--)this._setCSSClass(e,"done")}},{key:"_setCSSClass",value:function(t,e){var s=this;if(null===t)return!1;(v.isArray(t)?t:[t]).map(function(t){s.steps.eq(t).addClass(e)})}},{key:"_resetCSSClass",value:function(t,e){var s=this;(v.isArray(t)?t:[t]).map(function(t){s.steps.eq(t).removeClass(e)})}},{key:"_getStepDirection",value:function(t){return null==this.current_index?"":this.current_index<t?"forward":"backward"}},{key:"_getStepPosition",value:function(t){var e="middle";return 0===t?e="first":t===this.steps.length-1&&(e="last"),e}},{key:"_getStepAnchor",value:function(t){return null==t?null:this.steps.eq(t)}},{key:"_getStepPage",value:function(t){if(null==t)return null;var e=this._getStepAnchor(t);return 0<e.length?this.main.find(e.attr("href")):null}},{key:"_setStepContent",value:function(t,e){var s=this._getStepPage(t);s&&s.html(e)}},{key:"_loadStep",value:function(e){var s=this,t=this._getStepAnchor(this.current_index),i=this._getStepDirection(e);if(null!==this.current_index&&!1===this._triggerEvent("leaveStep",[t,this.current_index,i]))return!1;var n=this._getStepAnchor(e),o=this._triggerEvent("stepContent",[n,e,i]);o?"object"==_typeof(o)?o.then(function(t){s._setStepContent(e,t),s._transitStep(e)}).catch(function(t){console.error(t),s._setStepContent(e,t),s._transitStep(e)}):("string"==typeof o&&this._setStepContent(e,o),this._transitStep(e)):this._transitStep(e)}},{key:"_transitStep",value:function(s){var i=this,n=this._getStepAnchor(s);this._setURLHash(n.attr("href")),this._setAnchor(s),this._doStepAnimation(s,function(){i._fixHeight(s);var t=i._getStepDirection(s),e=i._getStepPosition(s);i._triggerEvent("showStep",[n,i.current_index,t,e])}),this.current_index=s,this._setButtons(s)}},{key:"_doStepAnimation",value:function(t,e){var s=this,i=this._getStepPage(this.current_index),n=this._getStepPage(t),o=this.options.transition.animation.toLowerCase();switch(this._stopAnimations(),o){case"slide-horizontal":case"slide-h":var a,r,h=this.container.width(),l=h,u=-2*h;t>this.current_index&&(l=-1*h,u=h),null==this.current_index&&this.container.height(n.outerHeight()),i&&(a=i.css("position"),r=i.css("left"),i.css("position","absolute").css("left",0).animate({left:l},this.options.transition.speed,this.options.transition.easing,function(){v(this).hide(),i.css("position",a).css("left",r)})),a=n.css("position"),r=n.css("left"),n.css("position","absolute").css("left",u).outerWidth(h).show().animate({left:0},this.options.transition.speed,this.options.transition.easing,function(){n.css("position",a).css("left",r),e()});break;case"slide-vertical":case"slide-v":var c,p,d=this.container.height(),f=d,_=-2*d;t>this.current_index&&(f=-1*d,_=d),i&&(c=i.css("position"),p=i.css("top"),i.css("position","absolute").css("top",0).animate({top:f},this.options.transition.speed,this.options.transition.easing,function(){v(this).hide(),i.css("position",c).css("top",p)})),c=n.css("position"),p=n.css("top"),n.css("position","absolute").css("top",_).show().animate({top:0},this.options.transition.speed,this.options.transition.easing,function(){n.css("position",c).css("top",p),e()});break;case"slide-swing":case"slide-s":i?i.slideUp("fast",this.options.transition.easing,function(){n.slideDown(s.options.transition.speed,s.options.transition.easing,function(){e()})}):n.slideDown(this.options.transition.speed,this.options.transition.easing,function(){e()});break;case"fade":i?i.fadeOut("fast",this.options.transition.easing,function(){n.fadeIn("fast",s.options.transition.easing,function(){e()})}):n.fadeIn(this.options.transition.speed,this.options.transition.easing,function(){e()});break;default:i&&i.hide(),n.show(),e()}}},{key:"_stopAnimations",value:function(){this.pages.finish(),this.container.finish()}},{key:"_setAnchor",value:function(t){this._resetCSSClass(this.current_index,"active"),!1!==this.options.anchorSettings.markDoneStep&&null!==this.current_index&&(this._setCSSClass(this.current_index,"done"),!1!==this.options.anchorSettings.removeDoneStepOnNavigateBack&&"backward"===this._getStepDirection(t)&&this._resetCSSClass(this.current_index,"done")),this._resetCSSClass(t,"done"),this._setCSSClass(t,"active")}},{key:"_setButtons",value:function(t){if(!this.options.cycleSteps)switch(this.main.find(".sw-btn-prev").removeClass("disabled"),this.main.find(".sw-btn-next").removeClass("disabled"),this._getStepPosition(t)){case"first":this.main.find(".sw-btn-prev").addClass("disabled");break;case"last":this.main.find(".sw-btn-next").addClass("disabled");break;default:!1===this._getNextShowable(t)&&this.main.find(".sw-btn-next").addClass("disabled"),!1===this._getPreviousShowable(t)&&this.main.find(".sw-btn-prev").addClass("disabled")}}},{key:"_getStepIndex",value:function(){var t=this._getURLHashIndex();return!1===t?this.options.selected:t}},{key:"_setTheme",value:function(t){this.main.removeClass(function(t,e){return(e.match(/(^|\s)sw-theme-\S+/g)||[]).join(" ")}).addClass("sw-theme-"+t)}},{key:"_setJustify",value:function(t){!0===t?this.main.addClass("sw-justified"):this.main.removeClass("sw-justified")}},{key:"_keyNav",value:function(t){if(-1<v.inArray(t.which,this.options.keyboardSettings.keyLeft))this._showPrevious(),t.preventDefault();else{if(!(-1<v.inArray(t.which,this.options.keyboardSettings.keyRight)))return;this._showNext(),t.preventDefault()}}},{key:"_fixHeight",value:function(t){if(this.options.autoAdjustHeight){var e=this._getStepPage(t);this.container.finish().animate({height:e.outerHeight()},this.options.transition.speed)}}},{key:"_triggerEvent",value:function(t,e){var s=v.Event(t);return this.main.trigger(s,e),!s.isDefaultPrevented()&&s.result}},{key:"_setURLHash",value:function(t){this.options.enableURLhash&&i.location.hash!==t&&history.pushState(null,null,t)}},{key:"_getURLHashIndex",value:function(){if(this.options.enableURLhash){var t=i.location.hash;if(0<t.length){var e=this.nav.find("a[href*='"+t+"']");if(0<e.length)return this.steps.index(e)}}return!1}},{key:"_loader",value:function(t){switch(t){case"show":this.main.addClass("sw-loading");break;case"hide":this.main.removeClass("sw-loading");break;default:this.main.toggleClass("sw-loading")}}},{key:"_showError",value:function(t){console.error(t)}},{key:"goToStep",value:function(t){this._showStep(t)}},{key:"next",value:function(){this._showNext()}},{key:"prev",value:function(){this._showPrevious()}},{key:"reset",value:function(){this._setURLHash("#"),this._initOptions(),this._initLoad()}},{key:"stepState",value:function(t,e){if(!t)return!1;switch(e){case"disable":this._setCSSClass(t,"disabled");break;case"enable":this._resetCSSClass(t,"disabled");break;case"hide":this._setCSSClass(t,"hidden");break;case"show":this._resetCSSClass(t,"hidden");break;case"error-on":this._setCSSClass(t,"danger");break;case"error-off":this._resetCSSClass(t,"danger")}}},{key:"setOptions",value:function(t){this.options=v.extend(!0,{},this.options,t),this._initOptions()}},{key:"getStepIndex",value:function(){return this.current_index}},{key:"loader",value:function(t){"show"===t?this.main.addClass("sw-loading"):this.main.removeClass("sw-loading")}}]),s}();v.fn.smartWizard=function(t){if(void 0===t||"object"===_typeof(t))return this.each(function(){v.data(this,"smartWizard")||v.data(this,"smartWizard",new s(this,t))});if("string"==typeof t&&"_"!==t[0]&&"init"!==t){var e=v.data(this[0],"smartWizard");return"destroy"===t&&v.data(this,"smartWizard",null),e instanceof s&&"function"==typeof e[t]?e[t].apply(e,Array.prototype.slice.call(arguments,1)):this}}}(jQuery,window,document);
\ No newline at end of file
diff --git a/examples/ajax.html b/examples/ajax.html
new file mode 100644
index 0000000..32d396e
--- /dev/null
+++ b/examples/ajax.html
@@ -0,0 +1,254 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery Smart Wizard - The awesome jQuery step wizard plugin</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Include SmartWizard CSS -->
+    <link href="../dist/css/smart_wizard_all.css" rel="stylesheet" type="text/css" />
+
+    <!-- Demo Page Style - You don't need -->
+    <style>
+    body {
+      padding-right: 5%;
+      padding-left: 5%;
+    }
+    </style>
+
+</head>
+<body>
+
+    <br />
+    <p>
+      <label>Theme:</label>
+      <select id="theme_selector">
+        <option value="default" selected>Default</option>
+        <option value="arrows">Arrows</option>
+        <option value="dots">Dots</option>
+        <option value="dark">Dark</option>
+      </select>
+
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <input type="checkbox" id="is_justified" value="1" checked />
+      <label for="is_justified">Justified</label>
+
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <label>Animation:</label>
+      <select id="animation">
+            <option value="none">None</option>
+            <option value="fade">Fade</option>
+            <option value="slide-horizontal" selected>Slide Horizontal</option>
+            <option value="slide-vertical">Slide Vertical</option>
+            <option value="slide-swing">Slide Swing</option>
+      </select>
+
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <label>Go To:</label>
+      <select id="got_to_step">
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+      </select>
+
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <label>External Buttons:</label>
+      <button class="btn btn-secondary" id="prev-btn" type="button">Go Previous</button>
+      <button class="btn btn-secondary" id="next-btn" type="button">Go Next</button>
+      <button class="btn btn-danger" id="reset-btn" type="button">Reset Wizard</button>
+    </p>
+    <br />
+
+
+    <!-- SmartWizard html -->
+    <div id="smartwizard">
+
+        <ul class="nav">
+            <li class="nav-item">
+              <a class="nav-link" href="#step-1" data-repo="jquery-smarttab">
+                <strong>SmartTab</strong><br />repository details from GitHub
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#step-2" data-repo="smartwizard">
+                <strong>SmartWizard</strong><br />repository details from GitHub
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#step-3" data-repo="jquery-smartcart">
+                <strong>SmartCart</strong><br />repository details from GitHub
+              </a>
+            </li>
+        </ul>
+
+        <div class="tab-content">
+            <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
+            </div>
+            <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
+            </div>
+            <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
+            </div>
+            <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
+            </div>
+        </div>
+    </div>
+
+    <br /> &nbsp;
+
+    <!-- Include jQuery -->
+    <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
+
+    <!-- Include SmartWizard JavaScript source -->
+    <script type="text/javascript" src="../dist/js/jquery.smartWizard.min.js"></script>
+
+    <script type="text/javascript">
+        $(document).ready(function(){
+
+            // Toolbar extra buttons
+            var btnFinish = $('<button></button>').text('Finish')
+                                             .addClass('btn btn-info')
+                                             .on('click', function(){ alert('Finish Clicked'); });
+            var btnCancel = $('<button></button>').text('Cancel')
+                                             .addClass('btn btn-danger')
+                                             .on('click', function(){ $('#smartwizard').smartWizard("reset"); });
+
+            // Step show event
+            $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
+                $("#prev-btn").removeClass('disabled');
+                $("#next-btn").removeClass('disabled');
+                if(stepPosition === 'first') {
+                    $("#prev-btn").addClass('disabled');
+                } else if(stepPosition === 'last') {
+                    $("#next-btn").addClass('disabled');
+                } else {
+                    $("#prev-btn").removeClass('disabled');
+                    $("#next-btn").removeClass('disabled');
+                }
+            });
+
+            $("#smartwizard").on("stepContent", function(e, anchorObject, stepIndex, stepDirection) {
+
+                var repo    = anchorObject.data('repo');
+                var ajaxURL = "https://api.npms.io/v2/package/" + repo;
+                // Return a promise object
+                return new Promise((resolve, reject) => {
+
+                  // Ajax call to fetch your content
+                  $.ajax({
+                      method  : "GET",
+                      url     : ajaxURL,
+                      beforeSend: function( xhr ) {
+                          // Show the loader
+                          $('#smartwizard').smartWizard("loader", "show");
+                      }
+                  }).done(function( res ) {
+                      // console.log(res);
+
+                      var html = '<h2>Ajax data about ' + repo + ' loaded from GitHub</h2>';
+                      html += '<br>URL: <strong>' + ajaxURL + '</strong>';
+                      html += '<br>Name: <strong>' + res.collected.metadata.name + '</strong>';
+                      html += '<br>Description: ' + res.collected.metadata.description;
+                      html += '<br>Homepage: <a href="' + res.collected.github.homepage + '" >'+ res.collected.github.homepage +'</a>';
+                      html += '<br>Keywords: ' + res.collected.metadata.keywords.join(', ');
+
+                      // html += '<br>Clone URL: ' + res.clone_url;
+                      html += '<br>Stars: ' + res.collected.github.starsCount;
+                      html += '<br>Forks: ' + res.collected.github.forksCount;
+                      html += '<br>Watchers: ' + res.collected.github.subscribersCount;
+                      html += '<br>Open Issues: ' + res.collected.github.issues.openCount + '/' + res.collected.github.issues.count;
+
+                      html += '<br><br>Popularity: ' + parseInt(res.score.detail.popularity * 100);
+                      html += '<br>Quality: ' + parseInt(res.score.detail.quality * 100);
+                      html += '<br>Maintenance: ' + parseInt(res.score.detail.maintenance * 100);
+
+                      // Resolve the Promise with the tab content
+                      resolve(html);
+
+                      // Hide the loader
+                      $('#smartwizard').smartWizard("loader", "hide");
+                  }).fail(function(err) {
+
+                      // Reject the Promise with error message to show as tab content
+                      reject( "An error loading the resource" );
+
+                      // Hide the loader
+                      $('#smartwizard').smartWizard("loader", "hide");
+                  });
+
+                });
+            });
+
+            // Smart Wizard
+            $('#smartwizard').smartWizard({
+                selected: 0,
+                transition: {
+                    animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
+                },
+                toolbarSettings: {
+                    toolbarPosition: 'both', // both bottom
+                    toolbarExtraButtons: [btnFinish, btnCancel]
+                }
+            });
+
+            // External Button Events
+            $("#reset-btn").on("click", function() {
+                // Reset wizard
+                $('#smartwizard').smartWizard("reset");
+                return true;
+            });
+
+            $("#prev-btn").on("click", function() {
+                // Navigate previous
+                $('#smartwizard').smartWizard("prev");
+                return true;
+            });
+
+            $("#next-btn").on("click", function() {
+                // Navigate next
+                $('#smartwizard').smartWizard("next");
+                return true;
+            });
+
+
+            // Demo Button Events
+            $("#got_to_step").on("change", function() {
+                // Go to step
+                var step_index = $(this).val() - 1;
+                $('#smartwizard').smartWizard("goToStep", step_index);
+                return true;
+            });
+
+            $("#is_justified").on("click", function() {
+                // Change Justify
+                var options = {
+                  justified: $(this).prop("checked")
+                };
+
+                $('#smartwizard').smartWizard("setOptions", options);
+                return true;
+            });
+
+            $("#animation").on("change", function() {
+                // Change theme
+                var options = {
+                  transition: {
+                      animation: $(this).val()
+                  },
+                };
+                $('#smartwizard').smartWizard("setOptions", options);
+                return true;
+            });
+
+            $("#theme_selector").on("change", function() {
+                // Change theme
+                var options = {
+                  theme: $(this).val()
+                };
+                $('#smartwizard').smartWizard("setOptions", options);
+                return true;
+            });
+
+        });
+    </script>
+</body>
+</html>
diff --git a/examples/ajaxtest.php b/examples/ajaxtest.php
deleted file mode 100644
index e342359..0000000
--- a/examples/ajaxtest.php
+++ /dev/null
@@ -1,11 +0,0 @@
-<?php
-sleep(2);
-$step_number = $_REQUEST["step_number"];
-echo '<h2 class="StepTitle">Hello from Server! Step '.($step_number + 1).',</h2>
-            <p>We have added a 2 sec sleep to feel the ajax loading, It would be faster otherwise</p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
-            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
-            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
-            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
-            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>';
\ No newline at end of file
diff --git a/examples/index.html b/examples/index.html
index 6e3e0a7..28dadc6 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -1,101 +1,116 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <title>Smart Wizard - a JavaScript jQuery Step Wizard plugin</title>
+    <title>jQuery Smart Wizard - The awesome jQuery step wizard plugin</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-    <!-- Include Bootstrap CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
     <!-- Include SmartWizard CSS -->
-    <link href="../dist/css/smart_wizard.css" rel="stylesheet" type="text/css" />
+    <link href="../dist/css/smart_wizard_all.css" rel="stylesheet" type="text/css" />
+
+    <!-- Demo Page Style - You don't need -->
+    <style>
+    body {
+      padding-right: 5%;
+      padding-left: 5%;
+    }
+    </style>
 
-    <!-- Optional SmartWizard theme -->
-    <link href="../dist/css/smart_wizard_theme_circles.css" rel="stylesheet" type="text/css" />
-    <link href="../dist/css/smart_wizard_theme_arrows.css" rel="stylesheet" type="text/css" />
-    <link href="../dist/css/smart_wizard_theme_dots.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
-    <div class="container">
-        <!-- External toolbar sample -->
-        <div class="row d-flex align-items-center p-3 my-3 text-white-50">
-            <div class="col-12 col-lg-6 col-sm-12">
-              <label>Theme:</label>
-              <select id="theme_selector" class="custom-select col-lg-6 col-sm-12">
-                    <option value="default">default</option>
-                    <option value="arrows">arrows</option>
-                    <option value="circles">circles</option>
-                    <option value="dots">dots</option>
-              </select>
+
+    <br />
+    <p>
+      <label>Theme:</label>
+      <select id="theme_selector">
+        <option value="default">Default</option>
+        <option value="arrows" selected>Arrows</option>
+        <option value="dots">Dots</option>
+        <option value="dark">Dark</option>
+      </select>
+
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <input type="checkbox" id="is_justified" value="1" checked />
+      <label for="is_justified">Justified</label>
+
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <label>Animation:</label>
+      <select id="animation">
+            <option value="none">None</option>
+            <option value="fade">Fade</option>
+            <option value="slide-horizontal" selected>Slide Horizontal</option>
+            <option value="slide-vertical">Slide Vertical</option>
+            <option value="slide-swing">Slide Swing</option>
+      </select>
+
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <label>Go To:</label>
+      <select id="got_to_step">
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+      </select>
+
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <label>External Buttons:</label>
+      <button class="btn btn-secondary" id="prev-btn" type="button">Go Previous</button>
+      <button class="btn btn-secondary" id="next-btn" type="button">Go Next</button>
+      <button class="btn btn-danger" id="reset-btn" type="button">Reset Wizard</button>
+    </p>
+    <br />
+
+
+    <!-- SmartWizard html -->
+    <div id="smartwizard">
+
+        <ul class="nav">
+            <li class="nav-item">
+              <a class="nav-link" href="#step-1">
+                <strong>Step 1</strong> <br>This is step description
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#step-2">
+                <strong>Step 2</strong> <br>This is step description
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#step-3">
+                <strong>Step 3</strong> <br>This is step description
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#step-4">
+                <strong>Step 4</strong> <br>This is step description
+              </a>
+            </li>
+        </ul>
+
+        <div class="tab-content">
+            <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
+                <h3>Step 1 Content</h3>
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
             </div>
-            <div class="col-12 col-lg-6 col-sm-12">
-              <label>External Buttons:</label>
-              <div class="btn-group col-lg-6 col-sm-12" role="group">
-                  <button class="btn btn-secondary" id="prev-btn" type="button">Go Previous</button>
-                  <button class="btn btn-secondary" id="next-btn" type="button">Go Next</button>
-                  <button class="btn btn-danger" id="reset-btn" type="button">Reset Wizard</button>
-              </div>
+            <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
+                <h3>Step 2 Content</h3>
+                <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
             </div>
-        </div>
-
-        <!-- SmartWizard html -->
-        <div id="smartwizard">
-            <ul>
-                <li><a href="#step-1">Step 1<br /><small>This is step description</small></a></li>
-                <li><a href="#step-2">Step 2<br /><small>This is step description</small></a></li>
-                <li><a href="#step-3">Step 3<br /><small>This is step description</small></a></li>
-                <li><a href="#step-4">Step 4<br /><small>This is step description</small></a></li>
-            </ul>
-
-            <div>
-                <div id="step-1" class="">
-                    <h3 class="border-bottom border-gray pb-2">Step 1 Content</h3>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </div>
-                <div id="step-2" class="">
-                    <h3 class="border-bottom border-gray pb-2">Step 2 Content</h3>
-                    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
-                </div>
-                <div id="step-3" class="">
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </div>
-                <div id="step-4" class="">
-                    <h3 class="border-bottom border-gray pb-2">Step 4 Content</h3>
-                    <div class="card">
-                        <div class="card-header">My Details</div>
-                        <div class="card-block p-0">
-                          <table class="table">
-                              <tbody>
-                                  <tr> <th>Name:</th> <td>Tim Smith</td> </tr>
-                                  <tr> <th>Email:</th> <td>example@example.com</td> </tr>
-                              </tbody>
-                          </table>
-                        </div>
-                    </div>
-                </div>
+            <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+            </div>
+            <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
+                <h3>Step 4 Content</h3>
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
             </div>
         </div>
-
-
     </div>
 
-    <!-- Include jQuery -->
-    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
-
-    <script
-      src="https://code.jquery.com/jquery-3.3.1.min.js"
-      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
-      crossorigin="anonymous"></script>
+    <br /> &nbsp;
 
-    <!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    <!-- Include jQuery -->
+    <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
 
     <!-- Include SmartWizard JavaScript source -->
     <script type="text/javascript" src="../dist/js/jquery.smartWizard.min.js"></script>
@@ -103,23 +118,6 @@ <h3 class="border-bottom border-gray pb-2">Step 4 Content</h3>
     <script type="text/javascript">
         $(document).ready(function(){
 
-            // Step show event
-            $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
-               //alert("You are on step "+stepNumber+" now");
-               if(stepPosition === 'first'){
-                   $("#prev-btn").addClass('disabled');
-               }else if(stepPosition === 'final'){
-                   $("#next-btn").addClass('disabled');
-               }else{
-                   $("#prev-btn").removeClass('disabled');
-                   $("#next-btn").removeClass('disabled');
-               }
-            });
-
-            $("#smartwizard").on("endReset", function() {
-              $("#next-btn").removeClass('disabled');
-            });
-
             // Toolbar extra buttons
             var btnFinish = $('<button></button>').text('Finish')
                                              .addClass('btn btn-info')
@@ -128,25 +126,37 @@ <h3 class="border-bottom border-gray pb-2">Step 4 Content</h3>
                                              .addClass('btn btn-danger')
                                              .on('click', function(){ $('#smartwizard').smartWizard("reset"); });
 
+            // Step show event
+            $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
+                $("#prev-btn").removeClass('disabled');
+                $("#next-btn").removeClass('disabled');
+                if(stepPosition === 'first') {
+                    $("#prev-btn").addClass('disabled');
+                } else if(stepPosition === 'last') {
+                    $("#next-btn").addClass('disabled');
+                } else {
+                    $("#prev-btn").removeClass('disabled');
+                    $("#next-btn").removeClass('disabled');
+                }
+            });
 
             // Smart Wizard
             $('#smartwizard').smartWizard({
-                    selected: 0,
-                    theme: 'default',
-                    transitionEffect:'fade',
-                    showStepURLhash: true,
-                    toolbarSettings: {toolbarPosition: 'both',
-                                      toolbarButtonPosition: 'end',
-                                      toolbarExtraButtons: [btnFinish, btnCancel]
-                                    }
+                selected: 0,
+                theme: 'arrows',
+                transition: {
+                    animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
+                },
+                toolbarSettings: {
+                    toolbarPosition: 'both', // both bottom
+                    toolbarExtraButtons: [btnFinish, btnCancel]
+                }
             });
 
-
             // External Button Events
             $("#reset-btn").on("click", function() {
                 // Reset wizard
                 $('#smartwizard').smartWizard("reset");
-                $("#next-btn").removeClass('disabled');
                 return true;
             });
 
@@ -162,14 +172,45 @@ <h3 class="border-bottom border-gray pb-2">Step 4 Content</h3>
                 return true;
             });
 
+
+            // Demo Button Events
+            $("#got_to_step").on("change", function() {
+                // Go to step
+                var step_index = $(this).val() - 1;
+                $('#smartwizard').smartWizard("goToStep", step_index);
+                return true;
+            });
+
+            $("#is_justified").on("click", function() {
+                // Change Justify
+                var options = {
+                  justified: $(this).prop("checked")
+                };
+
+                $('#smartwizard').smartWizard("setOptions", options);
+                return true;
+            });
+
+            $("#animation").on("change", function() {
+                // Change theme
+                var options = {
+                  transition: {
+                      animation: $(this).val()
+                  },
+                };
+                $('#smartwizard').smartWizard("setOptions", options);
+                return true;
+            });
+
             $("#theme_selector").on("change", function() {
                 // Change theme
-                $('#smartwizard').smartWizard("theme", $(this).val());
+                var options = {
+                  theme: $(this).val()
+                };
+                $('#smartwizard').smartWizard("setOptions", options);
                 return true;
             });
 
-            // Set selected theme on page refresh
-            $("#theme_selector").change();
         });
     </script>
 </body>
diff --git a/examples/multiple.html b/examples/multiple.html
new file mode 100644
index 0000000..d156a34
--- /dev/null
+++ b/examples/multiple.html
@@ -0,0 +1,376 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery Smart Wizard - The awesome jQuery step wizard plugin</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Include SmartWizard CSS -->
+    <link href="../dist/css/smart_wizard_all.css" rel="stylesheet" type="text/css" />
+
+    <!-- Demo Page Style - You don't need -->
+    <style>
+    body {
+      padding-right: 5%;
+      padding-left: 5%;
+    }
+    </style>
+
+</head>
+<body>
+
+    <br />
+    <p>
+      <label>Theme:</label>
+      <select id="theme_selector">
+        <option value="default">Default</option>
+        <option value="arrows" selected>Arrows</option>
+        <option value="dots">Dots</option>
+        <option value="dark">Dark</option>
+      </select>
+
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <input type="checkbox" id="is_justified" value="1" checked />
+      <label for="is_justified">Justified</label>
+
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <label>Animation:</label>
+      <select id="animation">
+            <option value="none">None</option>
+            <option value="fade">Fade</option>
+            <option value="slide-horizontal" selected>Slide Horizontal</option>
+            <option value="slide-vertical">Slide Vertical</option>
+            <option value="slide-swing">Slide Swing</option>
+      </select>
+
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <label>Go To:</label>
+      <select id="got_to_step">
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+      </select>
+
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <label>External Buttons:</label>
+      <button class="btn btn-secondary" id="prev-btn" type="button">Go Previous</button>
+      <button class="btn btn-secondary" id="next-btn" type="button">Go Next</button>
+      <button class="btn btn-danger" id="reset-btn" type="button">Reset Wizard</button>
+    </p>
+    <br />
+
+
+    <!-- SmartWizard html -->
+    <div id="smartwizard">
+
+        <ul class="nav">
+            <li class="nav-item">
+              <a class="nav-link" href="#step-1">
+                <strong>Step 1</strong> This is step description
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#step-2">
+                <strong>Step 2</strong> This is step description
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#step-3">
+                <strong>Step 3</strong> This is step description
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#step-4">
+                <strong>Step 4</strong> This is step description
+              </a>
+            </li>
+        </ul>
+
+        <div class="tab-content">
+            <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
+                <h3>Step 1 Content</h3>
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+            </div>
+            <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
+                <h3>Step 2 Content</h3>
+                <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
+            </div>
+            <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+            </div>
+            <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
+                <h3>Step 4 Content</h3>
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+            </div>
+        </div>
+    </div>
+
+    <br /> &nbsp;
+
+    <p>
+      <label>Theme:</label>
+      <select id="theme_selector2">
+        <option value="default">Default</option>
+        <option value="arrows">Arrows</option>
+        <option value="dots">Dots</option>
+        <option value="dark" selected>Dark</option>
+      </select>
+
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <input type="checkbox" id="is_justified2" value="1" checked />
+      <label for="is_justified2">Justified</label>
+
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <label>Animation:</label>
+      <select id="animation2">
+            <option value="none">None</option>
+            <option value="fade">Fade</option>
+            <option value="slide-horizontal" selected>Slide Horizontal</option>
+            <option value="slide-vertical">Slide Vertical</option>
+            <option value="slide-swing">Slide Swing</option>
+      </select>
+
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <label>Go To:</label>
+      <select id="got_to_step2">
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+      </select>
+
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <label>External Buttons:</label>
+      <button class="btn btn-secondary" id="prev-btn2" type="button">Go Previous</button>
+      <button class="btn btn-secondary" id="next-btn2" type="button">Go Next</button>
+      <button class="btn btn-danger" id="reset-btn2" type="button">Reset Wizard</button>
+    </p>
+    <br />
+
+
+    <!-- SmartWizard html -->
+    <div id="smartwizard2">
+
+        <ul class="nav">
+            <li class="nav-item">
+              <a class="nav-link" href="#step-1">
+                <strong>Step 1</strong> This is step description
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#step-2">
+                <strong>Step 2</strong> This is step description
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#step-3">
+                <strong>Step 3</strong> This is step description
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#step-4">
+                <strong>Step 4</strong> This is step description
+              </a>
+            </li>
+        </ul>
+
+        <div class="tab-content">
+            <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
+                <h3>Step 1 Content</h3>
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+            </div>
+            <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
+                <h3>Step 2 Content</h3>
+                <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
+            </div>
+            <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+            </div>
+            <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
+                <h3>Step 4 Content</h3>
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+            </div>
+        </div>
+    </div>
+
+    <!-- Include jQuery -->
+    <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
+
+    <!-- Include SmartWizard JavaScript source -->
+    <script type="text/javascript" src="../dist/js/jquery.smartWizard.min.js"></script>
+
+    <script type="text/javascript">
+        $(document).ready(function(){
+
+            // Toolbar extra buttons
+            var btnFinish = $('<button></button>').text('Finish')
+                                             .addClass('btn btn-info')
+                                             .on('click', function(){ alert('Finish Clicked'); });
+            var btnCancel = $('<button></button>').text('Cancel')
+                                             .addClass('btn btn-danger')
+                                             .on('click', function(){ $('#smartwizard').smartWizard("reset"); });
+
+            // Step show event
+            $("#smartwizard #smartwizard2").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
+                $("#prev-btn").removeClass('disabled');
+                $("#next-btn").removeClass('disabled');
+                if(stepPosition === 'first') {
+                    $("#prev-btn").addClass('disabled');
+                } else if(stepPosition === 'last') {
+                    $("#next-btn").addClass('disabled');
+                } else {
+                    $("#prev-btn").removeClass('disabled');
+                    $("#next-btn").removeClass('disabled');
+                }
+            });
+
+            // Smart Wizard
+            $('#smartwizard').smartWizard({
+                selected: 0,
+                theme: 'arrows',
+                transition: {
+                    animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
+                },
+                toolbarSettings: {
+                    toolbarPosition: 'both', // both bottom
+                    toolbarExtraButtons: [btnFinish, btnCancel]
+                }
+            });
+
+            // External Button Events
+            $("#reset-btn").on("click", function() {
+                // Reset wizard
+                $('#smartwizard').smartWizard("reset");
+                return true;
+            });
+
+            $("#prev-btn").on("click", function() {
+                // Navigate previous
+                $('#smartwizard').smartWizard("prev");
+                return true;
+            });
+
+            $("#next-btn").on("click", function() {
+                // Navigate next
+                $('#smartwizard').smartWizard("next");
+                return true;
+            });
+
+
+            // Demo Button Events
+            $("#got_to_step").on("change", function() {
+                // Go to step
+                var step_index = $(this).val() - 1;
+                $('#smartwizard').smartWizard("goToStep", step_index);
+                return true;
+            });
+
+            $("#is_justified").on("click", function() {
+                // Change Justify
+                var options = {
+                  justified: $(this).prop("checked")
+                };
+
+                $('#smartwizard').smartWizard("setOptions", options);
+                return true;
+            });
+
+            $("#animation").on("change", function() {
+                // Change theme
+                var options = {
+                  transition: {
+                      animation: $(this).val()
+                  },
+                };
+                $('#smartwizard').smartWizard("setOptions", options);
+                return true;
+            });
+
+            $("#theme_selector").on("change", function() {
+                // Change theme
+                var options = {
+                  theme: $(this).val()
+                };
+                $('#smartwizard').smartWizard("setOptions", options);
+                return true;
+            });
+
+            // Smart Wizard 2nd
+            $('#smartwizard2').smartWizard({
+                selected: 0,
+                theme: 'dark',
+                enableURLhash: false,
+                transition: {
+                    animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
+                },
+                toolbarSettings: {
+                    toolbarPosition: 'both', // both bottom
+                    toolbarExtraButtons: [btnFinish, btnCancel]
+                }
+            });
+
+            // External Button Events
+            $("#reset-btn2").on("click", function() {
+                // Reset wizard
+                $('#smartwizard2').smartWizard("reset");
+                return true;
+            });
+
+            $("#prev-btn2").on("click", function() {
+                // Navigate previous
+                $('#smartwizard2').smartWizard("prev");
+                return true;
+            });
+
+            $("#next-btn2").on("click", function() {
+                // Navigate next
+                $('#smartwizard2').smartWizard("next");
+                return true;
+            });
+
+
+            // Demo Button Events
+            $("#got_to_step2").on("change", function() {
+                // Go to step
+                var step_index = $(this).val() - 1;
+                $('#smartwizard2').smartWizard("goToStep", step_index);
+                return true;
+            });
+
+            $("#is_justified2").on("click", function() {
+                // Change Justify
+                var options = {
+                  justified: $(this).prop("checked")
+                };
+
+                $('#smartwizard2').smartWizard("setOptions", options);
+                return true;
+            });
+
+            $("#animation2").on("change", function() {
+                // Change theme
+                var options = {
+                  transition: {
+                      animation: $(this).val()
+                  },
+                };
+                $('#smartwizard2').smartWizard("setOptions", options);
+                return true;
+            });
+
+            $("#theme_selector2").on("change", function() {
+                // Change theme
+                var options = {
+                  theme: $(this).val()
+                };
+                $('#smartwizard2').smartWizard("setOptions", options);
+                return true;
+            });
+
+        });
+    </script>
+</body>
+</html>
diff --git a/examples/smartwizard-ajax.html b/examples/smartwizard-ajax.html
deleted file mode 100644
index 9b1a0b2..0000000
--- a/examples/smartwizard-ajax.html
+++ /dev/null
@@ -1,98 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>Smart Wizard - a JavaScript jQuery Step Wizard plugin</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
-    <!-- Include Bootstrap CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
-    <!-- Include SmartWizard CSS -->
-    <link href="../dist/css/smart_wizard.css" rel="stylesheet" type="text/css" />
-
-    <!-- Optional SmartWizard theme -->
-    <link href="../dist/css/smart_wizard_theme_circles.css" rel="stylesheet" type="text/css" />
-    <link href="../dist/css/smart_wizard_theme_arrows.css" rel="stylesheet" type="text/css" />
-    <link href="../dist/css/smart_wizard_theme_dots.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-    <div class="container">
-
-        <!-- SmartWizard html -->
-        <div id="smartwizard">
-            <ul>
-                <li><a href="#step-1">Step 1<br /><small>This is tab's description</small></a></li>
-                <li><a href="#step-2" data-content-url="./ajaxtest.php">Step 2<br /><small>This is tab's description</small></a></li>
-                <li><a href="#step-3">Step 3<br /><small>This is tab's description</small></a></li>
-                <li><a href="#step-4" data-content-url="./ajaxtest.php">Step 4<br /><small>This is tab's description</small></a></li>
-            </ul>
-
-            <div>
-                <div id="step-1" class="">
-                    <h2>Step 1 Content, Non ajax content</h2>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </div>
-                <div id="step-2" class="">
-                    <h2>Step 2 Content, Non ajax content</h2>
-                    <div>Hello This is a div</div>
-                </div>
-                <div id="step-3" class="">
-                    <h2>Step 3 Content, Non ajax content</h2>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </div>
-                <div id="step-4" class="">
-                    <h2>Step 4 Content, Non ajax content</h2>
-                    <div class="card">
-                        <div class="card-header">My Details</div>
-                        <div class="card-block p-0">
-                          <table class="table">
-                              <tbody>
-                                  <tr> <th>Name:</th> <td>Tim Smith</td> </tr>
-                                  <tr> <th>Email:</th> <td>example@example.com</td> </tr>
-                              </tbody>
-                          </table>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-
-    </div>
-
-    <!-- Include jQuery -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-
-    <!-- Include SmartWizard JavaScript source -->
-    <script type="text/javascript" src="../dist/js/jquery.smartWizard.min.js"></script>
-
-    <script type="text/javascript">
-        $(document).ready(function(){
-
-            // Toolbar extra buttons
-            var btnFinish = $('<button></button>').text('Finish')
-                                             .addClass('btn btn-info')
-                                             .on('click', function(){ alert('Finish Clicked'); });
-            var btnCancel = $('<button></button>').text('Cancel')
-                                             .addClass('btn btn-danger')
-                                             .on('click', function(){ $('#smartwizard').smartWizard("reset"); });
-
-            // Smart Wizard
-            $('#smartwizard').smartWizard({
-                    selected: 0,
-                    theme: 'arrows',
-                    transitionEffect:'fade',
-                    toolbarSettings: {toolbarPosition: 'bottom',
-                                      toolbarExtraButtons: [btnFinish, btnCancel]
-                                    }
-                 });
-        });
-    </script>
-</body>
-</html>
diff --git a/examples/smartwizard-events.html b/examples/smartwizard-events.html
deleted file mode 100644
index 95d3437..0000000
--- a/examples/smartwizard-events.html
+++ /dev/null
@@ -1,171 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>Smart Wizard - a JavaScript jQuery Step Wizard plugin</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
-    <!-- Include Bootstrap CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
-    <!-- Include SmartWizard CSS -->
-    <link href="../dist/css/smart_wizard.css" rel="stylesheet" type="text/css" />
-
-    <!-- Optional SmartWizard theme -->
-    <link href="../dist/css/smart_wizard_theme_circles.css" rel="stylesheet" type="text/css" />
-    <link href="../dist/css/smart_wizard_theme_arrows.css" rel="stylesheet" type="text/css" />
-    <link href="../dist/css/smart_wizard_theme_dots.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-    <div class="container">
-
-      <form class="form-inline">
-          <label class="mr-sm-2">Choose Theme:</label>
-          <select id="theme_selector" class="custom-select mb-2 mr-sm-2 mb-sm-0">
-                <option value="default">default</option>
-                <option value="arrows">arrows</option>
-                <option value="circles">circles</option>
-                <option value="dots">dots</option>
-          </select>
-
-          <label class="mr-sm-2">External Buttons:</label>
-          <div class="btn-group" role="group">
-              <button class="btn btn-secondary" id="prev-btn" type="button">Go Previous</button>
-              <button class="btn btn-secondary" id="next-btn" type="button">Go Next</button>
-              <button class="btn btn-danger" id="reset-btn" type="button">Reset Wizard</button>
-          </div>
-      </form>
-        <div class="alert alert-info" role="alert" id="message-box"><strong>Event Log:</strong></div>
-
-        <!-- SmartWizard html -->
-        <div id="smartwizard">
-            <ul>
-                <li><a href="#step-1">Step 1<br /><small>This is tab's description</small></a></li>
-                <li><a href="#step-2">Step 2<br /><small>This is tab's description</small></a></li>
-                <li><a href="#step-3">Step 3<br /><small>This is tab's description</small></a></li>
-                <li><a href="#step-4">Step 4<br /><small>This is tab's description</small></a></li>
-            </ul>
-
-            <div>
-                <div id="step-1" class="">
-                    <h2>Step 1 Content</h2>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </div>
-                <div id="step-2" class="">
-                    <h2>Step 2 Content</h2>
-                    <div>Hello This is a div</div>
-                </div>
-                <div id="step-3" class="">
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </div>
-                <div id="step-4" class="">
-                    <h2>Step 4 Content</h2>
-                    <div class="card">
-                        <div class="card-header">My Details</div>
-                        <div class="card-block p-0">
-                          <table class="table">
-                              <tbody>
-                                  <tr> <th>Name:</th> <td>Tim Smith</td> </tr>
-                                  <tr> <th>Email:</th> <td>example@example.com</td> </tr>
-                              </tbody>
-                          </table>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-
-    </div>
-
-    <!-- Include jQuery -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-
-    <!-- Include SmartWizard JavaScript source -->
-    <script type="text/javascript" src="../dist/js/jquery.smartWizard.min.js"></script>
-
-    <script type="text/javascript">
-        $(document).ready(function(){
-
-            // Smart Wizard events
-            $("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
-                $("#message-box").append("<br /> > <strong>leaveStep</strong> called on " + stepNumber + ". Direction: " + stepDirection);
-                var res = confirm("Do you want to leave the step "+stepNumber+"?");
-                if(!res){
-                    $("#message-box").append(" <strong>leaveStep</strong> Cancelled");
-                }else{
-                    $("#message-box").append(" <strong>leaveStep</strong> Allowed");
-                }
-                return res;
-            });
-
-            // This event should initialize before initializing smartWizard
-            // Otherwise this event wont load on first page load
-            $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
-                $("#message-box").append(" > <strong>showStep</strong> called on " + stepNumber + ". Direction: " + stepDirection+ ". Position: " + stepPosition);
-            });
-
-            $("#smartwizard").on("beginReset", function(e) {
-                $("#message-box").append("<br /> > <strong>beginReset</strong> called");
-            });
-
-            $("#smartwizard").on("endReset", function(e) {
-                $("#message-box").append(" > <strong>endReset</strong> called");
-            });
-
-            $("#smartwizard").on("themeChanged", function(e, theme) {
-                $("#message-box").append("<br /> > <strong>themeChanged</strong> called. New theme: " + theme);
-            });
-
-            // Toolbar extra buttons
-            var btnFinish = $('<button></button>').text('Finish')
-                                             .addClass('btn btn-info')
-                                             .on('click', function(){ alert('Finish Clicked'); });
-            var btnCancel = $('<button></button>').text('Cancel')
-                                             .addClass('btn btn-danger')
-                                             .on('click', function(){ $('#smartwizard').smartWizard("reset"); });
-
-            // Smart Wizard initialize
-            $('#smartwizard').smartWizard({
-                    selected: 0,
-                    theme: 'dots',
-                    transitionEffect:'fade',
-                    toolbarSettings: {toolbarPosition: 'bottom',
-                                      toolbarExtraButtons: [btnFinish, btnCancel]
-                                    }
-                 });
-
-            // External Button Events
-            $("#reset-btn").on("click", function() {
-                // Reset wizard
-                $('#smartwizard').smartWizard("reset");
-                return true;
-            });
-
-            $("#prev-btn").on("click", function() {
-                // Navigate previous
-                $('#smartwizard').smartWizard("prev");
-                return true;
-            });
-
-            $("#next-btn").on("click", function() {
-                // Navigate next
-                $('#smartwizard').smartWizard("next");
-                return true;
-            });
-
-            $("#theme_selector").on("change", function() {
-                // Change theme
-                $('#smartwizard').smartWizard("theme", $(this).val());
-                return true;
-            });
-
-        });
-    </script>
-</body>
-</html>
diff --git a/examples/smartwizard-input.html b/examples/smartwizard-input.html
deleted file mode 100644
index 4912069..0000000
--- a/examples/smartwizard-input.html
+++ /dev/null
@@ -1,171 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>Smart Wizard - a JavaScript jQuery Step Wizard plugin</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
-    <!-- Include Bootstrap CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
-    <!-- Include SmartWizard CSS -->
-    <link href="../dist/css/smart_wizard.css" rel="stylesheet" type="text/css" />
-
-    <!-- Optional SmartWizard theme -->
-    <link href="../dist/css/smart_wizard_theme_circles.css" rel="stylesheet" type="text/css" />
-    <link href="../dist/css/smart_wizard_theme_arrows.css" rel="stylesheet" type="text/css" />
-    <link href="../dist/css/smart_wizard_theme_dots.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-    <div class="container">
-        <br />
-        <form action="#" id="myForm" role="form" data-toggle="validator" method="post" accept-charset="utf-8">
-
-        <!-- SmartWizard html -->
-        <div id="smartwizard">
-            <ul>
-                <li><a href="#step-1">Step 1<br /><small>Email Address</small></a></li>
-                <li><a href="#step-2">Step 2<br /><small>Name</small></a></li>
-                <li><a href="#step-3">Step 3<br /><small>Address</small></a></li>
-                <li><a href="#step-4">Step 4<br /><small>Terms and Conditions</small></a></li>
-            </ul>
-
-            <div>
-                <div id="step-1">
-                    <h2>Your Email Address</h2>
-                    <div id="form-step-0" role="form" data-toggle="validator">
-                        <div class="form-group">
-                            <label for="email">Email address:</label>
-                            <input type="email" class="form-control" name="email" id="email" placeholder="Write your email address" required>
-                            <div class="help-block with-errors"></div>
-                        </div>
-                    </div>
-
-                </div>
-                <div id="step-2">
-                    <h2>Your Name</h2>
-                    <div id="form-step-1" role="form" data-toggle="validator">
-                        <div class="form-group">
-                            <label for="name">Name:</label>
-                            <input type="text" class="form-control" name="name" id="email" placeholder="Write your name" required>
-                            <div class="help-block with-errors"></div>
-                        </div>
-                    </div>
-                </div>
-                <div id="step-3">
-                    <h2>Your Address</h2>
-                    <div id="form-step-2" role="form" data-toggle="validator">
-                        <div class="form-group">
-                            <label for="address">Address</label>
-                            <textarea class="form-control" name="address" id="address" rows="3" placeholder="Write your address..." required></textarea>
-                            <div class="help-block with-errors"></div>
-                        </div>
-                    </div>
-                </div>
-                <div id="step-4" class="">
-                    <h2>Terms and Conditions</h2>
-                    <p>
-                        Terms and conditions: Keep your smile :)
-                    </p>
-                    <div id="form-step-3" role="form" data-toggle="validator">
-                        <div class="form-group">
-                            <label for="terms">I agree with the T&C</label>
-                            <input type="checkbox" id="terms" data-error="Please accept the Terms and Conditions" required>
-                            <div class="help-block with-errors"></div>
-                        </div>
-                    </div>
-
-
-                </div>
-            </div>
-        </div>
-
-        </form>
-
-    </div>
-
-    <!-- Include jQuery -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-    <!-- Include jQuery Validator plugin -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>
-
-
-    <!-- Include SmartWizard JavaScript source -->
-    <script type="text/javascript" src="../dist/js/jquery.smartWizard.min.js"></script>
-
-    <script type="text/javascript">
-        $(document).ready(function(){
-
-            // Toolbar extra buttons
-            var btnFinish = $('<button></button>').text('Finish')
-                                             .addClass('btn btn-info')
-                                             .on('click', function(){
-                                                    if( !$(this).hasClass('disabled')){
-                                                        var elmForm = $("#myForm");
-                                                        if(elmForm){
-                                                            elmForm.validator('validate');
-                                                            var elmErr = elmForm.find('.has-error');
-                                                            if(elmErr && elmErr.length > 0){
-                                                                alert('Oops we still have error in the form');
-                                                                return false;
-                                                            }else{
-                                                                alert('Great! we are ready to submit form');
-                                                                elmForm.submit();
-                                                                return false;
-                                                            }
-                                                        }
-                                                    }
-                                                });
-            var btnCancel = $('<button></button>').text('Cancel')
-                                             .addClass('btn btn-danger')
-                                             .on('click', function(){
-                                                    $('#smartwizard').smartWizard("reset");
-                                                    $('#myForm').find("input, textarea").val("");
-                                                });
-
-
-
-            // Smart Wizard
-            $('#smartwizard').smartWizard({
-                    selected: 0,
-                    theme: 'dots',
-                    transitionEffect:'fade',
-                    toolbarSettings: {toolbarPosition: 'bottom',
-                                      toolbarExtraButtons: [btnFinish, btnCancel]
-                                    },
-                    anchorSettings: {
-                                markDoneStep: true, // add done css
-                                markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
-                                removeDoneStepOnNavigateBack: true, // While navigate back done step after active step will be cleared
-                                enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
-                            }
-                 });
-
-            $("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
-                var elmForm = $("#form-step-" + stepNumber);
-                // stepDirection === 'forward' :- this condition allows to do the form validation
-                // only on forward navigation, that makes easy navigation on backwards still do the validation when going next
-                if(stepDirection === 'forward' && elmForm){
-                    elmForm.validator('validate');
-                    var elmErr = elmForm.children('.has-error');
-                    if(elmErr && elmErr.length > 0){
-                        // Form validation failed
-                        return false;
-                    }
-                }
-                return true;
-            });
-
-            $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection) {
-                // Enable finish button only on last step
-                if(stepNumber == 3){
-                    $('.btn-finish').removeClass('disabled');
-                }else{
-                    $('.btn-finish').addClass('disabled');
-                }
-            });
-
-        });
-    </script>
-</body>
-</html>
diff --git a/examples/smartwizard-modal.html b/examples/smartwizard-modal.html
deleted file mode 100644
index 24839ff..0000000
--- a/examples/smartwizard-modal.html
+++ /dev/null
@@ -1,125 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>Smart Wizard - a JavaScript jQuery Step Wizard plugin</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
-    <!-- Include Bootstrap CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
-    <!-- Include SmartWizard CSS -->
-    <link href="../dist/css/smart_wizard.css" rel="stylesheet" type="text/css" />
-
-    <!-- Optional SmartWizard theme -->
-    <link href="../dist/css/smart_wizard_theme_circles.css" rel="stylesheet" type="text/css" />
-    <link href="../dist/css/smart_wizard_theme_arrows.css" rel="stylesheet" type="text/css" />
-    <link href="../dist/css/smart_wizard_theme_dots.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-    <div class="container">
-
-      <!-- External toolbar sample -->
-      <div class="row d-flex align-items-center p-3 my-3 text-white-50">
-        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
-          Click to launch Smart Wizard modal
-        </button>
-      </div>
-
-      <!-- Modal -->
-      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
-          <div class="modal-content">
-            <div class="modal-header">
-              <h5 class="modal-title" id="exampleModalLabel">Smart Wizard modal</h5>
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-              </button>
-            </div>
-            <div class="modal-body">
-
-              <!-- Smart Wizard HTML -->
-              <div id="smartwizard">
-                  <ul>
-                      <li><a href="#step-1">Step Title<br /><small>Step description</small></a></li>
-                      <li><a href="#step-2">Step Title<br /><small>Step description</small></a></li>
-                      <li><a href="#step-3">Step Title<br /><small>Step description</small></a></li>
-                      <li><a href="#step-4">Step Title<br /><small>Step description</small></a></li>
-                  </ul>
-
-                  <div>
-                      <div id="step-1" class="">
-                          Step Content
-                      </div>
-                      <div id="step-2" class="">
-                          Step Content
-                      </div>
-                      <div id="step-3" class="">
-                          Step Content
-                      </div>
-                      <div id="step-4" class="">
-                          Step Content
-                      </div>
-                  </div>
-              </div>
-
-            </div>
-            <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-
-
-    </div>
-
-    <!-- jQuery Versions -->
-    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
-
-    <!-- Bootstrap JavaScript -->
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-
-    <!-- Include SmartWizard JavaScript source -->
-    <script type="text/javascript" src="../dist/js/jquery.smartWizard.min.js"></script>
-
-    <script type="text/javascript">
-        $(document).ready(function(){
-
-            // Step show event
-            $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
-               //alert("You are on step "+stepNumber+" now");
-               if(stepPosition === 'first'){
-                   $("#prev-btn").addClass('disabled');
-               }else if(stepPosition === 'final'){
-                   $("#next-btn").addClass('disabled');
-               }else{
-                   $("#prev-btn").removeClass('disabled');
-                   $("#next-btn").removeClass('disabled');
-               }
-            });
-
-            // Toolbar extra buttons
-            var btnFinish = $('<button></button>').text('Finish')
-                                             .addClass('btn btn-info')
-                                             .on('click', function(){ alert('Finish Clicked'); });
-            var btnCancel = $('<button></button>').text('Cancel')
-                                             .addClass('btn btn-danger')
-                                             .on('click', function(){ $('#smartwizard').smartWizard("reset"); });
-
-            // Smart Wizard 1
-            $('#smartwizard').smartWizard({
-                    selected: 0,
-                    theme: 'arrows',
-                    transitionEffect:'fade',
-                    showStepURLhash: false,
-                    toolbarSettings: {toolbarPosition: 'both',
-                                      toolbarExtraButtons: [btnFinish, btnCancel]
-                                    }
-            });
-
-        });
-    </script>
-</body>
-</html>
diff --git a/examples/smartwizard-multiple.html b/examples/smartwizard-multiple.html
deleted file mode 100644
index db258fd..0000000
--- a/examples/smartwizard-multiple.html
+++ /dev/null
@@ -1,168 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>Smart Wizard - a JavaScript jQuery Step Wizard plugin</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
-    <!-- Include Bootstrap CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-
-    <!-- Include SmartWizard CSS -->
-    <link href="../dist/css/smart_wizard.css" rel="stylesheet" type="text/css" />
-
-    <!-- Optional SmartWizard theme -->
-    <link href="../dist/css/smart_wizard_theme_circles.css" rel="stylesheet" type="text/css" />
-    <link href="../dist/css/smart_wizard_theme_arrows.css" rel="stylesheet" type="text/css" />
-    <link href="../dist/css/smart_wizard_theme_dots.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-    <div class="container">
-
-        <!-- SmartWizard 1 html -->
-        <div id="smartwizard">
-            <ul>
-                <li><a href="#step-1">Step 1<br /><small>This is step description</small></a></li>
-                <li><a href="#step-2">Step 2<br /><small>This is step description</small></a></li>
-                <li><a href="#step-3">Step 3<br /><small>This is step description</small></a></li>
-                <li><a href="#step-4">Step 4<br /><small>This is step description</small></a></li>
-            </ul>
-
-            <div>
-                <div id="step-1" class="">
-                    <h2>Step 1 Content</h2>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </div>
-                <div id="step-2" class="">
-                    <h2>Step 2 Content</h2>
-                    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
-                </div>
-                <div id="step-3" class="">
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </div>
-                <div id="step-4" class="">
-                  <h2>Step 4 Content</h2>
-                  <div class="card">
-                      <div class="card-header">My Details</div>
-                      <div class="card-block p-0">
-                        <table class="table">
-                            <tbody>
-                                <tr> <th>Name:</th> <td>Tim Smith</td> </tr>
-                                <tr> <th>Email:</th> <td>example@example.com</td> </tr>
-                            </tbody>
-                        </table>
-                      </div>
-                  </div>
-                </div>
-            </div>
-        </div>
-
-        <br />
-
-        <!-- SmartWizard 2 html -->
-        <div id="smartwizard2">
-            <ul>
-                <li><a href="#step-1">Step 1<br /><small>This is step description</small></a></li>
-                <li><a href="#step-2">Step 2<br /><small>This is step description</small></a></li>
-                <li><a href="#step-3">Step 3<br /><small>This is step description</small></a></li>
-                <li><a href="#step-4">Step 4<br /><small>This is step description</small></a></li>
-            </ul>
-
-            <div>
-                <div id="step-1" class="">
-                    <h2>Step 1 Content</h2>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </div>
-                <div id="step-2" class="">
-                    <h2>Step 2 Content</h2>
-                    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
-                </div>
-                <div id="step-3" class="">
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </div>
-                <div id="step-4" class="">
-                  <h2>Step 4 Content</h2>
-                  <div class="card">
-                      <div class="card-header">My Details</div>
-                      <div class="card-block p-0">
-                        <table class="table">
-                            <tbody>
-                                <tr> <th>Name:</th> <td>Tim Smith</td> </tr>
-                                <tr> <th>Email:</th> <td>example@example.com</td> </tr>
-                            </tbody>
-                        </table>
-                      </div>
-                  </div>
-                </div>
-            </div>
-        </div>
-
-
-    </div>
-
-    <!-- Include jQuery -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-
-    <!-- Include SmartWizard JavaScript source -->
-    <script type="text/javascript" src="../dist/js/jquery.smartWizard.min.js"></script>
-
-    <script type="text/javascript">
-        $(document).ready(function(){
-
-            // Step show event
-            $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
-               //alert("You are on step "+stepNumber+" now");
-               if(stepPosition === 'first'){
-                   $("#prev-btn").addClass('disabled');
-               }else if(stepPosition === 'final'){
-                   $("#next-btn").addClass('disabled');
-               }else{
-                   $("#prev-btn").removeClass('disabled');
-                   $("#next-btn").removeClass('disabled');
-               }
-            });
-
-            // Toolbar extra buttons
-            var btnFinish = $('<button></button>').text('Finish')
-                                             .addClass('btn btn-info')
-                                             .on('click', function(){ alert('Finish Clicked'); });
-            var btnCancel = $('<button></button>').text('Cancel')
-                                             .addClass('btn btn-danger')
-                                             .on('click', function(){ $('#smartwizard').smartWizard("reset"); });
-
-            // Please note enabling option "showStepURLhash" will make navigation conflict for multiple wizard in a page.
-            // so that option is disabling => showStepURLhash: false
-
-            // Smart Wizard 1
-            $('#smartwizard').smartWizard({
-                    selected: 0,
-                    theme: 'arrows',
-                    transitionEffect:'fade',
-                    showStepURLhash: false,
-                    toolbarSettings: {toolbarPosition: 'both',
-                                      toolbarExtraButtons: [btnFinish, btnCancel]
-                                    }
-            });
-
-            // Smart Wizard 2
-            $('#smartwizard2').smartWizard({
-                    selected: 0,
-                    theme: 'default',
-                    transitionEffect:'fade',
-                    showStepURLhash: false
-            });
-
-        });
-    </script>
-</body>
-</html>
diff --git a/gulpfile.js b/gulpfile.js
index eb5bbae..26bf786 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -8,23 +8,29 @@ var gulp          = require('gulp'),
     cleanCSS      = require('gulp-clean-css'),
     cssbeautify   = require('gulp-cssbeautify'),
     autoprefixer  = require('autoprefixer'),
+    sass          = require('gulp-sass'),
     del           = require('del');
 
+sass.compiler     = require('node-sass');
 var Server        = require('karma').Server;
 
 // Source files
 var SRC_JS        = 'src/js/*.js';
 var SRC_CSS       = 'src/css/*.css';
+var SRC_SCSS      = 'src/scss/*.scss';
 
 // Destination folders
 var DEST_JS       = 'dist/js';
 var DEST_CSS      = 'dist/css';
+var DEST_SCSS     = 'src/css';
 
 
-// BUILD
+// BUILD JS
 const build_js = gulp.series(clean_js, lint_js, function(cb) {
                       gulp.src(SRC_JS)
-                            .pipe(babel())
+                            .pipe(babel({
+                                presets: ['@babel/env']
+                            }))
                             .pipe(gulp.dest(DEST_JS))
                             .pipe(uglify({
                                 output: {
@@ -39,6 +45,7 @@ const build_js = gulp.series(clean_js, lint_js, function(cb) {
                       cb();
                     });
 
+// BUILD CSS
 const build_css = gulp.series(clean_css, function(cb) {
                       gulp.src(SRC_CSS)
                             .pipe(postcss( [autoprefixer()] ))
@@ -51,18 +58,28 @@ const build_css = gulp.series(clean_css, function(cb) {
                       cb();
                     });
 
-const build = gulp.parallel(build_js, build_css);
+// BUILD SCSS
+const build_scss = gulp.series(function(cb) {
+                      gulp.src(SRC_SCSS)
+                            .pipe(sass({outputStyle:'expanded'}).on('error', sass.logError))
+                            .pipe(gulp.dest(DEST_SCSS));
+
+                      cb();
+                    }, build_css);
+
+// BUILD ALL
+const build = gulp.parallel(build_js, build_scss);
 build.description = 'Build the files';
 
+
 // LINT
 const lint = gulp.parallel(lint_js);
 lint.description = 'Link js files';
 
 function lint_js(cb) {
   gulp.src(SRC_JS)
-      .pipe(jshint())
-      .pipe(jshint.reporter('default'))
-      .pipe(jshint.reporter('fail'));
+      .pipe(jshint({ "esversion": 8 }))
+      .pipe(jshint.reporter('default'));
 
   cb();
 }
@@ -73,13 +90,13 @@ const clean = gulp.parallel(clean_js, clean_css);
 clean.description = 'Clean the files'
 
 function clean_js(cb) {
-  del([DEST_JS]);
+  del.sync([DEST_JS]);
 
   cb();
 }
 
 function clean_css(cb) {
-  del([DEST_CSS]);
+  del.sync([DEST_CSS]);
 
   cb();
 }
@@ -92,6 +109,7 @@ watch.description = 'Watch for changes to all source';
 function watch_all(cb) {
   gulp.watch(SRC_JS, build_js);
   gulp.watch(SRC_CSS, build_css);
+  gulp.watch(SRC_SCSS, build_scss);
 
   cb();
 }
diff --git a/package.json b/package.json
index e7210f0..2e8242d 100644
--- a/package.json
+++ b/package.json
@@ -1,33 +1,41 @@
 {
   "name": "smartwizard",
-  "version": "v4.4.1",
-  "author": "Dipu Raj <hello@techlaboratory.net>",
-  "description": "The awesome jQuery step wizard plugin with Bootstrap support",
-  "homepage": "http://techlaboratory.net/smartwizard",
+  "title": "jQuery Smart Wizard",
+  "version": "v5.0.0",
+  "author": {
+    "name": "Dipu Raj",
+    "email": "hello.techlab@gmail.com",
+    "url": "http://dipu.me"
+  },
+  "description": "The awesome jQuery step wizard plugin",
+  "homepage": "http://techlaboratory.net/jquery-smartwizard",
   "license": "MIT",
   "contributors": [
     {
       "name": "Dipu Raj",
-      "email": "hello@techlaboratory.net"
+      "email": "hello.techlab@gmail.com"
     }
   ],
   "main": "./dist/js/jquery.smartWizard.js",
   "style": "./dist/css/smart_wizard.css",
   "repository": {
     "type": "git",
-    "url": "https://github.com/techlab/SmartWizard.git"
+    "url": "https://github.com/techlab/jquery-smartwizard.git"
   },
   "bugs": {
-    "url": "https://github.com/techlab/SmartWizard/issues"
+    "url": "https://github.com/techlab/jquery-smartwizard/issues"
   },
   "keywords": [
-    "bootstrap",
-    "wizard",
-    "step",
+    "jQuery",
+    "Wizard",
+    "Tabs",
+    "Steps",
+    "Bootstrap",
+    "Plugin",
+    "Step",
     "ui",
     "jquery-plugin",
-    "tabs",
-    "jquery"
+    "Tabs"
   ],
   "scripts": {
     "start": "gulp watch",
@@ -49,6 +57,7 @@
     "gulp-jshint": "^2.1.0",
     "gulp-postcss": "^8.0.0",
     "gulp-rename": "^2.0.0",
+    "gulp-sass": "^4.0.2",
     "gulp-uglify": "^3.0.2",
     "jasmine-core": "^3.5.0",
     "jasmine-jquery": "^2.1.1",
@@ -58,6 +67,7 @@
     "karma-jasmine": "^3.1.0",
     "karma-jasmine-jquery": "^0.1.1",
     "karma-spec-reporter": "0.0.32",
+    "node-sass": "^4.13.1",
     "uglify-save-license": "^0.4.1"
   },
   "dependencies": {}
diff --git a/src/css/smart_wizard.css b/src/css/smart_wizard.css
index ba8763a..e721498 100644
--- a/src/css/smart_wizard.css
+++ b/src/css/smart_wizard.css
@@ -1,204 +1,219 @@
 /*!
- * SmartWizard v4.4.x
+ * jQuery SmartWizard v5
  * jQuery Wizard Plugin
  * http://www.techlaboratory.net/smartwizard
  *
  * Created by Dipu Raj
- * http://dipuraj.me
+ * http://dipu.me
  *
  * Licensed under the terms of MIT License
- * https://github.com/techlab/SmartWizard/blob/master/LICENSE
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
  */
+/* SmartWizard Base Styles */
+.sw {
+  position: relative;
+}
 
-/* SmartWizard Basic CSS */
-.sw-main {
-    position: relative;
-    display: block;
-    margin: 0;
-    padding: 0;
-    border-radius: .25rem!important;
+.sw *,
+.sw *::before,
+.sw *::after {
+  box-sizing: border-box;
 }
 
-.sw-main .sw-container {
-    display: block;
-    margin: 0;
-    padding: 0;
-    position: relative;
+.sw > .tab-content {
+  position: relative;
+  overflow: hidden;
 }
 
-.sw-main .step-content {
-    display: none;
-    position: relative;
-    margin: 0;
+.sw .toolbar {
+  padding: .8rem;
 }
 
-.sw-main .sw-toolbar {
-    margin-left: 0;
+.sw .toolbar > .btn {
+  display: inline-block;
+  text-decoration: none;
+  text-align: center;
+  text-transform: none;
+  vertical-align: middle;
+  user-select: none;
+  margin-left: .2rem;
+  margin-right: .2rem;
+  cursor: pointer;
 }
 
-/* SmartWizard Theme: White */
-.sw-theme-default {
-    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
-    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
+.sw .toolbar > .btn.disabled, .sw .toolbar > .btn:disabled {
+  opacity: .65;
+}
+
+.sw > .nav {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 640px) {
+  .sw > .nav {
+    flex-direction: column !important;
+    flex: 1 auto;
+  }
 }
 
-.sw-theme-default .sw-container {
-    min-height: 250px;
+.sw > .nav .nav-link {
+  display: block;
+  padding: .5rem 1rem;
+  text-decoration: none;
+  outline: 0 !important;
 }
 
-.sw-theme-default .step-content {
-    padding: 10px;
-    border: 0px solid #D4D4D4;
-    background-color: #FFF;
-    text-align: left;
+.sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus {
+  text-decoration: none;
+  outline: 0 !important;
 }
 
-.sw-theme-default .sw-toolbar {
-    background: #f9f9f9;
-    border-radius: 0 !important;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding: 10px;
-    margin-bottom: 0 !important;
+.sw > .nav .nav-link::-moz-focus-inner {
+  border: 0 !important;
 }
 
-.sw-theme-default .sw-toolbar-top {
-    border-bottom-color: #ddd !important;
+.sw > .nav .nav-link.disabled {
+  color: #ccc !important;
+  pointer-events: none;
+  cursor: default;
 }
 
-.sw-theme-default .sw-toolbar-bottom {
-    border-top-color: #ddd !important;
+.sw > .nav .nav-link.hidden {
+  display: none !important;
 }
 
-.sw-theme-default > ul.step-anchor > li{
-    position: relative;
-    margin-right: 2px;
+.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: center;
 }
 
-.sw-theme-default > ul.step-anchor > li > a, .sw-theme-default > ul.step-anchor > li > a:hover {
-    border: none !important;
-    color: #bbb;
-    text-decoration: none;
-    outline-style: none;
-    background: transparent !important;
-    border: none !important;
-    cursor: not-allowed;
+.sw.sw-loading {
+  user-select: none;
 }
 
-.sw-theme-default > ul.step-anchor > li.clickable > a:hover {
-    color: #4285F4 !important;
-    background: transparent !important;
-    cursor: pointer;
-}
+.sw.sw-loading::after {
+  content: "";
+  display: block;
+  position: absolute;
+  opacity: 1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.7);
+  z-index: 2;
+  transition: all .2s ease;
+}
 
-.sw-theme-default > ul.step-anchor > li > a::after {
-    content: "";
-    background: #4285F4;
-    height: 2px;
-    position: absolute;
-    width: 100%;
-    left: 0px;
-    bottom: 0px;
-    -webkit-transition: all 250ms ease 0s;
-    transition: all 250ms ease 0s;
-    -webkit-transform: scale(0);
-    -ms-transform: scale(0);
-    transform: scale(0);
+.sw.sw-loading::before {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 45%;
+  left: 45%;
+  width: 2rem;
+  height: 2rem;
+  border: 10px solid #f3f3f3;
+  border-top: 10px solid #3498db;
+  border-radius: 50%;
+  z-index: 10;
+  animation: spin 1s linear infinite;
 }
 
-.sw-theme-default > ul.step-anchor > li.active > a {
-    border: none !important;
-    color: #4285F4 !important;
-    background: transparent !important;
-    cursor: pointer;
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
-.sw-theme-default > ul.step-anchor > li.active > a::after {
-    -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1);
+/* SmartWizard Theme: Default */
+.sw-theme-default {
+  border: 1px solid #eeeeee;
 }
 
-.sw-theme-default > ul.step-anchor > li.done > a {
-    border: none !important;
-    color: #000 !important;
-    background: transparent !important;
-    cursor: pointer;
+.sw-theme-default > .tab-content > .tab-pane {
+  padding: 10px;
 }
 
-.sw-theme-default > ul.step-anchor > li.done > a::after {
-    background: #5cb85c;
-    -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1);
+.sw-theme-default .toolbar > .btn {
+  color: #fff;
+  background-color: #17a2b8;
+  border: 1px solid #17a2b8;
+  padding: .375rem .75rem;
+  border-radius: .25rem;
+  font-weight: 400;
 }
 
-.sw-theme-default > ul.step-anchor > li.danger > a {
-    border: none !important;
-    color: #d9534f !important;
-    /* background: #d9534f !important; */
-    cursor: pointer;
+.sw-theme-default > .nav {
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1) !important;
 }
 
-.sw-theme-default > ul.step-anchor > li.danger > a::after {
-    background: #d9534f;
-    border-left-color: #f8d7da;
-    -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1);
-}
+.sw-theme-default > .nav .nav-link {
+  position: relative;
+  height: 100%;
+  min-height: 100%;
+}
 
-.sw-theme-default > ul.step-anchor > li.disabled > a, .sw-theme-default > ul.step-anchor > li.disabled > a:hover {
-    color: #eee !important;
-    cursor: not-allowed;
+.sw-theme-default > .nav .nav-link::after {
+  content: "";
+  position: absolute;
+  height: 2px;
+  width: 100%;
+  left: 0px;
+  bottom: -1px;
+  background: #999999;
+  transition: all 250ms ease 0s;
+  transform: scale(0);
 }
 
-/* Responsive CSS */
-@media screen and (max-width: 768px) {
-    .sw-theme-default > .nav-tabs > li {
-        float: none !important;
-    }
+.sw-theme-default > .nav .nav-link.inactive {
+  color: #999999;
+  cursor: not-allowed;
 }
 
-/* Common Loader */
-.sw-loading::after {
-    position: absolute;
-    display: block;
-    opacity: 1;
-    content: "";
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    background: rgba(255,255,255,.7);
-    transition: all .2s ease;
-    z-index: 2;
-}
-.sw-loading::before {
-    content: '';
-    display: inline-block;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: 10;
-    border: 10px solid #f3f3f3;
-    border-radius: 50%;
-    border-top: 10px solid #3498db;
-    width: 80px;
-    height: 80px;
-    margin-top: -40px;
-    margin-left: -40px;
-    -webkit-animation: spin 1s linear infinite; /* Safari */
-    animation: spin 1s linear infinite;
-}
-
-/* Safari */
-@-webkit-keyframes spin {
-    0% { -webkit-transform: rotate(0deg); }
-    100% { -webkit-transform: rotate(360deg); }
+.sw-theme-default > .nav .nav-link.active {
+  color: #17a2b8 !important;
+  cursor: pointer;
 }
 
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+.sw-theme-default > .nav .nav-link.active::after {
+  background: #17a2b8 !important;
+  transform: scale(1);
+}
+
+.sw-theme-default > .nav .nav-link.done {
+  color: #5cb85c !important;
+  cursor: pointer;
+}
+
+.sw-theme-default > .nav .nav-link.done::after {
+  background: #5cb85c;
+  transform: scale(1);
+}
+
+.sw-theme-default > .nav .nav-link.disabled {
+  color: #f9f9f9 !important;
+  cursor: not-allowed;
+}
+
+.sw-theme-default > .nav .nav-link.disabled::after {
+  background: #f9f9f9;
+}
+
+.sw-theme-default > .nav .nav-link.danger {
+  color: #d9534f !important;
+  cursor: pointer;
+}
+
+.sw-theme-default > .nav .nav-link.danger::after {
+  background: #d9534f;
 }
diff --git a/src/css/smart_wizard_all.css b/src/css/smart_wizard_all.css
new file mode 100644
index 0000000..368111b
--- /dev/null
+++ b/src/css/smart_wizard_all.css
@@ -0,0 +1,542 @@
+/*!
+ * jQuery SmartWizard v5
+ * jQuery Wizard Plugin
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipu.me
+ *
+ * Licensed under the terms of MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */
+/* SmartWizard Base Styles */
+.sw {
+  position: relative;
+}
+
+.sw *,
+.sw *::before,
+.sw *::after {
+  box-sizing: border-box;
+}
+
+.sw > .tab-content {
+  position: relative;
+  overflow: hidden;
+}
+
+.sw .toolbar {
+  padding: .8rem;
+}
+
+.sw .toolbar > .btn {
+  display: inline-block;
+  text-decoration: none;
+  text-align: center;
+  text-transform: none;
+  vertical-align: middle;
+  user-select: none;
+  margin-left: .2rem;
+  margin-right: .2rem;
+  cursor: pointer;
+}
+
+.sw .toolbar > .btn.disabled, .sw .toolbar > .btn:disabled {
+  opacity: .65;
+}
+
+.sw > .nav {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 640px) {
+  .sw > .nav {
+    flex-direction: column !important;
+    flex: 1 auto;
+  }
+}
+
+.sw > .nav .nav-link {
+  display: block;
+  padding: .5rem 1rem;
+  text-decoration: none;
+  outline: 0 !important;
+}
+
+.sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus {
+  text-decoration: none;
+  outline: 0 !important;
+}
+
+.sw > .nav .nav-link::-moz-focus-inner {
+  border: 0 !important;
+}
+
+.sw > .nav .nav-link.disabled {
+  color: #ccc !important;
+  pointer-events: none;
+  cursor: default;
+}
+
+.sw > .nav .nav-link.hidden {
+  display: none !important;
+}
+
+.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: center;
+}
+
+.sw.sw-loading {
+  user-select: none;
+}
+
+.sw.sw-loading::after {
+  content: "";
+  display: block;
+  position: absolute;
+  opacity: 1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.7);
+  z-index: 2;
+  transition: all .2s ease;
+}
+
+.sw.sw-loading::before {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 45%;
+  left: 45%;
+  width: 2rem;
+  height: 2rem;
+  border: 10px solid #f3f3f3;
+  border-top: 10px solid #3498db;
+  border-radius: 50%;
+  z-index: 10;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* SmartWizard Theme: Default */
+.sw-theme-default {
+  border: 1px solid #eeeeee;
+}
+
+.sw-theme-default > .tab-content > .tab-pane {
+  padding: 10px;
+}
+
+.sw-theme-default .toolbar > .btn {
+  color: #fff;
+  background-color: #17a2b8;
+  border: 1px solid #17a2b8;
+  padding: .375rem .75rem;
+  border-radius: .25rem;
+  font-weight: 400;
+}
+
+.sw-theme-default > .nav {
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1) !important;
+}
+
+.sw-theme-default > .nav .nav-link {
+  position: relative;
+  height: 100%;
+  min-height: 100%;
+}
+
+.sw-theme-default > .nav .nav-link::after {
+  content: "";
+  position: absolute;
+  height: 2px;
+  width: 100%;
+  left: 0px;
+  bottom: -1px;
+  background: #999999;
+  transition: all 250ms ease 0s;
+  transform: scale(0);
+}
+
+.sw-theme-default > .nav .nav-link.inactive {
+  color: #999999;
+  cursor: not-allowed;
+}
+
+.sw-theme-default > .nav .nav-link.active {
+  color: #17a2b8 !important;
+  cursor: pointer;
+}
+
+.sw-theme-default > .nav .nav-link.active::after {
+  background: #17a2b8 !important;
+  transform: scale(1);
+}
+
+.sw-theme-default > .nav .nav-link.done {
+  color: #5cb85c !important;
+  cursor: pointer;
+}
+
+.sw-theme-default > .nav .nav-link.done::after {
+  background: #5cb85c;
+  transform: scale(1);
+}
+
+.sw-theme-default > .nav .nav-link.disabled {
+  color: #f9f9f9 !important;
+  cursor: not-allowed;
+}
+
+.sw-theme-default > .nav .nav-link.disabled::after {
+  background: #f9f9f9;
+}
+
+.sw-theme-default > .nav .nav-link.danger {
+  color: #d9534f !important;
+  cursor: pointer;
+}
+
+.sw-theme-default > .nav .nav-link.danger::after {
+  background: #d9534f;
+}
+
+/* SmartWizard Theme: Arrows */
+.sw-theme-arrows {
+  border: 1px solid #eeeeee;
+}
+
+.sw-theme-arrows > .tab-content > .tab-pane {
+  padding: 10px;
+}
+
+.sw-theme-arrows .toolbar > .btn {
+  color: #fff;
+  background-color: #17a2b8;
+  border: 1px solid #17a2b8;
+  padding: .375rem .75rem;
+  border-radius: .25rem;
+  font-weight: 400;
+}
+
+.sw-theme-arrows > .nav {
+  overflow: hidden;
+  border-bottom: 1px solid #eeeeee;
+}
+
+.sw-theme-arrows > .nav .nav-link {
+  position: relative;
+  height: 100%;
+  min-height: 100%;
+  margin-right: 30px;
+  margin-left: -30px;
+  padding-left: 40px;
+}
+
+@media screen and (max-width: 640px) {
+  .sw-theme-arrows > .nav .nav-link {
+    overflow: hidden;
+    margin-bottom: 1px;
+    margin-right: unset;
+  }
+}
+
+.sw-theme-arrows > .nav .nav-link::after {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  top: 50%;
+  left: 100%;
+  margin-top: -50px;
+  border-top: 50px solid transparent;
+  border-bottom: 50px solid transparent;
+  border-left: 30px solid #f8f8f8;
+  z-index: 2;
+}
+
+.sw-theme-arrows > .nav .nav-link::before {
+  content: " ";
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  top: 50%;
+  left: 100%;
+  margin-top: -50px;
+  margin-left: 1px;
+  border-top: 50px solid transparent;
+  border-bottom: 50px solid transparent;
+  border-left: 30px solid #eeeeee;
+  z-index: 1;
+}
+
+.sw-theme-arrows > .nav .nav-link.inactive {
+  color: #999999;
+  border-color: #f8f8f8;
+  background: #f8f8f8;
+  cursor: not-allowed;
+}
+
+.sw-theme-arrows > .nav .nav-link.active {
+  color: #ffffff !important;
+  border-color: #5bc0de !important;
+  background: #5bc0de !important;
+  cursor: pointer;
+}
+
+.sw-theme-arrows > .nav .nav-link.active::after {
+  border-left-color: #5bc0de !important;
+}
+
+.sw-theme-arrows > .nav .nav-link.done {
+  color: #ffffff;
+  border-color: #5cb85c;
+  background: #5cb85c;
+  cursor: pointer;
+}
+
+.sw-theme-arrows > .nav .nav-link.done::after {
+  border-left-color: #5cb85c;
+}
+
+.sw-theme-arrows > .nav .nav-link.disabled {
+  color: #eeeeee;
+  border-color: #f9f9f9;
+  background: #f9f9f9;
+  cursor: not-allowed;
+}
+
+.sw-theme-arrows > .nav .nav-link.disabled::after {
+  border-left-color: #f9f9f9;
+}
+
+.sw-theme-arrows > .nav .nav-link.danger {
+  color: #ffffff;
+  border-color: #d9534f;
+  background: #d9534f;
+  cursor: pointer;
+}
+
+.sw-theme-arrows > .nav .nav-link.danger::after {
+  border-left-color: #d9534f;
+}
+
+/* SmartWizard Theme: Dots */
+.sw-theme-dots > .tab-content > .tab-pane {
+  padding: 10px;
+}
+
+.sw-theme-dots .toolbar > .btn {
+  color: #fff;
+  background-color: #17a2b8;
+  border: 1px solid #17a2b8;
+  padding: .375rem .75rem;
+  border-radius: .25rem;
+  font-weight: 400;
+}
+
+.sw-theme-dots > .nav {
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.sw-theme-dots > .nav::before {
+  content: " ";
+  position: absolute;
+  top: 18px;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  background-color: #eee;
+  border-radius: 3px;
+  z-index: 1;
+}
+
+.sw-theme-dots > .nav .nav-link {
+  position: relative;
+  margin-top: 40px;
+}
+
+.sw-theme-dots > .nav .nav-link::before {
+  content: " ";
+  position: absolute;
+  display: block;
+  top: -36px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  background: #f5f5f5;
+  color: #428bca;
+  text-decoration: none;
+  z-index: 98;
+}
+
+.sw-theme-dots > .nav .nav-link::after {
+  content: " ";
+  position: absolute;
+  display: block;
+  top: -28px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  z-index: 99;
+}
+
+.sw-theme-dots > .nav .nav-link.inactive {
+  color: #999999;
+  cursor: not-allowed;
+}
+
+.sw-theme-dots > .nav .nav-link.inactive::after {
+  background-color: #999999;
+}
+
+.sw-theme-dots > .nav .nav-link.active {
+  color: #5bc0de !important;
+  cursor: pointer;
+}
+
+.sw-theme-dots > .nav .nav-link.active::after {
+  background-color: #5bc0de !important;
+}
+
+.sw-theme-dots > .nav .nav-link.done {
+  color: #5cb85c;
+  cursor: pointer;
+}
+
+.sw-theme-dots > .nav .nav-link.done::after {
+  background-color: #5cb85c;
+}
+
+.sw-theme-dots > .nav .nav-link.disabled {
+  color: #f9f9f9;
+  cursor: not-allowed;
+}
+
+.sw-theme-dots > .nav .nav-link.disabled::after {
+  background-color: #f9f9f9;
+}
+
+.sw-theme-dots > .nav .nav-link.danger {
+  color: #d9534f;
+  cursor: pointer;
+}
+
+.sw-theme-dots > .nav .nav-link.danger::after {
+  background-color: #d9534f;
+}
+
+/* SmartWizard Theme: Dark */
+.sw-theme-dark {
+  border: 1px solid #eeeeee;
+  box-shadow: 0 1px 10px rgba(130, 130, 134, 0.1);
+  color: rgba(255, 255, 255, 0.95);
+  background: #181c20;
+}
+
+.sw-theme-dark > .tab-content > .tab-pane {
+  padding: 10px;
+}
+
+.sw-theme-dark .toolbar > .btn {
+  color: #fff;
+  background-color: #17a2b8;
+  border: 1px solid #17a2b8;
+  padding: .375rem .75rem;
+  border-radius: .25rem;
+  font-weight: 400;
+}
+
+.sw-theme-dark > .nav {
+  background: #0D0F12;
+}
+
+.sw-theme-dark > .nav .nav-link {
+  position: relative;
+  height: 100%;
+  min-height: 100%;
+}
+
+.sw-theme-dark > .nav .nav-link::after {
+  content: "";
+  position: absolute;
+  height: 2px;
+  width: 100%;
+  left: 0px;
+  bottom: -1px;
+  background: #999999;
+  transition: all 250ms ease 0s;
+  transform: scale(0);
+}
+
+.sw-theme-dark > .nav .nav-link.inactive {
+  color: #999999;
+  cursor: not-allowed;
+}
+
+.sw-theme-dark > .nav .nav-link.active {
+  color: #17a2b8 !important;
+  cursor: pointer;
+}
+
+.sw-theme-dark > .nav .nav-link.active::after {
+  background: #17a2b8 !important;
+  transform: scale(1);
+}
+
+.sw-theme-dark > .nav .nav-link.done {
+  color: #5cb85c !important;
+  cursor: pointer;
+}
+
+.sw-theme-dark > .nav .nav-link.done::after {
+  background: #5cb85c;
+  transform: scale(1);
+}
+
+.sw-theme-dark > .nav .nav-link.disabled {
+  color: #f9f9f9 !important;
+  cursor: not-allowed;
+}
+
+.sw-theme-dark > .nav .nav-link.disabled::after {
+  background: #f9f9f9;
+}
+
+.sw-theme-dark > .nav .nav-link.danger {
+  color: #d9534f !important;
+  cursor: pointer;
+}
+
+.sw-theme-dark > .nav .nav-link.danger::after {
+  background: #d9534f;
+}
diff --git a/src/css/smart_wizard_arrows.css b/src/css/smart_wizard_arrows.css
new file mode 100644
index 0000000..67a785f
--- /dev/null
+++ b/src/css/smart_wizard_arrows.css
@@ -0,0 +1,258 @@
+/*!
+ * jQuery SmartWizard v5
+ * jQuery Wizard Plugin
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipu.me
+ *
+ * Licensed under the terms of MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */
+/* SmartWizard Base Styles */
+.sw {
+  position: relative;
+}
+
+.sw *,
+.sw *::before,
+.sw *::after {
+  box-sizing: border-box;
+}
+
+.sw > .tab-content {
+  position: relative;
+  overflow: hidden;
+}
+
+.sw .toolbar {
+  padding: .8rem;
+}
+
+.sw .toolbar > .btn {
+  display: inline-block;
+  text-decoration: none;
+  text-align: center;
+  text-transform: none;
+  vertical-align: middle;
+  user-select: none;
+  margin-left: .2rem;
+  margin-right: .2rem;
+  cursor: pointer;
+}
+
+.sw .toolbar > .btn.disabled, .sw .toolbar > .btn:disabled {
+  opacity: .65;
+}
+
+.sw > .nav {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 640px) {
+  .sw > .nav {
+    flex-direction: column !important;
+    flex: 1 auto;
+  }
+}
+
+.sw > .nav .nav-link {
+  display: block;
+  padding: .5rem 1rem;
+  text-decoration: none;
+  outline: 0 !important;
+}
+
+.sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus {
+  text-decoration: none;
+  outline: 0 !important;
+}
+
+.sw > .nav .nav-link::-moz-focus-inner {
+  border: 0 !important;
+}
+
+.sw > .nav .nav-link.disabled {
+  color: #ccc !important;
+  pointer-events: none;
+  cursor: default;
+}
+
+.sw > .nav .nav-link.hidden {
+  display: none !important;
+}
+
+.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: center;
+}
+
+.sw.sw-loading {
+  user-select: none;
+}
+
+.sw.sw-loading::after {
+  content: "";
+  display: block;
+  position: absolute;
+  opacity: 1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.7);
+  z-index: 2;
+  transition: all .2s ease;
+}
+
+.sw.sw-loading::before {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 45%;
+  left: 45%;
+  width: 2rem;
+  height: 2rem;
+  border: 10px solid #f3f3f3;
+  border-top: 10px solid #3498db;
+  border-radius: 50%;
+  z-index: 10;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* SmartWizard Theme: Arrows */
+.sw-theme-arrows {
+  border: 1px solid #eeeeee;
+}
+
+.sw-theme-arrows > .tab-content > .tab-pane {
+  padding: 10px;
+}
+
+.sw-theme-arrows .toolbar > .btn {
+  color: #fff;
+  background-color: #17a2b8;
+  border: 1px solid #17a2b8;
+  padding: .375rem .75rem;
+  border-radius: .25rem;
+  font-weight: 400;
+}
+
+.sw-theme-arrows > .nav {
+  overflow: hidden;
+  border-bottom: 1px solid #eeeeee;
+}
+
+.sw-theme-arrows > .nav .nav-link {
+  position: relative;
+  height: 100%;
+  min-height: 100%;
+  margin-right: 30px;
+  margin-left: -30px;
+  padding-left: 40px;
+}
+
+@media screen and (max-width: 640px) {
+  .sw-theme-arrows > .nav .nav-link {
+    overflow: hidden;
+    margin-bottom: 1px;
+    margin-right: unset;
+  }
+}
+
+.sw-theme-arrows > .nav .nav-link::after {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  top: 50%;
+  left: 100%;
+  margin-top: -50px;
+  border-top: 50px solid transparent;
+  border-bottom: 50px solid transparent;
+  border-left: 30px solid #f8f8f8;
+  z-index: 2;
+}
+
+.sw-theme-arrows > .nav .nav-link::before {
+  content: " ";
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  top: 50%;
+  left: 100%;
+  margin-top: -50px;
+  margin-left: 1px;
+  border-top: 50px solid transparent;
+  border-bottom: 50px solid transparent;
+  border-left: 30px solid #eeeeee;
+  z-index: 1;
+}
+
+.sw-theme-arrows > .nav .nav-link.inactive {
+  color: #999999;
+  border-color: #f8f8f8;
+  background: #f8f8f8;
+  cursor: not-allowed;
+}
+
+.sw-theme-arrows > .nav .nav-link.active {
+  color: #ffffff !important;
+  border-color: #5bc0de !important;
+  background: #5bc0de !important;
+  cursor: pointer;
+}
+
+.sw-theme-arrows > .nav .nav-link.active::after {
+  border-left-color: #5bc0de !important;
+}
+
+.sw-theme-arrows > .nav .nav-link.done {
+  color: #ffffff;
+  border-color: #5cb85c;
+  background: #5cb85c;
+  cursor: pointer;
+}
+
+.sw-theme-arrows > .nav .nav-link.done::after {
+  border-left-color: #5cb85c;
+}
+
+.sw-theme-arrows > .nav .nav-link.disabled {
+  color: #eeeeee;
+  border-color: #f9f9f9;
+  background: #f9f9f9;
+  cursor: not-allowed;
+}
+
+.sw-theme-arrows > .nav .nav-link.disabled::after {
+  border-left-color: #f9f9f9;
+}
+
+.sw-theme-arrows > .nav .nav-link.danger {
+  color: #ffffff;
+  border-color: #d9534f;
+  background: #d9534f;
+  cursor: pointer;
+}
+
+.sw-theme-arrows > .nav .nav-link.danger::after {
+  border-left-color: #d9534f;
+}
diff --git a/src/css/smart_wizard_dark.css b/src/css/smart_wizard_dark.css
new file mode 100644
index 0000000..61588d1
--- /dev/null
+++ b/src/css/smart_wizard_dark.css
@@ -0,0 +1,222 @@
+/*!
+ * jQuery SmartWizard v5
+ * jQuery Wizard Plugin
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipu.me
+ *
+ * Licensed under the terms of MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */
+/* SmartWizard Base Styles */
+.sw {
+  position: relative;
+}
+
+.sw *,
+.sw *::before,
+.sw *::after {
+  box-sizing: border-box;
+}
+
+.sw > .tab-content {
+  position: relative;
+  overflow: hidden;
+}
+
+.sw .toolbar {
+  padding: .8rem;
+}
+
+.sw .toolbar > .btn {
+  display: inline-block;
+  text-decoration: none;
+  text-align: center;
+  text-transform: none;
+  vertical-align: middle;
+  user-select: none;
+  margin-left: .2rem;
+  margin-right: .2rem;
+  cursor: pointer;
+}
+
+.sw .toolbar > .btn.disabled, .sw .toolbar > .btn:disabled {
+  opacity: .65;
+}
+
+.sw > .nav {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 640px) {
+  .sw > .nav {
+    flex-direction: column !important;
+    flex: 1 auto;
+  }
+}
+
+.sw > .nav .nav-link {
+  display: block;
+  padding: .5rem 1rem;
+  text-decoration: none;
+  outline: 0 !important;
+}
+
+.sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus {
+  text-decoration: none;
+  outline: 0 !important;
+}
+
+.sw > .nav .nav-link::-moz-focus-inner {
+  border: 0 !important;
+}
+
+.sw > .nav .nav-link.disabled {
+  color: #ccc !important;
+  pointer-events: none;
+  cursor: default;
+}
+
+.sw > .nav .nav-link.hidden {
+  display: none !important;
+}
+
+.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: center;
+}
+
+.sw.sw-loading {
+  user-select: none;
+}
+
+.sw.sw-loading::after {
+  content: "";
+  display: block;
+  position: absolute;
+  opacity: 1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.7);
+  z-index: 2;
+  transition: all .2s ease;
+}
+
+.sw.sw-loading::before {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 45%;
+  left: 45%;
+  width: 2rem;
+  height: 2rem;
+  border: 10px solid #f3f3f3;
+  border-top: 10px solid #3498db;
+  border-radius: 50%;
+  z-index: 10;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* SmartWizard Theme: Dark */
+.sw-theme-dark {
+  border: 1px solid #eeeeee;
+  box-shadow: 0 1px 10px rgba(130, 130, 134, 0.1);
+  color: rgba(255, 255, 255, 0.95);
+  background: #181c20;
+}
+
+.sw-theme-dark > .tab-content > .tab-pane {
+  padding: 10px;
+}
+
+.sw-theme-dark .toolbar > .btn {
+  color: #fff;
+  background-color: #17a2b8;
+  border: 1px solid #17a2b8;
+  padding: .375rem .75rem;
+  border-radius: .25rem;
+  font-weight: 400;
+}
+
+.sw-theme-dark > .nav {
+  background: #0D0F12;
+}
+
+.sw-theme-dark > .nav .nav-link {
+  position: relative;
+  height: 100%;
+  min-height: 100%;
+}
+
+.sw-theme-dark > .nav .nav-link::after {
+  content: "";
+  position: absolute;
+  height: 2px;
+  width: 100%;
+  left: 0px;
+  bottom: -1px;
+  background: #999999;
+  transition: all 250ms ease 0s;
+  transform: scale(0);
+}
+
+.sw-theme-dark > .nav .nav-link.inactive {
+  color: #999999;
+  cursor: not-allowed;
+}
+
+.sw-theme-dark > .nav .nav-link.active {
+  color: #17a2b8 !important;
+  cursor: pointer;
+}
+
+.sw-theme-dark > .nav .nav-link.active::after {
+  background: #17a2b8 !important;
+  transform: scale(1);
+}
+
+.sw-theme-dark > .nav .nav-link.done {
+  color: #5cb85c !important;
+  cursor: pointer;
+}
+
+.sw-theme-dark > .nav .nav-link.done::after {
+  background: #5cb85c;
+  transform: scale(1);
+}
+
+.sw-theme-dark > .nav .nav-link.disabled {
+  color: #f9f9f9 !important;
+  cursor: not-allowed;
+}
+
+.sw-theme-dark > .nav .nav-link.disabled::after {
+  background: #f9f9f9;
+}
+
+.sw-theme-dark > .nav .nav-link.danger {
+  color: #d9534f !important;
+  cursor: pointer;
+}
+
+.sw-theme-dark > .nav .nav-link.danger::after {
+  background: #d9534f;
+}
diff --git a/src/css/smart_wizard_dots.css b/src/css/smart_wizard_dots.css
new file mode 100644
index 0000000..8e08a01
--- /dev/null
+++ b/src/css/smart_wizard_dots.css
@@ -0,0 +1,251 @@
+/*!
+ * jQuery SmartWizard v5
+ * jQuery Wizard Plugin
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipu.me
+ *
+ * Licensed under the terms of MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */
+/* SmartWizard Base Styles */
+.sw {
+  position: relative;
+}
+
+.sw *,
+.sw *::before,
+.sw *::after {
+  box-sizing: border-box;
+}
+
+.sw > .tab-content {
+  position: relative;
+  overflow: hidden;
+}
+
+.sw .toolbar {
+  padding: .8rem;
+}
+
+.sw .toolbar > .btn {
+  display: inline-block;
+  text-decoration: none;
+  text-align: center;
+  text-transform: none;
+  vertical-align: middle;
+  user-select: none;
+  margin-left: .2rem;
+  margin-right: .2rem;
+  cursor: pointer;
+}
+
+.sw .toolbar > .btn.disabled, .sw .toolbar > .btn:disabled {
+  opacity: .65;
+}
+
+.sw > .nav {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 640px) {
+  .sw > .nav {
+    flex-direction: column !important;
+    flex: 1 auto;
+  }
+}
+
+.sw > .nav .nav-link {
+  display: block;
+  padding: .5rem 1rem;
+  text-decoration: none;
+  outline: 0 !important;
+}
+
+.sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus {
+  text-decoration: none;
+  outline: 0 !important;
+}
+
+.sw > .nav .nav-link::-moz-focus-inner {
+  border: 0 !important;
+}
+
+.sw > .nav .nav-link.disabled {
+  color: #ccc !important;
+  pointer-events: none;
+  cursor: default;
+}
+
+.sw > .nav .nav-link.hidden {
+  display: none !important;
+}
+
+.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: center;
+}
+
+.sw.sw-loading {
+  user-select: none;
+}
+
+.sw.sw-loading::after {
+  content: "";
+  display: block;
+  position: absolute;
+  opacity: 1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.7);
+  z-index: 2;
+  transition: all .2s ease;
+}
+
+.sw.sw-loading::before {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 45%;
+  left: 45%;
+  width: 2rem;
+  height: 2rem;
+  border: 10px solid #f3f3f3;
+  border-top: 10px solid #3498db;
+  border-radius: 50%;
+  z-index: 10;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* SmartWizard Theme: Dots */
+.sw-theme-dots > .tab-content > .tab-pane {
+  padding: 10px;
+}
+
+.sw-theme-dots .toolbar > .btn {
+  color: #fff;
+  background-color: #17a2b8;
+  border: 1px solid #17a2b8;
+  padding: .375rem .75rem;
+  border-radius: .25rem;
+  font-weight: 400;
+}
+
+.sw-theme-dots > .nav {
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.sw-theme-dots > .nav::before {
+  content: " ";
+  position: absolute;
+  top: 18px;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  background-color: #eee;
+  border-radius: 3px;
+  z-index: 1;
+}
+
+.sw-theme-dots > .nav .nav-link {
+  position: relative;
+  margin-top: 40px;
+}
+
+.sw-theme-dots > .nav .nav-link::before {
+  content: " ";
+  position: absolute;
+  display: block;
+  top: -36px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  background: #f5f5f5;
+  color: #428bca;
+  text-decoration: none;
+  z-index: 98;
+}
+
+.sw-theme-dots > .nav .nav-link::after {
+  content: " ";
+  position: absolute;
+  display: block;
+  top: -28px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  z-index: 99;
+}
+
+.sw-theme-dots > .nav .nav-link.inactive {
+  color: #999999;
+  cursor: not-allowed;
+}
+
+.sw-theme-dots > .nav .nav-link.inactive::after {
+  background-color: #999999;
+}
+
+.sw-theme-dots > .nav .nav-link.active {
+  color: #5bc0de !important;
+  cursor: pointer;
+}
+
+.sw-theme-dots > .nav .nav-link.active::after {
+  background-color: #5bc0de !important;
+}
+
+.sw-theme-dots > .nav .nav-link.done {
+  color: #5cb85c;
+  cursor: pointer;
+}
+
+.sw-theme-dots > .nav .nav-link.done::after {
+  background-color: #5cb85c;
+}
+
+.sw-theme-dots > .nav .nav-link.disabled {
+  color: #f9f9f9;
+  cursor: not-allowed;
+}
+
+.sw-theme-dots > .nav .nav-link.disabled::after {
+  background-color: #f9f9f9;
+}
+
+.sw-theme-dots > .nav .nav-link.danger {
+  color: #d9534f;
+  cursor: pointer;
+}
+
+.sw-theme-dots > .nav .nav-link.danger::after {
+  background-color: #d9534f;
+}
diff --git a/src/css/smart_wizard_theme_arrows.css b/src/css/smart_wizard_theme_arrows.css
deleted file mode 100644
index 4d8432e..0000000
--- a/src/css/smart_wizard_theme_arrows.css
+++ /dev/null
@@ -1,163 +0,0 @@
-/*!
- * SmartWizard v4.4.x
- * jQuery Wizard Plugin
- * http://www.techlaboratory.net/smartwizard
- *
- * Created by Dipu Raj
- * http://dipuraj.me
- *
- * Licensed under the terms of MIT License
- * https://github.com/techlab/SmartWizard/blob/master/LICENSE
- */
-
-/* SmartWizard Theme: Arrows */
-.sw-theme-arrows{
-    border-radius: 5px;
-    border: 1px solid #ddd;
-}
-.sw-theme-arrows > .sw-container {
-    min-height: 200px;
-}
-.sw-theme-arrows .step-content {
-    padding: 0 10px;
-    border: 0px solid #D4D4D4;
-    background-color: #FFF;
-    text-align: left;
-}
-.sw-theme-arrows .sw-toolbar{
-    padding: 10px;
-    margin-bottom: 0 !important;
-}
-.sw-theme-arrows > .sw-toolbar-top{
-}
-.sw-theme-arrows > .sw-toolbar-bottom{
-}
-.sw-theme-arrows > ul.step-anchor{
-    border: 0;
-    border-bottom: 1px solid #ddd;
-    padding: 0px;
-    background: #f5f5f5;
-    border-radius : 0;
-    border-top-right-radius: 5px;
-    list-style: none;
-    overflow: hidden;
-}
-.sw-theme-arrows > ul.step-anchor li+li:before {
-    padding: 0;
-}
-.sw-theme-arrows > ul.step-anchor > li {
-}
-
-.sw-theme-arrows > ul.step-anchor > li > a, .sw-theme-arrows > ul.step-anchor > li > a:hover  {
-    color: #bbb;
-    text-decoration: none;
-    padding: 10px 0 10px 45px;
-    position: relative;
-    display: block;
-    border: 0 !important;
-    border-radius: 0;
-    outline-style:none;
-    background: #f5f5f5;
-}
-.sw-theme-arrows > ul.step-anchor > li > a:after {
-    content: " ";
-    display: block;
-    width: 0;
-    height: 0;
-    border-top: 50px solid transparent;
-    border-bottom: 50px solid transparent;
-    border-left: 30px solid #f5f5f5;
-    position: absolute;
-    top: 50%;
-    margin-top: -50px;
-    left: 100%;
-    z-index: 2;
-}
-.sw-theme-arrows > ul.step-anchor > li > a:before {
-    content: " ";
-    display: block;
-    width: 0;
-    height: 0;
-    border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
-    border-bottom: 50px solid transparent;
-    border-left: 30px solid #ddd;
-    position: absolute;
-    top: 50%;
-    margin-top: -50px;
-    margin-left: 1px;
-    left: 100%;
-    z-index: 1;
-}
-.sw-theme-arrows > ul.step-anchor > li:first-child > a {
-    padding-left: 15px;
-}
-.sw-theme-arrows > ul.step-anchor > li > a:hover  {
-    color: #bbb;
-    text-decoration: none;
-    outline-style:none;
-    background: #f5f5f5;
-    border-color: #f5f5f5;
-}
-.sw-theme-arrows > ul.step-anchor > li > a:hover:after {
-    border-left-color: #f5f5f5;
-}
-.sw-theme-arrows > ul.step-anchor > li > a small{
-}
-.sw-theme-arrows > ul.step-anchor > li.clickable > a:hover {
-    color: #4285F4 !important;
-    background: #46b8da !important;
-}
-.sw-theme-arrows > ul.step-anchor > li.active > a {
-    border-color: #5cb85c !important;
-    color: #fff !important;
-    background: #5cb85c !important;
-}
-.sw-theme-arrows > ul.step-anchor > li.active > a:after {
-    border-left: 30px solid #5cb85c !important;
-}
-.sw-theme-arrows > ul.step-anchor > li.done > a {
-    border-color: #b1dfbb !important; /*  #5cb85c */
-    color: #fff !important;
-    background: #b1dfbb !important;
-}
-.sw-theme-arrows > ul.step-anchor > li.done > a:after {
-    border-left: 30px solid #b1dfbb; /* c3e6cb */
-}
-.sw-theme-arrows > ul.step-anchor > li.danger > a {
-    border-color: #d9534f !important;
-    color: #fff !important;
-    background: #d9534f !important;
-}
-.sw-theme-arrows > ul.step-anchor > li.danger > a:after {
-    border-left: 30px solid #d9534f !important;
-}
-
-.sw-theme-arrows > ul.step-anchor > li.disabled > a, .sw-theme-arrows > ul.step-anchor > li.disabled > a:hover {
-    color: #eee !important;
-}
-
-/* Responsive CSS */
-@media screen and (max-width: 768px) {
-    .sw-theme-arrows > ul.step-anchor{
-        border: 0;
-        background: #ddd !important;
-    }
-    .sw-theme-arrows > .nav-tabs > li {
-        float: none !important;
-        margin-bottom: 0;
-    }
-    .sw-theme-arrows > ul.step-anchor > li > a, .sw-theme-arrows > ul.step-anchor > li > a:hover {
-        padding-left: 15px;
-        margin-right: 0;
-        margin-bottom: 1px;
-    }
-    .sw-theme-arrows > ul.step-anchor > li > a:after, .sw-theme-arrows > ul.step-anchor > li > a:before {
-        display: none;
-    }
-}
-
-/* Loader Custom Style */
-.sw-theme-arrows::before {
-    border: 10px solid #f3f3f3;
-    border-top: 10px solid #5cb85c;
-}
diff --git a/src/css/smart_wizard_theme_circles.css b/src/css/smart_wizard_theme_circles.css
deleted file mode 100644
index 199f75e..0000000
--- a/src/css/smart_wizard_theme_circles.css
+++ /dev/null
@@ -1,116 +0,0 @@
-/*!
- * SmartWizard v4.4.x
- * jQuery Wizard Plugin
- * http://www.techlaboratory.net/smartwizard
- *
- * Created by Dipu Raj
- * http://dipuraj.me
- *
- * Licensed under the terms of MIT License
- * https://github.com/techlab/SmartWizard/blob/master/LICENSE
- */
-
-/* SmartWizard Theme: Circles */
-.sw-theme-circles{
-
-}
-.sw-theme-circles .sw-container {
-    min-height: 300px;
-}
-.sw-theme-circles .step-content {
-    padding: 10px 0;
-    background-color: #FFF;
-    text-align: left;
-}
-.sw-theme-circles .sw-toolbar{
-    background: #fff;
-    padding-left: 10px;
-    padding-right: 10px;
-    margin-bottom: 0 !important;
-}
-.sw-theme-circles .sw-toolbar-top{
-
-}
-.sw-theme-circles .sw-toolbar-bottom{
-    border-top-color: #ddd !important;
-    border-bottom-color: #ddd !important;
-}
-.sw-theme-circles > ul.step-anchor{
-    position: relative;
-    background: #fff;
-    border: none;
-    list-style: none;
-    margin-bottom: 40px;
-}
-.sw-theme-circles > ul.step-anchor:before {
-    content: " ";
-    position: absolute;
-    top: 50%;
-    bottom: 0;
-    width: 100%;
-    height: 5px;
-    background-color: #f5f5f5;
-    border-radius: 3px;
-    z-index: 0;
-}
-.sw-theme-circles > ul.step-anchor > li{
-    border: none;
-    margin-left: 40px;
-    z-index: 98;
-}
-.sw-theme-circles > ul.step-anchor > li > a{
-    border: 2px solid #f5f5f5;
-    background: #f5f5f5;
-    width: 75px;
-    height: 75px;
-    text-align: center;
-    padding: 25px 0;
-    border-radius: 50%;
-    box-shadow: inset 0px 0px 0px 3px #fff !important;
-    text-decoration: none;
-    outline-style:none;
-    z-index: 99;
-    color: #bbb;
-    background: #f5f5f5;
-    line-height: 1;
-}
-.sw-theme-circles > ul.step-anchor > li > a:hover  {
-    color: #bbb;
-    background: #f5f5f5;
-    border-width: 2px;
-}
-.sw-theme-circles > ul.step-anchor > li > a > small{
-    position: relative;
-    bottom: -40px;
-    color: #ccc;
-}
-.sw-theme-circles > ul.step-anchor > li.clickable > a:hover {
-    color: #4285F4 !important;
-}
-.sw-theme-circles > ul.step-anchor > li.active > a {
-    border-color: #5bc0de;
-    color: #fff;
-    background: #5bc0de;
-}
-.sw-theme-circles > ul.step-anchor > li.active > a > small{
-    color: #5bc0de;
-}
-.sw-theme-circles > ul.step-anchor > li.done > a {
-    border-color: #5cb85c;
-    color: #fff;
-    background: #5cb85c;
-}
-.sw-theme-circles > ul.step-anchor > li.done > a > small{
-    color: #5cb85c;
-}
-.sw-theme-circles > ul.step-anchor > li.danger > a {
-    border-color: #d9534f;
-    color: #d9534f;
-    background: #fff;
-}
-.sw-theme-circles > ul.step-anchor > li.danger > a > small{
-    color: #d9534f;
-}
-.sw-theme-circles > ul.step-anchor > li.disabled > a, .sw-theme-circles > ul.step-anchor > li.disabled > a:hover {
-    color: #eee !important;
-}
diff --git a/src/css/smart_wizard_theme_dots.css b/src/css/smart_wizard_theme_dots.css
deleted file mode 100644
index 3f8df8e..0000000
--- a/src/css/smart_wizard_theme_dots.css
+++ /dev/null
@@ -1,182 +0,0 @@
-/*!
- * SmartWizard v4.4.x
- * jQuery Wizard Plugin
- * http://www.techlaboratory.net/smartwizard
- *
- * Created by Dipu Raj
- * http://dipuraj.me
- *
- * Licensed under the terms of MIT License
- * https://github.com/techlab/SmartWizard/blob/master/LICENSE
- */
-
-/* SmartWizard Theme: Dots */
-.sw-theme-dots{
-}
-.sw-theme-dots .sw-container {
-    min-height: 300px;
-}
-.sw-theme-dots .step-content {
-    padding: 10px 0;
-    border: none;
-    background-color: #FFF;
-    text-align: left;
-}
-.sw-theme-dots .sw-toolbar{
-    background: #fff;
-    border-radius: 0 !important;
-    padding-left: 10px;
-    padding-right: 10px;
-    margin-bottom: 0 !important;
-}
-.sw-theme-dots .sw-toolbar-top{
-    border-bottom-color: #ddd !important;
-}
-.sw-theme-dots .sw-toolbar-bottom{
-    border-top-color: #ddd !important;
-    border-bottom-color: #ddd !important;
-}
-.sw-theme-dots > ul.step-anchor{
-    position: relative;
-    background: #fff;
-    border: 0px solid #ccc !important;
-    list-style: none;
-}
-.sw-theme-dots > ul.step-anchor:before {
-    content: " ";
-    position: absolute;
-    top: 70px;
-    bottom: 0;
-    width: 100%;
-    height: 5px;
-    background-color: #f5f5f5;
-    border-radius: 3px;
-    z-order: 0;
-    z-index: 95;
-}
-.sw-theme-dots > ul.step-anchor > li{
-    border: none;
-}
-/* Anchors styles */
-.sw-theme-dots > ul.step-anchor > li > a{
-    position: relative;
-    text-align: center;
-    font-weight: bold;
-    background: transparent;
-    border: none;
-    color: #ccc;
-    text-decoration: none;
-    outline-style:none;
-    z-index: 96;
-    display: block;
-}
-.sw-theme-dots > ul.step-anchor > li > a:before {
-    content: ' ';
-    position: absolute;
-    bottom: 2px;
-    left: 40%;
-    margin-top: 10px;
-    display: block;
-    border-radius: 50%;
-    color: #428bca;
-    background: #f5f5f5;
-    border: none;
-    width: 30px;
-    height: 30px;
-    text-decoration: none;
-    z-index: 98;
-}
-.sw-theme-dots > ul.step-anchor > li > a:after  {
-    content: ' ';
-    position: relative;
-    left: 43%;
-    bottom: 2px;
-    margin-top: 10px;
-    display: block;
-    width: 15px;
-    height: 15px;
-    background: #f5f5f5;
-    border-radius: 50%;
-    z-index: 99;
-}
-.sw-theme-dots > ul.step-anchor > li > a:hover  {
-    color: #ccc;
-    background: transparent;
-}
-.sw-theme-dots > ul.step-anchor > li > a:focus{
-    color: #ccc;
-    border: none;
-}
-.sw-theme-dots > ul.step-anchor > li.clickable > a:hover {
-    color: #999;
-}
-/* Active anchors */
-.sw-theme-dots > ul.step-anchor > li.active > a{
-    color: #5bc0de;
-}
-.sw-theme-dots > ul.step-anchor > li.active > a:hover{
-    border: none;
-}
-.sw-theme-dots > ul.step-anchor > li.active > a:after {
-    background: #5bc0de;
-}
-/* Done anchors */
-.sw-theme-dots > ul.step-anchor > li.done > a{
-    color: #5cb85c;
-}
-.sw-theme-dots > ul.step-anchor > li.done > a:after {
-    background: #5cb85c;
-}
-/* Danger anchors */
-.sw-theme-dots > ul.step-anchor > li.danger > a {
-    color: #d9534f;
-}
-.sw-theme-dots > ul.step-anchor > li.danger > a:after {
-    background: #d9534f;
-}
-
-.sw-theme-dots > ul.step-anchor > li.disabled > a, .sw-theme-dots > ul.step-anchor > li.disabled > a:hover {
-    color: #eee !important;
-}
-.sw-theme-dots > ul.step-anchor > li.disabled > a:after {
-    background: #eee;
-}
-
-/* Responsive CSS */
-@media screen and (max-width: 768px) {
-    .sw-theme-dots > ul.step-anchor:before {
-        top: 0;
-        bottom: 0;
-        left: 10px;
-        width: 5px;
-        height: 100%;
-        background-color: #f5f5f5;
-        display: block;
-        margin-right: 10px;
-    }
-
-    .sw-theme-dots > ul.step-anchor > li{
-        margin-left: 20px;
-        display: block;
-        clear: both;
-    }
-
-    .sw-theme-dots > ul.step-anchor > li > a{
-        text-align: left;
-        margin-left: 0;
-        display: block;
-    }
-
-    .sw-theme-dots > ul.step-anchor > li > a:before {
-        top: 5px;
-        left: -23px;
-        margin-right: 10px;
-        display: block;
-    }
-    .sw-theme-dots > ul.step-anchor > li > a:after  {
-        top: -38px;
-        left: -31px;
-        margin-right: 10px;
-        display: block;
-    }
-}
diff --git a/src/js/jquery.smartWizard.js b/src/js/jquery.smartWizard.js
index 5946618..ee5a8f9 100644
--- a/src/js/jquery.smartWizard.js
+++ b/src/js/jquery.smartWizard.js
@@ -1,34 +1,35 @@
 /*!
- * SmartWizard v4.4.1
- * The awesome jQuery step wizard plugin with Bootstrap support
- * http://www.techlaboratory.net/smartwizard
+ * jQuery SmartWizard v5.0.0
+ * The awesome jQuery step wizard plugin
+ * http://www.techlaboratory.net/jquery-smartwizard
  *
  * Created by Dipu Raj
- * http://dipuraj.me
+ * http://dipu.me
  *
- * Licensed under the terms of the MIT License
- * https://github.com/techlab/SmartWizard/blob/master/LICENSE
+ * @license Licensed under the terms of the MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
  */
 
 ;(function ($, window, document, undefined) {
     "use strict";
-    // Default options
 
+    // Default options
     var defaults = {
         selected: 0, // Initial selected step, 0 = first step
-        keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
+        theme: 'default', // theme for the wizard, related css need to include for other than default theme
+        justified: true, // Nav menu justification. true/false
         autoAdjustHeight: true, // Automatically adjust content height
         cycleSteps: false, // Allows to cycle the navigation of steps
         backButtonSupport: true, // Enable the back button support
-        useURLhash: true, // Enable selection of the step based on url hash
-        showStepURLhash: true, // Show url hash based on step
-        lang: { // Language variables for button
-            next: 'Next',
-            previous: 'Previous'
+        enableURLhash: true, // Enable selection of the step based on url hash
+        transition: {
+            animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
+            speed: '400', // Transion animation speed
+            easing:'' // Transition animation easing. Not supported without a jQuery easing plugin
         },
         toolbarSettings: {
             toolbarPosition: 'bottom', // none, top, bottom, both
-            toolbarButtonPosition: 'end', // start, end
+            toolbarButtonPosition: 'right', // left, right, center
             showNextButton: true, // show/hide a Next button
             showPreviousButton: true, // show/hide a Previous button
             toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
@@ -36,612 +37,803 @@
         anchorSettings: {
             anchorClickable: true, // Enable/Disable anchor navigation
             enableAllAnchors: false, // Activates all anchors clickable all times
-            markDoneStep: true, // Add done css
+            markDoneStep: true, // Add done state on navigation
             markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
             removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared
             enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
         },
-        contentURL: null, // content url, Enables Ajax content loading. Can also set as data data-content-url on anchor
-        contentCache: true, // cache step contents, if false content is fetched always from ajax url
-        ajaxSettings: {}, // Ajax extra settings
+        keyboardSettings: {
+            keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
+            keyLeft: [37], // Left key code
+            keyRight: [39] // Right key code
+        },
+        lang: { // Language variables for button
+            next: 'Next',
+            previous: 'Previous'
+        },
         disabledSteps: [], // Array Steps disabled
         errorSteps: [], // Highlight step with errors
-        hiddenSteps: [], // Hidden steps
-        theme: 'default', // theme for the wizard, related css need to include for other than default theme
-        transitionEffect: 'none', // Effect on navigation, none/slide/fade
-        transitionSpeed: '400'
+        hiddenSteps: [] // Hidden steps
     };
 
-    // The plugin constructor
-    function SmartWizard(element, options) {
-        // Merge user settings with default, recursively
-        this.options = $.extend(true, {}, defaults, options);
-        // Main container element
-        this.main = $(element);
-        // Navigation bar element
-        this.nav = this.main.children('ul');
-        // Step anchor elements
-        this.steps = $("li > a", this.nav);
-        // Content container
-        this.container = this.main.children('div');
-        // Content pages
-        this.pages = this.container.children('div');
-        // Active step index
-        this.current_index = null;
-
-        // Backward compatibility
-        this.options.toolbarSettings.toolbarButtonPosition = this.options.toolbarSettings.toolbarButtonPosition === 'right' ? 'end' : this.options.toolbarSettings.toolbarButtonPosition;
-        this.options.toolbarSettings.toolbarButtonPosition = this.options.toolbarSettings.toolbarButtonPosition === 'left' ? 'start' : this.options.toolbarSettings.toolbarButtonPosition;
-
-        // Default fix
-        this.options.theme = this.options.theme === null || this.options.theme === '' ? 'default' : this.options.theme;
-
-        // Call initial method
-        this.init();
-    }
-
-    $.extend(SmartWizard.prototype, {
-
-        init: function () {
-            // Set the elements
-            this._setElements();
-            // Add toolbar
-            this._setToolbar();
-            // Assign plugin events
-            this._setEvents();
-
-            var idx = this.options.selected;
-            // Get selected step from the url
-            if (this.options.useURLhash) {
-                // Get step number from url hash if available
-                var hash = window.location.hash;
-                if (hash && hash.length > 0) {
-                    var elm = $("a[href*='" + hash + "']", this.nav);
-                    if (elm.length > 0) {
-                        var id = this.steps.index(elm);
-                        idx = id >= 0 ? id : idx;
-                    }
-                }
-            }
-
-            if (idx > 0 && this.options.anchorSettings.markDoneStep && this.options.anchorSettings.markAllPreviousStepsAsDone) {
-                // Mark previous steps of the active step as done
-                this.steps.eq(idx).parent('li').prevAll().addClass("done");
-            }
-
-            // Show the initial step
-            this._showStep(idx);
-        },
-
-        // PRIVATE FUNCTIONS
-
-        _setElements: function () {
-            // Set the main element
-            this.main.addClass('sw-main sw-theme-' + this.options.theme);
-            // Set anchor elements
-            this.nav.addClass('nav nav-tabs step-anchor').children('li').addClass('nav-item').children('a').addClass('nav-link'); // nav-justified  nav-pills
-
-            // Make the anchor clickable
-            if (this.options.anchorSettings.enableAllAnchors !== false && this.options.anchorSettings.anchorClickable !== false) {
-                this.steps.parent('li').addClass('clickable');
-            }
-            // Set content container
-            this.container.addClass('sw-container tab-content');
-            // Set content pages
-            this.pages.addClass('tab-pane step-content');
-
-            // Disabled steps
-            var mi = this;
-            if (this.options.disabledSteps && this.options.disabledSteps.length > 0) {
-                $.each(this.options.disabledSteps, function (i, n) {
-                    mi.steps.eq(n).parent('li').addClass('disabled');
-                });
-            }
-            // Error steps
-            if (this.options.errorSteps && this.options.errorSteps.length > 0) {
-                $.each(this.options.errorSteps, function (i, n) {
-                    mi.steps.eq(n).parent('li').addClass('danger');
-                });
-            }
-            // Hidden steps
-            if (this.options.hiddenSteps && this.options.hiddenSteps.length > 0) {
-                $.each(this.options.hiddenSteps, function (i, n) {
-                    mi.steps.eq(n).parent('li').addClass('hidden');
-                });
-            }
-
-            return true;
-        },
-        _setToolbar: function () {
-            // Skip right away if the toolbar is not enabled
-            if (this.options.toolbarSettings.toolbarPosition === 'none') {
-                return true;
-            }
-
-            // Create the toolbar buttons
-            var btnNext = this.options.toolbarSettings.showNextButton !== false ? $('<button></button>').text(this.options.lang.next).addClass('btn btn-secondary sw-btn-next').attr('type', 'button') : null;
-            var btnPrevious = this.options.toolbarSettings.showPreviousButton !== false ? $('<button></button>').text(this.options.lang.previous).addClass('btn btn-secondary sw-btn-prev').attr('type', 'button') : null;
-            var btnGroup = $('<div></div>').addClass('btn-group mr-2 sw-btn-group').attr('role', 'group').append(btnPrevious, btnNext);
-
-            // Add extra toolbar buttons
-            var btnGroupExtra = null;
-
-            if (this.options.toolbarSettings.toolbarExtraButtons && this.options.toolbarSettings.toolbarExtraButtons.length > 0) {
-                btnGroupExtra = $('<div></div>').addClass('btn-group mr-2 sw-btn-group-extra').attr('role', 'group');
-                $.each(this.options.toolbarSettings.toolbarExtraButtons, function (i, n) {
-                    btnGroupExtra.append(n.clone(true));
-                });
-            }
-
-            var toolbarTop, toolbarBottom;
-            // Append toolbar based on the position
-            switch (this.options.toolbarSettings.toolbarPosition) {
-                case 'top':
-                    toolbarTop = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-top justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
-                    toolbarTop.append(btnGroup);
-                    if (this.options.toolbarSettings.toolbarButtonPosition === 'start') {
-                        toolbarTop.prepend(btnGroupExtra);
-                    } else {
-                        toolbarTop.append(btnGroupExtra);
-                    }
-                    this.container.before(toolbarTop);
-                    break;
-                case 'bottom':
-                    toolbarBottom = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-bottom justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
-                    toolbarBottom.append(btnGroup);
-                    if (this.options.toolbarSettings.toolbarButtonPosition === 'start') {
-                        toolbarBottom.prepend(btnGroupExtra);
-                    } else {
-                        toolbarBottom.append(btnGroupExtra);
-                    }
-                    this.container.after(toolbarBottom);
-                    break;
-                case 'both':
-                    toolbarTop = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-top justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
-                    toolbarTop.append(btnGroup);
-                    if (this.options.toolbarSettings.toolbarButtonPosition === 'start') {
-                        toolbarTop.prepend(btnGroupExtra);
-                    } else {
-                        toolbarTop.append(btnGroupExtra);
-                    }
-                    this.container.before(toolbarTop);
-
-                    toolbarBottom = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-bottom justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
-                    toolbarBottom.append(btnGroup.clone(true));
-
-                    if (btnGroupExtra !== null) {
-                      if (this.options.toolbarSettings.toolbarButtonPosition === 'start') {
-                          toolbarBottom.prepend(btnGroupExtra.clone(true));
-                      } else {
-                          toolbarBottom.append(btnGroupExtra.clone(true));
-                      }
-                    }
-                    this.container.after(toolbarBottom);
-                    break;
-                default:
-                    toolbarBottom = $('<div></div>').addClass('btn-toolbar sw-toolbar sw-toolbar-bottom justify-content-' + this.options.toolbarSettings.toolbarButtonPosition);
-                    toolbarBottom.append(btnGroup);
-                    if (this.options.toolbarSettings.toolbarButtonPosition === 'start') {
-                        toolbarBottom.append(btnGroupExtra);
-                    } else {
-                        toolbarBottom.append(btnGroupExtra);
-                    }
-                    this.container.after(toolbarBottom);
-                    break;
-            }
-            return true;
-        },
-        _setEvents: function () {
-            // Anchor click event
-            var mi = this;
-            $(this.steps).on("click", function (e) {
-                e.preventDefault();
-                if (mi.options.anchorSettings.anchorClickable === false) {
-                    return true;
-                }
-                var idx = mi.steps.index(this);
-                if (mi.options.anchorSettings.enableAnchorOnDoneStep === false && mi.steps.eq(idx).parent('li').hasClass('done')) {
-                    return true;
+    class SmartWizard {
+
+      constructor(element, options) {
+          // Merge user settings with default
+          this.options        = $.extend(true, {}, defaults, options);
+          // Main container element
+          this.main           = $(element);
+          // Navigation bar element
+          this.nav            = this._getFirstDescendant('.nav');
+          // Step anchor elements
+          this.steps          = this.nav.find('.nav-link');
+          // Content container
+          this.container      = this._getFirstDescendant('.tab-content');
+          // Content pages
+          this.pages          = this.container.children('.tab-pane');
+
+          // Assign options
+          this._initOptions();
+          // Initial load
+          this._initLoad();
+      }
+
+      // Initial Load Method
+      _initLoad() {
+          // Clean the elements
+          this.pages.hide();
+          this.steps.removeClass('done active');
+
+          // Active step index
+          this.current_index  = null;
+
+          // Get the initial step index
+          let idx = this._getStepIndex();
+          // Mark any previous steps done
+          this._setPreviousStepsDone(idx);
+          // Show the initial step
+          this._showStep(idx);
+      }
+
+      // Initialize options
+      _initOptions() {
+          // Set the elements
+          this._setElements();
+          // Add toolbar
+          this._setToolbar();
+          // Assign plugin events
+          this._setEvents();
+      }
+
+      _getFirstDescendant(selector) {
+          // Check for first level element
+          let elm = this.main.children(selector);
+          if (elm.length > 0) {
+              return elm;
+          }
+
+          // Check for second level element
+          this.main.children().each((i, n) => {
+              let tmp = $(n).children(selector);
+              if (tmp.length > 0) {
+                  elm = tmp;
+                  return false;
+              }
+          });
+          if (elm.length > 0) {
+              return elm;
+          }
+
+          // Element not found
+          this._showError("Element not found " + selector);
+          return false;
+      }
+
+      _setElements() {
+          // Set the main element
+          this.main.addClass('sw');
+
+          this._setTheme(this.options.theme);
+          this._setJustify(this.options.justified);
+
+          // Set the anchor default style
+          if (this.options.anchorSettings.enableAllAnchors !== true || this.options.anchorSettings.anchorClickable !== true) {
+              this.steps.addClass('inactive');
+          }
+
+          // Disabled steps
+          this._setCSSClass(this.options.disabledSteps, "disabled");
+          // Error steps
+          this._setCSSClass(this.options.errorSteps, "danger");
+          // Hidden steps
+          this._setCSSClass(this.options.hiddenSteps, "hidden");
+      }
+
+      _setEvents() {
+          // Check if event handler already exists
+          if (this.main.data('click-init')) {
+              return true;
+          }
+          // Flag item to prevent attaching handler again
+          this.main.data('click-init', true);
+
+          // Anchor click event
+          $(this.steps).on("click", (e) => {
+              e.preventDefault();
+              if (this.options.anchorSettings.anchorClickable === false) {
+                  return true;
+              }
+
+              // Get the step index
+              var idx = this.steps.index(e.currentTarget);
+
+              if (idx === this.current_index) {
+                  return true;
+              }
+
+              if (this.options.anchorSettings.enableAnchorOnDoneStep === false && this._isDone(idx)) {
+                  return true;
+              }
+
+              if (this.options.anchorSettings.enableAllAnchors !== false || this._isDone(idx)) {
+                  this._showStep(idx);
+              }
+          });
+
+          // Next button event
+          this.main.find('.sw-btn-next').on("click", (e) => {
+              e.preventDefault();
+              this._showNext();
+          });
+
+          // Previous button event
+          this.main.find('.sw-btn-prev').on("click", (e) => {
+              e.preventDefault();
+              this._showPrevious();
+          });
+
+          // Keyboard navigation event
+          if (this.options.keyboardSettings.keyNavigation) {
+              $(document).keyup((e) => {
+                  this._keyNav(e);
+              });
+          }
+
+          // Back/forward browser button event
+          if (this.options.backButtonSupport) {
+              $(window).on('hashchange', (e) => {
+                  let idx = this._getURLHashIndex();
+                  if (idx !== false) {
+                      e.preventDefault();
+                      this._showStep(idx);
+                  }
+              });
+          }
+      }
+
+      _setToolbar() {
+          // Skip right away if the toolbar is not enabled
+          if (this.options.toolbarSettings.toolbarPosition === 'none') {
+              return true;
+          }
+
+          // Append toolbar based on the position
+          switch (this.options.toolbarSettings.toolbarPosition) {
+              case 'top':
+                  this.container.before(this._createToolbar('top'));
+                  break;
+              case 'bottom':
+                  this.container.after(this._createToolbar('bottom'));
+                  break;
+              case 'both':
+                  this.container.before(this._createToolbar('top'));
+                  this.container.after(this._createToolbar('bottom'));
+                  break;
+              default:
+                  this.container.after(this._createToolbar('bottom'));
+                  break;
+          }
+      }
+
+      _createToolbar(position) {
+          // Skip if the toolbar is already created
+          if (this.main.find('.toolbar-' + position).length > 0) {
+              return null;
+          }
+
+          var toolbar       = $('<div></div>').addClass('toolbar toolbar-' + position).attr('role', 'toolbar');
+          // Create the toolbar buttons
+          let btnNext       = this.options.toolbarSettings.showNextButton !== false ? $('<button></button>').text(this.options.lang.next).addClass('btn sw-btn-next').attr('type', 'button') : null;
+          let btnPrevious   = this.options.toolbarSettings.showPreviousButton !== false ? $('<button></button>').text(this.options.lang.previous).addClass('btn sw-btn-prev').attr('type', 'button') : null;
+          toolbar.append(btnPrevious, btnNext);
+
+          // Add extra toolbar buttons
+          if (this.options.toolbarSettings.toolbarExtraButtons && this.options.toolbarSettings.toolbarExtraButtons.length > 0) {
+              $.each(this.options.toolbarSettings.toolbarExtraButtons, (_i, n) => {
+                  toolbar.append(n.clone(true));
+              });
+          }
+
+          toolbar.css('text-align', this.options.toolbarSettings.toolbarButtonPosition);
+          return toolbar;
+      }
+
+      _showNext() {
+          var si = this._getNextShowable(this.current_index);
+          if (si === false) {
+              return false;
+          }
+          this._showStep(si);
+      }
+
+      _showPrevious() {
+          var si = this._getPreviousShowable(this.current_index);
+          if (si === false) {
+              return false;
+          }
+          this._showStep(si);
+      }
+
+      _showStep(idx) {
+          // If current step is requested again, skip
+          if (idx == this.current_index) {
+              return false;
+          }
+          // If step not found, skip
+          if (!this.steps.eq(idx)) {
+              return false;
+          }
+          // If it is a disabled step, skip
+          if (!this._isShowable(idx)) {
+              return false;
+          }
+
+          // Load step content
+          this._loadStep(idx);
+      }
+
+      _getNextShowable(idx) {
+          var si = false;
+          // Find the next showable step
+          for (var i = idx + 1; i < this.steps.length; i++) {
+              if (this._isShowable(i)) {
+                  si = i;
+                  break;
+              }
+          }
+
+          if (si !== false && this.steps.length <= si) {
+              if (!this.options.cycleSteps) {
+                  return false;
+              }
+              si = 0;
+          }
+
+          return si;
+      }
+
+      _getPreviousShowable(idx) {
+          var si = false;
+          // Find the previous showable step
+          for (var i = idx - 1; i >= 0; i--) {
+              if (this._isShowable(i)) {
+                  si = i;
+                  break;
+              }
+          }
+
+          if (si !== false && 0 > si) {
+              if (!this.options.cycleSteps) {
+                  return false;
+              }
+              si = this.steps.length - 1;
+          }
+
+          return si;
+      }
+
+      _isShowable(idx) {
+          let elm = this.steps.eq(idx);
+          if (elm.hasClass('disabled') || elm.hasClass('hidden')) {
+              return false;
+          }
+          return true;
+      }
+
+      _isDone(idx) {
+          let elm = this.steps.eq(idx);
+          if (elm.hasClass('done')) {
+              return true;
+          }
+          return false;
+      }
+
+      _setPreviousStepsDone(idx) {
+          if (idx > 0 && this.options.anchorSettings.markDoneStep && this.options.anchorSettings.markAllPreviousStepsAsDone) {
+            // Mark previous steps of the active step as done
+            for(var i = idx; i >= 0; i--) {
+                this._setCSSClass(i, "done");
+            }
+          }
+      }
+
+      _setCSSClass(idx, cls) {
+          if (idx === null) {
+              return false;
+          }
+          let idxs = $.isArray(idx) ? idx : [idx];
+          idxs.map((i) => {
+              this.steps.eq(i).addClass(cls);
+          });
+      }
+
+      _resetCSSClass(idx, cls) {
+          let idxs = $.isArray(idx) ? idx : [idx];
+          idxs.map((i) => {
+              this.steps.eq(i).removeClass(cls);
+          });
+      }
+
+      _getStepDirection(idx) {
+          if (this.current_index == null) {
+              return '';
+          }
+          return this.current_index < idx ? "forward" : "backward";
+      }
+
+      _getStepPosition(idx) {
+          let stepPosition = 'middle';
+          if (idx === 0) {
+              stepPosition = 'first';
+          } else if (idx === this.steps.length - 1) {
+              stepPosition = 'last';
+          }
+          return stepPosition;
+      }
+
+      _getStepAnchor(idx) {
+          if (idx == null) {
+              return null;
+          }
+          return this.steps.eq(idx);
+      }
+
+      _getStepPage(idx) {
+          if (idx == null) {
+              return null;
+          }
+          let anchor = this._getStepAnchor(idx);
+          return anchor.length > 0 ? this.main.find(anchor.attr("href")) : null;
+      }
+
+      _setStepContent(idx, html) {
+          let page = this._getStepPage(idx);
+          if (page) {
+              page.html(html);
+          }
+      }
+
+      _loadStep(idx) {
+          // Get current step element
+          let curStep          = this._getStepAnchor(this.current_index);
+          // Get step direction
+          let stepDirection   = this._getStepDirection(idx);
+          // Get the direction of step navigation
+          if (this.current_index !== null) {
+              // Trigger "leaveStep" event
+              if (this._triggerEvent("leaveStep", [curStep, this.current_index, stepDirection]) === false) {
+                  return false;
+              }
+          }
+
+          // Get next step element
+          let selStep          = this._getStepAnchor(idx);
+
+          // Get the content if used
+          let getStepContent  = this._triggerEvent("stepContent", [selStep, idx, stepDirection]);
+          if (getStepContent) {
+              if (typeof getStepContent == "object") {
+                  getStepContent.then((res) => {
+                      this._setStepContent(idx, res);
+                      this._transitStep(idx);
+                  }).catch((err) => {
+                      console.error(err);
+                      this._setStepContent(idx, err);
+                      this._transitStep(idx);
+                  });
+              } else if (typeof getStepContent == "string") {
+                  this._setStepContent(idx, getStepContent);
+                  this._transitStep(idx);
+              } else {
+                  this._transitStep(idx);
+              }
+          } else {
+              this._transitStep(idx);
+          }
+      }
+
+      _transitStep(idx) {
+          // Get step to show element
+          let selStep          = this._getStepAnchor(idx);
+          // Change the url hash to new step
+          this._setURLHash(selStep.attr("href"));
+          // Update controls
+          this._setAnchor(idx);
+          // Animate the step
+          this._doStepAnimation(idx, () => {
+              // Fix height with content
+              this._fixHeight(idx);
+              // Get the direction of step navigation
+              let stepDirection   = this._getStepDirection(idx);
+              // Get the position of step
+              let stepPosition    = this._getStepPosition(idx);
+              // Trigger "showStep" event
+              this._triggerEvent("showStep", [selStep, this.current_index, stepDirection, stepPosition]);
+          });
+
+          // Update the current index
+          this.current_index  = idx;
+          // Set the buttons based on the step
+          this._setButtons(idx);
+      }
+
+      _doStepAnimation(idx, callback) {
+          // Get current step element
+          let curPage   = this._getStepPage(this.current_index);
+          // Get next step element
+          let selPage   = this._getStepPage(idx);
+          // Get the animation
+          let animation = this.options.transition.animation.toLowerCase();
+          // Complete any ongoing animations
+          this._stopAnimations();
+
+          switch (animation) {
+            case 'slide-horizontal':
+            case 'slide-h':
+                // horizontal slide
+                var containerWidth  = this.container.width();
+                var curLastLeft     = containerWidth;
+                var nextFirstLeft   = containerWidth * -2;
+
+                // Forward direction
+                if (idx > this.current_index) {
+                  curLastLeft   = containerWidth * -1;
+                  nextFirstLeft = containerWidth;
                 }
 
-                if (idx !== mi.current_index) {
-                    if (mi.options.anchorSettings.enableAllAnchors !== false && mi.options.anchorSettings.anchorClickable !== false) {
-                        mi._showStep(idx);
-                    } else {
-                        if (mi.steps.eq(idx).parent('li').hasClass('done')) {
-                            mi._showStep(idx);
-                        }
-                    }
+                // First load set the container width
+                if (this.current_index == null) {
+                  this.container.height(selPage.outerHeight());
                 }
-            });
-
-            // Next button event
-            $('.sw-btn-next', this.main).on("click", function (e) {
-                e.preventDefault();
-                mi._showNext();
-            });
-
-            // Previous button event
-            $('.sw-btn-prev', this.main).on("click", function (e) {
-                e.preventDefault();
-                mi._showPrevious();
-            });
 
-            // Keyboard navigation event
-            if (this.options.keyNavigation) {
-                $(document).keyup(function (e) {
-                    mi._keyNav(e);
-                });
-            }
-
-            // Back/forward browser button event
-            if (this.options.backButtonSupport) {
-                $(window).on('hashchange', function (e) {
-                    if (!mi.options.useURLhash) {
-                        return true;
-                    }
-                    if (window.location.hash) {
-                        var elm = $("a[href*='" + window.location.hash + "']", mi.nav);
-                        if (elm && elm.length > 0) {
-                            e.preventDefault();
-                            mi._showStep(mi.steps.index(elm));
-                        }
-                    }
-                });
-            }
-
-            return true;
-        },
-        _showNext: function () {
-            var si = this.current_index + 1;
-            // Find the next not disabled step
-            for (var i = si; i < this.steps.length; i++) {
-                if (!this.steps.eq(i).parent('li').hasClass('disabled') && !this.steps.eq(i).parent('li').hasClass('hidden')) {
-                    si = i;
-                    break;
+                var css_pos, css_left;
+                if (curPage) {
+                    css_pos   = curPage.css("position");
+                    css_left  = curPage.css("left");
+                    curPage.css("position", 'absolute')
+                            .css("left", 0)
+                            .animate({
+                             left: curLastLeft
+                            },
+                            this.options.transition.speed,
+                            this.options.transition.easing,
+                            function() {
+                              $(this).hide();
+                              curPage.css("position", css_pos).css("left", css_left);
+                            });
                 }
-            }
 
-            if (this.steps.length <= si) {
-                if (!this.options.cycleSteps) {
-                    return false;
-                }
-                si = 0;
-            }
-            this._showStep(si);
-            return true;
-        },
-        _showPrevious: function () {
-            var si = this.current_index - 1;
-            // Find the previous not disabled step
-            for (var i = si; i >= 0; i--) {
-                if (!this.steps.eq(i).parent('li').hasClass('disabled') && !this.steps.eq(i).parent('li').hasClass('hidden')) {
-                    si = i;
-                    break;
-                }
-            }
-            if (0 > si) {
-                if (!this.options.cycleSteps) {
-                    return false;
-                }
-                si = this.steps.length - 1;
-            }
-            this._showStep(si);
-            return true;
-        },
-        _showStep: function (idx) {
-            // If step not found, skip
-            if (!this.steps.eq(idx)) {
-                return false;
-            }
-            // If current step is requested again, skip
-            if (idx == this.current_index) {
-                return false;
-            }
-            // If it is a disabled step, skip
-            if (this.steps.eq(idx).parent('li').hasClass('disabled') || this.steps.eq(idx).parent('li').hasClass('hidden')) {
-                return false;
-            }
-            // Load step content
-            this._loadStepContent(idx);
-            return true;
-        },
-        _loadStepContent: function (idx) {
-            var mi = this;
-            // Get current step elements
-            var curTab = this.steps.eq(this.current_index);
-            // Get the direction of step navigation
-            var stepDirection = '';
-            var elm = this.steps.eq(idx);
-            var contentURL = elm.data('content-url') && elm.data('content-url').length > 0 ? elm.data('content-url') : this.options.contentURL;
-
-            if (this.current_index !== null && this.current_index !== idx) {
-                stepDirection = this.current_index < idx ? "forward" : "backward";
-            }
-
-            // Trigger "leaveStep" event
-            if (this.current_index !== null && this._triggerEvent("leaveStep", [curTab, this.current_index, stepDirection]) === false) {
-                return false;
-            }
-
-            if (contentURL && contentURL.length > 0 && (!elm.data('has-content') || !this.options.contentCache)) {
-                // Get ajax content and then show step
-                var selPage = elm.length > 0 ? $(elm.attr("href"), this.main) : null;
-
-                var ajaxSettings = $.extend(true, {}, {
-                    url: contentURL,
-                    type: "POST",
-                    data: { step_number: idx },
-                    dataType: "text",
-                    beforeSend: function () {
-                        mi._loader('show');
-                    },
-                    error: function (jqXHR, status, message) {
-                        mi._loader('hide');
-                        $.error(message);
-                    },
-                    success: function (res) {
-                        if (res && res.length > 0) {
-                            elm.data('has-content', true);
-                            selPage.html(res);
-                        }
-                        mi._loader('hide');
-                        mi._transitPage(idx);
-                    }
-                }, this.options.ajaxSettings);
-
-                $.ajax(ajaxSettings);
-            } else {
-                // Show step
-                this._transitPage(idx);
-            }
-            return true;
-        },
-        _transitPage: function (idx) {
-            var mi = this;
-            // Get current step elements
-            var curTab = this.steps.eq(this.current_index);
-            var curPage = curTab.length > 0 ? $(curTab.attr("href"), this.main) : null;
-            // Get step to show elements
-            var selTab = this.steps.eq(idx);
-            var selPage = selTab.length > 0 ? $(selTab.attr("href"), this.main) : null;
-            // Get the direction of step navigation
-            var stepDirection = '';
-            if (this.current_index !== null && this.current_index !== idx) {
-                stepDirection = this.current_index < idx ? "forward" : "backward";
-            }
-
-            var stepPosition = 'middle';
-            if (idx === 0) {
-                stepPosition = 'first';
-            } else if (idx === this.steps.length - 1) {
-                stepPosition = 'final';
-            }
-
-            this.options.transitionEffect = this.options.transitionEffect.toLowerCase();
-            this.pages.finish();
-            if (this.options.transitionEffect === 'slide') {
-                // normal slide
-                if (curPage && curPage.length > 0) {
-                    curPage.slideUp('fast', this.options.transitionEasing, function () {
-                        selPage.slideDown(mi.options.transitionSpeed, mi.options.transitionEasing);
-                    });
-                } else {
-                    selPage.slideDown(this.options.transitionSpeed, this.options.transitionEasing);
-                }
-            } else if (this.options.transitionEffect === 'fade') {
-                // normal fade
-                if (curPage && curPage.length > 0) {
-                    curPage.fadeOut('fast', this.options.transitionEasing, function () {
-                        selPage.fadeIn('fast', mi.options.transitionEasing, function () {
-                            $(this).show();
+                css_pos   = selPage.css("position");
+                css_left  = selPage.css("left");
+                selPage.css("position", 'absolute')
+                        .css("left", nextFirstLeft)
+                        .outerWidth(containerWidth)
+                        .show()
+                        .animate({
+                          left: 0
+                        },
+                        this.options.transition.speed,
+                        this.options.transition.easing,
+                        () => {
+                            selPage.css("position", css_pos).css("left", css_left);
+                            callback();
                         });
-                    });
-                } else {
-                    selPage.fadeIn(this.options.transitionSpeed, this.options.transitionEasing, function () {
-                        $(this).show();
-                    });
-                }
-            } else {
-                if (curPage && curPage.length > 0) {
-                    curPage.hide();
-                }
-                selPage.show();
-            }
-            // Change the url hash to new step
-            this._setURLHash(selTab.attr("href"));
-            // Update controls
-            this._setAnchor(idx);
-            // Set the buttons based on the step
-            this._setButtons(idx);
-            // Fix height with content
-            this._fixHeight(idx);
-            // Update the current index
-            this.current_index = idx;
-
-            // Trigger "showStep" event
-            this._triggerEvent("showStep", [selTab, this.current_index, stepDirection, stepPosition]);
-            return true;
-        },
-        _setAnchor: function (idx) {
-            // Current step anchor > Remove other classes and add done class
-            this.steps.eq(this.current_index).parent('li').removeClass("active");
-            if (this.options.anchorSettings.markDoneStep !== false && this.current_index !== null) {
-                this.steps.eq(this.current_index).parent('li').addClass("done");
-                if (this.options.anchorSettings.removeDoneStepOnNavigateBack !== false) {
-                    this.steps.eq(idx).parent('li').nextAll().removeClass("done");
-                }
-            }
+                break;
+              case 'slide-vertical':
+              case 'slide-v':
+                  // vertical slide
+                  var containerHeight = this.container.height();
+                  var curLastTop      = containerHeight;
+                  var nextFirstTop    = containerHeight * -2;
+
+                  // Forward direction
+                  if (idx > this.current_index) {
+                    curLastTop   = containerHeight * -1;
+                    nextFirstTop = containerHeight;
+                  }
+
+                  var css_vpos, css_vtop;
+                  if (curPage) {
+                      css_vpos = curPage.css("position");
+                      css_vtop = curPage.css("top");
+                      curPage.css("position", 'absolute')
+                              .css("top", 0)
+                              .animate({
+                               top: curLastTop
+                              },
+                              this.options.transition.speed,
+                              this.options.transition.easing,
+                              function() {
+                                $(this).hide();
+                                curPage.css("position", css_vpos).css("top", css_vtop);
+                              });
+                  }
+
+                  css_vpos = selPage.css("position");
+                  css_vtop = selPage.css("top");
+                  selPage.css("position", 'absolute')
+                          .css("top", nextFirstTop)
+                          .show()
+                          .animate({
+                            top: 0
+                          },
+                          this.options.transition.speed,
+                          this.options.transition.easing,
+                          () => {
+                              selPage.css("position", css_vpos).css("top", css_vtop);
+                              callback();
+                          });
+                  break;
+              case 'slide-swing':
+              case 'slide-s':
+                  // normal slide
+                  if (curPage) {
+                      curPage.slideUp('fast', this.options.transition.easing, () => {
+                          selPage.slideDown(this.options.transition.speed, this.options.transition.easing, () => {
+                              callback();
+                          });
+                      });
+                  } else {
+                      selPage.slideDown(this.options.transition.speed, this.options.transition.easing, () => {
+                          callback();
+                      });
+                  }
+                  break;
+              case 'fade':
+                  // normal fade
+                  if (curPage) {
+                      curPage.fadeOut('fast', this.options.transition.easing, () => {
+                          selPage.fadeIn('fast', this.options.transition.easing, () => {
+                              callback();
+                          });
+                      });
+                  } else {
+                      selPage.fadeIn(this.options.transition.speed, this.options.transition.easing, () => {
+                          callback();
+                      });
+                  }
+                  break;
+              default:
+                  if (curPage) {
+                      curPage.hide();
+                  }
+                  selPage.show();
+                  callback();
+                  break;
+          }
+      }
+
+      _stopAnimations() {
+          this.pages.finish();
+          this.container.finish();
+      }
+
+      _setAnchor(idx) {
+          // Current step anchor > Remove other classes and add done class
+          this._resetCSSClass(this.current_index, "active");
+          if (this.options.anchorSettings.markDoneStep !== false && this.current_index !== null) {
+              this._setCSSClass(this.current_index, "done");
+              if (this.options.anchorSettings.removeDoneStepOnNavigateBack !== false && this._getStepDirection(idx) === 'backward') {
+                  this._resetCSSClass(this.current_index, "done");
+              }
+          }
+
+          // Next step anchor > Remove other classes and add active class
+          this._resetCSSClass(idx, "done");
+          this._setCSSClass(idx, "active");
+      }
+
+      _setButtons(idx) {
+          // Previous/Next Button enable/disable based on step
+          if (!this.options.cycleSteps) {
+              this.main.find('.sw-btn-prev').removeClass("disabled");
+              this.main.find('.sw-btn-next').removeClass("disabled");
+              switch (this._getStepPosition(idx)) {
+                  case 'first':
+                      this.main.find('.sw-btn-prev').addClass("disabled");
+                      break;
+                  case 'last':
+                      this.main.find('.sw-btn-next').addClass("disabled");
+                      break;
+                  default:
+                      if (this._getNextShowable(idx) === false) {
+                          this.main.find('.sw-btn-next').addClass("disabled");
+                      }
 
-            // Next step anchor > Remove other classes and add active class
-            this.steps.eq(idx).parent('li').removeClass("done").addClass("active");
-            return true;
-        },
-        _setButtons: function (idx) {
-            // Previous/Next Button enable/disable based on step
-            if (!this.options.cycleSteps) {
-                if (0 >= idx) {
-                    $('.sw-btn-prev', this.main).addClass("disabled");
-                } else {
-                    $('.sw-btn-prev', this.main).removeClass("disabled");
-                }
-                if (this.steps.length - 1 <= idx) {
-                    $('.sw-btn-next', this.main).addClass("disabled");
-                } else {
-                    $('.sw-btn-next', this.main).removeClass("disabled");
+                      if (this._getPreviousShowable(idx) === false) {
+                          this.main.find('.sw-btn-prev').addClass("disabled");
+                      }
+                      break;
+              }
+          }
+      }
+
+      _getStepIndex() {
+          // Get selected step from the url
+          let idx = this._getURLHashIndex();
+          return (idx === false) ? this.options.selected : idx;
+      }
+
+      _setTheme(theme) {
+          this.main.removeClass(function (index, className) {
+              return (className.match (/(^|\s)sw-theme-\S+/g) || []).join(' ');
+          }).addClass('sw-theme-' + theme);
+      }
+
+      _setJustify(justified) {
+        if (justified === true) {
+          this.main.addClass('sw-justified');
+        } else {
+          this.main.removeClass('sw-justified');
+        }
+      }
+
+      // HELPER FUNCTIONS
+
+      _keyNav(e) {
+          // Keyboard navigation
+          if ($.inArray(e.which, this.options.keyboardSettings.keyLeft) > -1) {
+              // left
+              this._showPrevious();
+              e.preventDefault();
+          } else if ($.inArray(e.which, this.options.keyboardSettings.keyRight) > -1) {
+              // right
+              this._showNext();
+              e.preventDefault();
+          } else {
+              return; // exit this handler for other keys
+          }
+      }
+
+      _fixHeight(idx) {
+          // Auto adjust height of the container
+          if (this.options.autoAdjustHeight) {
+              let selPage = this._getStepPage(idx);
+              this.container.finish()
+                            .animate({
+                                  height: selPage.outerHeight()
+                                },
+                                this.options.transition.speed
+                            );
+          }
+      }
+
+      _triggerEvent(name, params) {
+          // Trigger an event
+          var e = $.Event(name);
+          this.main.trigger(e, params);
+          if (e.isDefaultPrevented()) {
+              return false;
+          }
+          return e.result;
+      }
+
+      _setURLHash(hash) {
+          if (this.options.enableURLhash && window.location.hash !== hash) {
+              history.pushState(null,null,hash);
+          }
+      }
+
+      _getURLHashIndex() {
+          if (this.options.enableURLhash) {
+            // Get step number from url hash if available
+            var hash = window.location.hash;
+            if (hash.length > 0) {
+                var elm = this.nav.find("a[href*='" + hash + "']");
+                if (elm.length > 0) {
+                    return this.steps.index(elm);
                 }
             }
-            return true;
-        },
+          }
+          return false;
+      }
+
+      _loader(action) {
+          switch (action) {
+              case 'show':
+                  this.main.addClass('sw-loading');
+                  break;
+              case 'hide':
+                  this.main.removeClass('sw-loading');
+                  break;
+              default:
+                  this.main.toggleClass('sw-loading');
+          }
+      }
+
+      _showError(msg) {
+          console.error(msg);
+      }
+
+      // PUBLIC FUNCTIONS
+
+      goToStep(stepIndex) {
+          this._showStep(stepIndex);
+      }
+
+      next() {
+          this._showNext();
+      }
+
+      prev() {
+          this._showPrevious();
+      }
+
+      reset() {
+          // Reset all
+          this._setURLHash('#');
+          this._initOptions();
+          this._initLoad();
+      }
+
+      stepState(stepArray, state) {
+          if (!stepArray) {
+              return false;
+          }
+
+          switch (state) {
+              case 'disable':
+                  this._setCSSClass(stepArray, 'disabled');
+                  break;
+              case 'enable':
+                  this._resetCSSClass(stepArray, 'disabled');
+                  break;
+              case 'hide':
+                  this._setCSSClass(stepArray, 'hidden');
+                  break;
+              case 'show':
+                  this._resetCSSClass(stepArray, 'hidden');
+                  break;
+              case 'error-on':
+                  this._setCSSClass(stepArray, 'danger');
+                  break;
+              case 'error-off':
+                  this._resetCSSClass(stepArray, 'danger');
+                  break;
+          }
+      }
+
+      setOptions(options) {
+          this.options  = $.extend(true, {}, this.options, options);
+          this._initOptions();
+      }
+
+      getStepIndex() {
+          return this.current_index;
+      }
+
+      loader(state) {
+          if (state === "show") {
+              this.main.addClass('sw-loading');
+          } else {
+              this.main.removeClass('sw-loading');
+          }
+      }
 
-        // HELPER FUNCTIONS
-
-        _keyNav: function (e) {
-            var mi = this;
-            // Keyboard navigation
-            switch (e.which) {
-                case 37:
-                    // left
-                    mi._showPrevious();
-                    e.preventDefault();
-                    break;
-                case 39:
-                    // right
-                    mi._showNext();
-                    e.preventDefault();
-                    break;
-                default:
-                    return; // exit this handler for other keys
-            }
-        },
-        _fixHeight: function (idx) {
-            // Auto adjust height of the container
-            if (this.options.autoAdjustHeight) {
-                var selPage = this.steps.eq(idx).length > 0 ? $(this.steps.eq(idx).attr("href"), this.main) : null;
-                this.container.finish().animate({ minHeight: selPage.outerHeight() }, this.options.transitionSpeed, function () {});
-            }
-            return true;
-        },
-        _triggerEvent: function (name, params) {
-            // Trigger an event
-            var e = $.Event(name);
-            this.main.trigger(e, params);
-            if (e.isDefaultPrevented()) {
-                return false;
-            }
-            return e.result;
-        },
-        _setURLHash: function (hash) {
-            if (this.options.showStepURLhash && window.location.hash !== hash) {
-                window.location.hash = hash;
-            }
-        },
-        _loader: function (action) {
-            switch (action) {
-                case 'show':
-                    this.main.addClass('sw-loading');
-                    break;
-                case 'hide':
-                    this.main.removeClass('sw-loading');
-                    break;
-                default:
-                    this.main.toggleClass('sw-loading');
-            }
-        },
-
-        // PUBLIC FUNCTIONS
-
-        goToStep: function (stepNum) {
-            this._transitPage(stepNum);
-        },
-        hiddenSteps: function (r) {
-            this.options.hiddenSteps = r;
-            // Hidden steps
-            if (this.options.hiddenSteps && this.options.hiddenSteps.length > 0) {
-                var mi = this;
-                $.each(mi.steps, function (i, n) {
-                    if ($.inArray(i, mi.options.hiddenSteps) > -1) {
-                        $(n).parent('li').addClass('hidden');
-                    }
-                    else {
-                        $(n).parent('li').removeClass('hidden');
-                    }
-                });
-            }
-        },
-        theme: function (v) {
-            if (this.options.theme === v) {
-                return false;
-            }
-            this.main.removeClass('sw-theme-' + this.options.theme);
-            this.options.theme = v;
-            this.main.addClass('sw-theme-' + this.options.theme);
-            // Trigger "themeChanged" event
-            this._triggerEvent("themeChanged", [this.options.theme]);
-        },
-        next: function () {
-            this._showNext();
-        },
-        prev: function () {
-            this._showPrevious();
-        },
-        reset: function () {
-            // Trigger "beginReset" event
-            if (this._triggerEvent("beginReset") === false) {
-                return false;
-            }
-
-            // Reset all elements and classes
-            this.container.stop(true);
-            this.pages.stop(true);
-            this.pages.hide();
-            this.current_index = null;
-            this._setURLHash(this.steps.eq(this.options.selected).attr("href"));
-            $(".sw-toolbar", this.main).remove();
-            this.steps.removeClass();
-            this.steps.parents('li').removeClass();
-            this.steps.data('has-content', false);
-            this.init();
-
-            // Trigger "endReset" event
-            this._triggerEvent("endReset");
-        },
-        stepState: function (stepArray, state) {
-            var mi = this;
-            stepArray = $.isArray(stepArray) ? stepArray : [stepArray];
-            var selSteps = $.grep(this.steps, function (n, i) {
-                return $.inArray(i, stepArray) !== -1; //  && i !== mi.current_index
-            });
-            if (selSteps && selSteps.length > 0) {
-                switch (state) {
-                    case 'disable':
-                        $(selSteps).parents('li').addClass('disabled');
-                        break;
-                    case 'enable':
-                        $(selSteps).parents('li').removeClass('disabled');
-                        break;
-                    case 'hide':
-                        $(selSteps).parents('li').addClass('hidden');
-                        break;
-                    case 'show':
-                        $(selSteps).parents('li').removeClass('hidden');
-                        break;
-                    case 'error-on':
-                        $(selSteps).parents('li').addClass('danger');
-                        break;
-                    case 'error-off':
-                        $(selSteps).parents('li').removeClass('danger');
-                        break;
-                }
-            }
-        }
-    });
+    }
 
     // Wrapper for the plugin
     $.fn.smartWizard = function (options) {
-        var args = arguments;
-        var instance;
-
         if (options === undefined || typeof options === 'object') {
             return this.each(function () {
                 if (!$.data(this, "smartWizard")) {
@@ -649,14 +841,14 @@
                 }
             });
         } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
-            instance = $.data(this[0], 'smartWizard');
+            let instance = $.data(this[0], 'smartWizard');
 
             if (options === 'destroy') {
                 $.data(this, 'smartWizard', null);
             }
 
             if (instance instanceof SmartWizard && typeof instance[options] === 'function') {
-                return instance[options].apply(instance, Array.prototype.slice.call(args, 1));
+                return instance[options].apply(instance, Array.prototype.slice.call(arguments, 1));
             } else {
                 return this;
             }
diff --git a/src/scss/core/_base.scss b/src/scss/core/_base.scss
new file mode 100644
index 0000000..790c899
--- /dev/null
+++ b/src/scss/core/_base.scss
@@ -0,0 +1,132 @@
+$breakpoint-phone: 640px;
+
+.sw {
+    position: relative;
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box; // 1
+    }
+
+    & > .tab-content {
+      position: relative;
+      overflow: hidden;
+    }
+
+    // Toolbar style
+    & .toolbar {
+      padding: .8rem;
+
+      & > .btn {
+        display: inline-block;
+        text-decoration: none;
+        text-align: center;
+        text-transform: none;
+        vertical-align: middle;
+        user-select: none;
+        margin-left: .2rem;
+        margin-right: .2rem;
+        cursor: pointer;
+
+        &.disabled, &:disabled {
+          opacity: .65;
+        }
+      }
+
+    }
+
+    & > .nav {
+      display: flex;
+      flex-wrap: wrap;
+      list-style: none;
+      padding-left: 0;
+      margin-top: 0;
+      margin-bottom: 0;
+
+      @media screen and (max-width: $breakpoint-phone) {
+        flex-direction: column!important;
+        flex: 1 auto;
+      }
+
+      .nav-link {
+        display: block;
+        padding: .5rem 1rem;
+        text-decoration: none;
+        outline: 0!important;;
+
+        &:hover,
+        &:active,
+        &:focus {
+          text-decoration: none;
+          outline:0 !important;
+        }
+
+        &::-moz-focus-inner {
+          border: 0!important;;
+        }
+
+        &.disabled {
+          color: #ccc !important;
+          pointer-events: none;
+          cursor: default;
+        }
+        &.hidden {
+          display: none !important;
+        }
+
+      }
+    }
+
+    // Justified navigation style
+    &.sw-justified {
+
+      & > .nav {
+
+        & > li, .nav-link {
+          flex-basis: 0;
+          flex-grow: 1;
+          text-align: center;
+        }
+      }
+    }
+
+    // Loading animation
+    &.sw-loading {
+      user-select: none;
+
+      &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        opacity: 1;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background: rgba(255,255,255,.7);
+        z-index: 2;
+        transition: all .2s ease;
+      }
+
+      &::before {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        top: 45%;
+        left: 45%;
+        width: 2rem;
+        height: 2rem;
+        border: 10px solid #f3f3f3;
+        border-top: 10px solid #3498db;
+        border-radius: 50%;
+        z-index: 10;
+        animation: spin 1s linear infinite;
+      }
+
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    }
+ }
diff --git a/src/scss/smart_wizard.scss b/src/scss/smart_wizard.scss
new file mode 100644
index 0000000..6243cdb
--- /dev/null
+++ b/src/scss/smart_wizard.scss
@@ -0,0 +1,19 @@
+/*!
+ * jQuery SmartWizard v5
+ * jQuery Wizard Plugin
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipu.me
+ *
+ * Licensed under the terms of MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */
+
+@charset 'utf-8';
+
+/* SmartWizard Base Styles */
+@import 'core/_base';
+
+/* SmartWizard Theme: Default */
+@import 'themes/_default';
diff --git a/src/scss/smart_wizard_all.scss b/src/scss/smart_wizard_all.scss
new file mode 100644
index 0000000..4af3ada
--- /dev/null
+++ b/src/scss/smart_wizard_all.scss
@@ -0,0 +1,28 @@
+/*!
+ * jQuery SmartWizard v5
+ * jQuery Wizard Plugin
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipu.me
+ *
+ * Licensed under the terms of MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */
+
+@charset 'utf-8';
+
+/* SmartWizard Base Styles */
+@import 'core/_base';
+
+/* SmartWizard Theme: Default */
+@import 'themes/_default';
+
+/* SmartWizard Theme: Arrows */
+@import 'themes/_arrows';
+
+/* SmartWizard Theme: Dots */
+@import 'themes/_dots';
+
+/* SmartWizard Theme: Dark */
+@import 'themes/_dark';
diff --git a/src/scss/smart_wizard_arrows.scss b/src/scss/smart_wizard_arrows.scss
new file mode 100644
index 0000000..05641cc
--- /dev/null
+++ b/src/scss/smart_wizard_arrows.scss
@@ -0,0 +1,19 @@
+/*!
+ * jQuery SmartWizard v5
+ * jQuery Wizard Plugin
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipu.me
+ *
+ * Licensed under the terms of MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */
+
+@charset 'utf-8';
+
+/* SmartWizard Base Styles */
+@import 'core/_base';
+
+/* SmartWizard Theme: Arrows */
+@import 'themes/_arrows';
diff --git a/src/scss/smart_wizard_dark.scss b/src/scss/smart_wizard_dark.scss
new file mode 100644
index 0000000..120ccd9
--- /dev/null
+++ b/src/scss/smart_wizard_dark.scss
@@ -0,0 +1,19 @@
+/*!
+ * jQuery SmartWizard v5
+ * jQuery Wizard Plugin
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipu.me
+ *
+ * Licensed under the terms of MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */
+
+@charset 'utf-8';
+
+/* SmartWizard Base Styles */
+@import 'core/_base';
+
+/* SmartWizard Theme: Dark */
+@import 'themes/_dark';
diff --git a/src/scss/smart_wizard_dots.scss b/src/scss/smart_wizard_dots.scss
new file mode 100644
index 0000000..ea784ab
--- /dev/null
+++ b/src/scss/smart_wizard_dots.scss
@@ -0,0 +1,19 @@
+/*!
+ * jQuery SmartWizard v5
+ * jQuery Wizard Plugin
+ * http://www.techlaboratory.net/smartwizard
+ *
+ * Created by Dipu Raj
+ * http://dipu.me
+ *
+ * Licensed under the terms of MIT License
+ * https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
+ */
+
+@charset 'utf-8';
+
+/* SmartWizard Base Styles */
+@import 'core/_base';
+
+/* SmartWizard Theme: Dots */
+@import 'themes/_dots';
diff --git a/src/scss/themes/_arrows.scss b/src/scss/themes/_arrows.scss
new file mode 100644
index 0000000..fa70d11
--- /dev/null
+++ b/src/scss/themes/_arrows.scss
@@ -0,0 +1,154 @@
+// Color Settings
+$container-border-color       : #eeeeee;
+
+$toolbar-bg-color             : #f9f9f9;
+$toolbar-btn-bg-color         : #17a2b8;
+
+$nav-border-color             : #eeeeee;
+
+$nav-active-primary-color     : #5bc0de;
+$nav-active-secondary-color   : #ffffff;
+
+$nav-inactive-primary-color   : #f8f8f8;
+$nav-inactive-secondary-color : #999999;
+
+$nav-done-primary-color       : #5cb85c;
+$nav-done-secondary-color     : #ffffff;
+
+$nav-disabled-primary-color   : #f9f9f9;
+$nav-disabled-secondary-color : #eeeeee;
+
+$nav-danger-primary-color     : #d9534f;
+$nav-danger-secondary-color   : #ffffff;
+
+
+.sw-theme-arrows {
+  border: 1px solid $container-border-color;
+
+  // Content style
+  & > .tab-content {
+
+    & > .tab-pane {
+      padding: 10px;
+    }
+
+  }
+
+  // Toolbar style
+  & .toolbar {
+
+    & > .btn {
+      color: #fff;
+      background-color: $toolbar-btn-bg-color;
+      border: 1px solid $toolbar-btn-bg-color;
+      padding: .375rem .75rem;
+      border-radius: .25rem;
+      font-weight: 400;
+    }
+  }
+
+  // Navigation style
+  & > .nav {
+    overflow: hidden;
+    border-bottom: 1px solid $container-border-color;
+
+    .nav-link {
+      position: relative;
+      height: 100%;
+      min-height: 100%;
+      margin-right: 30px;
+      margin-left: -30px;
+      padding-left: 40px;
+
+      @media screen and (max-width: $breakpoint-phone) {
+        overflow: hidden;
+        margin-bottom: 1px;
+        margin-right: unset;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        display: block;
+        width: 0;
+        height: 0;
+        top: 50%;
+        left: 100%;
+        margin-top: -50px;
+        border-top: 50px solid transparent;
+        border-bottom: 50px solid transparent;
+        border-left: 30px solid $nav-inactive-primary-color;
+        z-index: 2;
+      }
+
+      &::before {
+        content: " ";
+        position: absolute;
+        display: block;
+        width: 0;
+        height: 0;
+        top: 50%;
+        left: 100%;
+        margin-top: -50px;
+        margin-left: 1px;
+        border-top: 50px solid transparent;
+        border-bottom: 50px solid transparent;
+        border-left: 30px solid $nav-border-color;
+        z-index: 1;
+      }
+
+      &.inactive {
+        color: $nav-inactive-secondary-color;
+        border-color: $nav-inactive-primary-color;
+        background: $nav-inactive-primary-color;
+        cursor: not-allowed;
+      }
+
+      &.active {
+        color: $nav-active-secondary-color !important;
+        border-color: $nav-active-primary-color !important;
+        background: $nav-active-primary-color !important;
+        cursor: pointer;
+
+        &::after {
+          border-left-color: $nav-active-primary-color !important;
+        }
+      }
+
+      &.done {
+        color: $nav-done-secondary-color;
+        border-color: $nav-done-primary-color;
+        background: $nav-done-primary-color;
+        cursor: pointer;
+
+        &::after {
+          border-left-color: $nav-done-primary-color;
+        }
+      }
+
+      &.disabled {
+        color: $nav-disabled-secondary-color;
+        border-color: $nav-disabled-primary-color;
+        background: $nav-disabled-primary-color;
+        cursor: not-allowed;
+
+        &::after {
+          border-left-color: $nav-disabled-primary-color;
+        }
+      }
+
+      &.danger {
+        color: $nav-danger-secondary-color;
+        border-color: $nav-danger-primary-color;
+        background: $nav-danger-primary-color;
+        cursor: pointer;
+
+        &::after {
+          border-left-color: $nav-danger-primary-color;
+        }
+      }
+
+    }
+  }
+
+}
diff --git a/src/scss/themes/_dark.scss b/src/scss/themes/_dark.scss
new file mode 100644
index 0000000..ef23799
--- /dev/null
+++ b/src/scss/themes/_dark.scss
@@ -0,0 +1,118 @@
+// Colors
+$container-border-color        : #eeeeee;
+
+$toolbar-bg-color              : rgba(130, 130, 134, .1);
+$toolbar-btn-bg-color          : #17a2b8;
+
+$nav-active-primary-color      : #17a2b8; // #17a2b8 #5bc0de
+$nav-active-secondary-color    : #ffffff;
+
+$nav-inactive-primary-color    : #f8f8f8;
+$nav-inactive-secondary-color  : #999999;
+
+$nav-done-primary-color        : #5cb85c;
+$nav-done-secondary-color      : #ffffff;
+
+$nav-disabled-primary-color    : #f9f9f9;
+$nav-disabled-secondary-color  : #eeeeee;
+
+$nav-danger-primary-color      : #d9534f;
+$nav-danger-secondary-color    : #ffffff;
+
+
+.sw-theme-dark {
+  border: 1px solid $container-border-color;
+  box-shadow: 0 1px 10px rgba(130, 130, 134, .1);
+
+  color: rgba(255, 255, 255, 0.95);
+  background: #181c20;
+
+  // Content style
+  & > .tab-content {
+    & > .tab-pane {
+      padding: 10px;
+    }
+
+  }
+
+  // Toolbar style
+  & .toolbar {
+
+    & > .btn {
+      color: #fff;
+      background-color: $toolbar-btn-bg-color;
+      border: 1px solid $toolbar-btn-bg-color;
+      padding: .375rem .75rem;
+      border-radius: .25rem;
+      font-weight: 400;
+    }
+  }
+
+  // Navigation style
+  & > .nav {
+    background: #0D0F12;
+
+    .nav-link {
+      position: relative;
+      height: 100%;
+      min-height: 100%;
+
+      &::after {
+        content: "";
+        position: absolute;
+        height: 2px;
+        width: 100%;
+        left: 0px;
+        bottom: -1px;
+        background: $nav-inactive-secondary-color;
+        transition: all 250ms ease 0s;
+        transform: scale(0);
+      }
+
+      &.inactive {
+        color: $nav-inactive-secondary-color;
+        cursor: not-allowed;
+      }
+
+      &.active {
+        color: $nav-active-primary-color !important;
+        cursor: pointer;
+
+        &::after {
+          background: $nav-active-primary-color !important;
+          transform: scale(1);
+        }
+      }
+
+      &.done {
+        color: $nav-done-primary-color !important;
+        cursor: pointer;
+
+        &::after {
+          background: $nav-done-primary-color;
+          transform: scale(1);
+        }
+      }
+
+      &.disabled {
+        color: $nav-disabled-primary-color !important;
+        cursor: not-allowed;
+
+        &::after {
+          background: $nav-disabled-primary-color;
+        }
+      }
+
+      &.danger {
+        color: $nav-danger-primary-color !important;
+        cursor: pointer;
+
+        &::after {
+          background: $nav-danger-primary-color;
+        }
+      }
+    }
+
+  }
+
+}
diff --git a/src/scss/themes/_default.scss b/src/scss/themes/_default.scss
new file mode 100644
index 0000000..708f941
--- /dev/null
+++ b/src/scss/themes/_default.scss
@@ -0,0 +1,115 @@
+// Color Settings
+$container-border-color        : #eeeeee;
+
+$toolbar-bg-color              : rgba(0,0,0,.03);
+$toolbar-btn-bg-color          : #17a2b8;
+
+$nav-active-primary-color      : #17a2b8; // #17a2b8 #5bc0de
+$nav-active-secondary-color    : #ffffff;
+
+$nav-inactive-primary-color    : #f8f8f8;
+$nav-inactive-secondary-color  : #999999;
+
+$nav-done-primary-color        : #5cb85c;
+$nav-done-secondary-color      : #ffffff;
+
+$nav-disabled-primary-color    : #f9f9f9;
+$nav-disabled-secondary-color  : #eeeeee;
+
+$nav-danger-primary-color      : #d9534f;
+$nav-danger-secondary-color    : #ffffff;
+
+
+.sw-theme-default {
+  border: 1px solid $container-border-color;
+
+  // Content style
+  & > .tab-content {
+
+    & > .tab-pane {
+      padding: 10px;
+    }
+
+  }
+
+  // Toolbar style
+  & .toolbar {
+
+    & > .btn {
+      color: #fff;
+      background-color: $toolbar-btn-bg-color;
+      border: 1px solid $toolbar-btn-bg-color;
+      padding: .375rem .75rem;
+      border-radius: .25rem;
+      font-weight: 400;
+    }
+  }
+
+  // Navigation style
+  & > .nav {
+    box-shadow: 0 .125rem .25rem rgba(0,0,0,.1)!important;
+
+    .nav-link {
+      position: relative;
+      height: 100%;
+      min-height: 100%;
+
+      &::after {
+        content: "";
+        position: absolute;
+        height: 2px;
+        width: 100%;
+        left: 0px;
+        bottom: -1px;
+        background: $nav-inactive-secondary-color;
+        transition: all 250ms ease 0s;
+        transform: scale(0);
+      }
+
+      &.inactive {
+        color: $nav-inactive-secondary-color;
+        cursor: not-allowed;
+      }
+
+      &.active {
+        color: $nav-active-primary-color !important;
+        cursor: pointer;
+
+        &::after {
+          background: $nav-active-primary-color !important;
+          transform: scale(1);
+        }
+      }
+
+      &.done {
+        color: $nav-done-primary-color !important;
+        cursor: pointer;
+
+        &::after {
+          background: $nav-done-primary-color;
+          transform: scale(1);
+        }
+      }
+
+      &.disabled {
+        color: $nav-disabled-primary-color !important;
+        cursor: not-allowed;
+
+        &::after {
+          background: $nav-disabled-primary-color;
+        }
+      }
+
+      &.danger {
+        color: $nav-danger-primary-color !important;
+        cursor: pointer;
+
+        &::after {
+          background: $nav-danger-primary-color;
+        }
+      }
+    }
+
+  }
+
+}
diff --git a/src/scss/themes/_dots.scss b/src/scss/themes/_dots.scss
new file mode 100644
index 0000000..9b03e97
--- /dev/null
+++ b/src/scss/themes/_dots.scss
@@ -0,0 +1,150 @@
+// Color Settings
+$container-border-color        : #eeeeee;
+
+$toolbar-bg-color              : #f9f9f9;
+$toolbar-btn-bg-color          : #17a2b8;
+
+$nav-active-primary-color      : #5bc0de;
+$nav-active-secondary-color    : #ffffff;
+
+$nav-inactive-primary-color    : #f8f8f8;
+$nav-inactive-secondary-color  : #999999;
+
+$nav-done-primary-color        : #5cb85c;
+$nav-done-secondary-color      : #ffffff;
+
+$nav-disabled-primary-color    : #f9f9f9;
+$nav-disabled-secondary-color  : #eeeeee;
+
+$nav-danger-primary-color      : #d9534f;
+$nav-danger-secondary-color    : #ffffff;
+
+
+.sw-theme-dots {
+
+  // Content style
+  & > .tab-content {
+
+    & > .tab-pane {
+      padding: 10px;
+    }
+
+  }
+
+  // Toolbar style
+  & .toolbar {
+
+    & > .btn {
+      color: #fff;
+      background-color: $toolbar-btn-bg-color;
+      border: 1px solid $toolbar-btn-bg-color;
+      padding: .375rem .75rem;
+      border-radius: .25rem;
+      font-weight: 400;
+    }
+  }
+
+  // Navigation style
+  & > .nav {
+    position: relative;
+    margin-bottom: 10px;
+
+    &::before {
+      content: " ";
+      position: absolute;
+      top: 18px;
+      left: 0;
+      width: 100%;
+      height: 5px;
+      background-color: #eee;
+      border-radius: 3px;
+      z-index: 1;
+    }
+
+    .nav-link {
+      position: relative;
+      margin-top: 40px;
+
+      &::before {
+        content: " ";
+        position: absolute;
+        display: block;
+        top: -36px;
+        left: 0;
+        right: 0;
+        margin-left: auto;
+        margin-right: auto;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        border: none;
+        background: #f5f5f5;
+        color: #428bca;
+        text-decoration: none;
+        z-index: 98;
+      }
+
+      &::after {
+        content: " ";
+        position: absolute;
+        display: block;
+        top: -28px;
+        left: 0;
+        right: 0;
+        margin-left: auto;
+        margin-right: auto;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        z-index: 99;
+      }
+
+      &.inactive {
+        color: $nav-inactive-secondary-color;
+        cursor: not-allowed;
+
+        &::after {
+          background-color: $nav-inactive-secondary-color;
+        }
+      }
+
+      &.active {
+        color: $nav-active-primary-color !important;
+        cursor: pointer;
+
+        &::after {
+          background-color: $nav-active-primary-color !important;
+        }
+      }
+
+      &.done {
+        color: $nav-done-primary-color;
+        cursor: pointer;
+
+        &::after {
+          background-color: $nav-done-primary-color;
+        }
+      }
+
+      &.disabled {
+        color: $nav-disabled-primary-color;
+        cursor: not-allowed;
+
+        &::after {
+          background-color: $nav-disabled-primary-color;
+        }
+      }
+
+      &.danger {
+        color: $nav-danger-primary-color;
+        cursor: pointer;
+
+        &::after {
+          background-color: $nav-danger-primary-color;
+        }
+      }
+
+    }
+  }
+
+}
diff --git a/test/test-template.html b/test/test-template.html
index fbba55a..2a67b59 100644
--- a/test/test-template.html
+++ b/test/test-template.html
@@ -6,32 +6,45 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
     <body>
-        <div id="smartwizard">
-            <ul class="">
-                <li><a href="#step-1">Step 1<br /><small>This is step description</small></a></li>
-                <li><a href="#step-2"  data-content-url="./ajaxtest.php">Step 2<br /><small>This is step description</small></a></li>
-                <li><a href="#step-3"  data-content-url="./ajaxtest.php">Step 3<br /><small>This is step description</small></a></li>
-                <li><a href="#step-4">Step 4<br /><small>This is step description</small></a></li>
-            </ul>
+      <div id="smartwizard">
 
-            <div>
-                <div id="step-1" class="">
-                    <h2>Step 1 Content</h2>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </div>
-                <div id="step-2" class="">
-                    <h2>Step 2 Content</h2>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </div>
-                <div id="step-3" class="">
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </div>
-                <div id="step-4" class="">
-                    <h2>Step 4 Content</h2>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </div>
-            </div>
-        </div>
+          <ul class="nav">
+              <li class="nav-item">
+                <a class="nav-link" href="#step-1">
+                  <strong>Step 1</strong> This is step description
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#step-2">
+                  <strong>Step 2</strong> This is step description
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#step-3">
+                  <strong>Step 3</strong> This is step description
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#step-4">
+                  <strong>Step 4</strong> This is step description
+                </a>
+              </li>
+          </ul>
+
+          <div class="tab-content">
+              <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
+                  Step 1 Content
+              </div>
+              <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
+                  Step 2 Content
+              </div>
+              <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
+                  Step 3 Content
+              </div>
+              <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
+                  Step 4 Content
+              </div>
+          </div>
+      </div>
     </body>
 </html>
diff --git a/test/test.js b/test/test.js
index af8790f..60fccc0 100644
--- a/test/test.js
+++ b/test/test.js
@@ -1,12 +1,12 @@
 describe('SmartWizard Default Options', function() {
-    var el, plugin;
+    var el;
 
     beforeEach(function(){
         jasmine.getFixtures().fixturesPath = 'base/test';
         loadFixtures('test-template.html');
 
         el = $('#smartwizard');
-        plugin = el.smartWizard();
+        el.smartWizard();
     });
 
     afterEach(function(){
@@ -14,41 +14,31 @@ describe('SmartWizard Default Options', function() {
         el = null;
     });
 
+    it('should add default class to the element', function() {
+        expect(el).toHaveClass("sw");
+    });
+
     it('should add default theme to the element', function() {
         expect(el).toHaveClass("sw-theme-default");
     });
 
     it('should add toolbar elements', function() {
-        expect(el.children('.sw-toolbar')).toExist();
-        expect(el.children('.sw-toolbar').children('.sw-btn-group').children('.sw-btn-next')).toExist();
-        expect(el.children('.sw-toolbar').children('.sw-btn-group').children('.sw-btn-prev')).toExist();
-    });
-
-    it('should have step anchors', function() {
-        expect(el.children('ul').children('li').children('a')).toExist();
-    });
-
-    it('should have step contents', function() {
-        expect(el.children('div').children('div')).toExist();
-    });
-
-    it('should have step anchors step contents are equal numbers', function() {
-        var a = el.children('ul').children('li').children('a');
-        var c = el.children('div:first').children('div');
-        expect(a.length).toBe(c.length);
+        expect(el.find('.toolbar')).toExist();
+        expect(el.find('.toolbar').find('.sw-btn-next')).toExist();
+        expect(el.find('.toolbar').find('.sw-btn-prev')).toExist();
     });
 
 });
 
 describe('SmartWizard Navigation', function() {
-    var el, plugin;
+    var el;
 
     beforeEach(function(){
         jasmine.getFixtures().fixturesPath = 'base/test';
         loadFixtures('test-template.html');
 
         el = $('#smartwizard');
-        plugin = el.smartWizard();
+        el.smartWizard();
     });
 
     afterEach(function(){
@@ -56,9 +46,12 @@ describe('SmartWizard Navigation', function() {
         el = null;
     });
 
-    it('should point to the first step', function() {
-        expect(el.children('ul').children('li:first')).toHaveClass("active");
-        expect(el.children('ul').children('li :not(:first)')).not.toHaveClass("active");
+    it('should show the first step', function() {
+        expect(el.find('.nav').find('.nav-link').first()).toHaveClass("active");
+    });
+
+    it('should not show other steps', function() {
+        expect(el.find('.nav').find('.nav-link:not(:first)')).not.toHaveClass("active");
     });
 
 });