diff --git a/package.json b/package.json
index 8fff7a1..2cc6312 100644
--- a/package.json
+++ b/package.json
@@ -63,10 +63,10 @@
     "shx": "^0.2.1",
     "svgo": "^1.3.2",
     "time-grunt": "^1.4.0",
-    "webpack-dev-server": "^3.1"
+    "webpack-dev-server": "^3.11.2"
   },
   "engines": {
-    "node": ">=4"
+    "node": "12"
   },
   "files": [
     "dist",
@@ -74,5 +74,5 @@
     "scss/**/*.scss",
     "Gruntfile.js",
     "LICENSE"
-  ]
+  ],
 }
diff --git a/scss/apnscp/_icons-actions.scss b/scss/apnscp/_icons-actions.scss
index e8d344b..e512862 100644
--- a/scss/apnscp/_icons-actions.scss
+++ b/scss/apnscp/_icons-actions.scss
@@ -346,4 +346,12 @@
 
 .ui-action-revert-login {
   @extend .fa-users;
+}
+
+.ui-action-sort-desc, .ui-action-sort {
+  @extend .fa-sort-amount-desc;
+}
+
+.ui-action-sort-asc {
+  @extend .fa-sort-amount-asc;
 }
\ No newline at end of file
diff --git a/scss/apnscp/_layout.scss b/scss/apnscp/_layout.scss
index 4aaf7fa..ab8c075 100644
--- a/scss/apnscp/_layout.scss
+++ b/scss/apnscp/_layout.scss
@@ -790,4 +790,9 @@ a[rel=external]:after {
   vertical-align: middle;
   font-size: 0.75em;
   margin-left: 0.35em;
+}
+
+[role=button] {
+  cursor: pointer;
+  user-select: none;
 }
\ No newline at end of file
diff --git a/scss/apnscp/_tour.scss b/scss/apnscp/_tour.scss
new file mode 100644
index 0000000..8cba3d4
--- /dev/null
+++ b/scss/apnscp/_tour.scss
@@ -0,0 +1,375 @@
+/*
+ Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
+ Changed by Afshin Mehrabani
+*/
+/* overrides extra padding on button elements in Firefox */
+
+@keyframes introjspulse {
+  0% {
+	transform: scale(0);
+	opacity: 0;
+  }
+  25% {
+	transform: scale(0);
+	opacity: 0.1;
+  }
+  50% {
+	transform: scale(0.1);
+	opacity: 0.3;
+  }
+  75% {
+	transform: scale(0.5);
+	opacity: 0.5;
+  }
+  100% {
+	transform: scale(1);
+	opacity: 0;
+  }
+}
+
+.introjs-overlay {
+  position: absolute;
+  box-sizing: content-box;
+  z-index: 999999;
+  opacity: 0;
+  transition: all 0.3s ease-out;
+}
+
+.introjs-showElement {
+  z-index: 9999999 !important;
+}
+
+tr.introjs-showElement {
+  > td {
+	z-index: 9999999 !important;
+	position: relative;
+  }
+
+  > th {
+	z-index: 9999999 !important;
+	position: relative;
+  }
+}
+
+.introjs-disableInteraction {
+  z-index: 99999999 !important;
+  position: absolute;
+  background-color: $body-bg;
+  opacity: 0;
+  filter: alpha(opacity=0);
+}
+
+.introjs-relativePosition {
+  position: relative;
+}
+
+.introjs-helperLayer {
+  box-sizing: content-box;
+  position: absolute;
+  z-index: 9999998;
+  border-radius: 4px;
+  transition: all 0.3s ease-out;
+
+  * {
+	box-sizing: content-box;
+
+	&:before {
+	  box-sizing: content-box;
+	}
+
+	&:after {
+	  box-sizing: content-box;
+	}
+  }
+}
+
+.introjs-tooltipReferenceLayer {
+  font-family: $font-family-base;
+  box-sizing: content-box;
+  position: absolute;
+  visibility: hidden;
+  z-index: 100000000;
+  background-color: transparent;
+  transition: all 0.3s ease-out;
+
+  * {
+	font-family: $font-family-base;
+  }
+}
+
+.introjs-helperNumberLayer {
+  font-family: $font-family-base;
+  color: $gray;
+  text-align: center;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.introjs-arrow {
+  border: 5px solid transparent;
+  content: "";
+  position: absolute;
+}
+
+.introjs-arrow.top {
+  top: -10px;
+  left: 10px;
+  border-bottom-color: $white;
+}
+
+.introjs-arrow.top-right {
+  top: -10px;
+  right: 10px;
+  border-bottom-color: $white;
+}
+
+.introjs-arrow.top-middle {
+  top: -10px;
+  left: 50%;
+  margin-left: -5px;
+  border-bottom-color: $white;
+}
+
+.introjs-arrow.right {
+  right: -10px;
+  top: 10px;
+  border-left-color: $white;
+}
+
+.introjs-arrow.right-bottom {
+  bottom: 10px;
+  right: -10px;
+  border-left-color: $white;
+}
+
+.introjs-arrow.bottom {
+  bottom: -10px;
+  left: 10px;
+  border-top-color: $white;
+}
+
+.introjs-arrow.bottom-right {
+  bottom: -10px;
+  right: 10px;
+  border-top-color: $white;
+}
+
+.introjs-arrow.bottom-middle {
+  bottom: -10px;
+  left: 50%;
+  margin-left: -5px;
+  border-top-color: $white;
+}
+
+.introjs-arrow.left {
+  left: -10px;
+  top: 10px;
+  border-right-color: $white;
+}
+
+.introjs-arrow.left-bottom {
+  left: -10px;
+  bottom: 10px;
+  border-right-color: $white;
+}
+
+.introjs-tooltip {
+  box-sizing: content-box;
+  position: absolute;
+  visibility: visible;
+  background-color: $body-bg;
+  min-width: 250px;
+  max-width: 300px;
+  border-radius: 5px;
+  box-shadow: 0 3px 30px rgba($gray-dark, 0.3);
+  transition: opacity 0.1s ease-out;
+}
+
+.introjs-tooltiptext {
+  padding: 20px;
+}
+
+.introjs-tooltip-title {
+  font-size: 18px;
+  margin: 0;
+  padding: 0;
+  font-weight: 700;
+  float: left;
+  line-height: 32px;
+}
+
+.introjs-tooltip-header {
+  @extend .modal-header;
+  @extend .clearfix;
+}
+
+.introjs-tooltipbuttons {
+  white-space: nowrap;
+  @extend .modal-footer;
+  @extend .clearfix;
+}
+
+.introjs-skipbutton {
+  text-decoration: none;
+  margin-left: auto;
+  @extend .close;
+}
+
+.introjs-prevbutton {
+  @extend .btn-secondary;
+  float: left;
+  margin-right: auto !important;
+}
+
+.introjs-nextbutton {
+  @extend .btn-primary;
+  float: right;
+}
+
+.introjs-disabled {
+  @extend .disabled;
+}
+
+.introjs-hidden {
+  display: none;
+}
+
+.introjs-bullets {
+  text-align: center;
+  padding-top: 10px;
+  padding-bottom: 10px;
+
+  ul {
+	box-sizing: content-box;
+	clear: both;
+	margin: 0 auto 0;
+	padding: 0;
+	display: inline-block;
+
+	li {
+	  box-sizing: content-box;
+	  list-style: none;
+	  float: left;
+	  margin: 0 2px;
+
+	  a {
+		transition: width 0.1s ease-in;
+		box-sizing: content-box;
+		display: block;
+		width: 6px;
+		height: 6px;
+		background: #ccc;
+		border-radius: 10px;
+		text-decoration: none;
+		cursor: pointer;
+
+		&:hover,
+		&:focus {
+		  width: 15px;
+		  background: #999;
+		  text-decoration: none;
+		  outline: none;
+		}
+	  }
+
+	  a.active {
+		width: 15px;
+		background: #999;
+	  }
+	}
+  }
+}
+
+.introjs-progress {
+  box-sizing: content-box;
+  overflow: hidden;
+  height: 10px;
+  margin: 10px;
+  border-radius: 4px;
+  background-color: $body-bg;
+}
+
+.introjs-progressbar {
+  box-sizing: content-box;
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 10px;
+  line-height: 10px;
+  text-align: center;
+  background-color: $brand-primary;
+}
+
+.introjsFloatingElement {
+  position: absolute;
+  height: 0;
+  width: 0;
+  left: 50%;
+  top: 50%;
+}
+
+.introjs-fixedTooltip {
+  position: fixed;
+}
+
+.introjs-hint {
+  box-sizing: content-box;
+  position: absolute;
+  background: transparent;
+  width: 20px;
+  height: 15px;
+  cursor: pointer;
+
+  &:focus {
+	border: 0;
+	outline: 0;
+  }
+
+  &:hover {
+	> .introjs-hint-pulse {
+	  border: 5px solid rgba(60, 60, 60, 0.57);
+	}
+  }
+}
+
+.introjs-hidehint {
+  display: none;
+}
+
+.introjs-fixedhint {
+  position: fixed;
+}
+
+.introjs-hint-pulse {
+  box-sizing: content-box;
+  width: 10px;
+  height: 10px;
+  border: 5px solid rgba(60, 60, 60, 0.27);
+  border-radius: 30px;
+  background-color: $brand-secondary;
+  z-index: 10;
+  position: absolute;
+  transition: all 0.2s ease-out;
+}
+
+.introjs-hint-no-anim {
+  .introjs-hint-dot {
+	animation: none;
+  }
+}
+
+.introjs-hint-dot {
+  box-sizing: content-box;
+  border: 10px solid rgba(146, 146, 146, 0.36);
+  background: transparent;
+  border-radius: 60px;
+  height: 50px;
+  width: 50px;
+  animation: introjspulse 3s ease-out;
+  animation-iteration-count: infinite;
+  position: absolute;
+  top: -25px;
+  left: -25px;
+  z-index: 1;
+  opacity: 0;
+}
\ No newline at end of file
diff --git a/scss/apnscp/apnscp.scss b/scss/apnscp/apnscp.scss
index b859da5..08da8a8 100644
--- a/scss/apnscp/apnscp.scss
+++ b/scss/apnscp/apnscp.scss
@@ -27,6 +27,7 @@
 
 @import "bootstrap-overrides";
 @import "application-overrides";
+@import "tour";
 
 @import "apps/login";
 @import "apps/dashboard";
@@ -36,4 +37,4 @@
 @import "apps/usermanage";
 @import "apps/useredit";
 @import "apps/error";
-@import "apps/majordomo";
\ No newline at end of file
+@import "apps/majordomo";