diff --git a/public/css/app.css b/public/css/app.css
index 9d6d900a..ce898cd2 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -16434,375 +16434,3 @@ readers do not read off random characters that represent icons */
   font-family: "Font Awesome 5 Brands";
   font-weight: 400;
 }
-
-.header-style {
-  padding: 0px 0px;
-  display: flex;
-  align-items: center;
-  background-color: #fff;
-}
-
-.header-style-icon {
-  padding: 15px 18px;
-  border-right: 1px solid #ced4da;
-}
-
-.header-style-icon:hover {
-  background-color: #6c757d;
-  color: white;
-  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
-}
-
-.header-style-title {
-  font-size: 1.125rem;
-  font-weight: bold;
-  text-transform: capitalize;
-  padding: 12px 12px;
-}
-
-a,
-a:hover,
-a:focus {
-    color: inherit;
-    text-decoration: none;
-    transition: all 0.3s;
-}
-
-.navbar {
-    padding: 15px 10px;
-    background: #fff;
-    border: none;
-    border-radius: 0;
-    margin-bottom: 40px;
-    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.navbar-btn {
-    box-shadow: none;
-    outline: none !important;
-    border: none;
-}
-
-.line {
-    width: 100%;
-    height: 1px;
-    border-bottom: 1px dashed #ddd;
-    margin: 40px 0;
-}
-
-
-/* ---------------------------------------------------
-    SIDEBAR STYLE
------------------------------------------------------ */
-
-#sidebar {
-    bottom: 0;
-    overflow-y: scroll;
-    width: 265px;
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100vh;
-    z-index: 999;
-    background: #1E1E2D;
-    /* color: rgb(41, 39, 39); */
-    color: #808080;
-    transition: all 0.3s;
-}
-
-#sidebar.active {
-    margin-left: -265px;
-}
-
-.sidebar-header {
-  padding: 20px;
-  display: flex;
-  justify-content: space-between;
-  /* border-bottom: 0.2px solid #6d7fcc; */
-}
-
-.sidebar-title {
-  font-size: 1.074rem;
-  font-weight: bold;
-  color: white;
-  border-color: white;
-  align-self: center;
-  /* border-bottom: border 1px solid white; */
-}
-
-.sidebar-logo {
-  width: 50px;
-  height: 35px;
-}
-
-/* #sidebar ul.components {
-    padding: 20px 0;
-    border-bottom: 1px solid #fff;
-} */
-
-/* #sidebar ul p {
-    color: rgb(41, 39, 39);
-    padding: 10px;
-} */
-
-#sidebar ul li {
-  margin: 3px 0;
-}
-
-#sidebar ul li.active {
-  background: #2a2a3c;
-  color: white;
-  border-radius: 25px;
-}
-
-#sidebar ul li.active:hover {
-  background: #2a2a3ca1;
-  /* color: white; */
-}
-
-#sidebar ul li a {
-    padding: 7px 5px;
-    font-size: 1.05em;
-    display: block;
-}
-
-#sidebar ul li a:hover {
-    color: white;
-    /* background: var(--indigo); */
-    border-radius: 15px;
-}
-
-/* #sidebar ul li.active a{
-  color: white;
-  background: #F0F0F0;
-} */
-
-#sidebar ul li .active a{
-    color: white;
-    /* background: #2a2a3c; */
-    border-radius: 15px;
-    margin: 2px;
-    background-position: 20px;
-    /* width: 70%; */
-}
-
-#sidebar ul li .active a:hover{
-  color: #ffffffd6;
-  background: #2a2a3ca1;
-}
-
-/* #sidebar ul li.active>a,
-a[aria-expanded="true"] {
-    color: #111;
-    background: #F0F0F0;
-} */
-
-#sidebar ul li ul li a:before{
-  font-family: "Font Awesome 5 Free";
-  font-weight: 600;
-  content: "\f111";
-  font-size: 4px;
-  vertical-align: middle;
-  margin-right: 8px;
-}
-
-
-
-/* .dropdown-toggle::after {
-    display: block;
-    position: absolute;
-    top: 50%;
-    right: 20px;
-    transform: translateY(-50%);
-} */
-
-#sidebar ul ul a {
-    font-size: 0.9em;
-    padding-left: 30px !important;
-    /* background: #fff; */
-}
-
-
-
-.sidebar-menu {
-  display: flex;
-  justify-content: space-between;
-}
-
-.sidebar-menu-title {
-  margin-top: 20px;
-  padding: 6px 14px;
-}
-
-.sidebar-menu-item-expand {
-  align-self: center;
-  font-size: 1.0em;
-  margin-right: 11px;
-}
-
-/* .sidebar-menu-item-expand::before {
-  font-family: "Font Awesome 5 Free";
-  font-weight: 900;
-  content: "\f078";
-} */
-
-.sidebar-menu-main-title {
-  display: flex;
-}
-
-.sidebar-menu-item-main {
-  font-size: 1.0em;
-  /* vertical-align: sub; */
-  margin-right: 9px;
-  margin-left: 7px;
-  align-self: center;
-  color: var(--indigo);
-}
-
-/* .sidebar-menu-item-main:hover {
-  color: white;
-  background: white;
-} */
-
-/* ul.CTAs {
-    padding: 20px;
-}
-
-ul.CTAs a {
-    text-align: center;
-    font-size: 0.9em !important;
-    display: block;
-    border-radius: 5px;
-    margin-bottom: 5px;
-} */
-a[data-toggle="collapse"] {
-  position: relative;
-}
-
-a.download {
-    background: #fff;
-    color: #7386D5;
-}
-
-a.article,
-a.article:hover {
-    background: #6d7fcc !important;
-    color: #fff !important;
-}
-
-/* ---------------------------------------------------
-    CONTENT STYLE
------------------------------------------------------ */
-
-#content {
-    width: calc(100% - 265px);
-    padding: 3x;
-    min-height: 100vh;
-    transition: all 0.3s;
-    position: absolute;
-    top: 0;
-    right: 0;
-    overflow-y: auto;
-}
-
-#content.active {
-    width: 100%;
-}
-
-.hovernone:hover {
-    background-color: #3490dc !important;
-    cursor: context-menu !important;
-}
-
-.hovernone-success:hover {
-    background-color: #38c172 !important;
-    cursor: context-menu !important;
-}
-
-.hovernone-danger:hover {
-    background-color: #e3342f !important;
-    cursor: context-menu !important;
-}
-
-#loader {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    background: rgba(0, 0, 0, 0.4) url("") no-repeat center center;
-    z-index: 99999;
-
-
-}
-
-#loader-image {
-    position: absolute;
-    top: 40%;
-    left: 45%;
-    z-index: 100
-}
-
-.button {
-    background-color: #E09215;
-    border: none;
-    color: white;
-    padding: 10px 24px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 14px;
-    margin: 4px 2px;
-    cursor: pointer;
-}
-
-
-
-/* ---------------------------------------------------
-    MEDIAQUERIES
------------------------------------------------------ */
-
-@media (max-width: 992px) {
-    #sidebar {
-        margin-left: -265px;
-    }
-
-    #sidebar.active {
-        margin-left: 0;
-    }
-
-    #content {
-        width: 100%;
-    }
-
-    #content.active {
-        width: calc(100% - 265px);
-    }
-
-    #sidebarCollapse span {
-        display: none;
-    }
-}
-
-.sidebar-footer {
-  /* position: absolute; */
-  /* bottom: 0; */
-  margin-top: 70px;
-}
-
-.sidebar-footer-content {
-  display: flex;
-  justify-content: center;
-  align-self: center;
-  border: 2px solid #2a2a3c;
-  padding: 10px;
-  margin: 46px;
-  border-radius: 10px;
-  color: #484859;
-}
-
-.user-info {
-  /* display: flex; */
-}
diff --git a/public/css/style.css b/public/css/style.css
new file mode 100644
index 00000000..de155424
--- /dev/null
+++ b/public/css/style.css
@@ -0,0 +1,371 @@
+.header-style {
+    padding: 0px 0px;
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+}
+
+.header-style-icon {
+    padding: 15px 18px;
+    border-right: 1px solid #ced4da;
+}
+
+.header-style-icon:hover {
+    background-color: #6c757d;
+    color: white;
+    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
+}
+
+.header-style-title {
+    font-size: 1.125rem;
+    font-weight: bold;
+    text-transform: capitalize;
+    padding: 12px 12px;
+}
+
+a,
+a:hover,
+a:focus {
+    color: inherit;
+    text-decoration: none;
+    transition: all 0.3s;
+}
+
+.navbar {
+    padding: 15px 10px;
+    background: #fff;
+    border: none;
+    border-radius: 0;
+    margin-bottom: 40px;
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.navbar-btn {
+    box-shadow: none;
+    outline: none !important;
+    border: none;
+}
+
+.line {
+    width: 100%;
+    height: 1px;
+    border-bottom: 1px dashed #ddd;
+    margin: 40px 0;
+}
+
+
+/* ---------------------------------------------------
+      SIDEBAR STYLE
+  ----------------------------------------------------- */
+
+#sidebar {
+    bottom: 0;
+    overflow-y: scroll;
+    width: 265px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    z-index: 999;
+    background: #1E1E2D;
+    /* color: rgb(41, 39, 39); */
+    color: #808080;
+    transition: all 0.3s;
+}
+
+#sidebar.active {
+    margin-left: -265px;
+}
+
+.sidebar-header {
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    /* border-bottom: 0.2px solid #6d7fcc; */
+}
+
+.sidebar-title {
+    font-size: 1.074rem;
+    font-weight: bold;
+    color: white;
+    border-color: white;
+    align-self: center;
+    /* border-bottom: border 1px solid white; */
+}
+
+.sidebar-logo {
+    width: 50px;
+    height: 35px;
+}
+
+/* #sidebar ul.components {
+      padding: 20px 0;
+      border-bottom: 1px solid #fff;
+  } */
+
+/* #sidebar ul p {
+      color: rgb(41, 39, 39);
+      padding: 10px;
+  } */
+
+#sidebar ul li {
+    margin: 3px 0;
+}
+
+#sidebar ul li.active {
+    background: #2a2a3c;
+    color: white;
+    border-radius: 25px;
+}
+
+#sidebar ul li.active:hover {
+    background: #2a2a3ca1;
+    /* color: white; */
+}
+
+#sidebar ul li a {
+    padding: 7px 5px;
+    font-size: 1.05em;
+    display: block;
+}
+
+#sidebar ul li a:hover {
+    color: white;
+    /* background: var(--indigo); */
+    border-radius: 15px;
+}
+
+/* #sidebar ul li.active a{
+    color: white;
+    background: #F0F0F0;
+  } */
+
+#sidebar ul li .active a {
+    color: white;
+    /* background: #2a2a3c; */
+    border-radius: 15px;
+    margin: 2px;
+    background-position: 20px;
+    /* width: 70%; */
+}
+
+#sidebar ul li .active a:hover {
+    color: #ffffffd6;
+    background: #2a2a3ca1;
+}
+
+/* #sidebar ul li.active>a,
+  a[aria-expanded="true"] {
+      color: #111;
+      background: #F0F0F0;
+  } */
+
+#sidebar ul li ul li a:before {
+    font-family: "Font Awesome 5 Free";
+    font-weight: 600;
+    content: "\f111";
+    font-size: 4px;
+    vertical-align: middle;
+    margin-right: 8px;
+}
+
+
+
+/* .dropdown-toggle::after {
+      display: block;
+      position: absolute;
+      top: 50%;
+      right: 20px;
+      transform: translateY(-50%);
+  } */
+
+#sidebar ul ul a {
+    font-size: 0.9em;
+    padding-left: 30px !important;
+    /* background: #fff; */
+}
+
+
+
+.sidebar-menu {
+    display: flex;
+    justify-content: space-between;
+}
+
+.sidebar-menu-title {
+    margin-top: 20px;
+    padding: 6px 14px;
+}
+
+.sidebar-menu-item-expand {
+    align-self: center;
+    font-size: 1.0em;
+    margin-right: 11px;
+}
+
+/* .sidebar-menu-item-expand::before {
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    content: "\f078";
+  } */
+
+.sidebar-menu-main-title {
+    display: flex;
+}
+
+.sidebar-menu-item-main {
+    font-size: 1.0em;
+    /* vertical-align: sub; */
+    margin-right: 9px;
+    margin-left: 7px;
+    align-self: center;
+    color: var(--indigo);
+}
+
+/* .sidebar-menu-item-main:hover {
+    color: white;
+    background: white;
+  } */
+
+/* ul.CTAs {
+      padding: 20px;
+  }
+  
+  ul.CTAs a {
+      text-align: center;
+      font-size: 0.9em !important;
+      display: block;
+      border-radius: 5px;
+      margin-bottom: 5px;
+  } */
+a[data-toggle="collapse"] {
+    position: relative;
+}
+
+a.download {
+    background: #fff;
+    color: #7386D5;
+}
+
+a.article,
+a.article:hover {
+    background: #6d7fcc !important;
+    color: #fff !important;
+}
+
+/* ---------------------------------------------------
+      CONTENT STYLE
+  ----------------------------------------------------- */
+
+#content {
+    width: calc(100% - 265px);
+    padding: 3x;
+    min-height: 100vh;
+    transition: all 0.3s;
+    position: absolute;
+    top: 0;
+    right: 0;
+    overflow-y: auto;
+}
+
+#content.active {
+    width: 100%;
+}
+
+.hovernone:hover {
+    background-color: #3490dc !important;
+    cursor: context-menu !important;
+}
+
+.hovernone-success:hover {
+    background-color: #38c172 !important;
+    cursor: context-menu !important;
+}
+
+.hovernone-danger:hover {
+    background-color: #e3342f !important;
+    cursor: context-menu !important;
+}
+
+#loader {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.4) url("") no-repeat center center;
+    z-index: 99999;
+
+
+}
+
+#loader-image {
+    position: absolute;
+    top: 40%;
+    left: 45%;
+    z-index: 100
+}
+
+.button {
+    background-color: #E09215;
+    border: none;
+    color: white;
+    padding: 10px 24px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    margin: 4px 2px;
+    cursor: pointer;
+}
+
+
+
+/* ---------------------------------------------------
+      MEDIAQUERIES
+  ----------------------------------------------------- */
+
+@media (max-width: 992px) {
+    #sidebar {
+        margin-left: -265px;
+    }
+
+    #sidebar.active {
+        margin-left: 0;
+    }
+
+    #content {
+        width: 100%;
+    }
+
+    #content.active {
+        width: calc(100% - 265px);
+    }
+
+    #sidebarCollapse span {
+        display: none;
+    }
+}
+
+.sidebar-footer {
+    /* position: absolute; */
+    /* bottom: 0; */
+    margin-top: 70px;
+}
+
+.sidebar-footer-content {
+    display: flex;
+    justify-content: center;
+    align-self: center;
+    border: 2px solid #2a2a3c;
+    padding: 10px;
+    margin: 46px;
+    border-radius: 10px;
+    color: #484859;
+}
+
+.user-info {
+    /* display: flex; */
+}
\ No newline at end of file
diff --git a/resources/views/includes/head.blade.php b/resources/views/includes/head.blade.php
index 2fe0c5a0..f30a9b83 100644
--- a/resources/views/includes/head.blade.php
+++ b/resources/views/includes/head.blade.php
@@ -22,5 +22,6 @@
 
 <!-- Styles -->
 <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+<link href="{{ asset('css/style.css') }}" rel="stylesheet">
 <link href="{{ asset('css/jquery-confirm.min.css') }}" rel="stylesheet">
 <link href="{{ asset('css/buttons.dataTables.min.css') }}" rel="stylesheet">
\ No newline at end of file