diff --git a/src/css/main.css b/src/css/main.css
index 5832b35..31934e5 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1,60 +1,36 @@
 @-webkit-keyframes swing {
-  0% {
+  0%, 30%, 50%, 70%, 100% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg); }
   10% {
     -webkit-transform: rotate(10deg);
     transform: rotate(10deg); }
-  30% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg); }
   40% {
     -webkit-transform: rotate(-10deg);
     transform: rotate(-10deg); }
-  50% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg); }
   60% {
     -webkit-transform: rotate(5deg);
     transform: rotate(5deg); }
-  70% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg); }
   80% {
     -webkit-transform: rotate(-5deg);
-    transform: rotate(-5deg); }
-  100% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg); } }
+    transform: rotate(-5deg); } }
 
 @keyframes swing {
-  0% {
+  0%, 30%, 50%, 70%, 100% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg); }
   10% {
     -webkit-transform: rotate(10deg);
     transform: rotate(10deg); }
-  30% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg); }
   40% {
     -webkit-transform: rotate(-10deg);
     transform: rotate(-10deg); }
-  50% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg); }
   60% {
     -webkit-transform: rotate(5deg);
     transform: rotate(5deg); }
-  70% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg); }
   80% {
     -webkit-transform: rotate(-5deg);
-    transform: rotate(-5deg); }
-  100% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg); } }
+    transform: rotate(-5deg); } }
 
 @-webkit-keyframes sonar {
   0% {
@@ -76,19 +52,16 @@
     transform: scale(2);
     opacity: 0; } }
 
-body {
-  font-size: .9rem; }
-
 .sidebar-wrapper {
   width: 280px;
   height: 100%;
   max-height: 100%;
   position: fixed;
   top: 0;
-  left: -300px;
+  left: -280px;
   z-index: 999;
-  -webkit-transition: left .3s ease,width .3s ease;
-  transition: left .3s ease,width .3s ease; }
+  -webkit-transition: left .3s ease, width .3s ease;
+  transition: left .3s ease, width .3s ease; }
   .sidebar-wrapper ul {
     list-style-type: none;
     padding: 0;
@@ -101,7 +74,7 @@ body {
     -webkit-transition: all .3s linear;
     transition: all .3s linear; }
   .sidebar-wrapper .sidebar-content {
-    max-height: calc(100% - 35px);
+    max-height: calc(100% -35px);
     height: calc(100% - 35px);
     overflow-y: scroll;
     position: relative; }
@@ -109,135 +82,153 @@ body {
       overflow-y: hidden; }
   .sidebar-wrapper .badge {
     border-radius: 0; }
-  .sidebar-wrapper .sidebar-brand {
-    padding: 10px 20px;
+
+.sidebar-bg .sidebar-wrapper {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat; }
+  .sidebar-bg .sidebar-wrapper:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0; }
+
+.sidebar-wrapper .sidebar-brand {
+  padding: 1rem 1.2rem;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 55px; }
+  .sidebar-wrapper .sidebar-brand > a {
+    text-transform: uppercase;
+    font-weight: bold;
+    -webkit-box-flex: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis; }
+
+.sidebar-wrapper .sidebar-header {
+  padding: 20px;
+  overflow: hidden; }
+  .sidebar-wrapper .sidebar-header .user-pic {
+    width: 60px;
+    padding: 2px;
+    margin-right: 15px;
+    overflow: hidden; }
+    .sidebar-wrapper .sidebar-header .user-pic img {
+      -o-object-fit: cover;
+      object-fit: cover;
+      height: 100%;
+      width: 100%; }
+  .sidebar-wrapper .sidebar-header .user-info {
+    overflow: hidden; }
+    .sidebar-wrapper .sidebar-header .user-info > span {
+      display: block;
+      white-space: nowrap;
+      text-overflow: ellipsis; }
+    .sidebar-wrapper .sidebar-header .user-info .user-role {
+      font-size: 12px; }
+    .sidebar-wrapper .sidebar-header .user-info .user-status {
+      font-size: 11px;
+      margin-top: 4px; }
+      .sidebar-wrapper .sidebar-header .user-info .user-status i {
+        font-size: 8px;
+        margin-right: 4px;
+        color: #5cb85c; }
+
+.sidebar-wrapper .sidebar-search > div {
+  padding: 1rem 1.2rem; }
+
+.sidebar-wrapper .sidebar-search input {
+  border-radius: 0; }
+
+.sidebar-wrapper .sidebar-search .input-group {
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap; }
+
+.sidebar-wrapper .sidebar-search .input-group-append .input-group-text {
+  border-radius: 0;
+  border-left: 0; }
+
+.sidebar-wrapper .sidebar-menu {
+  padding-bottom: 10px; }
+  .sidebar-wrapper .sidebar-menu .header-menu span {
+    font-weight: bold;
+    font-size: 14px;
+    padding: 15px 20px 5px 20px;
+    display: inline-block; }
+  .sidebar-wrapper .sidebar-menu ul li a {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+    -ms-flex-wrap: nowrap;
+    flex-wrap: nowrap;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
-    height: 55px; }
-    .sidebar-wrapper .sidebar-brand > a {
-      text-transform: uppercase;
-      font-weight: bold;
+    text-decoration: none;
+    position: relative;
+    padding: 8px 30px 8px 20px;
+    width: 100%; }
+    .sidebar-wrapper .sidebar-menu ul li a:hover > i::before {
+      display: inline-block;
+      -webkit-animation: swing ease-in-out .5s 1 alternate;
+      animation: swing ease-in-out .5s 1 alternate; }
+    .sidebar-wrapper .sidebar-menu ul li a i {
+      margin-right: 10px;
+      font-size: 12px;
+      width: 35px;
+      height: 35px;
+      line-height: 35px;
+      text-align: center;
+      -ms-flex-negative: 0;
+      flex-shrink: 0; }
+    .sidebar-wrapper .sidebar-menu ul li a .menu-text {
       -webkit-box-flex: 1;
       -ms-flex-positive: 1;
       flex-grow: 1;
-      overflow: hidden;
       white-space: nowrap;
-      text-overflow: ellipsis; }
-    .sidebar-wrapper .sidebar-brand #close-sidebar {
-      cursor: pointer;
-      font-size: 20px;
-      -webkit-transition: color .3s ease;
-      transition: color .3s ease; }
-  .sidebar-wrapper .sidebar-header {
-    padding: 20px;
-    overflow: hidden; }
-    .sidebar-wrapper .sidebar-header .user-pic {
-      width: 60px;
-      padding: 2px;
-      margin-right: 15px;
+      text-overflow: ellipsis;
+      -ms-flex-negative: 1;
+      flex-shrink: 1;
       overflow: hidden; }
-      .sidebar-wrapper .sidebar-header .user-pic img {
-        -o-object-fit: cover;
-        object-fit: cover;
-        height: 100%;
-        width: 100%; }
-    .sidebar-wrapper .sidebar-header .user-info {
-      overflow: hidden; }
-      .sidebar-wrapper .sidebar-header .user-info > span {
-        display: block;
+  .sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    content: "\f105";
+    display: inline-block;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    background: 0 0;
+    position: absolute;
+    right: 15px;
+    top: 14px;
+    -webkit-transition: -webkit-transform .3s ease;
+    transition: -webkit-transform .3s ease;
+    transition: transform .3s ease;
+    transition: transform .3s ease, -webkit-transform .3s ease; }
+  .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu {
+    display: none; }
+    .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
+      padding: 5px 0; }
+    .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
+      padding-left: 25px;
+      font-size: 13px; }
+      .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a {
+        overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis; }
-      .sidebar-wrapper .sidebar-header .user-info .user-role {
-        font-size: 12px; }
-      .sidebar-wrapper .sidebar-header .user-info .user-status {
-        font-size: 11px;
-        margin-top: 4px; }
-        .sidebar-wrapper .sidebar-header .user-info .user-status i {
-          font-size: 8px;
-          margin-right: 4px;
-          color: #5cb85c; }
-  .sidebar-wrapper .sidebar-search > div {
-    padding: 10px 20px; }
-  .sidebar-wrapper .sidebar-search input {
-    border-radius: 0; }
-  .sidebar-wrapper .sidebar-search .input-group {
-    -ms-flex-wrap: nowrap;
-    flex-wrap: nowrap; }
-  .sidebar-wrapper .sidebar-search .input-group-append .input-group-text {
-    border-radius: 0;
-    border-left: 0; }
-  .sidebar-wrapper .sidebar-menu {
-    padding-bottom: 10px; }
-    .sidebar-wrapper .sidebar-menu .header-menu span {
-      font-weight: bold;
-      font-size: 14px;
-      padding: 15px 20px 5px 20px;
-      display: inline-block; }
-    .sidebar-wrapper .sidebar-menu ul li a {
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      -ms-flex-wrap: nowrap;
-      flex-wrap: nowrap;
-      -webkit-box-align: center;
-      -ms-flex-align: center;
-      align-items: center;
-      text-decoration: none;
-      position: relative;
-      padding: 8px 30px 8px 20px;
-      width: 100%; }
-      .sidebar-wrapper .sidebar-menu ul li a:hover > i::before {
-        display: inline-block;
-        -webkit-animation: swing ease-in-out .5s 1 alternate;
-        animation: swing ease-in-out .5s 1 alternate; }
-      .sidebar-wrapper .sidebar-menu ul li a i {
-        margin-right: 10px;
-        font-size: 12px;
-        width: 35px;
-        height: 35px;
-        line-height: 35px;
-        text-align: center;
-        -ms-flex-negative: 0;
-        flex-shrink: 0; }
-      .sidebar-wrapper .sidebar-menu ul li a .menu-text {
-        -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-        flex-grow: 1;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        -ms-flex-negative: 1;
-        flex-shrink: 1;
-        overflow: hidden; }
-    .sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
-      font-family: "Font Awesome 5 Free";
-      font-weight: 900;
-      content: "\f105";
-      display: inline-block;
-      font-style: normal;
-      font-variant: normal;
-      text-rendering: auto;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      text-align: center;
-      background: 0 0;
-      position: absolute;
-      right: 15px;
-      top: 14px;
-      -webkit-transition: -webkit-transform .3s ease;
-      transition: -webkit-transform .3s ease;
-      transition: transform .3s ease;
-      transition: transform .3s ease, -webkit-transform .3s ease; }
-    .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu {
-      display: none; }
-      .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
-        padding: 5px 0; }
-      .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
-        padding-left: 25px;
-        font-size: 13px; }
         .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {
           content: "\f111";
           font-family: "Font Awesome 5 Free";
@@ -253,133 +244,125 @@ body {
         .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
         .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
           margin-left: auto; }
-    .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
-      -webkit-transform: rotate(90deg);
-      transform: rotate(90deg);
-      right: 15px; }
-  .sidebar-wrapper .sidebar-footer {
-    position: absolute;
-    width: 100%;
-    bottom: 0;
+  .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    right: 15px; }
+
+.sidebar-wrapper .sidebar-footer {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex; }
+  .sidebar-wrapper .sidebar-footer > div {
+    -webkit-box-flex: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+    text-align: center;
+    height: 35px;
+    line-height: 35px;
+    position: static;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex; }
-    .sidebar-wrapper .sidebar-footer > div {
+    .sidebar-wrapper .sidebar-footer > div > a {
       -webkit-box-flex: 1;
       -ms-flex-positive: 1;
-      flex-grow: 1;
-      text-align: center;
-      height: 35px;
-      line-height: 35px;
-      position: static;
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex; }
-      .sidebar-wrapper .sidebar-footer > div > a {
-        -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-        flex-grow: 1; }
-      .sidebar-wrapper .sidebar-footer > div a .notification {
-        position: absolute;
-        top: 0; }
-      .sidebar-wrapper .sidebar-footer > div.pinned-footer {
-        display: none; }
-    .sidebar-wrapper .sidebar-footer .dropdown-menu {
-      bottom: 36px;
-      left: 0 !important;
-      top: initial !important;
-      right: 0;
-      -webkit-transform: none !important;
-      transform: none !important;
-      border-radius: 0;
-      font-size: .9rem; }
-    .sidebar-wrapper .sidebar-footer .messages .dropdown-item {
-      padding: .25rem 1rem; }
-    .sidebar-wrapper .sidebar-footer .messages .messages-header {
-      padding: 0 1rem; }
-    .sidebar-wrapper .sidebar-footer .messages .message-content {
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex; }
-      .sidebar-wrapper .sidebar-footer .messages .message-content .pic {
-        width: 40px;
-        height: 40px;
-        overflow: hidden; }
-        .sidebar-wrapper .sidebar-footer .messages .message-content .pic img {
-          -o-object-fit: cover;
-          object-fit: cover;
-          height: 100%; }
-      .sidebar-wrapper .sidebar-footer .messages .message-content .content {
-        line-height: 1.6;
-        padding-left: 5px;
-        width: calc(100% - 40px); }
-        .sidebar-wrapper .sidebar-footer .messages .message-content .content .message-title {
-          font-size: 13px; }
-        .sidebar-wrapper .sidebar-footer .messages .message-content .content .message-detail {
-          font-size: 12px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis; }
-    .sidebar-wrapper .sidebar-footer .notifications .dropdown-item {
-      padding: .25rem 1rem; }
-    .sidebar-wrapper .sidebar-footer .notifications .notifications-header {
-      padding: 0 1rem; }
-    .sidebar-wrapper .sidebar-footer .notifications .notification-content {
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex; }
-      .sidebar-wrapper .sidebar-footer .notifications .notification-content .icon {
-        width: 40px;
-        height: 40px; }
-        .sidebar-wrapper .sidebar-footer .notifications .notification-content .icon i {
-          width: 35px;
-          height: 35px;
-          text-align: center;
-          line-height: 35px; }
-      .sidebar-wrapper .sidebar-footer .notifications .notification-content .content {
-        line-height: 1.6;
-        padding-left: 5px;
-        width: calc(100% - 40px); }
-        .sidebar-wrapper .sidebar-footer .notifications .notification-content .content .notification-time {
-          font-size: .7rem;
-          color: #828282; }
-        .sidebar-wrapper .sidebar-footer .notifications .notification-content .content .notification-detail {
-          font-size: 12px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis; }
-    .sidebar-wrapper .sidebar-footer .badge-sonar {
-      display: inline-block;
-      background: #980303;
-      border-radius: 50%;
-      height: 8px;
-      width: 8px;
+      flex-grow: 1; }
+    .sidebar-wrapper .sidebar-footer > div a .notification {
       position: absolute;
       top: 0; }
-      .sidebar-wrapper .sidebar-footer .badge-sonar:after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        border: 2px solid #980303;
-        opacity: 0;
-        border-radius: 50%;
-        width: 100%;
-        height: 100%;
-        -webkit-animation: sonar 1.5s infinite;
-        animation: sonar 1.5s infinite; }
-
-.sidebar-bg .sidebar-wrapper {
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat; }
-  .sidebar-bg .sidebar-wrapper:before {
-    content: '';
-    position: absolute;
-    top: 0;
+    .sidebar-wrapper .sidebar-footer > div.pinned-footer {
+      display: none; }
+  .sidebar-wrapper .sidebar-footer .dropdown-menu {
+    bottom: 36px;
+    left: 0 !important;
+    top: initial !important;
     right: 0;
-    bottom: 0;
-    left: 0; }
+    -webkit-transform: none !important;
+    transform: none !important;
+    border-radius: 0;
+    font-size: .9rem; }
+  .sidebar-wrapper .sidebar-footer .messages .dropdown-item {
+    padding: .25rem 1rem; }
+  .sidebar-wrapper .sidebar-footer .messages .messages-header {
+    padding: 0 1rem; }
+  .sidebar-wrapper .sidebar-footer .messages .message-content {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex; }
+    .sidebar-wrapper .sidebar-footer .messages .message-content .pic {
+      width: 40px;
+      height: 40px;
+      overflow: hidden; }
+      .sidebar-wrapper .sidebar-footer .messages .message-content .pic img {
+        -o-object-fit: cover;
+        object-fit: cover;
+        height: 100%; }
+    .sidebar-wrapper .sidebar-footer .messages .message-content .content {
+      line-height: 1.6;
+      padding-left: 5px;
+      width: calc(100% - 40px); }
+      .sidebar-wrapper .sidebar-footer .messages .message-content .content .message-title {
+        font-size: 13px; }
+      .sidebar-wrapper .sidebar-footer .messages .message-content .content .message-detail {
+        font-size: 12px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis; }
+  .sidebar-wrapper .sidebar-footer .notifications .dropdown-item {
+    padding: .25rem 1rem; }
+  .sidebar-wrapper .sidebar-footer .notifications .notifications-header {
+    padding: 0 1rem; }
+  .sidebar-wrapper .sidebar-footer .notifications .notification-content {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex; }
+    .sidebar-wrapper .sidebar-footer .notifications .notification-content .icon {
+      width: 40px;
+      height: 40px; }
+      .sidebar-wrapper .sidebar-footer .notifications .notification-content .icon i {
+        width: 35px;
+        height: 35px;
+        text-align: center;
+        line-height: 35px; }
+    .sidebar-wrapper .sidebar-footer .notifications .notification-content .content {
+      line-height: 1.6;
+      padding-left: 5px;
+      width: calc(100% - 40px); }
+      .sidebar-wrapper .sidebar-footer .notifications .notification-content .content .notification-time {
+        font-size: .7rem;
+        color: #828282; }
+      .sidebar-wrapper .sidebar-footer .notifications .notification-content .content .notification-detail {
+        font-size: 12px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis; }
+  .sidebar-wrapper .sidebar-footer .badge-sonar {
+    display: inline-block;
+    background: #980303;
+    border-radius: 50%;
+    height: 8px;
+    width: 8px;
+    position: absolute;
+    top: 0; }
+    .sidebar-wrapper .sidebar-footer .badge-sonar:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      border: 2px solid #980303;
+      opacity: 0;
+      border-radius: 50%;
+      width: 100%;
+      height: 100%;
+      -webkit-animation: sonar 1.5s infinite;
+      animation: sonar 1.5s infinite; }
+
+body {
+  font-size: .9rem; }
 
 /*----------------page-wrapper----------------*/
 .page-wrapper {
@@ -428,6 +411,9 @@ body {
   @media screen and (max-width: 768px) {
     .page-wrapper.toggled .page-content .overlay {
       display: block; } }
+  @media screen and (min-width: 768px) {
+    .page-wrapper.toggled.pinned .page-content {
+      padding-left: 80px; } }
   .page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper {
     width: 80px; }
     .page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
@@ -450,9 +436,6 @@ body {
       height: 35px; }
     .page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-footer > div.pinned-footer {
       display: block; }
-  @media screen and (min-width: 768px) {
-    .page-wrapper.pinned:not(.sidebar-hovered) .page-content {
-      padding-left: 80px; } }
   .page-wrapper .mCSB_scrollTools {
     width: 6px; }
   .page-wrapper .mCSB_inside > .mCSB_container {
diff --git a/src/sass/_animation.scss b/src/sass/_animation.scss
new file mode 100644
index 0000000..4ed50ae
--- /dev/null
+++ b/src/sass/_animation.scss
@@ -0,0 +1,35 @@
+
+@keyframes swing {
+    0%,30%,50%,70%,100% {
+        transform: rotate(0deg);
+    }
+
+    10% {
+        transform: rotate(10deg);
+    }
+
+
+    40% {
+        transform: rotate(-10deg);
+    }
+
+    60% {
+        transform: rotate(5deg);
+    }
+
+    80% {
+        transform: rotate(-5deg);
+    }
+}
+
+@keyframes sonar {
+    0% {
+        transform: scale(.9);
+        opacity: 1;
+    }
+
+    100% {
+        transform: scale(2);
+        opacity: 0;
+    }
+}
\ No newline at end of file
diff --git a/src/sass/_sidebar-brand.scss b/src/sass/_sidebar-brand.scss
index 0f7b437..edf89ec 100644
--- a/src/sass/_sidebar-brand.scss
+++ b/src/sass/_sidebar-brand.scss
@@ -1,21 +1,18 @@
-.sidebar-brand {
-    padding: 10px 20px;
-    display: flex;
-    align-items: center;
-    height: 55px;
+.sidebar-wrapper {
 
-    >a {
-        text-transform: uppercase;
-        font-weight: bold;
-        flex-grow: 1;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
+    .sidebar-brand {
+        padding: 1rem 1.2rem;
+        display: flex;
+        align-items: center;
+        height: $sidebar-brand-height;
 
-    #close-sidebar {
-        cursor: pointer;
-        font-size: 20px;
-        transition: color .3s ease;
+        >a {
+            text-transform: uppercase;
+            font-weight: bold;
+            flex-grow: 1;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/sass/_sidebar-footer.scss b/src/sass/_sidebar-footer.scss
index 782c2f0..d0eb084 100644
--- a/src/sass/_sidebar-footer.scss
+++ b/src/sass/_sidebar-footer.scss
@@ -1,153 +1,156 @@
-.sidebar-footer {
-    
-    position: absolute;
-    width: 100%;
-    bottom: 0;
-    display: flex;
-
-    >div {
-        flex-grow: 1;
-        text-align: center;
-        height: 35px;
-        line-height: 35px;
-        position: static;
+.sidebar-wrapper {
+
+    .sidebar-footer {
+
+        position: absolute;
+        width: 100%;
+        bottom: 0;
         display: flex;
 
-        >a {
+        >div {
             flex-grow: 1;
-        }
-
-        a .notification {
-            position: absolute;
-            top: 0;
-        }
+            text-align: center;
+            height: $sidebar-footer-height;
+            line-height: $sidebar-footer-height;
+            position: static;
+            display: flex;
 
-        &.pinned-footer{
-            display: none;
-        }
-    }
+            >a {
+                flex-grow: 1;
+            }
 
-    .dropdown-menu {
-        bottom: 36px;
-        left: 0 !important;
-        top: initial !important;
-        right: 0;
-        transform: none !important;
-        border-radius: 0;
-        font-size: .9rem;
-    }
+            a .notification {
+                position: absolute;
+                top: 0;
+            }
 
-    .messages {
-        .dropdown-item {
-            padding: .25rem 1rem;
+            &.pinned-footer {
+                display: none;
+            }
         }
 
-        .messages-header {
-            padding: 0 1rem;
+        .dropdown-menu {
+            bottom: 36px;
+            left: 0 !important;
+            top: initial !important;
+            right: 0;
+            transform: none !important;
+            border-radius: 0;
+            font-size: .9rem;
         }
 
-        .message-content {
-            display: flex;
-
-            .pic {
-                width: 40px;
-                height: 40px;
-                overflow: hidden;
+        .messages {
+            .dropdown-item {
+                padding: .25rem 1rem;
+            }
 
-                img {
-                    object-fit: cover;
-                    height: 100%;
-                }
+            .messages-header {
+                padding: 0 1rem;
             }
 
-            .content {
-                line-height: 1.6;
-                padding-left: 5px;
-                width: calc(100% - 40px);
+            .message-content {
+                display: flex;
 
-                .message-title {
-                    font-size: 13px;
-                }
-
-                .message-detail {
-                    font-size: 12px;
-                    white-space: nowrap;
+                .pic {
+                    width: 40px;
+                    height: 40px;
                     overflow: hidden;
-                    text-overflow: ellipsis;
+
+                    img {
+                        object-fit: cover;
+                        height: 100%;
+                    }
                 }
 
-            }
-        }
+                .content {
+                    line-height: 1.6;
+                    padding-left: 5px;
+                    width: calc(100% - 40px);
 
-    }
+                    .message-title {
+                        font-size: 13px;
+                    }
 
-    .notifications {
-        .dropdown-item {
-            padding: .25rem 1rem;
-        }
+                    .message-detail {
+                        font-size: 12px;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
 
-        .notifications-header {
-            padding: 0 1rem;
-        }
+                }
+            }
 
-        .notification-content {
-            display: flex;
+        }
 
-            .icon {
-                width: 40px;
-                height: 40px;
+        .notifications {
+            .dropdown-item {
+                padding: .25rem 1rem;
+            }
 
-                i {
-                    width: 35px;
-                    height: 35px;
-                    text-align: center;
-                    line-height: 35px;
-                }
+            .notifications-header {
+                padding: 0 1rem;
             }
 
-            .content {
-                line-height: 1.6;
-                padding-left: 5px;
-                width: calc(100% - 40px);
+            .notification-content {
+                display: flex;
 
-                .notification-time {
-                    font-size: .7rem;
-                    color: #828282;
+                .icon {
+                    width: 40px;
+                    height: 40px;
+
+                    i {
+                        width: 35px;
+                        height: 35px;
+                        text-align: center;
+                        line-height: 35px;
+                    }
                 }
 
-                .notification-detail {
-                    font-size: 12px;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
+                .content {
+                    line-height: 1.6;
+                    padding-left: 5px;
+                    width: calc(100% - 40px);
+
+                    .notification-time {
+                        font-size: .7rem;
+                        color: #828282;
+                    }
+
+                    .notification-detail {
+                        font-size: 12px;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
                 }
             }
         }
-    }
 
 
-    .badge-sonar {
-        display: inline-block;
-        background: #980303;
-        border-radius: 50%;
-        height: 8px;
-        width: 8px;
-        position: absolute;
-        top: 0;
-
-        &:after {
-            content: '';
+        .badge-sonar {
+            display: inline-block;
+            background: #980303;
+            border-radius: 50%;
+            height: 8px;
+            width: 8px;
             position: absolute;
             top: 0;
-            left: 0;
-            border: 2px solid #980303;
-            opacity: 0;
-            border-radius: 50%;
-            width: 100%;
-            height: 100%;
-            animation: sonar 1.5s infinite;
+
+            &:after {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                border: 2px solid #980303;
+                opacity: 0;
+                border-radius: 50%;
+                width: 100%;
+                height: 100%;
+                animation: sonar 1.5s infinite;
+            }
         }
-    }
 
 
+    }
 }
\ No newline at end of file
diff --git a/src/sass/_sidebar-header.scss b/src/sass/_sidebar-header.scss
index d4d6c05..73baa1b 100644
--- a/src/sass/_sidebar-header.scss
+++ b/src/sass/_sidebar-header.scss
@@ -1,43 +1,46 @@
-.sidebar-header {
-    padding: 20px;
-    overflow: hidden;
-
-    .user-pic {
-        width: 60px;
-        padding: 2px;
-        margin-right: 15px;
+.sidebar-wrapper {
+
+    .sidebar-header {
+        padding: 20px;
         overflow: hidden;
 
-        img {
-            object-fit: cover;
-            height: 100%;
-            width: 100%;
+        .user-pic {
+            width: 60px;
+            padding: 2px;
+            margin-right: 15px;
+            overflow: hidden;
+
+            img {
+                object-fit: cover;
+                height: 100%;
+                width: 100%;
+            }
         }
-    }
 
-    .user-info {
-        overflow: hidden;
+        .user-info {
+            overflow: hidden;
 
-        >span {
-            display: block;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
+            >span {
+                display: block;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
 
-        .user-role {
-            font-size: 12px;
-        }
+            .user-role {
+                font-size: 12px;
+            }
 
-        .user-status {
-            font-size: 11px;
-            margin-top: 4px;
+            .user-status {
+                font-size: 11px;
+                margin-top: 4px;
 
-            i {
-                font-size: 8px;
-                margin-right: 4px;
-                color: #5cb85c;
+                i {
+                    font-size: 8px;
+                    margin-right: 4px;
+                    color: #5cb85c;
+                }
             }
         }
-    }
 
+    }
 }
\ No newline at end of file
diff --git a/src/sass/_sidebar-menu.scss b/src/sass/_sidebar-menu.scss
index 2afe00f..7179a0f 100644
--- a/src/sass/_sidebar-menu.scss
+++ b/src/sass/_sidebar-menu.scss
@@ -1,104 +1,109 @@
-.sidebar-menu {
-    padding-bottom: 10px;
+.sidebar-wrapper {
+    .sidebar-menu {
+        padding-bottom: 10px;
 
-    .header-menu span {
-        font-weight: bold;
-        font-size: 14px;
-        padding: 15px 20px 5px 20px;
-        display: inline-block;
-    }
-
-    ul li a {
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-        text-decoration: none;
-        position: relative;
-        padding: 8px 30px 8px 20px;
-        width: 100%;
-
-        &:hover>i::before {
+        .header-menu span {
+            font-weight: bold;
+            font-size: 14px;
+            padding: 15px 20px 5px 20px;
             display: inline-block;
-            animation: swing ease-in-out .5s 1 alternate;
         }
 
-        i {
-            margin-right: 10px;
-            font-size: 12px;
-            width: 35px;
-            height: 35px;
-            line-height: 35px;
-            text-align: center;
-            flex-shrink: 0;
-        }
+        ul li a {
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            text-decoration: none;
+            position: relative;
+            padding: 8px 30px 8px 20px;
+            width: 100%;
 
-        .menu-text {
-            flex-grow: 1;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            flex-shrink: 1;
-            overflow: hidden;
-        }
-    }
+            &:hover>i::before {
+                display: inline-block;
+                animation: swing ease-in-out .5s 1 alternate;
+            }
 
-    .sidebar-dropdown {
-        >a:after {
-            font-family: "Font Awesome 5 Free";
-            font-weight: 900;
-            content: "\f105";
-            display: inline-block;
-            font-style: normal;
-            font-variant: normal;
-            text-rendering: auto;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-            text-align: center;
-            background: 0 0;
-            position: absolute;
-            right: 15px;
-            top: 14px;
-            transition: transform .3s ease;
+            i {
+                margin-right: 10px;
+                font-size: 12px;
+                width: 35px;
+                height: 35px;
+                line-height: 35px;
+                text-align: center;
+                flex-shrink: 0;
+            }
 
+            .menu-text {
+                flex-grow: 1;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                flex-shrink: 1;
+                overflow: hidden;
+            }
         }
 
-        .sidebar-submenu {
-            display: none;
+        .sidebar-dropdown {
+            >a:after {
+                font-family: "Font Awesome 5 Free";
+                font-weight: 900;
+                content: "\f105";
+                display: inline-block;
+                font-style: normal;
+                font-variant: normal;
+                text-rendering: auto;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                text-align: center;
+                background: 0 0;
+                position: absolute;
+                right: 15px;
+                top: 14px;
+                transition: transform .3s ease;
 
-            ul {
-                padding: 5px 0;
             }
 
-            li {
-                padding-left: 25px;
-                font-size: 13px;
+            .sidebar-submenu {
+                display: none;
 
-                a {
-                    &:before {
-                        content: "\f111";
-                        font-family: "Font Awesome 5 Free";
-                        font-weight: 400;
-                        font-style: normal;
-                        display: inline-block;
-                        text-align: center;
-                        text-decoration: none;
-                        -webkit-font-smoothing: antialiased;
-                        -moz-osx-font-smoothing: grayscale;
-                        margin-right: 10px;
-                        font-size: 8px;
-                    }
+                ul {
+                    padding: 5px 0;
+                }
+
+                li {
+                    padding-left: 25px;
+                    font-size: 13px;
+
+                    a {
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        &:before {
+                            content: "\f111";
+                            font-family: "Font Awesome 5 Free";
+                            font-weight: 400;
+                            font-style: normal;
+                            display: inline-block;
+                            text-align: center;
+                            text-decoration: none;
+                            -webkit-font-smoothing: antialiased;
+                            -moz-osx-font-smoothing: grayscale;
+                            margin-right: 10px;
+                            font-size: 8px;
+                        }
 
-                    .badge,
-                    .label {
-                        margin-left: auto;
+                        .badge,
+                        .label {
+                            margin-left: auto;
+                        }
                     }
                 }
             }
-        }
 
-        &.active>a:after {
-            transform: rotate(90deg);
-            right: 15px;
+            &.active>a:after {
+                transform: rotate(90deg);
+                right: 15px;
+            }
         }
-    }
 
+    }
 }
\ No newline at end of file
diff --git a/src/sass/_sidebar-search.scss b/src/sass/_sidebar-search.scss
index 05f57d3..4ca63cc 100644
--- a/src/sass/_sidebar-search.scss
+++ b/src/sass/_sidebar-search.scss
@@ -1,19 +1,23 @@
-.sidebar-search {
+.sidebar-wrapper {
 
-    >div {
-        padding: 10px 20px;
-    }
+    .sidebar-search {
 
-    input {
+        >div {            
+            padding: 1rem 1.2rem;
+        }
 
-        border-radius: 0;
-    }
-    .input-group{
-        flex-wrap: nowrap;
-    }
+        input {
+
+            border-radius: 0;
+        }
+
+        .input-group {
+            flex-wrap: nowrap;
+        }
 
-    .input-group-append .input-group-text {
-        border-radius: 0;
-        border-left: 0;
+        .input-group-append .input-group-text {
+            border-radius: 0;
+            border-left: 0;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/sass/_sidebar-wrapper.scss b/src/sass/_sidebar-wrapper.scss
index 9cb708d..f7b5f32 100644
--- a/src/sass/_sidebar-wrapper.scss
+++ b/src/sass/_sidebar-wrapper.scss
@@ -1,12 +1,13 @@
 .sidebar-wrapper {
-    width: 280px;
+    width: $sidebar-width;
     height: 100%;
     max-height: 100%;
     position: fixed;
     top: 0;
-    left: -300px;
+    left: -$sidebar-width;
     z-index: 999;
-    transition: left .3s ease,width .3s ease;
+    transition: left .3s ease, width .3s ease;
+
     ul {
         list-style-type: none;
         padding: 0;
@@ -17,12 +18,14 @@
         text-decoration: none;
         transition: color .3s ease;
     }
+
     .sidebar-item {
         transition: all .3s linear;
     }
+
     .sidebar-content {
-        max-height: calc(100% - 35px);
-        height: calc(100% - 35px);
+        max-height: calc(100% -#{$sidebar-footer-height});
+        height: calc(100% - #{$sidebar-footer-height});
         overflow-y: scroll;
         position: relative;
 
@@ -31,16 +34,9 @@
         }
     }
 
-    .badge{
+    .badge {
         border-radius: 0;
     }
-
-    @import "./sidebar-brand";
-    @import "./sidebar-header";
-    @import "./sidebar-search";
-    @import "./sidebar-menu";
-    @import "./sidebar-footer";
-
 }
 
 .sidebar-bg .sidebar-wrapper {
@@ -56,4 +52,10 @@
         bottom: 0;
         left: 0;
     }
-}
\ No newline at end of file
+}
+
+@import "./sidebar-brand";
+@import "./sidebar-header";
+@import "./sidebar-search";
+@import "./sidebar-menu";
+@import "./sidebar-footer";
\ No newline at end of file
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
new file mode 100644
index 0000000..2a6c978
--- /dev/null
+++ b/src/sass/_variables.scss
@@ -0,0 +1,5 @@
+$sidebar-width:280px;
+$sidebar-pinned-width:80px;
+$sidebar-brand-height:55px;
+$sidebar-footer-height:35px;
+$border-radius:4px;
\ No newline at end of file
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 909d9be..6152323 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -1,60 +1,11 @@
-@keyframes swing {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    10% {
-        transform: rotate(10deg);
-    }
-
-    30% {
-        transform: rotate(0deg);
-    }
-
-    40% {
-        transform: rotate(-10deg);
-    }
-
-    50% {
-        transform: rotate(0deg);
-    }
-
-    60% {
-        transform: rotate(5deg);
-    }
-
-    70% {
-        transform: rotate(0deg);
-    }
-
-    80% {
-        transform: rotate(-5deg);
-    }
-
-    100% {
-        transform: rotate(0deg);
-    }
-}
-
-@keyframes sonar {
-    0% {
-        transform: scale(.9);
-        opacity: 1;
-    }
-
-    100% {
-        transform: scale(2);
-        opacity: 0;
-    }
-}
+@import "./variables";
+@import "./animation";
+@import "./sidebar-wrapper";
 
 body {
     font-size: .9rem;
 }
 
-@import "./sidebar-wrapper";
-
-
 /*----------------page-wrapper----------------*/
 
 .page-wrapper {
@@ -126,7 +77,7 @@ body {
 
         .page-content {
             @media screen and (min-width: 768px) {
-                padding-left: 280px;
+                padding-left: $sidebar-width;
             }
 
             .overlay {
@@ -136,13 +87,21 @@ body {
                 }
             }
         }
+        &.pinned{
+            .page-content {
+
+                @media screen and (min-width: 768px) {
+                    padding-left: $sidebar-pinned-width;
+                }
+            }
+        }
 
     }
 
     &.pinned:not(.sidebar-hovered) {
 
         .sidebar-wrapper {
-            width: 80px;
+            width: $sidebar-pinned-width;
 
             .sidebar-header {
                 padding: 10px;
@@ -178,16 +137,8 @@ body {
             }          
         }
 
-        .page-content {
-            @media screen and (min-width: 768px) {
-                padding-left: 80px;
-            }
-        }
-
     }
 
-
-
     .mCSB_scrollTools {
         width: 6px;
     }
@@ -246,16 +197,16 @@ body {
     }
 
     .sidebar-menu ul li i {
-        border-radius: 4px;
+        border-radius: $border-radius;
     }
 
     .sidebar-footer .dropdown-menu {
-        border-top-left-radius: 4px;
-        border-top-right-radius: 4px;
+        border-top-left-radius: $border-radius;
+        border-top-right-radius: $border-radius;
 
         .notification-content i,
         .message-content .pic {
-            border-radius: 4px;
+            border-radius: $border-radius;
         }
     }
 
@@ -263,13 +214,13 @@ body {
 
         input {
 
-            border-top-left-radius: 4px;
-            border-bottom-left-radius: 4px;
+            border-top-left-radius: $border-radius;
+            border-bottom-left-radius: $border-radius;
         }
 
         .input-group-append .input-group-text {
-            border-top-right-radius: 4px;
-            border-bottom-right-radius: 4px;
+            border-top-right-radius: $border-radius;
+            border-bottom-right-radius: $border-radius;
         }
     }
 }
\ No newline at end of file