From 695c3d84817ce7f21e86927f5c45fc2ca04cd32a Mon Sep 17 00:00:00 2001
From: Ankit Hingarajiya <38377336+dropways@users.noreply.github.com>
Date: Wed, 29 Jul 2020 00:03:00 +0530
Subject: [PATCH] convert files PHP to HTML

---
 400.html                                    |  52 ++
 400.php                                     |  21 -
 403.html                                    |  52 ++
 403.php                                     |  21 -
 404.html                                    |  52 ++
 404.php                                     |  21 -
 500.html                                    |  52 ++
 500.php                                     |  21 -
 503.html                                    |  52 ++
 503.php                                     |  21 -
 advanced-components.html                    | 812 +++++++++++++++++
 advanced-components.php                     | 365 --------
 apexcharts.html                             | 536 ++++++++++++
 apexcharts.php                              |  89 --
 basic-table.html                            | 917 ++++++++++++++++++++
 basic-table.php                             | 469 ----------
 blank.html                                  | 495 +++++++++++
 blank.php                                   |  47 -
 blog-detail.html                            | 582 +++++++++++++
 blog-detail.php                             | 134 ---
 blog.html                                   | 634 ++++++++++++++
 blog.php                                    | 187 ----
 calendar.html                               | 550 ++++++++++++
 calendar.php                                | 103 ---
 chat.html                                   | 741 ++++++++++++++++
 chat.php                                    | 292 -------
 color-settings.html                         | 586 +++++++++++++
 color-settings.php                          | 139 ---
 contact-directory.html                      | 738 ++++++++++++++++
 contact-directory.php                       | 290 -------
 custom-icon.php => custom-icon.html         | 459 +++++++++-
 datatable.php => datatable.html             | 459 +++++++++-
 faq.html                                    | 636 ++++++++++++++
 faq.php                                     | 189 ----
 font-awesome.php => font-awesome.html       | 459 +++++++++-
 forgot-password.php => forgot-password.html |  42 +-
 form-basic.php => form-basic.html           | 460 +++++++++-
 form-pickers.html                           | 608 +++++++++++++
 form-pickers.php                            | 160 ----
 form-wizard.html                            | 803 +++++++++++++++++
 form-wizard.php                             | 355 --------
 foundation.php => foundation.html           | 459 +++++++++-
 gallery.html                                | 632 ++++++++++++++
 gallery.php                                 | 185 ----
 getting-started.html                        | 568 ++++++++++++
 getting-started.php                         | 121 ---
 gulpfile.js                                 |   4 +-
 highchart.html                              | 520 +++++++++++
 highchart.php                               |  73 --
 html5-editor.html                           | 498 +++++++++++
 html5-editor.php                            |  51 --
 image-cropper.php => image-cropper.html     | 459 +++++++++-
 image-dropzone.html                         | 519 +++++++++++
 image-dropzone.php                          |  72 --
 include/footer.php                          |   3 -
 include/head.php                            |  28 -
 include/header.php                          | 214 -----
 include/script.php                          |   6 -
 include/sidebar.php                         | 200 -----
 index.html                                  | 695 +++++++++++++++
 index.php                                   | 249 ------
 index2.html                                 | 591 +++++++++++++
 index2.php                                  | 144 ---
 introduction.html                           | 514 +++++++++++
 introduction.php                            |  67 --
 invoice.html                                | 573 ++++++++++++
 invoice.php                                 | 125 ---
 ionicons.php => ionicons.html               | 459 +++++++++-
 jvectormap.html                             | 504 +++++++++++
 jvectormap.php                              |  57 --
 knob-chart.html                             | 564 ++++++++++++
 knob-chart.php                              | 117 ---
 login.php => login.html                     |  47 +-
 pricing-table.html                          | 640 ++++++++++++++
 pricing-table.php                           | 193 ----
 product-detail.html                         | 616 +++++++++++++
 product-detail.php                          | 169 ----
 product.html                                | 645 ++++++++++++++
 product.php                                 | 198 -----
 profile.php => profile.html                 | 458 +++++++++-
 register.php => register.html               |  41 +-
 reset-password.php => reset-password.html   |  41 +-
 sitemap.html                                | 626 +++++++++++++
 sitemap.php                                 | 179 ----
 src/styles/media.css                        |   2 +
 src/styles/style.css                        |  22 +-
 themify.php => themify.html                 | 459 +++++++++-
 third-party-plugins.html                    | 646 ++++++++++++++
 third-party-plugins.php                     | 199 -----
 ui-buttons.html                             | 723 +++++++++++++++
 ui-buttons.php                              | 276 ------
 ui-cards-hover.html                         | 910 +++++++++++++++++++
 ui-cards-hover.php                          | 463 ----------
 ui-cards.html                               | 852 ++++++++++++++++++
 ui-cards.php                                | 405 ---------
 ui-carousel.html                            | 770 ++++++++++++++++
 ui-carousel.php                             | 323 -------
 ui-list-group.html                          | 615 +++++++++++++
 ui-list-group.php                           | 168 ----
 ui-modals.html                              | 741 ++++++++++++++++
 ui-modals.php                               | 294 -------
 ui-notification.html                        | 615 +++++++++++++
 ui-notification.php                         | 168 ----
 ui-progressbar.html                         | 610 +++++++++++++
 ui-progressbar.php                          | 163 ----
 ui-range-slider.html                        | 540 ++++++++++++
 ui-range-slider.php                         |  93 --
 ui-sweet-alert.html                         | 601 +++++++++++++
 ui-sweet-alert.php                          | 154 ----
 ui-tabs.php => ui-tabs.html                 | 459 +++++++++-
 ui-timeline.html                            | 541 ++++++++++++
 ui-timeline.php                             |  94 --
 ui-tooltip-popover.html                     | 516 +++++++++++
 ui-tooltip-popover.php                      |  69 --
 ui-typography.html                          | 587 +++++++++++++
 ui-typography.php                           | 140 ---
 vendors/styles/style.css                    |   4 +-
 vendors/styles/style.min.css                |   2 +-
 video-player.html                           | 546 ++++++++++++
 video-player.php                            |  99 ---
 120 files changed, 32121 insertions(+), 8573 deletions(-)
 create mode 100644 400.html
 delete mode 100644 400.php
 create mode 100644 403.html
 delete mode 100644 403.php
 create mode 100644 404.html
 delete mode 100644 404.php
 create mode 100644 500.html
 delete mode 100644 500.php
 create mode 100644 503.html
 delete mode 100644 503.php
 create mode 100644 advanced-components.html
 delete mode 100644 advanced-components.php
 create mode 100644 apexcharts.html
 delete mode 100644 apexcharts.php
 create mode 100644 basic-table.html
 delete mode 100644 basic-table.php
 create mode 100644 blank.html
 delete mode 100644 blank.php
 create mode 100644 blog-detail.html
 delete mode 100644 blog-detail.php
 create mode 100644 blog.html
 delete mode 100644 blog.php
 create mode 100644 calendar.html
 delete mode 100644 calendar.php
 create mode 100644 chat.html
 delete mode 100644 chat.php
 create mode 100644 color-settings.html
 delete mode 100644 color-settings.php
 create mode 100644 contact-directory.html
 delete mode 100644 contact-directory.php
 rename custom-icon.php => custom-icon.html (94%)
 rename datatable.php => datatable.html (55%)
 create mode 100644 faq.html
 delete mode 100644 faq.php
 rename font-awesome.php => font-awesome.html (92%)
 rename forgot-password.php => forgot-password.html (56%)
 rename form-basic.php => form-basic.html (63%)
 create mode 100644 form-pickers.html
 delete mode 100644 form-pickers.php
 create mode 100644 form-wizard.html
 delete mode 100644 form-wizard.php
 rename foundation.php => foundation.html (76%)
 create mode 100644 gallery.html
 delete mode 100644 gallery.php
 create mode 100644 getting-started.html
 delete mode 100644 getting-started.php
 create mode 100644 highchart.html
 delete mode 100644 highchart.php
 create mode 100644 html5-editor.html
 delete mode 100644 html5-editor.php
 rename image-cropper.php => image-cropper.html (56%)
 create mode 100644 image-dropzone.html
 delete mode 100644 image-dropzone.php
 delete mode 100644 include/footer.php
 delete mode 100644 include/head.php
 delete mode 100644 include/header.php
 delete mode 100644 include/script.php
 delete mode 100644 include/sidebar.php
 create mode 100644 index.html
 delete mode 100644 index.php
 create mode 100644 index2.html
 delete mode 100644 index2.php
 create mode 100644 introduction.html
 delete mode 100644 introduction.php
 create mode 100644 invoice.html
 delete mode 100644 invoice.php
 rename ionicons.php => ionicons.html (87%)
 create mode 100644 jvectormap.html
 delete mode 100644 jvectormap.php
 create mode 100644 knob-chart.html
 delete mode 100644 knob-chart.php
 rename login.php => login.html (63%)
 create mode 100644 pricing-table.html
 delete mode 100644 pricing-table.php
 create mode 100644 product-detail.html
 delete mode 100644 product-detail.php
 create mode 100644 product.html
 delete mode 100644 product.php
 rename profile.php => profile.html (58%)
 rename register.php => register.html (84%)
 rename reset-password.php => reset-password.html (55%)
 create mode 100644 sitemap.html
 delete mode 100644 sitemap.php
 rename themify.php => themify.html (81%)
 create mode 100644 third-party-plugins.html
 delete mode 100644 third-party-plugins.php
 create mode 100644 ui-buttons.html
 delete mode 100644 ui-buttons.php
 create mode 100644 ui-cards-hover.html
 delete mode 100644 ui-cards-hover.php
 create mode 100644 ui-cards.html
 delete mode 100644 ui-cards.php
 create mode 100644 ui-carousel.html
 delete mode 100644 ui-carousel.php
 create mode 100644 ui-list-group.html
 delete mode 100644 ui-list-group.php
 create mode 100644 ui-modals.html
 delete mode 100644 ui-modals.php
 create mode 100644 ui-notification.html
 delete mode 100644 ui-notification.php
 create mode 100644 ui-progressbar.html
 delete mode 100644 ui-progressbar.php
 create mode 100644 ui-range-slider.html
 delete mode 100644 ui-range-slider.php
 create mode 100644 ui-sweet-alert.html
 delete mode 100644 ui-sweet-alert.php
 rename ui-tabs.php => ui-tabs.html (53%)
 create mode 100644 ui-timeline.html
 delete mode 100644 ui-timeline.php
 create mode 100644 ui-tooltip-popover.html
 delete mode 100644 ui-tooltip-popover.php
 create mode 100644 ui-typography.html
 delete mode 100644 ui-typography.php
 create mode 100644 video-player.html
 delete mode 100644 video-player.php

diff --git a/400.html b/400.html
new file mode 100644
index 00000000..4708c8b2
--- /dev/null
+++ b/400.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="error-page d-flex align-items-center flex-wrap justify-content-center pd-20">
+		<div class="pd-10">
+			<div class="error-page-wrap text-center">
+				<h1>400</h1>
+				<h3>Error: 400 PAGE NOT FOUND !</h3>
+				<p>You Seem To Be Trying To Find His Way Home</p>
+				<div class="pt-20 mx-auto max-width-200">
+					<a href="index.html" class="btn btn-primary btn-block btn-lg">Back To Home</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/400.php b/400.php
deleted file mode 100644
index 51690cf8..00000000
--- a/400.php
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<div class="error-page d-flex align-items-center flex-wrap justify-content-center pd-20">
-		<div class="pd-10">
-			<div class="error-page-wrap text-center">
-				<h1>400</h1>
-				<h3>Error: 400 PAGE NOT FOUND !</h3>
-				<p>You Seem To Be Trying To Find His Way Home</p>
-				<div class="pt-20 mx-auto max-width-200">
-					<a href="index.php" class="btn btn-primary btn-block btn-lg">Back To Home</a>
-				</div>
-			</div>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/403.html b/403.html
new file mode 100644
index 00000000..757ba23a
--- /dev/null
+++ b/403.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="error-page d-flex align-items-center flex-wrap justify-content-center pd-20">
+		<div class="pd-10">
+			<div class="error-page-wrap text-center">
+				<h1>403</h1>
+				<h3>Error: 403 Forbidden</h3>
+				<p>Sorry, access to this resource on the server is denied.<br>Either check the URL</p>
+				<div class="pt-20 mx-auto max-width-200">
+					<a href="index.html" class="btn btn-primary btn-block btn-lg">Back To Home</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/403.php b/403.php
deleted file mode 100644
index e2a3c24d..00000000
--- a/403.php
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<div class="error-page d-flex align-items-center flex-wrap justify-content-center pd-20">
-		<div class="pd-10">
-			<div class="error-page-wrap text-center">
-				<h1>403</h1>
-				<h3>Error: 403 Forbidden</h3>
-				<p>Sorry, access to this resource on the server is denied.<br>Either check the URL</p>
-				<div class="pt-20 mx-auto max-width-200">
-					<a href="index.php" class="btn btn-primary btn-block btn-lg">Back To Home</a>
-				</div>
-			</div>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/404.html b/404.html
new file mode 100644
index 00000000..cf515bd3
--- /dev/null
+++ b/404.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="error-page d-flex align-items-center flex-wrap justify-content-center pd-20">
+		<div class="pd-10">
+			<div class="error-page-wrap text-center">
+				<h1>404</h1>
+				<h3>Error: 404 Page Not Found</h3>
+				<p>Sorry, the page you’re looking for cannot be accessed.<br>Either check the URL</p>
+				<div class="pt-20 mx-auto max-width-200">
+					<a href="index.html" class="btn btn-primary btn-block btn-lg">Back To Home</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/404.php b/404.php
deleted file mode 100644
index 5b362bcd..00000000
--- a/404.php
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<div class="error-page d-flex align-items-center flex-wrap justify-content-center pd-20">
-		<div class="pd-10">
-			<div class="error-page-wrap text-center">
-				<h1>404</h1>
-				<h3>Error: 404 Page Not Found</h3>
-				<p>Sorry, the page you’re looking for cannot be accessed.<br>Either check the URL</p>
-				<div class="pt-20 mx-auto max-width-200">
-					<a href="index.php" class="btn btn-primary btn-block btn-lg">Back To Home</a>
-				</div>
-			</div>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/500.html b/500.html
new file mode 100644
index 00000000..15aa7981
--- /dev/null
+++ b/500.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="error-page d-flex align-items-center flex-wrap justify-content-center pd-20">
+		<div class="pd-10">
+			<div class="error-page-wrap text-center">
+				<h1>500</h1>
+				<h3>Error: 500 Unexpected Error</h3>
+				<p>An error ocurred and your request couldn’t be completed..<br>Either check the URL</p>
+				<div class="pt-20 mx-auto max-width-200">
+					<a href="index.html" class="btn btn-primary btn-block btn-lg">Back To Home</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/500.php b/500.php
deleted file mode 100644
index d67b5ff3..00000000
--- a/500.php
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<div class="error-page d-flex align-items-center flex-wrap justify-content-center pd-20">
-		<div class="pd-10">
-			<div class="error-page-wrap text-center">
-				<h1>500</h1>
-				<h3>Error: 500 Unexpected Error</h3>
-				<p>An error ocurred and your request couldn’t be completed..<br>Either check the URL</p>
-				<div class="pt-20 mx-auto max-width-200">
-					<a href="index.php" class="btn btn-primary btn-block btn-lg">Back To Home</a>
-				</div>
-			</div>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/503.html b/503.html
new file mode 100644
index 00000000..4fa7891f
--- /dev/null
+++ b/503.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="error-page d-flex align-items-center flex-wrap justify-content-center pd-20">
+		<div class="pd-10">
+			<div class="error-page-wrap text-center">
+				<h1>503</h1>
+				<h3>This Site Is Getting Up In Few Minutes.</h3>
+				<p>Please Try After Some Time</p>
+				<div class="pt-20 mx-auto max-width-200">
+					<a href="index.html" class="btn btn-primary btn-block btn-lg">Back To Home</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/503.php b/503.php
deleted file mode 100644
index e209a198..00000000
--- a/503.php
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<div class="error-page d-flex align-items-center flex-wrap justify-content-center pd-20">
-		<div class="pd-10">
-			<div class="error-page-wrap text-center">
-				<h1>503</h1>
-				<h3>This Site Is Getting Up In Few Minutes.</h3>
-				<p>Please Try After Some Time</p>
-				<div class="pt-20 mx-auto max-width-200">
-					<a href="index.php" class="btn btn-primary btn-block btn-lg">Back To Home</a>
-				</div>
-			</div>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/advanced-components.html b/advanced-components.html
new file mode 100644
index 00000000..ccda3309
--- /dev/null
+++ b/advanced-components.html
@@ -0,0 +1,812 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<!-- switchery css -->
+	<link rel="stylesheet" type="text/css" href="src/plugins/switchery/switchery.min.css">
+	<!-- bootstrap-tagsinput css -->
+	<link rel="stylesheet" type="text/css" href="src/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css">
+	<!-- bootstrap-touchspin css -->
+	<link rel="stylesheet" type="text/css" href="src/plugins/bootstrap-touchspin/jquery.bootstrap-touchspin.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>Advanced Components</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Advanced Components</li>
+								</ol>
+							</nav>
+						</div>
+						<div class="col-md-6 col-sm-12 text-right">
+							<div class="dropdown">
+								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+									January 2018
+								</a>
+								<div class="dropdown-menu dropdown-menu-right">
+									<a class="dropdown-item" href="#">Export List</a>
+									<a class="dropdown-item" href="#">Policies</a>
+									<a class="dropdown-item" href="#">View Assets</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- Select-2 Start -->
+				<div class="pd-20 card-box mb-30">
+					<div class="clearfix">
+						<div class="pull-left">
+							<h4 class="text-blue h4">Select 2</h4>
+							<p class="mb-30">Select2 for custom search and select</p>
+						</div>
+					</div>
+					<form>
+						<div class="row">
+							<div class="col-md-6">
+								<div class="form-group">
+									<label>Single Select</label>
+									<select class="custom-select2 form-control" name="state" style="width: 100%; height: 38px;">
+										<optgroup label="Alaskan/Hawaiian Time Zone">
+											<option value="AK">Alaska</option>
+											<option value="HI">Hawaii</option>
+										</optgroup>
+										<optgroup label="Pacific Time Zone">
+											<option value="CA">California</option>
+											<option value="NV">Nevada</option>
+											<option value="OR">Oregon</option>
+											<option value="WA">Washington</option>
+										</optgroup>
+										<optgroup label="Mountain Time Zone">
+											<option value="AZ">Arizona</option>
+											<option value="CO">Colorado</option>
+											<option value="ID">Idaho</option>
+											<option value="MT">Montana</option>
+											<option value="NE">Nebraska</option>
+											<option value="NM">New Mexico</option>
+											<option value="ND">North Dakota</option>
+											<option value="UT">Utah</option>
+											<option value="WY">Wyoming</option>
+										</optgroup>
+									</select>
+								</div>
+							</div>
+							<div class="col-md-6">
+								<div class="form-group">
+									<label>Multiple Select</label>
+									<select class="custom-select2 form-control" multiple="multiple" style="width: 100%;">
+										<optgroup label="Alaskan/Hawaiian Time Zone">
+											<option value="AK">Alaska</option>
+											<option value="HI">Hawaii</option>
+										</optgroup>
+										<optgroup label="Pacific Time Zone">
+											<option value="CA">California</option>
+											<option value="NV">Nevada</option>
+											<option value="OR">Oregon</option>
+											<option value="WA">Washington</option>
+										</optgroup>
+										<optgroup label="Mountain Time Zone">
+											<option value="AZ">Arizona</option>
+											<option value="CO">Colorado</option>
+											<option value="ID">Idaho</option>
+											<option value="MT">Montana</option>
+											<option value="NE">Nebraska</option>
+											<option value="NM">New Mexico</option>
+											<option value="ND">North Dakota</option>
+											<option value="UT">Utah</option>
+											<option value="WY">Wyoming</option>
+										</optgroup>
+									</select>
+								</div>
+							</div>
+						</div>
+					</form>
+				</div>
+				<!-- Select-2 end -->
+				<!-- Bootstrap Select Start -->
+				<div class="pd-20 card-box mb-30">
+					<div class="clearfix">
+						<div class="pull-left">
+							<h4 class="text-blue h4">Bootstrap Select</h4>
+							<p class="mb-30">Just add class <code>.selectpicker</code> to select</p>
+						</div>
+					</div>
+					<form>
+						<div class="row">
+							<div class="col-md-4 col-sm-12">
+								<div class="form-group">
+									<label>Single Select</label>
+									<select class="selectpicker form-control" data-style="btn-outline-primary" data-size="5">
+										<optgroup label="Condiments" data-max-options="2">
+											<option>Mustard</option>
+											<option>Ketchup</option>
+											<option>Relish</option>
+										</optgroup>
+										<optgroup label="Breads" data-max-options="2">
+											<option>Plain</option>
+											<option>Steamed</option>
+											<option>Toasted</option>
+										</optgroup>
+									</select>
+								</div>
+							</div>
+							<div class="col-md-4 col-sm-12">
+								<div class="form-group">
+									<label>multiple Select</label>
+									<select class="selectpicker form-control" data-size="5" data-style="btn-outline-secondary" multiple data-max-options="3">
+										<optgroup label="Condiments">
+											<option>Mustard</option>
+											<option>Ketchup</option>
+											<option>Relish</option>
+										</optgroup>
+										<optgroup label="Breads">
+											<option>Plain</option>
+											<option>Steamed</option>
+											<option>Toasted</option>
+										</optgroup>
+									</select>
+								</div>
+							</div>
+							<div class="col-md-4 col-sm-12">
+								<div class="form-group">
+									<label>Selected text format</label>
+									<select class="selectpicker form-control" data-size="5" data-style="btn-outline-success" data-selected-text-format="count" multiple>
+										<option>Mustard</option>
+										<option>Ketchup</option>
+										<option>Relish</option>
+										<option>Plain</option>
+										<option>Steamed</option>
+										<option>Toasted</option>
+									</select>
+								</div>
+							</div>
+							<div class="col-md-4 col-sm-12">
+								<div class="form-group">
+									<label>Subtext</label>
+									<select class="selectpicker form-control" data-size="5" data-style="btn-outline-danger">
+										<option data-subtext="French's">Mustard</option>
+										<option data-subtext="Heinz">Ketchup</option>
+										<option data-subtext="Sweet">Relish</option>
+										<option data-subtext="Miracle Whip">Mayonnaise</option>
+										<option data-divider="true"></option>
+										<option data-subtext="Honey">Barbecue Sauce</option>
+										<option data-subtext="Ranch">Salad Dressing</option>
+										<option data-subtext="Sweet & Spicy">Tabasco</option>
+										<option data-subtext="Chunky">Salsa</option>
+									</select>
+								</div>
+							</div>
+							<div class="col-md-4 col-sm-12">
+								<div class="form-group">
+									<label>Select/deselect all</label>
+									<select class="selectpicker form-control" data-size="5" data-style="btn-outline-warning" multiple data-actions-box="true" data-selected-text-format="count">
+										<optgroup label="Condiments">
+											<option>Mustard</option>
+											<option>Ketchup</option>
+											<option>Relish</option>
+										</optgroup>
+										<optgroup label="Breads">
+											<option>Plain</option>
+											<option>Steamed</option>
+											<option>Toasted</option>
+										</optgroup>
+									</select>
+								</div>
+							</div>
+							<div class="col-md-4 col-sm-12">
+								<div class="form-group">
+									<label>Disabled options</label>
+									<select class="selectpicker form-control" data-size="5" data-style="btn-outline-info">
+										<option>Mustard</option>
+										<option disabled>Ketchup</option>
+										<option>Relish</option>
+										<option>Plain</option>
+										<option disabled>Steamed</option>
+										<option>Toasted</option>
+									</select>
+								</div>
+							</div>
+						</div>
+					</form>
+				</div>
+				<!-- Bootstrap Select End -->
+				<div class="row">
+					<!-- Bootstrap Switchery Start -->
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<div class="clearfix mb-30">
+								<div class="pull-left">
+									<h4 class="text-blue h4">Switchery js</h4>
+								</div>
+							</div>
+							<form>
+								<div class="mb-30">
+									<h5 class="h5">Basic</h5>
+									<p>add <code> class="switch-btn" data-color="#0099ff"</code> to your input element.</p>
+									<input type="checkbox" checked class="switch-btn" data-color="#0099ff">
+									<input type="checkbox" checked class="switch-btn" data-color="#41ccba">
+									<input type="checkbox" checked class="switch-btn" data-color="#f56767">
+									<input type="checkbox" checked class="switch-btn" data-color="#a683eb">
+									<input type="checkbox" checked class="switch-btn" data-color="#f2a654">
+									<input type="checkbox" checked class="switch-btn" data-color="#0059b2">
+								</div>
+								<div class="mb-30">
+									<h5 class="h5">Sizes</h5>
+									<p>add <code>data-size="small",data-size="large"</code> to your input element for diffrent sizes.</p>
+									<input type="checkbox" checked class="switch-btn" data-size="small" data-color="#0099ff">
+									<input type="checkbox" checked class="switch-btn" data-size="small" data-color="#f56767">
+									<input type="checkbox" checked class="switch-btn" data-color="#41ccba">
+									<input type="checkbox" checked class="switch-btn" data-color="#a683eb">
+									<input type="checkbox" checked class="switch-btn" data-size="large" data-color="#f2a654">
+									<input type="checkbox" checked class="switch-btn" data-size="large" data-color="#0059b2">
+								</div>
+								<div class="mb-30">
+									<h5 class="h5">Secondary Color</h5>
+									<p>add <code>data-color="#0099ff" data-secondary-color="#28a745"</code> to your input</p>
+									<input type="checkbox" checked class="switch-btn" data-size="small" data-color="#0099ff" data-secondary-color="#28a745">
+									<input type="checkbox" class="switch-btn" data-size="small" data-color="#f56767" data-secondary-color="#28a745">
+									<input type="checkbox" checked class="switch-btn" data-color="#41ccba" data-secondary-color="#28a745">
+									<input type="checkbox" class="switch-btn" data-color="#a683eb" data-secondary-color="#28a745">
+									<input type="checkbox" checked class="switch-btn" data-size="large" data-color="#f2a654" data-secondary-color="#28a745">
+									<input type="checkbox" class="switch-btn" data-size="large" data-color="#0059b2" data-secondary-color="#28a745">
+								</div>
+							</form>
+						</div>
+					</div>
+					<!-- Bootstrap Switchery End -->
+					<!-- Bootstrap Tags Input Start -->
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<div class="clearfix mb-30">
+								<div class="pull-left">
+									<h4 class="text-blue h4">Bootstrap Tags Input</h4>
+								</div>
+							</div>
+							<form>
+								<div class="mb-30">
+									<h5 class="h5">Input Value</h5>
+									<p>add <code>data-role="tagsinput"</code> to your input element.</p>
+									<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput">
+								</div>
+								<div class="mb-30">
+									<h5 class="h5">Select Value</h5>
+									<p>add <code>data-role="tagsinput"</code> to your select element & use select multiple</p>
+									<select multiple data-role="tagsinput">
+										<option value="Amsterdam">Amsterdam</option>
+										<option value="Washington">Washington</option>
+										<option value="Sydney">Sydney</option>
+										<option value="Beijing">Beijing</option>
+										<option value="Cairo">Cairo</option>
+									</select>
+								</div>
+								<div class="mb-30">
+									<h5 class="h5">Input placeholder</h5>
+									<p>add <code>data-role="tagsinput" placeholder="add tags"</code> to your input element.</p>
+									<input type="text" value="Amsterdam,Washington,Sydney" data-role="tagsinput" placeholder="add tags">
+								</div>
+							</form>
+						</div>
+					</div>
+					<!-- Bootstrap Tags Input End -->
+				</div>
+				<!-- Bootstrap TouchSpin Start -->
+				<div class="pd-20 card-box height-100-p mb-30">
+					<div class="clearfix mb-30">
+						<div class="pull-left">
+							<h4 class="text-blue h4">Bootstrap TouchSpin</h4>
+						</div>
+					</div>
+					<form>
+						<div class="row">
+							<div class="col-md-6 col-sm-12">
+								<div class="form-group">
+									<label>Example with postfix</label>
+									<input id="demo1" type="text" value="55" name="demo1">
+								</div>
+							</div>
+							<div class="col-md-6 col-sm-12">
+								<div class="form-group">
+									<label>Example with prefix</label>
+									<input id="demo2" type="text" value="0" name="demo2">
+								</div>
+							</div>
+							<div class="col-md-6 col-sm-12">
+								<div class="form-group">
+									<label>Vertical buttons</label>
+									<input id="demo_vertical2" type="text" value="" name="demo_vertical2">
+								</div>
+							</div>
+							<div class="col-md-6 col-sm-12">
+								<div class="form-group">
+									<label>Init with empty value</label>
+									<input id="demo3" type="text" value="" name="demo3">
+								</div>
+							</div>
+							<div class="col-md-6 col-sm-12">
+								<div class="form-group">
+									<label>Value is set</label>
+									<input id="demo3_22" type="text" value="33" name="demo3_22">
+								</div>
+							</div>
+							<div class="col-md-6 col-sm-12">
+								<div class="form-group">
+									<label>Button group</label>
+									<input id="demo5" type="text" class="form-control" name="demo5" value="50">
+								</div>
+							</div>
+						</div>
+					</form>
+				</div>
+				<!-- Bootstrap TouchSpin End -->
+
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+	<!-- switchery js -->
+	<script src="src/plugins/switchery/switchery.min.js"></script>
+	<!-- bootstrap-tagsinput js -->
+	<script src="src/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
+	<!-- bootstrap-touchspin js -->
+	<script src="src/plugins/bootstrap-touchspin/jquery.bootstrap-touchspin.js"></script>
+	<script src="vendors/scripts/advanced-components.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/advanced-components.php b/advanced-components.php
deleted file mode 100644
index a312b1ec..00000000
--- a/advanced-components.php
+++ /dev/null
@@ -1,365 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-	<!-- switchery css -->
-	<link rel="stylesheet" type="text/css" href="src/plugins/switchery/switchery.min.css">
-	<!-- bootstrap-tagsinput css -->
-	<link rel="stylesheet" type="text/css" href="src/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css">
-	<!-- bootstrap-touchspin css -->
-	<link rel="stylesheet" type="text/css" href="src/plugins/bootstrap-touchspin/jquery.bootstrap-touchspin.css">
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>Advanced Components</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Advanced Components</li>
-								</ol>
-							</nav>
-						</div>
-						<div class="col-md-6 col-sm-12 text-right">
-							<div class="dropdown">
-								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-									January 2018
-								</a>
-								<div class="dropdown-menu dropdown-menu-right">
-									<a class="dropdown-item" href="#">Export List</a>
-									<a class="dropdown-item" href="#">Policies</a>
-									<a class="dropdown-item" href="#">View Assets</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<!-- Select-2 Start -->
-				<div class="pd-20 card-box mb-30">
-					<div class="clearfix">
-						<div class="pull-left">
-							<h4 class="text-blue h4">Select 2</h4>
-							<p class="mb-30">Select2 for custom search and select</p>
-						</div>
-					</div>
-					<form>
-						<div class="row">
-							<div class="col-md-6">
-								<div class="form-group">
-									<label>Single Select</label>
-									<select class="custom-select2 form-control" name="state" style="width: 100%; height: 38px;">
-										<optgroup label="Alaskan/Hawaiian Time Zone">
-											<option value="AK">Alaska</option>
-											<option value="HI">Hawaii</option>
-										</optgroup>
-										<optgroup label="Pacific Time Zone">
-											<option value="CA">California</option>
-											<option value="NV">Nevada</option>
-											<option value="OR">Oregon</option>
-											<option value="WA">Washington</option>
-										</optgroup>
-										<optgroup label="Mountain Time Zone">
-											<option value="AZ">Arizona</option>
-											<option value="CO">Colorado</option>
-											<option value="ID">Idaho</option>
-											<option value="MT">Montana</option>
-											<option value="NE">Nebraska</option>
-											<option value="NM">New Mexico</option>
-											<option value="ND">North Dakota</option>
-											<option value="UT">Utah</option>
-											<option value="WY">Wyoming</option>
-										</optgroup>
-									</select>
-								</div>
-							</div>
-							<div class="col-md-6">
-								<div class="form-group">
-									<label>Multiple Select</label>
-									<select class="custom-select2 form-control" multiple="multiple" style="width: 100%;">
-										<optgroup label="Alaskan/Hawaiian Time Zone">
-											<option value="AK">Alaska</option>
-											<option value="HI">Hawaii</option>
-										</optgroup>
-										<optgroup label="Pacific Time Zone">
-											<option value="CA">California</option>
-											<option value="NV">Nevada</option>
-											<option value="OR">Oregon</option>
-											<option value="WA">Washington</option>
-										</optgroup>
-										<optgroup label="Mountain Time Zone">
-											<option value="AZ">Arizona</option>
-											<option value="CO">Colorado</option>
-											<option value="ID">Idaho</option>
-											<option value="MT">Montana</option>
-											<option value="NE">Nebraska</option>
-											<option value="NM">New Mexico</option>
-											<option value="ND">North Dakota</option>
-											<option value="UT">Utah</option>
-											<option value="WY">Wyoming</option>
-										</optgroup>
-									</select>
-								</div>
-							</div>
-						</div>
-					</form>
-				</div>
-				<!-- Select-2 end -->
-				<!-- Bootstrap Select Start -->
-				<div class="pd-20 card-box mb-30">
-					<div class="clearfix">
-						<div class="pull-left">
-							<h4 class="text-blue h4">Bootstrap Select</h4>
-							<p class="mb-30">Just add class <code>.selectpicker</code> to select</p>
-						</div>
-					</div>
-					<form>
-						<div class="row">
-							<div class="col-md-4 col-sm-12">
-								<div class="form-group">
-									<label>Single Select</label>
-									<select class="selectpicker form-control" data-style="btn-outline-primary" data-size="5">
-										<optgroup label="Condiments" data-max-options="2">
-											<option>Mustard</option>
-											<option>Ketchup</option>
-											<option>Relish</option>
-										</optgroup>
-										<optgroup label="Breads" data-max-options="2">
-											<option>Plain</option>
-											<option>Steamed</option>
-											<option>Toasted</option>
-										</optgroup>
-									</select>
-								</div>
-							</div>
-							<div class="col-md-4 col-sm-12">
-								<div class="form-group">
-									<label>multiple Select</label>
-									<select class="selectpicker form-control" data-size="5" data-style="btn-outline-secondary" multiple data-max-options="3">
-										<optgroup label="Condiments">
-											<option>Mustard</option>
-											<option>Ketchup</option>
-											<option>Relish</option>
-										</optgroup>
-										<optgroup label="Breads">
-											<option>Plain</option>
-											<option>Steamed</option>
-											<option>Toasted</option>
-										</optgroup>
-									</select>
-								</div>
-							</div>
-							<div class="col-md-4 col-sm-12">
-								<div class="form-group">
-									<label>Selected text format</label>
-									<select class="selectpicker form-control" data-size="5" data-style="btn-outline-success" data-selected-text-format="count" multiple>
-										<option>Mustard</option>
-										<option>Ketchup</option>
-										<option>Relish</option>
-										<option>Plain</option>
-										<option>Steamed</option>
-										<option>Toasted</option>
-									</select>
-								</div>
-							</div>
-							<div class="col-md-4 col-sm-12">
-								<div class="form-group">
-									<label>Subtext</label>
-									<select class="selectpicker form-control" data-size="5" data-style="btn-outline-danger">
-										<option data-subtext="French's">Mustard</option>
-										<option data-subtext="Heinz">Ketchup</option>
-										<option data-subtext="Sweet">Relish</option>
-										<option data-subtext="Miracle Whip">Mayonnaise</option>
-										<option data-divider="true"></option>
-										<option data-subtext="Honey">Barbecue Sauce</option>
-										<option data-subtext="Ranch">Salad Dressing</option>
-										<option data-subtext="Sweet & Spicy">Tabasco</option>
-										<option data-subtext="Chunky">Salsa</option>
-									</select>
-								</div>
-							</div>
-							<div class="col-md-4 col-sm-12">
-								<div class="form-group">
-									<label>Select/deselect all</label>
-									<select class="selectpicker form-control" data-size="5" data-style="btn-outline-warning" multiple data-actions-box="true" data-selected-text-format="count">
-										<optgroup label="Condiments">
-											<option>Mustard</option>
-											<option>Ketchup</option>
-											<option>Relish</option>
-										</optgroup>
-										<optgroup label="Breads">
-											<option>Plain</option>
-											<option>Steamed</option>
-											<option>Toasted</option>
-										</optgroup>
-									</select>
-								</div>
-							</div>
-							<div class="col-md-4 col-sm-12">
-								<div class="form-group">
-									<label>Disabled options</label>
-									<select class="selectpicker form-control" data-size="5" data-style="btn-outline-info">
-										<option>Mustard</option>
-										<option disabled>Ketchup</option>
-										<option>Relish</option>
-										<option>Plain</option>
-										<option disabled>Steamed</option>
-										<option>Toasted</option>
-									</select>
-								</div>
-							</div>
-						</div>
-					</form>
-				</div>
-				<!-- Bootstrap Select End -->
-				<div class="row">
-					<!-- Bootstrap Switchery Start -->
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<div class="clearfix mb-30">
-								<div class="pull-left">
-									<h4 class="text-blue h4">Switchery js</h4>
-								</div>
-							</div>
-							<form>
-								<div class="mb-30">
-									<h5 class="h5">Basic</h5>
-									<p>add <code> class="switch-btn" data-color="#0099ff"</code> to your input element.</p>
-									<input type="checkbox" checked class="switch-btn" data-color="#0099ff">
-									<input type="checkbox" checked class="switch-btn" data-color="#41ccba">
-									<input type="checkbox" checked class="switch-btn" data-color="#f56767">
-									<input type="checkbox" checked class="switch-btn" data-color="#a683eb">
-									<input type="checkbox" checked class="switch-btn" data-color="#f2a654">
-									<input type="checkbox" checked class="switch-btn" data-color="#0059b2">
-								</div>
-								<div class="mb-30">
-									<h5 class="h5">Sizes</h5>
-									<p>add <code>data-size="small",data-size="large"</code> to your input element for diffrent sizes.</p>
-									<input type="checkbox" checked class="switch-btn" data-size="small" data-color="#0099ff">
-									<input type="checkbox" checked class="switch-btn" data-size="small" data-color="#f56767">
-									<input type="checkbox" checked class="switch-btn" data-color="#41ccba">
-									<input type="checkbox" checked class="switch-btn" data-color="#a683eb">
-									<input type="checkbox" checked class="switch-btn" data-size="large" data-color="#f2a654">
-									<input type="checkbox" checked class="switch-btn" data-size="large" data-color="#0059b2">
-								</div>
-								<div class="mb-30">
-									<h5 class="h5">Secondary Color</h5>
-									<p>add <code>data-color="#0099ff" data-secondary-color="#28a745"</code> to your input</p>
-									<input type="checkbox" checked class="switch-btn" data-size="small" data-color="#0099ff" data-secondary-color="#28a745">
-									<input type="checkbox" class="switch-btn" data-size="small" data-color="#f56767" data-secondary-color="#28a745">
-									<input type="checkbox" checked class="switch-btn" data-color="#41ccba" data-secondary-color="#28a745">
-									<input type="checkbox" class="switch-btn" data-color="#a683eb" data-secondary-color="#28a745">
-									<input type="checkbox" checked class="switch-btn" data-size="large" data-color="#f2a654" data-secondary-color="#28a745">
-									<input type="checkbox" class="switch-btn" data-size="large" data-color="#0059b2" data-secondary-color="#28a745">
-								</div>
-							</form>
-						</div>
-					</div>
-					<!-- Bootstrap Switchery End -->
-					<!-- Bootstrap Tags Input Start -->
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<div class="clearfix mb-30">
-								<div class="pull-left">
-									<h4 class="text-blue h4">Bootstrap Tags Input</h4>
-								</div>
-							</div>
-							<form>
-								<div class="mb-30">
-									<h5 class="h5">Input Value</h5>
-									<p>add <code>data-role="tagsinput"</code> to your input element.</p>
-									<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput">
-								</div>
-								<div class="mb-30">
-									<h5 class="h5">Select Value</h5>
-									<p>add <code>data-role="tagsinput"</code> to your select element & use select multiple</p>
-									<select multiple data-role="tagsinput">
-										<option value="Amsterdam">Amsterdam</option>
-										<option value="Washington">Washington</option>
-										<option value="Sydney">Sydney</option>
-										<option value="Beijing">Beijing</option>
-										<option value="Cairo">Cairo</option>
-									</select>
-								</div>
-								<div class="mb-30">
-									<h5 class="h5">Input placeholder</h5>
-									<p>add <code>data-role="tagsinput" placeholder="add tags"</code> to your input element.</p>
-									<input type="text" value="Amsterdam,Washington,Sydney" data-role="tagsinput" placeholder="add tags">
-								</div>
-							</form>
-						</div>
-					</div>
-					<!-- Bootstrap Tags Input End -->
-				</div>
-				<!-- Bootstrap TouchSpin Start -->
-				<div class="pd-20 card-box height-100-p mb-30">
-					<div class="clearfix mb-30">
-						<div class="pull-left">
-							<h4 class="text-blue h4">Bootstrap TouchSpin</h4>
-						</div>
-					</div>
-					<form>
-						<div class="row">
-							<div class="col-md-6 col-sm-12">
-								<div class="form-group">
-									<label>Example with postfix</label>
-									<input id="demo1" type="text" value="55" name="demo1">
-								</div>
-							</div>
-							<div class="col-md-6 col-sm-12">
-								<div class="form-group">
-									<label>Example with prefix</label>
-									<input id="demo2" type="text" value="0" name="demo2">
-								</div>
-							</div>
-							<div class="col-md-6 col-sm-12">
-								<div class="form-group">
-									<label>Vertical buttons</label>
-									<input id="demo_vertical2" type="text" value="" name="demo_vertical2">
-								</div>
-							</div>
-							<div class="col-md-6 col-sm-12">
-								<div class="form-group">
-									<label>Init with empty value</label>
-									<input id="demo3" type="text" value="" name="demo3">
-								</div>
-							</div>
-							<div class="col-md-6 col-sm-12">
-								<div class="form-group">
-									<label>Value is set</label>
-									<input id="demo3_22" type="text" value="33" name="demo3_22">
-								</div>
-							</div>
-							<div class="col-md-6 col-sm-12">
-								<div class="form-group">
-									<label>Button group</label>
-									<input id="demo5" type="text" class="form-control" name="demo5" value="50">
-								</div>
-							</div>
-						</div>
-					</form>
-				</div>
-				<!-- Bootstrap TouchSpin End -->
-
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-	<!-- switchery js -->
-	<script src="src/plugins/switchery/switchery.min.js"></script>
-	<!-- bootstrap-tagsinput js -->
-	<script src="src/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
-	<!-- bootstrap-touchspin js -->
-	<script src="src/plugins/bootstrap-touchspin/jquery.bootstrap-touchspin.js"></script>
-	<script src="vendors/scripts/advanced-components.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/apexcharts.html b/apexcharts.html
new file mode 100644
index 00000000..017ac070
--- /dev/null
+++ b/apexcharts.html
@@ -0,0 +1,536 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>Apexcharts</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Charts</li>
+								</ol>
+							</nav>
+						</div>
+						<div class="col-md-6 col-sm-12 text-right">
+							<div class="dropdown">
+								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+									January 2020
+								</a>
+								<div class="dropdown-menu dropdown-menu-right">
+									<a class="dropdown-item" href="#">Export List</a>
+									<a class="dropdown-item" href="#">Policies</a>
+									<a class="dropdown-item" href="#">View Assets</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="bg-white pd-20 card-box mb-30">
+					<h4 class="h4 text-blue">line Chart</h4>
+					<div id="chart1"></div>
+				</div>
+				<div class="bg-white pd-20 card-box mb-30">
+					<h4 class="h4 text-blue">Area Chart</h4>
+					<div id="chart2"></div>
+				</div>
+				<div class="bg-white pd-20 card-box mb-30">
+					<h4 class="h4 text-blue">Column Chart</h4>
+					<div id="chart3"></div>
+				</div>
+				<div class="bg-white pd-20 card-box mb-30">
+					<h4 class="h4 text-blue">Bar Chart</h4>
+					<div id="chart4"></div>
+				</div>
+				<div class="bg-white pd-20 card-box mb-30">
+					<h4 class="h4 text-blue">Mixed Chart</h4>
+					<div id="chart5"></div>
+				</div>
+				<div class="bg-white pd-20 card-box mb-30">
+					<h4 class="h4 text-blue">Timeline Chart</h4>
+					<div id="chart6"></div>
+				</div>
+				<div class="bg-white pd-20 card-box mb-30">
+					<h4 class="h4 text-blue">Candlestick Chart</h4>
+					<div id="chart7"></div>
+				</div>
+				<div class="row">
+					<div class="col-md-6 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="h4 text-blue">Pie Chart</h4>
+							<div id="chart8"></div>
+						</div>
+					</div>
+					<div class="col-md-6 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="h4 text-blue">Radial Bar Chart</h4>
+							<div id="chart9"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+	<script src="src/plugins/apexcharts/apexcharts.min.js"></script>
+	<script src="vendors/scripts/apexcharts-setting.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/apexcharts.php b/apexcharts.php
deleted file mode 100644
index 79172401..00000000
--- a/apexcharts.php
+++ /dev/null
@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>Apexcharts</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Charts</li>
-								</ol>
-							</nav>
-						</div>
-						<div class="col-md-6 col-sm-12 text-right">
-							<div class="dropdown">
-								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-									January 2020
-								</a>
-								<div class="dropdown-menu dropdown-menu-right">
-									<a class="dropdown-item" href="#">Export List</a>
-									<a class="dropdown-item" href="#">Policies</a>
-									<a class="dropdown-item" href="#">View Assets</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="bg-white pd-20 card-box mb-30">
-					<h4 class="h4 text-blue">line Chart</h4>
-					<div id="chart1"></div>
-				</div>
-				<div class="bg-white pd-20 card-box mb-30">
-					<h4 class="h4 text-blue">Area Chart</h4>
-					<div id="chart2"></div>
-				</div>
-				<div class="bg-white pd-20 card-box mb-30">
-					<h4 class="h4 text-blue">Column Chart</h4>
-					<div id="chart3"></div>
-				</div>
-				<div class="bg-white pd-20 card-box mb-30">
-					<h4 class="h4 text-blue">Bar Chart</h4>
-					<div id="chart4"></div>
-				</div>
-				<div class="bg-white pd-20 card-box mb-30">
-					<h4 class="h4 text-blue">Mixed Chart</h4>
-					<div id="chart5"></div>
-				</div>
-				<div class="bg-white pd-20 card-box mb-30">
-					<h4 class="h4 text-blue">Timeline Chart</h4>
-					<div id="chart6"></div>
-				</div>
-				<div class="bg-white pd-20 card-box mb-30">
-					<h4 class="h4 text-blue">Candlestick Chart</h4>
-					<div id="chart7"></div>
-				</div>
-				<div class="row">
-					<div class="col-md-6 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="h4 text-blue">Pie Chart</h4>
-							<div id="chart8"></div>
-						</div>
-					</div>
-					<div class="col-md-6 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="h4 text-blue">Radial Bar Chart</h4>
-							<div id="chart9"></div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-	<script src="src/plugins/apexcharts/apexcharts.min.js"></script>
-	<script src="vendors/scripts/apexcharts-setting.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/basic-table.html b/basic-table.html
new file mode 100644
index 00000000..20dc77db
--- /dev/null
+++ b/basic-table.html
@@ -0,0 +1,917 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>Basic Tables</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Basic Tables</li>
+								</ol>
+							</nav>
+						</div>
+						<div class="col-md-6 col-sm-12 text-right">
+							<div class="dropdown">
+								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+									January 2018
+								</a>
+								<div class="dropdown-menu dropdown-menu-right">
+									<a class="dropdown-item" href="#">Export List</a>
+									<a class="dropdown-item" href="#">Policies</a>
+									<a class="dropdown-item" href="#">View Assets</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<!-- basic table  Start -->
+				<div class="pd-20 card-box mb-30">
+					<div class="clearfix mb-20">
+						<div class="pull-left">
+							<h4 class="text-blue h4">Basic Table</h4>
+							<p>Add class <code>.table</code></p>
+						</div>
+						<div class="pull-right">
+							<a href="#basic-table" class="btn btn-primary btn-sm scroll-click" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
+						</div>
+					</div>
+					<table class="table">
+						<thead>
+							<tr>
+								<th scope="col">#</th>
+								<th scope="col">First</th>
+								<th scope="col">Last</th>
+								<th scope="col">Handle</th>
+								<th scope="col">Tag</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<th scope="row">1</th>
+								<td>Mark</td>
+								<td>Otto</td>
+								<td>@mdo</td>
+								<td><span class="badge badge-primary">Primary</span></td>
+							</tr>
+							<tr>
+								<th scope="row">2</th>
+								<td>Jacob</td>
+								<td>Thornton</td>
+								<td>@fat</td>
+								<td><span class="badge badge-secondary">Secondary</span></td>
+							</tr>
+							<tr>
+								<th scope="row">3</th>
+								<td>Larry</td>
+								<td>the Bird</td>
+								<td>@twitter</td>
+								<td><span class="badge badge-success">Success</span></td>
+							</tr>
+						</tbody>
+					</table>
+					<div class="collapse collapse-box" id="basic-table" >
+						<div class="code-box">
+							<div class="clearfix">
+								<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#basic-table-code"><i class="fa fa-clipboard"></i> Copy Code</a>
+								<a href="#basic-table" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
+							</div>
+							<pre><code class="xml copy-pre" id="basic-table-code">
+<table class="table">
+  <thead>
+    <tr>
+      <th scope="col">#</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+    </tr>
+  </tbody>
+</table>
+							</code></pre>
+						</div>
+					</div>
+				</div>
+				<!-- basic table  End -->
+				<!-- Bordered table  start -->
+				<div class="pd-20 card-box mb-30">
+					<div class="clearfix mb-20">
+						<div class="pull-left">
+							<h4 class="text-blue h4">Bordered table</h4>
+							<p>Add <code>.table  .table-bordered</code> for borders on all sides of the table and cells.</p>
+						</div>
+						<div class="pull-right">
+							<a href="#border-table" class="btn btn-primary btn-sm scroll-click" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
+						</div>
+					</div>
+					<table class="table table-bordered">
+						<thead>
+							<tr>
+								<th scope="col">#</th>
+								<th scope="col">First</th>
+								<th scope="col">Last</th>
+								<th scope="col">Handle</th>
+								<th scope="col">Tag</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<th scope="row">1</th>
+								<td>Mark</td>
+								<td>Otto</td>
+								<td>@mdo</td>
+								<td><span class="badge badge-primary">Primary</span></td>
+							</tr>
+							<tr>
+								<th scope="row">2</th>
+								<td>Jacob</td>
+								<td>Thornton</td>
+								<td>@fat</td>
+								<td><span class="badge badge-secondary">Secondary</span></td>
+							</tr>
+							<tr>
+								<th scope="row">3</th>
+								<td>Larry</td>
+								<td>the Bird</td>
+								<td>@twitter</td>
+								<td><span class="badge badge-success">Success</span></td>
+							</tr>
+						</tbody>
+					</table>
+					<div class="collapse collapse-box" id="border-table">
+						<div class="code-box">
+							<div class="clearfix">
+								<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#border-table-code"><i class="fa fa-clipboard"></i> Copy Code</a>
+								<a href="#border-table" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
+							</div>
+							<pre><code class="xml copy-pre" id="border-table-code">
+<table class="table table-bordered">
+  <thead>
+    <tr>
+      <th scope="col">#</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+    </tr>
+  </tbody>
+</table>
+							</code></pre>
+						</div>
+					</div>
+				</div>
+				<!-- Bordered table End -->
+				<!-- Striped table start -->
+				<div class="pd-20 card-box mb-30">
+					<div class="clearfix mb-20">
+						<div class="pull-left">
+							<h4 class="text-blue h4">Striped table</h4>
+							<p>Add <code>.table  .table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
+						</div>
+						<div class="pull-right">
+							<a href="#striped-table" class="btn btn-primary btn-sm scroll-click" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
+						</div>
+					</div>
+					<table class="table table-striped">
+						<thead>
+							<tr>
+								<th scope="col">#</th>
+								<th scope="col">First</th>
+								<th scope="col">Last</th>
+								<th scope="col">Handle</th>
+								<th scope="col">Tag</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<th scope="row">1</th>
+								<td>Mark</td>
+								<td>Otto</td>
+								<td>@mdo</td>
+								<td><span class="badge badge-primary">Primary</span></td>
+							</tr>
+							<tr>
+								<th scope="row">2</th>
+								<td>Jacob</td>
+								<td>Thornton</td>
+								<td>@fat</td>
+								<td><span class="badge badge-secondary">Secondary</span></td>
+							</tr>
+							<tr>
+								<th scope="row">3</th>
+								<td>Larry</td>
+								<td>the Bird</td>
+								<td>@twitter</td>
+								<td><span class="badge badge-success">Success</span></td>
+							</tr>
+							<tr>
+								<th scope="row">2</th>
+								<td>Jacob</td>
+								<td>Thornton</td>
+								<td>@fat</td>
+								<td><span class="badge badge-secondary">Secondary</span></td>
+							</tr>
+							<tr>
+								<th scope="row">3</th>
+								<td>Larry</td>
+								<td>the Bird</td>
+								<td>@twitter</td>
+								<td><span class="badge badge-success">Success</span></td>
+							</tr>
+						</tbody>
+					</table>
+					<div class="collapse collapse-box" id="striped-table">
+						<div class="code-box">
+							<div class="clearfix">
+								<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#striped-table-code"><i class="fa fa-clipboard"></i> Copy Code</a>
+								<a href="#striped-table" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
+							</div>
+							<pre><code class="xml copy-pre" id="striped-table-code">
+<table class="table table-striped">
+  <thead>
+    <tr>
+      <th scope="col">#</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+    </tr>
+  </tbody>
+</table>
+							</code></pre>
+						</div>
+					</div>
+				</div>
+				<!-- Striped table End -->
+				<!-- Responsive tables Start -->
+				<div class="pd-20 card-box mb-30">
+					<div class="clearfix mb-20">
+						<div class="pull-left">
+							<h4 class="text-blue h4">Responsive table</h4>
+							<p>Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a <code>.table  .table-responsive</code> Or, pick a maximum breakpoint with which to have a responsive table up to by using<code>.table-responsive{-sm|-md|-lg|-xl}</code>.</p>
+						</div>
+						<div class="pull-right">
+							<a href="#responsive-table" class="btn btn-primary btn-sm scroll-click" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
+						</div>
+					</div>
+					<div class="table-responsive">
+						<table class="table table-striped">
+							<thead>
+								<tr>
+									<th scope="col">#</th>
+									<th scope="col">First</th>
+									<th scope="col">Last</th>
+									<th scope="col">Handle</th>
+									<th scope="col">Tag</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr>
+									<th scope="row">1</th>
+									<td>Mark</td>
+									<td>Otto</td>
+									<td>@mdo</td>
+									<td><span class="badge badge-primary">Primary</span></td>
+								</tr>
+								<tr>
+									<th scope="row">2</th>
+									<td>Jacob</td>
+									<td>Thornton</td>
+									<td>@fat</td>
+									<td><span class="badge badge-secondary">Secondary</span></td>
+								</tr>
+								<tr>
+									<th scope="row">3</th>
+									<td>Larry</td>
+									<td>the Bird</td>
+									<td>@twitter</td>
+									<td><span class="badge badge-success">Success</span></td>
+								</tr>
+								<tr>
+									<th scope="row">2</th>
+									<td>Jacob</td>
+									<td>Thornton</td>
+									<td>@fat</td>
+									<td><span class="badge badge-secondary">Secondary</span></td>
+								</tr>
+								<tr>
+									<th scope="row">3</th>
+									<td>Larry</td>
+									<td>the Bird</td>
+									<td>@twitter</td>
+									<td><span class="badge badge-success">Success</span></td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+					<div class="collapse collapse-box" id="responsive-table">
+						<div class="code-box">
+							<div class="clearfix">
+								<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#responsive-table-code"><i class="fa fa-clipboard"></i> Copy Code</a>
+								<a href="#responsive-table" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
+							</div>
+							<pre><code class="xml copy-pre" id="responsive-table-code">
+<div class="table-responsive">
+	<table class="table table-striped">
+	  <thead>
+	    <tr>
+	      <th scope="col">#</th>
+	    </tr>
+	  </thead>
+	  <tbody>
+	    <tr>
+	      <th scope="row">1</th>
+	    </tr>
+	  </tbody>
+	</table>
+</div>
+							</code></pre>
+						</div>
+					</div>
+				</div>
+				<!-- Responsive tables End -->
+				<!-- Contextual classes Start -->
+				<div class="pd-20 card-box mb-30">
+					<div class="clearfix mb-20">
+						<div class="pull-left">
+							<h4 class="text-blue h4">Contextual classes</h4>
+							<p>Use classes <code>( .table-active, .table-success, .table-info, .table-warning, .table-danger )</code> to color table rows or individual cells</p>
+						</div>
+						<div class="pull-right">
+							<a href="#contextual-table" class="btn btn-primary btn-sm scroll-click" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
+						</div>
+					</div>
+					<div class="table-responsive">
+						<table class="table">
+							<thead>
+								<tr>
+									<th scope="col">#</th>
+									<th scope="col">First</th>
+									<th scope="col">Last</th>
+									<th scope="col">Handle</th>
+									<th scope="col">Tag</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr class="table-active">
+									<th scope="row">1</th>
+									<td>Mark</td>
+									<td>Otto</td>
+									<td>@mdo</td>
+									<td><span class="badge badge-primary">Primary</span></td>
+								</tr>
+								<tr class="table-primary">
+									<th scope="row">2</th>
+									<td>Jacob</td>
+									<td>Thornton</td>
+									<td>@fat</td>
+									<td><span class="badge badge-secondary">Secondary</span></td>
+								</tr>
+								<tr class="table-secondary">
+									<th scope="row">3</th>
+									<td>Larry</td>
+									<td>the Bird</td>
+									<td>@twitter</td>
+									<td><span class="badge badge-success">Success</span></td>
+								</tr>
+								<tr class="table-success">
+									<th scope="row">2</th>
+									<td>Jacob</td>
+									<td>Thornton</td>
+									<td>@fat</td>
+									<td><span class="badge badge-secondary">Secondary</span></td>
+								</tr>
+								<tr class="table-danger">
+									<th scope="row">3</th>
+									<td>Larry</td>
+									<td>the Bird</td>
+									<td>@twitter</td>
+									<td><span class="badge badge-success">Success</span></td>
+								</tr>
+								<tr class="table-warning">
+									<th scope="row">3</th>
+									<td>Larry</td>
+									<td>the Bird</td>
+									<td>@twitter</td>
+									<td><span class="badge badge-success">Success</span></td>
+								</tr>
+								<tr class="table-info">
+									<th scope="row">3</th>
+									<td>Larry</td>
+									<td>the Bird</td>
+									<td>@twitter</td>
+									<td><span class="badge badge-success">Success</span></td>
+								</tr>
+								<tr class="table-dark">
+									<th scope="row">3</th>
+									<td>Larry</td>
+									<td>the Bird</td>
+									<td>@twitter</td>
+									<td><span class="badge badge-success">Success</span></td>
+								</tr>
+								<tr class="table-light">
+									<th scope="row">3</th>
+									<td>Larry</td>
+									<td>the Bird</td>
+									<td>@twitter</td>
+									<td><span class="badge badge-success">Success</span></td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+					<div class="collapse collapse-box" id="contextual-table">
+						<div class="code-box">
+							<div class="clearfix">
+								<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#contextual-table-code"><i class="fa fa-clipboard"></i> Copy Code</a>
+								<a href="#contextual-table" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
+							</div>
+							<pre><code class="xml copy-pre" id="contextual-table-code">
+<div class="table-responsive">
+	<table class="table table-striped">
+	  <tbody>
+	    <tr class="table-active"><td></td></tr>
+		<tr class="table-primary"><td></td></tr>
+		<tr class="table-secondary"><td></td></tr>
+		<tr class="table-success"><td></td></tr>
+		<tr class="table-danger"><td></td></tr>
+		<tr class="table-warning"><td></td></tr>
+		<tr class="table-info"><td></td></tr>
+		<tr class="table-light"><td></td></tr>
+		<tr class="table-dark"><td></td></tr>
+	  </tbody>
+	</table>
+</div>
+							</code></pre>
+						</div>
+					</div>
+				</div>
+				<!-- Contextual classes End -->
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/basic-table.php b/basic-table.php
deleted file mode 100644
index 02038793..00000000
--- a/basic-table.php
+++ /dev/null
@@ -1,469 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>Basic Tables</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Basic Tables</li>
-								</ol>
-							</nav>
-						</div>
-						<div class="col-md-6 col-sm-12 text-right">
-							<div class="dropdown">
-								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-									January 2018
-								</a>
-								<div class="dropdown-menu dropdown-menu-right">
-									<a class="dropdown-item" href="#">Export List</a>
-									<a class="dropdown-item" href="#">Policies</a>
-									<a class="dropdown-item" href="#">View Assets</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<!-- basic table  Start -->
-				<div class="pd-20 card-box mb-30">
-					<div class="clearfix mb-20">
-						<div class="pull-left">
-							<h4 class="text-blue h4">Basic Table</h4>
-							<p>Add class <code>.table</code></p>
-						</div>
-						<div class="pull-right">
-							<a href="#basic-table" class="btn btn-primary btn-sm scroll-click" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
-						</div>
-					</div>
-					<table class="table">
-						<thead>
-							<tr>
-								<th scope="col">#</th>
-								<th scope="col">First</th>
-								<th scope="col">Last</th>
-								<th scope="col">Handle</th>
-								<th scope="col">Tag</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr>
-								<th scope="row">1</th>
-								<td>Mark</td>
-								<td>Otto</td>
-								<td>@mdo</td>
-								<td><span class="badge badge-primary">Primary</span></td>
-							</tr>
-							<tr>
-								<th scope="row">2</th>
-								<td>Jacob</td>
-								<td>Thornton</td>
-								<td>@fat</td>
-								<td><span class="badge badge-secondary">Secondary</span></td>
-							</tr>
-							<tr>
-								<th scope="row">3</th>
-								<td>Larry</td>
-								<td>the Bird</td>
-								<td>@twitter</td>
-								<td><span class="badge badge-success">Success</span></td>
-							</tr>
-						</tbody>
-					</table>
-					<div class="collapse collapse-box" id="basic-table" >
-						<div class="code-box">
-							<div class="clearfix">
-								<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#basic-table-code"><i class="fa fa-clipboard"></i> Copy Code</a>
-								<a href="#basic-table" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
-							</div>
-							<pre><code class="xml copy-pre" id="basic-table-code">
-<table class="table">
-  <thead>
-    <tr>
-      <th scope="col">#</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-    </tr>
-  </tbody>
-</table>
-							</code></pre>
-						</div>
-					</div>
-				</div>
-				<!-- basic table  End -->
-				<!-- Bordered table  start -->
-				<div class="pd-20 card-box mb-30">
-					<div class="clearfix mb-20">
-						<div class="pull-left">
-							<h4 class="text-blue h4">Bordered table</h4>
-							<p>Add <code>.table  .table-bordered</code> for borders on all sides of the table and cells.</p>
-						</div>
-						<div class="pull-right">
-							<a href="#border-table" class="btn btn-primary btn-sm scroll-click" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
-						</div>
-					</div>
-					<table class="table table-bordered">
-						<thead>
-							<tr>
-								<th scope="col">#</th>
-								<th scope="col">First</th>
-								<th scope="col">Last</th>
-								<th scope="col">Handle</th>
-								<th scope="col">Tag</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr>
-								<th scope="row">1</th>
-								<td>Mark</td>
-								<td>Otto</td>
-								<td>@mdo</td>
-								<td><span class="badge badge-primary">Primary</span></td>
-							</tr>
-							<tr>
-								<th scope="row">2</th>
-								<td>Jacob</td>
-								<td>Thornton</td>
-								<td>@fat</td>
-								<td><span class="badge badge-secondary">Secondary</span></td>
-							</tr>
-							<tr>
-								<th scope="row">3</th>
-								<td>Larry</td>
-								<td>the Bird</td>
-								<td>@twitter</td>
-								<td><span class="badge badge-success">Success</span></td>
-							</tr>
-						</tbody>
-					</table>
-					<div class="collapse collapse-box" id="border-table">
-						<div class="code-box">
-							<div class="clearfix">
-								<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#border-table-code"><i class="fa fa-clipboard"></i> Copy Code</a>
-								<a href="#border-table" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
-							</div>
-							<pre><code class="xml copy-pre" id="border-table-code">
-<table class="table table-bordered">
-  <thead>
-    <tr>
-      <th scope="col">#</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-    </tr>
-  </tbody>
-</table>
-							</code></pre>
-						</div>
-					</div>
-				</div>
-				<!-- Bordered table End -->
-				<!-- Striped table start -->
-				<div class="pd-20 card-box mb-30">
-					<div class="clearfix mb-20">
-						<div class="pull-left">
-							<h4 class="text-blue h4">Striped table</h4>
-							<p>Add <code>.table  .table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
-						</div>
-						<div class="pull-right">
-							<a href="#striped-table" class="btn btn-primary btn-sm scroll-click" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
-						</div>
-					</div>
-					<table class="table table-striped">
-						<thead>
-							<tr>
-								<th scope="col">#</th>
-								<th scope="col">First</th>
-								<th scope="col">Last</th>
-								<th scope="col">Handle</th>
-								<th scope="col">Tag</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr>
-								<th scope="row">1</th>
-								<td>Mark</td>
-								<td>Otto</td>
-								<td>@mdo</td>
-								<td><span class="badge badge-primary">Primary</span></td>
-							</tr>
-							<tr>
-								<th scope="row">2</th>
-								<td>Jacob</td>
-								<td>Thornton</td>
-								<td>@fat</td>
-								<td><span class="badge badge-secondary">Secondary</span></td>
-							</tr>
-							<tr>
-								<th scope="row">3</th>
-								<td>Larry</td>
-								<td>the Bird</td>
-								<td>@twitter</td>
-								<td><span class="badge badge-success">Success</span></td>
-							</tr>
-							<tr>
-								<th scope="row">2</th>
-								<td>Jacob</td>
-								<td>Thornton</td>
-								<td>@fat</td>
-								<td><span class="badge badge-secondary">Secondary</span></td>
-							</tr>
-							<tr>
-								<th scope="row">3</th>
-								<td>Larry</td>
-								<td>the Bird</td>
-								<td>@twitter</td>
-								<td><span class="badge badge-success">Success</span></td>
-							</tr>
-						</tbody>
-					</table>
-					<div class="collapse collapse-box" id="striped-table">
-						<div class="code-box">
-							<div class="clearfix">
-								<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#striped-table-code"><i class="fa fa-clipboard"></i> Copy Code</a>
-								<a href="#striped-table" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
-							</div>
-							<pre><code class="xml copy-pre" id="striped-table-code">
-<table class="table table-striped">
-  <thead>
-    <tr>
-      <th scope="col">#</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-    </tr>
-  </tbody>
-</table>
-							</code></pre>
-						</div>
-					</div>
-				</div>
-				<!-- Striped table End -->
-				<!-- Responsive tables Start -->
-				<div class="pd-20 card-box mb-30">
-					<div class="clearfix mb-20">
-						<div class="pull-left">
-							<h4 class="text-blue h4">Responsive table</h4>
-							<p>Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a <code>.table  .table-responsive</code> Or, pick a maximum breakpoint with which to have a responsive table up to by using<code>.table-responsive{-sm|-md|-lg|-xl}</code>.</p>
-						</div>
-						<div class="pull-right">
-							<a href="#responsive-table" class="btn btn-primary btn-sm scroll-click" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
-						</div>
-					</div>
-					<div class="table-responsive">
-						<table class="table table-striped">
-							<thead>
-								<tr>
-									<th scope="col">#</th>
-									<th scope="col">First</th>
-									<th scope="col">Last</th>
-									<th scope="col">Handle</th>
-									<th scope="col">Tag</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr>
-									<th scope="row">1</th>
-									<td>Mark</td>
-									<td>Otto</td>
-									<td>@mdo</td>
-									<td><span class="badge badge-primary">Primary</span></td>
-								</tr>
-								<tr>
-									<th scope="row">2</th>
-									<td>Jacob</td>
-									<td>Thornton</td>
-									<td>@fat</td>
-									<td><span class="badge badge-secondary">Secondary</span></td>
-								</tr>
-								<tr>
-									<th scope="row">3</th>
-									<td>Larry</td>
-									<td>the Bird</td>
-									<td>@twitter</td>
-									<td><span class="badge badge-success">Success</span></td>
-								</tr>
-								<tr>
-									<th scope="row">2</th>
-									<td>Jacob</td>
-									<td>Thornton</td>
-									<td>@fat</td>
-									<td><span class="badge badge-secondary">Secondary</span></td>
-								</tr>
-								<tr>
-									<th scope="row">3</th>
-									<td>Larry</td>
-									<td>the Bird</td>
-									<td>@twitter</td>
-									<td><span class="badge badge-success">Success</span></td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-					<div class="collapse collapse-box" id="responsive-table">
-						<div class="code-box">
-							<div class="clearfix">
-								<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#responsive-table-code"><i class="fa fa-clipboard"></i> Copy Code</a>
-								<a href="#responsive-table" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
-							</div>
-							<pre><code class="xml copy-pre" id="responsive-table-code">
-<div class="table-responsive">
-	<table class="table table-striped">
-	  <thead>
-	    <tr>
-	      <th scope="col">#</th>
-	    </tr>
-	  </thead>
-	  <tbody>
-	    <tr>
-	      <th scope="row">1</th>
-	    </tr>
-	  </tbody>
-	</table>
-</div>
-							</code></pre>
-						</div>
-					</div>
-				</div>
-				<!-- Responsive tables End -->
-				<!-- Contextual classes Start -->
-				<div class="pd-20 card-box mb-30">
-					<div class="clearfix mb-20">
-						<div class="pull-left">
-							<h4 class="text-blue h4">Contextual classes</h4>
-							<p>Use classes <code>( .table-active, .table-success, .table-info, .table-warning, .table-danger )</code> to color table rows or individual cells</p>
-						</div>
-						<div class="pull-right">
-							<a href="#contextual-table" class="btn btn-primary btn-sm scroll-click" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
-						</div>
-					</div>
-					<div class="table-responsive">
-						<table class="table">
-							<thead>
-								<tr>
-									<th scope="col">#</th>
-									<th scope="col">First</th>
-									<th scope="col">Last</th>
-									<th scope="col">Handle</th>
-									<th scope="col">Tag</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr class="table-active">
-									<th scope="row">1</th>
-									<td>Mark</td>
-									<td>Otto</td>
-									<td>@mdo</td>
-									<td><span class="badge badge-primary">Primary</span></td>
-								</tr>
-								<tr class="table-primary">
-									<th scope="row">2</th>
-									<td>Jacob</td>
-									<td>Thornton</td>
-									<td>@fat</td>
-									<td><span class="badge badge-secondary">Secondary</span></td>
-								</tr>
-								<tr class="table-secondary">
-									<th scope="row">3</th>
-									<td>Larry</td>
-									<td>the Bird</td>
-									<td>@twitter</td>
-									<td><span class="badge badge-success">Success</span></td>
-								</tr>
-								<tr class="table-success">
-									<th scope="row">2</th>
-									<td>Jacob</td>
-									<td>Thornton</td>
-									<td>@fat</td>
-									<td><span class="badge badge-secondary">Secondary</span></td>
-								</tr>
-								<tr class="table-danger">
-									<th scope="row">3</th>
-									<td>Larry</td>
-									<td>the Bird</td>
-									<td>@twitter</td>
-									<td><span class="badge badge-success">Success</span></td>
-								</tr>
-								<tr class="table-warning">
-									<th scope="row">3</th>
-									<td>Larry</td>
-									<td>the Bird</td>
-									<td>@twitter</td>
-									<td><span class="badge badge-success">Success</span></td>
-								</tr>
-								<tr class="table-info">
-									<th scope="row">3</th>
-									<td>Larry</td>
-									<td>the Bird</td>
-									<td>@twitter</td>
-									<td><span class="badge badge-success">Success</span></td>
-								</tr>
-								<tr class="table-dark">
-									<th scope="row">3</th>
-									<td>Larry</td>
-									<td>the Bird</td>
-									<td>@twitter</td>
-									<td><span class="badge badge-success">Success</span></td>
-								</tr>
-								<tr class="table-light">
-									<th scope="row">3</th>
-									<td>Larry</td>
-									<td>the Bird</td>
-									<td>@twitter</td>
-									<td><span class="badge badge-success">Success</span></td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-					<div class="collapse collapse-box" id="contextual-table">
-						<div class="code-box">
-							<div class="clearfix">
-								<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#contextual-table-code"><i class="fa fa-clipboard"></i> Copy Code</a>
-								<a href="#contextual-table" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
-							</div>
-							<pre><code class="xml copy-pre" id="contextual-table-code">
-<div class="table-responsive">
-	<table class="table table-striped">
-	  <tbody>
-	    <tr class="table-active"><td></td></tr>
-		<tr class="table-primary"><td></td></tr>
-		<tr class="table-secondary"><td></td></tr>
-		<tr class="table-success"><td></td></tr>
-		<tr class="table-danger"><td></td></tr>
-		<tr class="table-warning"><td></td></tr>
-		<tr class="table-info"><td></td></tr>
-		<tr class="table-light"><td></td></tr>
-		<tr class="table-dark"><td></td></tr>
-	  </tbody>
-	</table>
-</div>
-							</code></pre>
-						</div>
-					</div>
-				</div>
-				<!-- Contextual classes End -->
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/blank.html b/blank.html
new file mode 100644
index 00000000..c3b55bfb
--- /dev/null
+++ b/blank.html
@@ -0,0 +1,495 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>blank</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">blank</li>
+								</ol>
+							</nav>
+						</div>
+						<div class="col-md-6 col-sm-12 text-right">
+							<div class="dropdown">
+								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+									January 2018
+								</a>
+								<div class="dropdown-menu dropdown-menu-right">
+									<a class="dropdown-item" href="#">Export List</a>
+									<a class="dropdown-item" href="#">Policies</a>
+									<a class="dropdown-item" href="#">View Assets</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="pd-20 bg-white border-radius-4 box-shadow mb-30">
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/blank.php b/blank.php
deleted file mode 100644
index 54cbf1ee..00000000
--- a/blank.php
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>blank</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">blank</li>
-								</ol>
-							</nav>
-						</div>
-						<div class="col-md-6 col-sm-12 text-right">
-							<div class="dropdown">
-								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-									January 2018
-								</a>
-								<div class="dropdown-menu dropdown-menu-right">
-									<a class="dropdown-item" href="#">Export List</a>
-									<a class="dropdown-item" href="#">Policies</a>
-									<a class="dropdown-item" href="#">View Assets</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="pd-20 bg-white border-radius-4 box-shadow mb-30">
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/blog-detail.html b/blog-detail.html
new file mode 100644
index 00000000..ade9ed60
--- /dev/null
+++ b/blog-detail.html
@@ -0,0 +1,582 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Blog Detail</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Blog Detail</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="blog-wrap">
+					<div class="container pd-0">
+						<div class="row">
+							<div class="col-md-8 col-sm-12">
+								<div class="blog-detail card-box overflow-hidden mb-30">
+									<div class="blog-img">
+										<img src="vendors/images/img2.jpg" alt="">
+									</div>
+									<div class="blog-caption">
+										<h4 class="mb-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
+										<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</p>
+										<h5 class="mb-10">Lorem ipsum dolor sit amet, consectetur.</h5>
+										<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>
+										<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>
+										<h5 class="mb-10">Unordered List</h5>
+										<ul>
+											<li>Duis aute irure dolor in reprehenderit in voluptate.</li>
+											<li>Sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
+											<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</li>
+											<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
+											<li>Duis aute irure dolor in reprehenderit in voluptate.</li>
+											<li>Sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
+											<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</li>
+											<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
+										</ul>
+										<h5 class="mb-10">Ordered List</h5>
+										<ol>
+											<li>Duis aute irure dolor in reprehenderit in voluptate.</li>
+											<li>Sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
+											<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</li>
+											<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
+											<li>Duis aute irure dolor in reprehenderit in voluptate.</li>
+											<li>Sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
+											<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</li>
+											<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
+										</ol>
+									</div>
+								</div>
+							</div>
+							<div class="col-md-4 col-sm-12">
+								<div class="card-box mb-30">
+									<h5 class="pd-20 h5 mb-0">Categories</h5>
+									<div class="list-group">
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">HTML <span class="badge badge-primary badge-pill">7</span></a>
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">Css <span class="badge badge-primary badge-pill">10</span></a>
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between active">Bootstrap <span class="badge badge-primary badge-pill">8</span></a>
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">jQuery <span class="badge badge-primary badge-pill">15</span></a>
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">Design <span class="badge badge-primary badge-pill">5</span></a>
+									</div>
+								</div>
+								<div class="card-box mb-30">
+									<h5 class="pd-20 h5 mb-0">Latest Post</h5>
+									<div class="latest-post">
+										<ul>
+											<li>
+												<h4><a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco</a></h4>
+												<span>HTML</span>
+											</li>
+											<li>
+												<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
+												<span>Css</span>
+											</li>
+											<li>
+												<h4><a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco</a></h4>
+												<span>jQuery</span>
+											</li>
+											<li>
+												<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
+												<span>Bootstrap</span>
+											</li>
+											<li>
+												<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
+												<span>Design</span>
+											</li>
+										</ul>
+									</div>
+								</div>
+								<div class="card-box overflow-hidden">
+									<h5 class="pd-20 h5 mb-0">Archives</h5>
+									<div class="list-group">
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">January 2020</a>
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">February 2020</a>
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">March 2020</a>
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">April 2020</a>
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">May 2020</a>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/blog-detail.php b/blog-detail.php
deleted file mode 100644
index b2c7c8d5..00000000
--- a/blog-detail.php
+++ /dev/null
@@ -1,134 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Blog Detail</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Blog Detail</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="blog-wrap">
-					<div class="container pd-0">
-						<div class="row">
-							<div class="col-md-8 col-sm-12">
-								<div class="blog-detail card-box overflow-hidden mb-30">
-									<div class="blog-img">
-										<img src="vendors/images/img2.jpg" alt="">
-									</div>
-									<div class="blog-caption">
-										<h4 class="mb-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
-										<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</p>
-										<h5 class="mb-10">Lorem ipsum dolor sit amet, consectetur.</h5>
-										<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>
-										<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>
-										<h5 class="mb-10">Unordered List</h5>
-										<ul>
-											<li>Duis aute irure dolor in reprehenderit in voluptate.</li>
-											<li>Sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
-											<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</li>
-											<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
-											<li>Duis aute irure dolor in reprehenderit in voluptate.</li>
-											<li>Sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
-											<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</li>
-											<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
-										</ul>
-										<h5 class="mb-10">Ordered List</h5>
-										<ol>
-											<li>Duis aute irure dolor in reprehenderit in voluptate.</li>
-											<li>Sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
-											<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</li>
-											<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
-											<li>Duis aute irure dolor in reprehenderit in voluptate.</li>
-											<li>Sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
-											<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</li>
-											<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
-										</ol>
-									</div>
-								</div>
-							</div>
-							<div class="col-md-4 col-sm-12">
-								<div class="card-box mb-30">
-									<h5 class="pd-20 h5 mb-0">Categories</h5>
-									<div class="list-group">
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">HTML <span class="badge badge-primary badge-pill">7</span></a>
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">Css <span class="badge badge-primary badge-pill">10</span></a>
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between active">Bootstrap <span class="badge badge-primary badge-pill">8</span></a>
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">jQuery <span class="badge badge-primary badge-pill">15</span></a>
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">Design <span class="badge badge-primary badge-pill">5</span></a>
-									</div>
-								</div>
-								<div class="card-box mb-30">
-									<h5 class="pd-20 h5 mb-0">Latest Post</h5>
-									<div class="latest-post">
-										<ul>
-											<li>
-												<h4><a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco</a></h4>
-												<span>HTML</span>
-											</li>
-											<li>
-												<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
-												<span>Css</span>
-											</li>
-											<li>
-												<h4><a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco</a></h4>
-												<span>jQuery</span>
-											</li>
-											<li>
-												<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
-												<span>Bootstrap</span>
-											</li>
-											<li>
-												<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
-												<span>Design</span>
-											</li>
-										</ul>
-									</div>
-								</div>
-								<div class="card-box overflow-hidden">
-									<h5 class="pd-20 h5 mb-0">Archives</h5>
-									<div class="list-group">
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">January 2020</a>
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">February 2020</a>
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">March 2020</a>
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">April 2020</a>
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">May 2020</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/blog.html b/blog.html
new file mode 100644
index 00000000..2df343a5
--- /dev/null
+++ b/blog.html
@@ -0,0 +1,634 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 height-100-p xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Blog</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Blog</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="blog-wrap">
+					<div class="container pd-0">
+						<div class="row">
+							<div class="col-md-8 col-sm-12">
+								<div class="blog-list">
+									<ul>
+										<li>
+											<div class="row no-gutters">
+												<div class="col-lg-4 col-md-12 col-sm-12">
+													<div class="blog-img">
+														<img src="vendors/images/img2.jpg" alt="" class="bg_img">
+													</div>
+												</div>
+												<div class="col-lg-8 col-md-12 col-sm-12">
+													<div class="blog-caption">
+														<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
+														<div class="blog-by">
+															<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</p>
+															<div class="pt-10">
+																<a href="#" class="btn btn-outline-primary">Read More</a>
+															</div>
+														</div>
+													</div>
+												</div>
+											</div>
+										</li>
+										<li>
+											<div class="row no-gutters">
+												<div class="col-lg-4 col-md-12 col-sm-12">
+													<div class="blog-img">
+														<img src="vendors/images/img3.jpg" alt="" class="bg_img">
+													</div>
+												</div>
+												<div class="col-lg-8 col-md-12 col-sm-12">
+													<div class="blog-caption">
+														<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
+														<div class="blog-by">
+															<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</p>
+															<div class="pt-10">
+																<a href="#" class="btn btn-outline-primary">Read More</a>
+															</div>
+														</div>
+													</div>
+												</div>
+											</div>
+										</li>
+										<li>
+											<div class="row no-gutters">
+												<div class="col-lg-4 col-md-12 col-sm-12">
+													<div class="blog-img">
+														<img src="vendors/images/img4.jpg" alt="" class="bg_img">
+													</div>
+												</div>
+												<div class="col-lg-8 col-md-12 col-sm-12">
+													<div class="blog-caption">
+														<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
+														<div class="blog-by">
+															<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</p>
+															<div class="pt-10">
+																<a href="#" class="btn btn-outline-primary">Read More</a>
+															</div>
+														</div>
+													</div>
+												</div>
+											</div>
+										</li>
+										<li>
+											<div class="row no-gutters">
+												<div class="col-lg-4 col-md-12 col-sm-12">
+													<div class="blog-img">
+														<img src="vendors/images/img5.jpg" alt="" class="bg_img">
+													</div>
+												</div>
+												<div class="col-lg-8 col-md-12 col-sm-12">
+													<div class="blog-caption">
+														<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
+														<div class="blog-by">
+															<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</p>
+															<div class="pt-10">
+																<a href="#" class="btn btn-outline-primary">Read More</a>
+															</div>
+														</div>
+													</div>
+												</div>
+											</div>
+										</li>
+									</ul>
+								</div>
+								<div class="blog-pagination">
+									<div class="btn-toolbar justify-content-center mb-15">
+										<div class="btn-group">
+											<a href="#" class="btn btn-outline-primary prev"><i class="fa fa-angle-double-left"></i></a>
+											<a href="#" class="btn btn-outline-primary">1</a>
+											<a href="#" class="btn btn-outline-primary">2</a>
+											<span class="btn btn-primary current">3</span>
+											<a href="#" class="btn btn-outline-primary">4</a>
+											<a href="#" class="btn btn-outline-primary">5</a>
+											<a href="#" class="btn btn-outline-primary next"><i class="fa fa-angle-double-right"></i></a>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="col-md-4 col-sm-12">
+								<div class="card-box mb-30">
+									<h5 class="pd-20 h5 mb-0">Categories</h5>
+									<div class="list-group">
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">HTML <span class="badge badge-primary badge-pill">7</span></a>
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">Css <span class="badge badge-primary badge-pill">10</span></a>
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between active">Bootstrap <span class="badge badge-primary badge-pill">8</span></a>
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">jQuery <span class="badge badge-primary badge-pill">15</span></a>
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">Design <span class="badge badge-primary badge-pill">5</span></a>
+									</div>
+								</div>
+								<div class="card-box mb-30">
+									<h5 class="pd-20 h5 mb-0">Latest Post</h5>
+									<div class="latest-post">
+										<ul>
+											<li>
+												<h4><a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco</a></h4>
+												<span>HTML</span>
+											</li>
+											<li>
+												<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
+												<span>Css</span>
+											</li>
+											<li>
+												<h4><a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco</a></h4>
+												<span>jQuery</span>
+											</li>
+											<li>
+												<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
+												<span>Bootstrap</span>
+											</li>
+											<li>
+												<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
+												<span>Design</span>
+											</li>
+										</ul>
+									</div>
+								</div>
+								<div class="card-box overflow-hidden">
+									<h5 class="pd-20 h5 mb-0">Archives</h5>
+									<div class="list-group">
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">January 2020</a>
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">February 2020</a>
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">March 2020</a>
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">April 2020</a>
+										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">May 2020</a>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/blog.php b/blog.php
deleted file mode 100644
index 89179802..00000000
--- a/blog.php
+++ /dev/null
@@ -1,187 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 height-100-p xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Blog</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Blog</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="blog-wrap">
-					<div class="container pd-0">
-						<div class="row">
-							<div class="col-md-8 col-sm-12">
-								<div class="blog-list">
-									<ul>
-										<li>
-											<div class="row no-gutters">
-												<div class="col-lg-4 col-md-12 col-sm-12">
-													<div class="blog-img">
-														<img src="vendors/images/img2.jpg" alt="" class="bg_img">
-													</div>
-												</div>
-												<div class="col-lg-8 col-md-12 col-sm-12">
-													<div class="blog-caption">
-														<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
-														<div class="blog-by">
-															<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</p>
-															<div class="pt-10">
-																<a href="#" class="btn btn-outline-primary">Read More</a>
-															</div>
-														</div>
-													</div>
-												</div>
-											</div>
-										</li>
-										<li>
-											<div class="row no-gutters">
-												<div class="col-lg-4 col-md-12 col-sm-12">
-													<div class="blog-img">
-														<img src="vendors/images/img3.jpg" alt="" class="bg_img">
-													</div>
-												</div>
-												<div class="col-lg-8 col-md-12 col-sm-12">
-													<div class="blog-caption">
-														<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
-														<div class="blog-by">
-															<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</p>
-															<div class="pt-10">
-																<a href="#" class="btn btn-outline-primary">Read More</a>
-															</div>
-														</div>
-													</div>
-												</div>
-											</div>
-										</li>
-										<li>
-											<div class="row no-gutters">
-												<div class="col-lg-4 col-md-12 col-sm-12">
-													<div class="blog-img">
-														<img src="vendors/images/img4.jpg" alt="" class="bg_img">
-													</div>
-												</div>
-												<div class="col-lg-8 col-md-12 col-sm-12">
-													<div class="blog-caption">
-														<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
-														<div class="blog-by">
-															<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</p>
-															<div class="pt-10">
-																<a href="#" class="btn btn-outline-primary">Read More</a>
-															</div>
-														</div>
-													</div>
-												</div>
-											</div>
-										</li>
-										<li>
-											<div class="row no-gutters">
-												<div class="col-lg-4 col-md-12 col-sm-12">
-													<div class="blog-img">
-														<img src="vendors/images/img5.jpg" alt="" class="bg_img">
-													</div>
-												</div>
-												<div class="col-lg-8 col-md-12 col-sm-12">
-													<div class="blog-caption">
-														<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
-														<div class="blog-by">
-															<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</p>
-															<div class="pt-10">
-																<a href="#" class="btn btn-outline-primary">Read More</a>
-															</div>
-														</div>
-													</div>
-												</div>
-											</div>
-										</li>
-									</ul>
-								</div>
-								<div class="blog-pagination">
-									<div class="btn-toolbar justify-content-center mb-15">
-										<div class="btn-group">
-											<a href="#" class="btn btn-outline-primary prev"><i class="fa fa-angle-double-left"></i></a>
-											<a href="#" class="btn btn-outline-primary">1</a>
-											<a href="#" class="btn btn-outline-primary">2</a>
-											<span class="btn btn-primary current">3</span>
-											<a href="#" class="btn btn-outline-primary">4</a>
-											<a href="#" class="btn btn-outline-primary">5</a>
-											<a href="#" class="btn btn-outline-primary next"><i class="fa fa-angle-double-right"></i></a>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div class="col-md-4 col-sm-12">
-								<div class="card-box mb-30">
-									<h5 class="pd-20 h5 mb-0">Categories</h5>
-									<div class="list-group">
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">HTML <span class="badge badge-primary badge-pill">7</span></a>
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">Css <span class="badge badge-primary badge-pill">10</span></a>
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between active">Bootstrap <span class="badge badge-primary badge-pill">8</span></a>
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">jQuery <span class="badge badge-primary badge-pill">15</span></a>
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">Design <span class="badge badge-primary badge-pill">5</span></a>
-									</div>
-								</div>
-								<div class="card-box mb-30">
-									<h5 class="pd-20 h5 mb-0">Latest Post</h5>
-									<div class="latest-post">
-										<ul>
-											<li>
-												<h4><a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco</a></h4>
-												<span>HTML</span>
-											</li>
-											<li>
-												<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
-												<span>Css</span>
-											</li>
-											<li>
-												<h4><a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco</a></h4>
-												<span>jQuery</span>
-											</li>
-											<li>
-												<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
-												<span>Bootstrap</span>
-											</li>
-											<li>
-												<h4><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h4>
-												<span>Design</span>
-											</li>
-										</ul>
-									</div>
-								</div>
-								<div class="card-box overflow-hidden">
-									<h5 class="pd-20 h5 mb-0">Archives</h5>
-									<div class="list-group">
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">January 2020</a>
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">February 2020</a>
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">March 2020</a>
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">April 2020</a>
-										<a href="#" class="list-group-item d-flex align-items-center justify-content-between">May 2020</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/calendar.html b/calendar.html
new file mode 100644
index 00000000..ec32737f
--- /dev/null
+++ b/calendar.html
@@ -0,0 +1,550 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="src/plugins/fullcalendar/fullcalendar.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Calendar</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Calendar</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="pd-20 card-box mb-30">
+					<div class="calendar-wrap">
+						<div id='calendar'></div>
+					</div>
+					<!-- calendar modal -->
+					<div id="modal-view-event" class="modal modal-top fade calendar-modal">
+						<div class="modal-dialog modal-dialog-centered">
+							<div class="modal-content">
+								<div class="modal-body">
+									<h4 class="h4"><span class="event-icon weight-400 mr-3"></span><span class="event-title"></span></h4>
+									<div class="event-body"></div>
+								</div>
+								<div class="modal-footer">
+									<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div id="modal-view-event-add" class="modal modal-top fade calendar-modal">
+						<div class="modal-dialog modal-dialog-centered">
+							<div class="modal-content">
+								<form id="add-event">
+									<div class="modal-body">
+										<h4 class="text-blue h4 mb-10">Add Event Detail</h4>
+										<div class="form-group">
+											<label>Event name</label>
+											<input type="text" class="form-control" name="ename">
+										</div>
+										<div class="form-group">
+											<label>Event Date</label>
+											<input type='text' class="datetimepicker form-control" name="edate">
+										</div>
+										<div class="form-group">
+											<label>Event Description</label>
+											<textarea class="form-control" name="edesc"></textarea>
+										</div>
+										<div class="form-group">
+											<label>Event Color</label>
+											<select class="form-control" name="ecolor">
+												<option value="fc-bg-default">fc-bg-default</option>
+												<option value="fc-bg-blue">fc-bg-blue</option>
+												<option value="fc-bg-lightgreen">fc-bg-lightgreen</option>
+												<option value="fc-bg-pinkred">fc-bg-pinkred</option>
+												<option value="fc-bg-deepskyblue">fc-bg-deepskyblue</option>
+											</select>
+										</div>
+										<div class="form-group">
+											<label>Event Icon</label>
+											<select class="form-control" name="eicon">
+												<option value="circle">circle</option>
+												<option value="cog">cog</option>
+												<option value="group">group</option>
+												<option value="suitcase">suitcase</option>
+												<option value="calendar">calendar</option>
+											</select>
+										</div>
+									</div>
+									<div class="modal-footer">
+										<button type="submit" class="btn btn-primary" >Save</button>
+										<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+									</div>
+								</form>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+	<script src="src/plugins/fullcalendar/fullcalendar.min.js"></script>
+	<script src="vendors/scripts/calendar-setting.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/calendar.php b/calendar.php
deleted file mode 100644
index a5ff84ef..00000000
--- a/calendar.php
+++ /dev/null
@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-	<link rel="stylesheet" type="text/css" href="src/plugins/fullcalendar/fullcalendar.css">
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Calendar</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Calendar</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="pd-20 card-box mb-30">
-					<div class="calendar-wrap">
-						<div id='calendar'></div>
-					</div>
-					<!-- calendar modal -->
-					<div id="modal-view-event" class="modal modal-top fade calendar-modal">
-						<div class="modal-dialog modal-dialog-centered">
-							<div class="modal-content">
-								<div class="modal-body">
-									<h4 class="h4"><span class="event-icon weight-400 mr-3"></span><span class="event-title"></span></h4>
-									<div class="event-body"></div>
-								</div>
-								<div class="modal-footer">
-									<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<div id="modal-view-event-add" class="modal modal-top fade calendar-modal">
-						<div class="modal-dialog modal-dialog-centered">
-							<div class="modal-content">
-								<form id="add-event">
-									<div class="modal-body">
-										<h4 class="text-blue h4 mb-10">Add Event Detail</h4>
-										<div class="form-group">
-											<label>Event name</label>
-											<input type="text" class="form-control" name="ename">
-										</div>
-										<div class="form-group">
-											<label>Event Date</label>
-											<input type='text' class="datetimepicker form-control" name="edate">
-										</div>
-										<div class="form-group">
-											<label>Event Description</label>
-											<textarea class="form-control" name="edesc"></textarea>
-										</div>
-										<div class="form-group">
-											<label>Event Color</label>
-											<select class="form-control" name="ecolor">
-												<option value="fc-bg-default">fc-bg-default</option>
-												<option value="fc-bg-blue">fc-bg-blue</option>
-												<option value="fc-bg-lightgreen">fc-bg-lightgreen</option>
-												<option value="fc-bg-pinkred">fc-bg-pinkred</option>
-												<option value="fc-bg-deepskyblue">fc-bg-deepskyblue</option>
-											</select>
-										</div>
-										<div class="form-group">
-											<label>Event Icon</label>
-											<select class="form-control" name="eicon">
-												<option value="circle">circle</option>
-												<option value="cog">cog</option>
-												<option value="group">group</option>
-												<option value="suitcase">suitcase</option>
-												<option value="calendar">calendar</option>
-											</select>
-										</div>
-									</div>
-									<div class="modal-footer">
-										<button type="submit" class="btn btn-primary" >Save</button>
-										<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
-									</div>
-								</form>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-	<script src="src/plugins/fullcalendar/fullcalendar.min.js"></script>
-	<script src="vendors/scripts/calendar-setting.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/chat.html b/chat.html
new file mode 100644
index 00000000..055914bc
--- /dev/null
+++ b/chat.html
@@ -0,0 +1,741 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>Chat</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Chat</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="bg-white border-radius-4 box-shadow mb-30">
+					<div class="row no-gutters">
+						<div class="col-lg-3 col-md-4 col-sm-12">
+							<div class="chat-list bg-light-gray">
+								<div class="chat-search">
+									<span class="ti-search"></span>
+									<input type="text" placeholder="Search Contact">
+								</div>
+								<div class="notification-list chat-notification-list customscroll">
+									<ul>
+										<li>
+											<a href="#">
+												<img src="vendors/images/img.jpg" alt="">
+												<h3 class="clearfix">John Doe</h3>
+												<p><i class="fa fa-circle text-light-green"></i> online</p>
+											</a>
+										</li>
+										<li class="active">
+											<a href="#">
+												<img src="vendors/images/img.jpg" alt="">
+												<h3 class="clearfix">John Doe</h3>
+												<p><i class="fa fa-circle text-light-green"></i> online</p>
+											</a>
+										</li>
+										<li>
+											<a href="#">
+												<img src="vendors/images/img.jpg" alt="">
+												<h3 class="clearfix">John Doe</h3>
+												<p><i class="fa fa-circle text-light-green"></i> online</p>
+											</a>
+										</li>
+										<li>
+											<a href="#">
+												<img src="vendors/images/img.jpg" alt="">
+												<h3 class="clearfix">John Doe</h3>
+												<p><i class="fa fa-circle text-warning"></i> active 5 min</p>
+											</a>
+										</li>
+										<li>
+											<a href="#">
+												<img src="vendors/images/img.jpg" alt="">
+												<h3 class="clearfix">John Doe</h3>
+												<p><i class="fa fa-circle text-warning"></i> active 4 min</p>
+											</a>
+										</li>
+										<li>
+											<a href="#">
+												<img src="vendors/images/img.jpg" alt="">
+												<h3 class="clearfix">John Doe</h3>
+												<p><i class="fa fa-circle text-warning"></i> active 3 min</p>
+											</a>
+										</li>
+										<li>
+											<a href="#">
+												<img src="vendors/images/img.jpg" alt="">
+												<h3 class="clearfix">John Doe</h3>
+												<p><i class="fa fa-circle text-light-orange"></i> offline</p>
+											</a>
+										</li>
+										<li>
+											<a href="#">
+												<img src="vendors/images/img.jpg" alt="">
+												<h3 class="clearfix">John Doe</h3>
+												<p><i class="fa fa-circle text-light-orange"></i> offline</p>
+											</a>
+										</li>
+										<li>
+											<a href="#">
+												<img src="vendors/images/img.jpg" alt="">
+												<h3 class="clearfix">John Doe</h3>
+												<p><i class="fa fa-circle text-light-orange"></i> offline</p>
+											</a>
+										</li>
+										<li>
+											<a href="#">
+												<img src="vendors/images/img.jpg" alt="">
+												<h3 class="clearfix">John Doe</h3>
+												<p><i class="fa fa-circle text-light-orange"></i> offline</p>
+											</a>
+										</li>
+										<li>
+											<a href="#">
+												<img src="vendors/images/img.jpg" alt="">
+												<h3 class="clearfix">John Doe</h3>
+												<p><i class="fa fa-circle text-light-orange"></i> offline</p>
+											</a>
+										</li>
+										<li>
+											<a href="#">
+												<img src="vendors/images/img.jpg" alt="">
+												<h3 class="clearfix">John Doe</h3>
+												<p><i class="fa fa-circle text-light-orange"></i> offline</p>
+											</a>
+										</li>
+									</ul>
+								</div>
+							</div>
+						</div>
+						<div class="col-lg-9 col-md-8 col-sm-12">
+							<div class="chat-detail">
+								<div class="chat-profile-header clearfix">
+									<div class="left">
+										<div class="clearfix">
+											<div class="chat-profile-photo">
+												<img src="vendors/images/profile-photo.jpg" alt="">
+											</div>
+											<div class="chat-profile-name">
+												<h3>Rachel Curtis</h3>
+												<span>New York, USA</span>
+											</div>
+										</div>
+									</div>
+									<div class="right text-right">
+										<div class="dropdown">
+											<a class="btn btn-outline-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+												Setting
+											</a>
+											<div class="dropdown-menu dropdown-menu-right">
+												<a class="dropdown-item" href="#">Export Chat</a>
+												<a class="dropdown-item" href="#">Search</a>
+												<a class="dropdown-item text-light-orange" href="#">Delete Chat</a>
+											</div>
+										</div>
+									</div>
+								</div>
+								<div class="chat-box">
+									<div class="chat-desc customscroll">
+										<ul>
+											<li class="clearfix admin_chat">
+												<span class="chat-img">
+													<img src="vendors/images/chat-img2.jpg" alt="">
+												</span>
+												<div class="chat-body clearfix">
+													<p>Maybe you already have additional info?</p>
+													<div class="chat_time">09:40PM</div>
+												</div>
+											</li>
+											<li class="clearfix admin_chat">
+												<span class="chat-img">
+													<img src="vendors/images/chat-img2.jpg" alt="">
+												</span>
+												<div class="chat-body clearfix">
+													<p>It is to early to provide some kind of estimation here. We need user stories.</p>
+													<div class="chat_time">09:40PM</div>
+												</div>
+											</li>
+											<li class="clearfix">
+												<span class="chat-img">
+													<img src="vendors/images/chat-img1.jpg" alt="">
+												</span>
+												<div class="chat-body clearfix">
+													<p>We are just writing up the user stories now so will have requirements for you next week. We are just writing up the user stories now so will have requirements for you next week.</p>
+													<div class="chat_time">09:40PM</div>
+												</div>
+											</li>
+											<li class="clearfix">
+												<span class="chat-img">
+													<img src="vendors/images/chat-img1.jpg" alt="">
+												</span>
+												<div class="chat-body clearfix">
+													<p>Essentially the brief is for you guys to build an iOS and android app. We will do backend and web app. We have a version one mockup of the UI, please see it attached. As mentioned before, we would simply hand you all the assets for the UI and you guys code. If you have any early questions please do send them on to myself. Ill be in touch in coming days when we have requirements prepared. Essentially the brief is for you guys to build an iOS and android app. We will do backend and web app. We have a version one mockup of the UI, please see it attached. As mentioned before, we would simply hand you all the assets for the UI and you guys code. If you have any early questions please do send them on to myself. Ill be in touch in coming days when we have.</p>
+													<div class="chat_time">09:40PM</div>
+												</div>
+											</li>
+											<li class="clearfix admin_chat">
+												<span class="chat-img">
+													<img src="vendors/images/chat-img2.jpg" alt="">
+												</span>
+												<div class="chat-body clearfix">
+													<p>Maybe you already have additional info?</p>
+													<div class="chat_time">09:40PM</div>
+												</div>
+											</li>
+											<li class="clearfix admin_chat">
+												<span class="chat-img">
+													<img src="vendors/images/chat-img2.jpg" alt="">
+												</span>
+												<div class="chat-body clearfix">
+													<p>It is to early to provide some kind of estimation here. We need user stories.</p>
+													<div class="chat_time">09:40PM</div>
+												</div>
+											</li>
+											<li class="clearfix">
+												<span class="chat-img">
+													<img src="vendors/images/chat-img1.jpg" alt="">
+												</span>
+												<div class="chat-body clearfix">
+													<p>We are just writing up the user stories now so will have requirements for you next week. We are just writing up the user stories now so will have requirements for you next week.</p>
+													<div class="chat_time">09:40PM</div>
+												</div>
+											</li>
+											<li class="clearfix">
+												<span class="chat-img">
+													<img src="vendors/images/chat-img1.jpg" alt="">
+												</span>
+												<div class="chat-body clearfix">
+													<p>Essentially the brief is for you guys to build an iOS and android app. We will do backend and web app. We have a version one mockup of the UI, please see it attached. As mentioned before, we would simply hand you all the assets for the UI and you guys code. If you have any early questions please do send them on to myself. Ill be in touch in coming days when we have requirements prepared. Essentially the brief is for you guys to build an iOS and android app. We will do backend and web app. We have a version one mockup of the UI, please see it attached. As mentioned before, we would simply hand you all the assets for the UI and you guys code. If you have any early questions please do send them on to myself. Ill be in touch in coming days when we have.</p>
+													<div class="chat_time">09:40PM</div>
+												</div>
+											</li>
+											<li class="clearfix upload-file">
+												<span class="chat-img">
+													<img src="vendors/images/chat-img1.jpg" alt="">
+												</span>
+												<div class="chat-body clearfix">
+													<div class="upload-file-box clearfix">
+														<div class="left">
+															<img src="vendors/images/upload-file-img.jpg" alt="">
+															<div class="overlay">
+																<a href="#">
+																	<span><i class="fa fa-angle-down"></i></span>
+																</a>
+															</div>
+														</div>
+														<div class="right">
+															<h3>Big room.jpg</h3>
+															<a href="#">Download</a>
+														</div>
+													</div>
+													<div class="chat_time">09:40PM</div>
+												</div>
+											</li>
+											<li class="clearfix upload-file admin_chat">
+												<span class="chat-img">
+													<img src="vendors/images/chat-img2.jpg" alt="">
+												</span>
+												<div class="chat-body clearfix">
+													<div class="upload-file-box clearfix">
+														<div class="left">
+															<img src="vendors/images/upload-file-img.jpg" alt="">
+															<div class="overlay">
+																<a href="#">
+																	<span><i class="fa fa-angle-down"></i></span>
+																</a>
+															</div>
+														</div>
+														<div class="right">
+															<h3>Big room.jpg</h3>
+															<a href="#">Download</a>
+														</div>
+													</div>
+													<div class="chat_time">09:40PM</div>
+												</div>
+											</li>
+										</ul>
+									</div>
+									<div class="chat-footer">
+										<div class="file-upload"><a href="#"><i class="fa fa-paperclip"></i></a></div>
+										<div class="chat_text_area">
+											<textarea placeholder="Type your message…"></textarea>
+										</div>
+										<div class="chat_send">
+											<button class="btn btn-link" type="submit"><i class="icon-copy ion-paper-airplane"></i></button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/chat.php b/chat.php
deleted file mode 100644
index 12a310ea..00000000
--- a/chat.php
+++ /dev/null
@@ -1,292 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>Chat</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Chat</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="bg-white border-radius-4 box-shadow mb-30">
-					<div class="row no-gutters">
-						<div class="col-lg-3 col-md-4 col-sm-12">
-							<div class="chat-list bg-light-gray">
-								<div class="chat-search">
-									<span class="ti-search"></span>
-									<input type="text" placeholder="Search Contact">
-								</div>
-								<div class="notification-list chat-notification-list customscroll">
-									<ul>
-										<li>
-											<a href="#">
-												<img src="vendors/images/img.jpg" alt="">
-												<h3 class="clearfix">John Doe</h3>
-												<p><i class="fa fa-circle text-light-green"></i> online</p>
-											</a>
-										</li>
-										<li class="active">
-											<a href="#">
-												<img src="vendors/images/img.jpg" alt="">
-												<h3 class="clearfix">John Doe</h3>
-												<p><i class="fa fa-circle text-light-green"></i> online</p>
-											</a>
-										</li>
-										<li>
-											<a href="#">
-												<img src="vendors/images/img.jpg" alt="">
-												<h3 class="clearfix">John Doe</h3>
-												<p><i class="fa fa-circle text-light-green"></i> online</p>
-											</a>
-										</li>
-										<li>
-											<a href="#">
-												<img src="vendors/images/img.jpg" alt="">
-												<h3 class="clearfix">John Doe</h3>
-												<p><i class="fa fa-circle text-warning"></i> active 5 min</p>
-											</a>
-										</li>
-										<li>
-											<a href="#">
-												<img src="vendors/images/img.jpg" alt="">
-												<h3 class="clearfix">John Doe</h3>
-												<p><i class="fa fa-circle text-warning"></i> active 4 min</p>
-											</a>
-										</li>
-										<li>
-											<a href="#">
-												<img src="vendors/images/img.jpg" alt="">
-												<h3 class="clearfix">John Doe</h3>
-												<p><i class="fa fa-circle text-warning"></i> active 3 min</p>
-											</a>
-										</li>
-										<li>
-											<a href="#">
-												<img src="vendors/images/img.jpg" alt="">
-												<h3 class="clearfix">John Doe</h3>
-												<p><i class="fa fa-circle text-light-orange"></i> offline</p>
-											</a>
-										</li>
-										<li>
-											<a href="#">
-												<img src="vendors/images/img.jpg" alt="">
-												<h3 class="clearfix">John Doe</h3>
-												<p><i class="fa fa-circle text-light-orange"></i> offline</p>
-											</a>
-										</li>
-										<li>
-											<a href="#">
-												<img src="vendors/images/img.jpg" alt="">
-												<h3 class="clearfix">John Doe</h3>
-												<p><i class="fa fa-circle text-light-orange"></i> offline</p>
-											</a>
-										</li>
-										<li>
-											<a href="#">
-												<img src="vendors/images/img.jpg" alt="">
-												<h3 class="clearfix">John Doe</h3>
-												<p><i class="fa fa-circle text-light-orange"></i> offline</p>
-											</a>
-										</li>
-										<li>
-											<a href="#">
-												<img src="vendors/images/img.jpg" alt="">
-												<h3 class="clearfix">John Doe</h3>
-												<p><i class="fa fa-circle text-light-orange"></i> offline</p>
-											</a>
-										</li>
-										<li>
-											<a href="#">
-												<img src="vendors/images/img.jpg" alt="">
-												<h3 class="clearfix">John Doe</h3>
-												<p><i class="fa fa-circle text-light-orange"></i> offline</p>
-											</a>
-										</li>
-									</ul>
-								</div>
-							</div>
-						</div>
-						<div class="col-lg-9 col-md-8 col-sm-12">
-							<div class="chat-detail">
-								<div class="chat-profile-header clearfix">
-									<div class="left">
-										<div class="clearfix">
-											<div class="chat-profile-photo">
-												<img src="vendors/images/profile-photo.jpg" alt="">
-											</div>
-											<div class="chat-profile-name">
-												<h3>Rachel Curtis</h3>
-												<span>New York, USA</span>
-											</div>
-										</div>
-									</div>
-									<div class="right text-right">
-										<div class="dropdown">
-											<a class="btn btn-outline-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-												Setting
-											</a>
-											<div class="dropdown-menu dropdown-menu-right">
-												<a class="dropdown-item" href="#">Export Chat</a>
-												<a class="dropdown-item" href="#">Search</a>
-												<a class="dropdown-item text-light-orange" href="#">Delete Chat</a>
-											</div>
-										</div>
-									</div>
-								</div>
-								<div class="chat-box">
-									<div class="chat-desc customscroll">
-										<ul>
-											<li class="clearfix admin_chat">
-												<span class="chat-img">
-													<img src="vendors/images/chat-img2.jpg" alt="">
-												</span>
-												<div class="chat-body clearfix">
-													<p>Maybe you already have additional info?</p>
-													<div class="chat_time">09:40PM</div>
-												</div>
-											</li>
-											<li class="clearfix admin_chat">
-												<span class="chat-img">
-													<img src="vendors/images/chat-img2.jpg" alt="">
-												</span>
-												<div class="chat-body clearfix">
-													<p>It is to early to provide some kind of estimation here. We need user stories.</p>
-													<div class="chat_time">09:40PM</div>
-												</div>
-											</li>
-											<li class="clearfix">
-												<span class="chat-img">
-													<img src="vendors/images/chat-img1.jpg" alt="">
-												</span>
-												<div class="chat-body clearfix">
-													<p>We are just writing up the user stories now so will have requirements for you next week. We are just writing up the user stories now so will have requirements for you next week.</p>
-													<div class="chat_time">09:40PM</div>
-												</div>
-											</li>
-											<li class="clearfix">
-												<span class="chat-img">
-													<img src="vendors/images/chat-img1.jpg" alt="">
-												</span>
-												<div class="chat-body clearfix">
-													<p>Essentially the brief is for you guys to build an iOS and android app. We will do backend and web app. We have a version one mockup of the UI, please see it attached. As mentioned before, we would simply hand you all the assets for the UI and you guys code. If you have any early questions please do send them on to myself. Ill be in touch in coming days when we have requirements prepared. Essentially the brief is for you guys to build an iOS and android app. We will do backend and web app. We have a version one mockup of the UI, please see it attached. As mentioned before, we would simply hand you all the assets for the UI and you guys code. If you have any early questions please do send them on to myself. Ill be in touch in coming days when we have.</p>
-													<div class="chat_time">09:40PM</div>
-												</div>
-											</li>
-											<li class="clearfix admin_chat">
-												<span class="chat-img">
-													<img src="vendors/images/chat-img2.jpg" alt="">
-												</span>
-												<div class="chat-body clearfix">
-													<p>Maybe you already have additional info?</p>
-													<div class="chat_time">09:40PM</div>
-												</div>
-											</li>
-											<li class="clearfix admin_chat">
-												<span class="chat-img">
-													<img src="vendors/images/chat-img2.jpg" alt="">
-												</span>
-												<div class="chat-body clearfix">
-													<p>It is to early to provide some kind of estimation here. We need user stories.</p>
-													<div class="chat_time">09:40PM</div>
-												</div>
-											</li>
-											<li class="clearfix">
-												<span class="chat-img">
-													<img src="vendors/images/chat-img1.jpg" alt="">
-												</span>
-												<div class="chat-body clearfix">
-													<p>We are just writing up the user stories now so will have requirements for you next week. We are just writing up the user stories now so will have requirements for you next week.</p>
-													<div class="chat_time">09:40PM</div>
-												</div>
-											</li>
-											<li class="clearfix">
-												<span class="chat-img">
-													<img src="vendors/images/chat-img1.jpg" alt="">
-												</span>
-												<div class="chat-body clearfix">
-													<p>Essentially the brief is for you guys to build an iOS and android app. We will do backend and web app. We have a version one mockup of the UI, please see it attached. As mentioned before, we would simply hand you all the assets for the UI and you guys code. If you have any early questions please do send them on to myself. Ill be in touch in coming days when we have requirements prepared. Essentially the brief is for you guys to build an iOS and android app. We will do backend and web app. We have a version one mockup of the UI, please see it attached. As mentioned before, we would simply hand you all the assets for the UI and you guys code. If you have any early questions please do send them on to myself. Ill be in touch in coming days when we have.</p>
-													<div class="chat_time">09:40PM</div>
-												</div>
-											</li>
-											<li class="clearfix upload-file">
-												<span class="chat-img">
-													<img src="vendors/images/chat-img1.jpg" alt="">
-												</span>
-												<div class="chat-body clearfix">
-													<div class="upload-file-box clearfix">
-														<div class="left">
-															<img src="vendors/images/upload-file-img.jpg" alt="">
-															<div class="overlay">
-																<a href="#">
-																	<span><i class="fa fa-angle-down"></i></span>
-																</a>
-															</div>
-														</div>
-														<div class="right">
-															<h3>Big room.jpg</h3>
-															<a href="#">Download</a>
-														</div>
-													</div>
-													<div class="chat_time">09:40PM</div>
-												</div>
-											</li>
-											<li class="clearfix upload-file admin_chat">
-												<span class="chat-img">
-													<img src="vendors/images/chat-img2.jpg" alt="">
-												</span>
-												<div class="chat-body clearfix">
-													<div class="upload-file-box clearfix">
-														<div class="left">
-															<img src="vendors/images/upload-file-img.jpg" alt="">
-															<div class="overlay">
-																<a href="#">
-																	<span><i class="fa fa-angle-down"></i></span>
-																</a>
-															</div>
-														</div>
-														<div class="right">
-															<h3>Big room.jpg</h3>
-															<a href="#">Download</a>
-														</div>
-													</div>
-													<div class="chat_time">09:40PM</div>
-												</div>
-											</li>
-										</ul>
-									</div>
-									<div class="chat-footer">
-										<div class="file-upload"><a href="#"><i class="fa fa-paperclip"></i></a></div>
-										<div class="chat_text_area">
-											<textarea placeholder="Type your message…"></textarea>
-										</div>
-										<div class="chat_send">
-											<button class="btn btn-link" type="submit"><i class="icon-copy ion-paper-airplane"></i></button>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/color-settings.html b/color-settings.html
new file mode 100644
index 00000000..2fac00da
--- /dev/null
+++ b/color-settings.html
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>Color Settings</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item"><a href="javascript:;">Documentation</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Color Settings</li>
+								</ol>
+							</nav>
+						</div>
+						<div class="col-md-6 col-sm-12 text-right">
+							<div class="dropdown">
+								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+									Menu
+								</a>
+								<div class="dropdown-menu dropdown-menu-right">
+									<a class="dropdown-item" href="introduction.html">Introduction</a>
+									<a class="dropdown-item" href="getting-started.html">Getting Started</a>
+									<a class="dropdown-item active" href="color-settings.html">Color Settings</a>
+									<a class="dropdown-item" href="third-party-plugins.html">Third Party Plugins</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="pd-20 card-box mb-30">
+					<h4 class="h4 text-blue mb-15">How to Change Sidebar Background Color ?</h4>
+					<div class="row">
+						<div class="col-md-5">
+							<p>Default sidebar color is dark</p>
+							<p><img src="vendors/images/layout/sidebar-dark.png" class="box-shadow" alt=""></p>
+						</div>
+						<div class="col-md-7">
+							<p>Change sidebar color for white add class in <code>body class="sidebar-light"</code></p>
+							<p><img src="vendors/images/layout/sidebar-white.png" class="box-shadow" alt=""></p>
+						</div>
+					</div>
+				</div>
+				<div class="pd-20 card-box mb-30">
+					<h4 class="h4 text-blue mb-15">How to Change Header Background Color ?</h4>
+					<div class="row">
+						<div class="col-md-12 mb-20">
+							<p>Default header color is white</p>
+							<p><img src="vendors/images/layout/header-white.png" class="box-shadow" alt=""></p>
+						</div>
+						<div class="col-md-12">
+							<p>Change headedr color for dark add class in <code>body class="header-dark"</code></p>
+							<p><img src="vendors/images/layout/header-dark.png" class="box-shadow" alt=""></p>
+						</div>
+					</div>
+				</div>
+				<div class="pd-20 card-box mb-30">
+					<h4 class="h4 text-blue mb-15">Change Menu Dropdown icon</h4>
+					<p class="pb-20">add class in <code>sidebar-menu</code> for change icon</p>
+					<div class="d-flex flex-wrap pl-20 pr-20 justify-content-center">
+						<div class="pr-30 pb-20 text-center">
+							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
+								<h3><i class="fa fa-angle-down"></i></h3>
+							</div>
+							<div class="pt-10"><code>icon-style-1</code></div>
+						</div>
+						<div class="pr-30 pb-20 text-center">
+							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
+								<h3><i class="ion-plus-round"></i></h3>
+							</div>
+							<div class="pt-10"><code>icon-style-2</code></div>
+						</div>
+						<div class="pr-30 pb-20 text-center">
+							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
+								<h3><i class="fa fa-angle-double-right"></i></h3>
+							</div>
+							<div class="pt-10"><code>icon-style-3</code></div>
+						</div>
+					</div>
+				</div>
+				<div class="pd-20 card-box mb-30">
+					<h4 class="h4 text-blue mb-15">Change Menu Dropdown List icon</h4>
+					<p class="pb-20">add class in <code>sidebar-menu</code> for change icon</p>
+					<div class="d-flex flex-wrap pl-20 pr-20 justify-content-center">
+						<div class="pr-30 pb-20 text-center">
+							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
+								<h3 class="h4 mb-0"><i class="ion-minus-round"></i></h3>
+							</div>
+							<div class="pt-10"><code>icon-list-style-1</code></div>
+						</div>
+						<div class="pr-30 pb-20 text-center">
+							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
+								<h3 class="h4 mb-0"><i class="fa fa-circle-o"></i></h3>
+							</div>
+							<div class="pt-10"><code>icon-list-style-2</code></div>
+						</div>
+						<div class="pr-30 pb-20 text-center">
+							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
+								<h3 class="h4 mb-0"><i class="dw dw-check"></i></h3>
+							</div>
+							<div class="pt-10"><code>icon-list-style-3</code></div>
+						</div>
+						<div class="pr-30 pb-20 text-center">
+							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
+								<h3 class="h4 mb-0"><i class="dw dw-next-2"></i></h3>
+							</div>
+							<div class="pt-10"><code>icon-list-style-4</code></div>
+						</div>
+						<div class="pr-30 pb-20 text-center">
+							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
+								<h3 class="h4 mb-0"><i class="dw dw-fast-forward-1"></i></h3>
+							</div>
+							<div class="pt-10"><code>icon-list-style-5</code></div>
+						</div>
+						<div class="pr-30 pb-20 text-center">
+							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
+								<h3 class="h4 mb-0"><i class="dw dw-next"></i></h3>
+							</div>
+							<div class="pt-10"><code>icon-list-style-6</code></div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/color-settings.php b/color-settings.php
deleted file mode 100644
index 48cd7c3d..00000000
--- a/color-settings.php
+++ /dev/null
@@ -1,139 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>Color Settings</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item"><a href="javascript:;">Documentation</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Color Settings</li>
-								</ol>
-							</nav>
-						</div>
-						<div class="col-md-6 col-sm-12 text-right">
-							<div class="dropdown">
-								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-									Menu
-								</a>
-								<div class="dropdown-menu dropdown-menu-right">
-									<a class="dropdown-item" href="introduction.php">Introduction</a>
-									<a class="dropdown-item" href="getting-started.php">Getting Started</a>
-									<a class="dropdown-item active" href="color-settings.php">Color Settings</a>
-									<a class="dropdown-item" href="third-party-plugins.php">Third Party Plugins</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="pd-20 card-box mb-30">
-					<h4 class="h4 text-blue mb-15">How to Change Sidebar Background Color ?</h4>
-					<div class="row">
-						<div class="col-md-5">
-							<p>Default sidebar color is dark</p>
-							<p><img src="vendors/images/layout/sidebar-dark.png" class="box-shadow" alt=""></p>
-						</div>
-						<div class="col-md-7">
-							<p>Change sidebar color for white add class in <code>body class="sidebar-light"</code></p>
-							<p><img src="vendors/images/layout/sidebar-white.png" class="box-shadow" alt=""></p>
-						</div>
-					</div>
-				</div>
-				<div class="pd-20 card-box mb-30">
-					<h4 class="h4 text-blue mb-15">How to Change Header Background Color ?</h4>
-					<div class="row">
-						<div class="col-md-12 mb-20">
-							<p>Default header color is white</p>
-							<p><img src="vendors/images/layout/header-white.png" class="box-shadow" alt=""></p>
-						</div>
-						<div class="col-md-12">
-							<p>Change headedr color for dark add class in <code>body class="header-dark"</code></p>
-							<p><img src="vendors/images/layout/header-dark.png" class="box-shadow" alt=""></p>
-						</div>
-					</div>
-				</div>
-				<div class="pd-20 card-box mb-30">
-					<h4 class="h4 text-blue mb-15">Change Menu Dropdown icon</h4>
-					<p class="pb-20">add class in <code>sidebar-menu</code> for change icon</p>
-					<div class="d-flex flex-wrap pl-20 pr-20 justify-content-center">
-						<div class="pr-30 pb-20 text-center">
-							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
-								<h3><i class="fa fa-angle-down"></i></h3>
-							</div>
-							<div class="pt-10"><code>icon-style-1</code></div>
-						</div>
-						<div class="pr-30 pb-20 text-center">
-							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
-								<h3><i class="ion-plus-round"></i></h3>
-							</div>
-							<div class="pt-10"><code>icon-style-2</code></div>
-						</div>
-						<div class="pr-30 pb-20 text-center">
-							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
-								<h3><i class="fa fa-angle-double-right"></i></h3>
-							</div>
-							<div class="pt-10"><code>icon-style-3</code></div>
-						</div>
-					</div>
-				</div>
-				<div class="pd-20 card-box mb-30">
-					<h4 class="h4 text-blue mb-15">Change Menu Dropdown List icon</h4>
-					<p class="pb-20">add class in <code>sidebar-menu</code> for change icon</p>
-					<div class="d-flex flex-wrap pl-20 pr-20 justify-content-center">
-						<div class="pr-30 pb-20 text-center">
-							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
-								<h3 class="h4 mb-0"><i class="ion-minus-round"></i></h3>
-							</div>
-							<div class="pt-10"><code>icon-list-style-1</code></div>
-						</div>
-						<div class="pr-30 pb-20 text-center">
-							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
-								<h3 class="h4 mb-0"><i class="fa fa-circle-o"></i></h3>
-							</div>
-							<div class="pt-10"><code>icon-list-style-2</code></div>
-						</div>
-						<div class="pr-30 pb-20 text-center">
-							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
-								<h3 class="h4 mb-0"><i class="dw dw-check"></i></h3>
-							</div>
-							<div class="pt-10"><code>icon-list-style-3</code></div>
-						</div>
-						<div class="pr-30 pb-20 text-center">
-							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
-								<h3 class="h4 mb-0"><i class="dw dw-next-2"></i></h3>
-							</div>
-							<div class="pt-10"><code>icon-list-style-4</code></div>
-						</div>
-						<div class="pr-30 pb-20 text-center">
-							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
-								<h3 class="h4 mb-0"><i class="dw dw-fast-forward-1"></i></h3>
-							</div>
-							<div class="pt-10"><code>icon-list-style-5</code></div>
-						</div>
-						<div class="pr-30 pb-20 text-center">
-							<div class="width-box mx-auto box-shadow d-flex align-items-center justify-content-center">
-								<h3 class="h4 mb-0"><i class="dw dw-next"></i></h3>
-							</div>
-							<div class="pt-10"><code>icon-list-style-6</code></div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/contact-directory.html b/contact-directory.html
new file mode 100644
index 00000000..16c59f42
--- /dev/null
+++ b/contact-directory.html
@@ -0,0 +1,738 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="container pd-0">
+					<div class="page-header">
+						<div class="row">
+							<div class="col-md-12 col-sm-12">
+								<div class="title">
+									<h4>Contact Directory</h4>
+								</div>
+								<nav aria-label="breadcrumb" role="navigation">
+									<ol class="breadcrumb">
+										<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+										<li class="breadcrumb-item active" aria-current="page">Contact Directory</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+					<div class="contact-directory-list">
+						<ul class="row">
+							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
+								<div class="contact-directory-box">
+									<div class="contact-dire-info text-center">
+										<div class="contact-avatar">
+											<span>
+												<img src="vendors/images/photo2.jpg" alt="">
+											</span>
+										</div>
+										<div class="contact-name">
+											<h4>Wade Wilson</h4>
+											<p>UI/UX designer</p>
+											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
+										</div>
+										<div class="contact-skill">
+											<span class="badge badge-pill">UI</span>
+											<span class="badge badge-pill">UX</span>
+											<span class="badge badge-pill">Photoshop</span>
+											<span class="badge badge-pill badge-primary">+ 8</span>
+										</div>
+										<div class="profile-sort-desc">
+											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
+										</div>
+									</div>
+									<div class="view-contact">
+										<a href="#">View Profile</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
+								<div class="contact-directory-box">
+									<div class="contact-dire-info text-center">
+										<div class="contact-avatar">
+											<span>
+												<img src="vendors/images/photo2.jpg" alt="">
+											</span>
+										</div>
+										<div class="contact-name">
+											<h4>Wade Wilson</h4>
+											<p>UI/UX designer</p>
+											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
+										</div>
+										<div class="contact-skill">
+											<span class="badge badge-pill">UI</span>
+											<span class="badge badge-pill">UX</span>
+											<span class="badge badge-pill">Photoshop</span>
+											<span class="badge badge-pill badge-primary">+ 8</span>
+										</div>
+										<div class="profile-sort-desc">
+											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
+										</div>
+									</div>
+									<div class="view-contact">
+										<a href="#">View Profile</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
+								<div class="contact-directory-box">
+									<div class="contact-dire-info text-center">
+										<div class="contact-avatar">
+											<span>
+												<img src="vendors/images/photo2.jpg" alt="">
+											</span>
+										</div>
+										<div class="contact-name">
+											<h4>Wade Wilson</h4>
+											<p>UI/UX designer</p>
+											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
+										</div>
+										<div class="contact-skill">
+											<span class="badge badge-pill">UI</span>
+											<span class="badge badge-pill">UX</span>
+											<span class="badge badge-pill">Photoshop</span>
+											<span class="badge badge-pill badge-primary">+ 8</span>
+										</div>
+										<div class="profile-sort-desc">
+											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
+										</div>
+									</div>
+									<div class="view-contact">
+										<a href="#">View Profile</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
+								<div class="contact-directory-box">
+									<div class="contact-dire-info text-center">
+										<div class="contact-avatar">
+											<span>
+												<img src="vendors/images/photo2.jpg" alt="">
+											</span>
+										</div>
+										<div class="contact-name">
+											<h4>Wade Wilson</h4>
+											<p>UI/UX designer</p>
+											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
+										</div>
+										<div class="contact-skill">
+											<span class="badge badge-pill">UI</span>
+											<span class="badge badge-pill">UX</span>
+											<span class="badge badge-pill">Photoshop</span>
+											<span class="badge badge-pill badge-primary">+ 8</span>
+										</div>
+										<div class="profile-sort-desc">
+											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
+										</div>
+									</div>
+									<div class="view-contact">
+										<a href="#">View Profile</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
+								<div class="contact-directory-box">
+									<div class="contact-dire-info text-center">
+										<div class="contact-avatar">
+											<span>
+												<img src="vendors/images/photo2.jpg" alt="">
+											</span>
+										</div>
+										<div class="contact-name">
+											<h4>Wade Wilson</h4>
+											<p>UI/UX designer</p>
+											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
+										</div>
+										<div class="contact-skill">
+											<span class="badge badge-pill">UI</span>
+											<span class="badge badge-pill">UX</span>
+											<span class="badge badge-pill">Photoshop</span>
+											<span class="badge badge-pill badge-primary">+ 8</span>
+										</div>
+										<div class="profile-sort-desc">
+											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
+										</div>
+									</div>
+									<div class="view-contact">
+										<a href="#">View Profile</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
+								<div class="contact-directory-box">
+									<div class="contact-dire-info text-center">
+										<div class="contact-avatar">
+											<span>
+												<img src="vendors/images/photo2.jpg" alt="">
+											</span>
+										</div>
+										<div class="contact-name">
+											<h4>Wade Wilson</h4>
+											<p>UI/UX designer</p>
+											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
+										</div>
+										<div class="contact-skill">
+											<span class="badge badge-pill">UI</span>
+											<span class="badge badge-pill">UX</span>
+											<span class="badge badge-pill">Photoshop</span>
+											<span class="badge badge-pill badge-primary">+ 8</span>
+										</div>
+										<div class="profile-sort-desc">
+											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
+										</div>
+									</div>
+									<div class="view-contact">
+										<a href="#">View Profile</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
+								<div class="contact-directory-box">
+									<div class="contact-dire-info text-center">
+										<div class="contact-avatar">
+											<span>
+												<img src="vendors/images/photo2.jpg" alt="">
+											</span>
+										</div>
+										<div class="contact-name">
+											<h4>Wade Wilson</h4>
+											<p>UI/UX designer</p>
+											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
+										</div>
+										<div class="contact-skill">
+											<span class="badge badge-pill">UI</span>
+											<span class="badge badge-pill">UX</span>
+											<span class="badge badge-pill">Photoshop</span>
+											<span class="badge badge-pill badge-primary">+ 8</span>
+										</div>
+										<div class="profile-sort-desc">
+											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
+										</div>
+									</div>
+									<div class="view-contact">
+										<a href="#">View Profile</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
+								<div class="contact-directory-box">
+									<div class="contact-dire-info text-center">
+										<div class="contact-avatar">
+											<span>
+												<img src="vendors/images/photo2.jpg" alt="">
+											</span>
+										</div>
+										<div class="contact-name">
+											<h4>Wade Wilson</h4>
+											<p>UI/UX designer</p>
+											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
+										</div>
+										<div class="contact-skill">
+											<span class="badge badge-pill">UI</span>
+											<span class="badge badge-pill">UX</span>
+											<span class="badge badge-pill">Photoshop</span>
+											<span class="badge badge-pill badge-primary">+ 8</span>
+										</div>
+										<div class="profile-sort-desc">
+											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
+										</div>
+									</div>
+									<div class="view-contact">
+										<a href="#">View Profile</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
+								<div class="contact-directory-box">
+									<div class="contact-dire-info text-center">
+										<div class="contact-avatar">
+											<span>
+												<img src="vendors/images/photo2.jpg" alt="">
+											</span>
+										</div>
+										<div class="contact-name">
+											<h4>Wade Wilson</h4>
+											<p>UI/UX designer</p>
+											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
+										</div>
+										<div class="contact-skill">
+											<span class="badge badge-pill">UI</span>
+											<span class="badge badge-pill">UX</span>
+											<span class="badge badge-pill">Photoshop</span>
+											<span class="badge badge-pill badge-primary">+ 8</span>
+										</div>
+										<div class="profile-sort-desc">
+											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
+										</div>
+									</div>
+									<div class="view-contact">
+										<a href="#">View Profile</a>
+									</div>
+								</div>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/contact-directory.php b/contact-directory.php
deleted file mode 100644
index 9d1d53c4..00000000
--- a/contact-directory.php
+++ /dev/null
@@ -1,290 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="container pd-0">
-					<div class="page-header">
-						<div class="row">
-							<div class="col-md-12 col-sm-12">
-								<div class="title">
-									<h4>Contact Directory</h4>
-								</div>
-								<nav aria-label="breadcrumb" role="navigation">
-									<ol class="breadcrumb">
-										<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-										<li class="breadcrumb-item active" aria-current="page">Contact Directory</li>
-									</ol>
-								</nav>
-							</div>
-						</div>
-					</div>
-					<div class="contact-directory-list">
-						<ul class="row">
-							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
-								<div class="contact-directory-box">
-									<div class="contact-dire-info text-center">
-										<div class="contact-avatar">
-											<span>
-												<img src="vendors/images/photo2.jpg" alt="">
-											</span>
-										</div>
-										<div class="contact-name">
-											<h4>Wade Wilson</h4>
-											<p>UI/UX designer</p>
-											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
-										</div>
-										<div class="contact-skill">
-											<span class="badge badge-pill">UI</span>
-											<span class="badge badge-pill">UX</span>
-											<span class="badge badge-pill">Photoshop</span>
-											<span class="badge badge-pill badge-primary">+ 8</span>
-										</div>
-										<div class="profile-sort-desc">
-											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
-										</div>
-									</div>
-									<div class="view-contact">
-										<a href="#">View Profile</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
-								<div class="contact-directory-box">
-									<div class="contact-dire-info text-center">
-										<div class="contact-avatar">
-											<span>
-												<img src="vendors/images/photo2.jpg" alt="">
-											</span>
-										</div>
-										<div class="contact-name">
-											<h4>Wade Wilson</h4>
-											<p>UI/UX designer</p>
-											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
-										</div>
-										<div class="contact-skill">
-											<span class="badge badge-pill">UI</span>
-											<span class="badge badge-pill">UX</span>
-											<span class="badge badge-pill">Photoshop</span>
-											<span class="badge badge-pill badge-primary">+ 8</span>
-										</div>
-										<div class="profile-sort-desc">
-											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
-										</div>
-									</div>
-									<div class="view-contact">
-										<a href="#">View Profile</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
-								<div class="contact-directory-box">
-									<div class="contact-dire-info text-center">
-										<div class="contact-avatar">
-											<span>
-												<img src="vendors/images/photo2.jpg" alt="">
-											</span>
-										</div>
-										<div class="contact-name">
-											<h4>Wade Wilson</h4>
-											<p>UI/UX designer</p>
-											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
-										</div>
-										<div class="contact-skill">
-											<span class="badge badge-pill">UI</span>
-											<span class="badge badge-pill">UX</span>
-											<span class="badge badge-pill">Photoshop</span>
-											<span class="badge badge-pill badge-primary">+ 8</span>
-										</div>
-										<div class="profile-sort-desc">
-											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
-										</div>
-									</div>
-									<div class="view-contact">
-										<a href="#">View Profile</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
-								<div class="contact-directory-box">
-									<div class="contact-dire-info text-center">
-										<div class="contact-avatar">
-											<span>
-												<img src="vendors/images/photo2.jpg" alt="">
-											</span>
-										</div>
-										<div class="contact-name">
-											<h4>Wade Wilson</h4>
-											<p>UI/UX designer</p>
-											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
-										</div>
-										<div class="contact-skill">
-											<span class="badge badge-pill">UI</span>
-											<span class="badge badge-pill">UX</span>
-											<span class="badge badge-pill">Photoshop</span>
-											<span class="badge badge-pill badge-primary">+ 8</span>
-										</div>
-										<div class="profile-sort-desc">
-											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
-										</div>
-									</div>
-									<div class="view-contact">
-										<a href="#">View Profile</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
-								<div class="contact-directory-box">
-									<div class="contact-dire-info text-center">
-										<div class="contact-avatar">
-											<span>
-												<img src="vendors/images/photo2.jpg" alt="">
-											</span>
-										</div>
-										<div class="contact-name">
-											<h4>Wade Wilson</h4>
-											<p>UI/UX designer</p>
-											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
-										</div>
-										<div class="contact-skill">
-											<span class="badge badge-pill">UI</span>
-											<span class="badge badge-pill">UX</span>
-											<span class="badge badge-pill">Photoshop</span>
-											<span class="badge badge-pill badge-primary">+ 8</span>
-										</div>
-										<div class="profile-sort-desc">
-											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
-										</div>
-									</div>
-									<div class="view-contact">
-										<a href="#">View Profile</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
-								<div class="contact-directory-box">
-									<div class="contact-dire-info text-center">
-										<div class="contact-avatar">
-											<span>
-												<img src="vendors/images/photo2.jpg" alt="">
-											</span>
-										</div>
-										<div class="contact-name">
-											<h4>Wade Wilson</h4>
-											<p>UI/UX designer</p>
-											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
-										</div>
-										<div class="contact-skill">
-											<span class="badge badge-pill">UI</span>
-											<span class="badge badge-pill">UX</span>
-											<span class="badge badge-pill">Photoshop</span>
-											<span class="badge badge-pill badge-primary">+ 8</span>
-										</div>
-										<div class="profile-sort-desc">
-											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
-										</div>
-									</div>
-									<div class="view-contact">
-										<a href="#">View Profile</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
-								<div class="contact-directory-box">
-									<div class="contact-dire-info text-center">
-										<div class="contact-avatar">
-											<span>
-												<img src="vendors/images/photo2.jpg" alt="">
-											</span>
-										</div>
-										<div class="contact-name">
-											<h4>Wade Wilson</h4>
-											<p>UI/UX designer</p>
-											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
-										</div>
-										<div class="contact-skill">
-											<span class="badge badge-pill">UI</span>
-											<span class="badge badge-pill">UX</span>
-											<span class="badge badge-pill">Photoshop</span>
-											<span class="badge badge-pill badge-primary">+ 8</span>
-										</div>
-										<div class="profile-sort-desc">
-											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
-										</div>
-									</div>
-									<div class="view-contact">
-										<a href="#">View Profile</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
-								<div class="contact-directory-box">
-									<div class="contact-dire-info text-center">
-										<div class="contact-avatar">
-											<span>
-												<img src="vendors/images/photo2.jpg" alt="">
-											</span>
-										</div>
-										<div class="contact-name">
-											<h4>Wade Wilson</h4>
-											<p>UI/UX designer</p>
-											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
-										</div>
-										<div class="contact-skill">
-											<span class="badge badge-pill">UI</span>
-											<span class="badge badge-pill">UX</span>
-											<span class="badge badge-pill">Photoshop</span>
-											<span class="badge badge-pill badge-primary">+ 8</span>
-										</div>
-										<div class="profile-sort-desc">
-											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
-										</div>
-									</div>
-									<div class="view-contact">
-										<a href="#">View Profile</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
-								<div class="contact-directory-box">
-									<div class="contact-dire-info text-center">
-										<div class="contact-avatar">
-											<span>
-												<img src="vendors/images/photo2.jpg" alt="">
-											</span>
-										</div>
-										<div class="contact-name">
-											<h4>Wade Wilson</h4>
-											<p>UI/UX designer</p>
-											<div class="work text-success"><i class="ion-android-person"></i> Freelancer</div>
-										</div>
-										<div class="contact-skill">
-											<span class="badge badge-pill">UI</span>
-											<span class="badge badge-pill">UX</span>
-											<span class="badge badge-pill">Photoshop</span>
-											<span class="badge badge-pill badge-primary">+ 8</span>
-										</div>
-										<div class="profile-sort-desc">
-											Lorem ipsum dolor sit amet, consectetur adipisicing magna aliqua.
-										</div>
-									</div>
-									<div class="view-contact">
-										<a href="#">View Profile</a>
-									</div>
-								</div>
-							</li>
-						</ul>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/custom-icon.php b/custom-icon.html
similarity index 94%
rename from custom-icon.php
rename to custom-icon.html
index f90dfdf4..96cf59cd 100644
--- a/custom-icon.php
+++ b/custom-icon.html
@@ -1,11 +1,452 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<?php include('include/head.php'); ?>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
 	<div class="main-container">
 		<div class="pd-ltr-20 xs-pd-20-10">
 			<div class="min-height-200px">
@@ -17,7 +458,7 @@
 							</div>
 							<nav aria-label="breadcrumb" role="navigation">
 								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
 									<li class="breadcrumb-item active" aria-current="page">Icons</li>
 								</ol>
 							</nav>
@@ -6948,9 +7389,15 @@
 					</div>
 				</div>
 			</div>
-			<?php include('include/footer.php'); ?>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
 		</div>
 	</div>
-	<?php include('include/script.php'); ?>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/datatable.php b/datatable.html
similarity index 55%
rename from datatable.php
rename to datatable.html
index 8b50dea9..297931ed 100644
--- a/datatable.php
+++ b/datatable.html
@@ -1,13 +1,454 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<?php include('include/head.php'); ?>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
 	<link rel="stylesheet" type="text/css" href="src/plugins/datatables/css/dataTables.bootstrap4.min.css">
 	<link rel="stylesheet" type="text/css" href="src/plugins/datatables/css/responsive.bootstrap4.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
 	<div class="main-container">
 		<div class="pd-ltr-20 xs-pd-20-10">
 			<div class="min-height-200px">
@@ -19,7 +460,7 @@
 							</div>
 							<nav aria-label="breadcrumb" role="navigation">
 								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
 									<li class="breadcrumb-item active" aria-current="page">DataTable</li>
 								</ol>
 							</nav>
@@ -668,10 +1109,16 @@
 				</div>
 				<!-- Export Datatable End -->
 			</div>
-			<?php include('include/footer.php'); ?>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
 		</div>
 	</div>
-	<?php include('include/script.php'); ?>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
 	<script src="src/plugins/datatables/js/jquery.dataTables.min.js"></script>
 	<script src="src/plugins/datatables/js/dataTables.bootstrap4.min.js"></script>
 	<script src="src/plugins/datatables/js/dataTables.responsive.min.js"></script>
diff --git a/faq.html b/faq.html
new file mode 100644
index 00000000..7771bbe2
--- /dev/null
+++ b/faq.html
@@ -0,0 +1,636 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Frequently asked questions</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">FAQ</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="faq-wrap">
+					<h4 class="mb-20 h4 text-blue">Accordion example</h4>
+					<div id="accordion">
+						<div class="card">
+							<div class="card-header">
+								<button class="btn btn-block" data-toggle="collapse" data-target="#faq1">
+									Collapsible Group Item #1
+								</button>
+							</div>
+							<div id="faq1" class="collapse show" data-parent="#accordion">
+								<div class="card-body">
+									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+								</div>
+							</div>
+						</div>
+						<div class="card">
+							<div class="card-header">
+								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq2">
+									Collapsible Group Item #2
+								</button>
+							</div>
+							<div id="faq2" class="collapse" data-parent="#accordion">
+								<div class="card-body">
+									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+								</div>
+							</div>
+						</div>
+						<div class="card">
+							<div class="card-header">
+								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq3">
+									Collapsible Group Item #3
+								</button>
+							</div>
+							<div id="faq3" class="collapse" data-parent="#accordion">
+								<div class="card-body">
+									<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
+									<p class="mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
+								</div>
+							</div>
+						</div>
+						<div class="card">
+							<div class="card-header">
+								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq4">
+									Collapsible Group Item #4
+								</button>
+							</div>
+							<div id="faq4" class="collapse" data-parent="#accordion">
+								<div class="card-body">
+									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+								</div>
+							</div>
+						</div>
+						<div class="card">
+							<div class="card-header">
+								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq5">
+									Collapsible Group Item #5
+								</button>
+							</div>
+							<div id="faq5" class="collapse" data-parent="#accordion">
+								<div class="card-body">
+									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+								</div>
+							</div>
+						</div>
+						<div class="card">
+							<div class="card-header">
+								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq6">
+									Collapsible Group Item #6
+								</button>
+							</div>
+							<div id="faq6" class="collapse" data-parent="#accordion">
+								<div class="card-body">
+									<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
+									<p class="mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+					<h4 class="mb-30 h4 text-blue padding-top-30">Collapse example</h4>
+					<div class="padding-bottom-30">
+						<div class="card">
+							<div class="card-header">
+								<button class="btn btn-block" data-toggle="collapse" data-target="#faq1-1">
+									Collapsible Group Item #1
+								</button>
+							</div>
+							<div id="faq1-1" class="collapse show">
+								<div class="card-body">
+									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+								</div>
+							</div>
+						</div>
+						<div class="card">
+							<div class="card-header">
+								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq2-2">
+									Collapsible Group Item #2
+								</button>
+							</div>
+							<div id="faq2-2" class="collapse">
+								<div class="card-body">
+									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+								</div>
+							</div>
+						</div>
+						<div class="card">
+							<div class="card-header">
+								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq3-3">
+									Collapsible Group Item #3
+								</button>
+							</div>
+							<div id="faq3-3" class="collapse">
+								<div class="card-body">
+									<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
+									<p class="mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
+								</div>
+							</div>
+						</div>
+						<div class="card">
+							<div class="card-header">
+								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq4-4">
+									Collapsible Group Item #4
+								</button>
+							</div>
+							<div id="faq4-4" class="collapse">
+								<div class="card-body">
+									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+								</div>
+							</div>
+						</div>
+						<div class="card">
+							<div class="card-header">
+								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq5-5">
+									Collapsible Group Item #5
+								</button>
+							</div>
+							<div id="faq5-5" class="collapse">
+								<div class="card-body">
+									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+								</div>
+							</div>
+						</div>
+						<div class="card">
+							<div class="card-header">
+								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq6-6">
+									Collapsible Group Item #6
+								</button>
+							</div>
+							<div id="faq6-6" class="collapse">
+								<div class="card-body">
+									<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
+									<p class="mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/faq.php b/faq.php
deleted file mode 100644
index 97b7fd83..00000000
--- a/faq.php
+++ /dev/null
@@ -1,189 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Frequently asked questions</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">FAQ</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="faq-wrap">
-					<h4 class="mb-20 h4 text-blue">Accordion example</h4>
-					<div id="accordion">
-						<div class="card">
-							<div class="card-header">
-								<button class="btn btn-block" data-toggle="collapse" data-target="#faq1">
-									Collapsible Group Item #1
-								</button>
-							</div>
-							<div id="faq1" class="collapse show" data-parent="#accordion">
-								<div class="card-body">
-									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-								</div>
-							</div>
-						</div>
-						<div class="card">
-							<div class="card-header">
-								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq2">
-									Collapsible Group Item #2
-								</button>
-							</div>
-							<div id="faq2" class="collapse" data-parent="#accordion">
-								<div class="card-body">
-									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-								</div>
-							</div>
-						</div>
-						<div class="card">
-							<div class="card-header">
-								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq3">
-									Collapsible Group Item #3
-								</button>
-							</div>
-							<div id="faq3" class="collapse" data-parent="#accordion">
-								<div class="card-body">
-									<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
-									<p class="mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
-								</div>
-							</div>
-						</div>
-						<div class="card">
-							<div class="card-header">
-								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq4">
-									Collapsible Group Item #4
-								</button>
-							</div>
-							<div id="faq4" class="collapse" data-parent="#accordion">
-								<div class="card-body">
-									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-								</div>
-							</div>
-						</div>
-						<div class="card">
-							<div class="card-header">
-								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq5">
-									Collapsible Group Item #5
-								</button>
-							</div>
-							<div id="faq5" class="collapse" data-parent="#accordion">
-								<div class="card-body">
-									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-								</div>
-							</div>
-						</div>
-						<div class="card">
-							<div class="card-header">
-								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq6">
-									Collapsible Group Item #6
-								</button>
-							</div>
-							<div id="faq6" class="collapse" data-parent="#accordion">
-								<div class="card-body">
-									<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
-									<p class="mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
-								</div>
-							</div>
-						</div>
-					</div>
-					<h4 class="mb-30 h4 text-blue padding-top-30">Collapse example</h4>
-					<div class="padding-bottom-30">
-						<div class="card">
-							<div class="card-header">
-								<button class="btn btn-block" data-toggle="collapse" data-target="#faq1-1">
-									Collapsible Group Item #1
-								</button>
-							</div>
-							<div id="faq1-1" class="collapse show">
-								<div class="card-body">
-									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-								</div>
-							</div>
-						</div>
-						<div class="card">
-							<div class="card-header">
-								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq2-2">
-									Collapsible Group Item #2
-								</button>
-							</div>
-							<div id="faq2-2" class="collapse">
-								<div class="card-body">
-									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-								</div>
-							</div>
-						</div>
-						<div class="card">
-							<div class="card-header">
-								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq3-3">
-									Collapsible Group Item #3
-								</button>
-							</div>
-							<div id="faq3-3" class="collapse">
-								<div class="card-body">
-									<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
-									<p class="mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
-								</div>
-							</div>
-						</div>
-						<div class="card">
-							<div class="card-header">
-								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq4-4">
-									Collapsible Group Item #4
-								</button>
-							</div>
-							<div id="faq4-4" class="collapse">
-								<div class="card-body">
-									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-								</div>
-							</div>
-						</div>
-						<div class="card">
-							<div class="card-header">
-								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq5-5">
-									Collapsible Group Item #5
-								</button>
-							</div>
-							<div id="faq5-5" class="collapse">
-								<div class="card-body">
-									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-								</div>
-							</div>
-						</div>
-						<div class="card">
-							<div class="card-header">
-								<button class="btn btn-block collapsed" data-toggle="collapse" data-target="#faq6-6">
-									Collapsible Group Item #6
-								</button>
-							</div>
-							<div id="faq6-6" class="collapse">
-								<div class="card-body">
-									<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
-									<p class="mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/font-awesome.php b/font-awesome.html
similarity index 92%
rename from font-awesome.php
rename to font-awesome.html
index e486bd44..05817fc3 100644
--- a/font-awesome.php
+++ b/font-awesome.html
@@ -1,11 +1,452 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<?php include('include/head.php'); ?>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
 	<div class="main-container">
 		<div class="pd-ltr-20 xs-pd-20-10">
 			<div class="min-height-200px">
@@ -17,7 +458,7 @@
 							</div>
 							<nav aria-label="breadcrumb" role="navigation">
 								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
 									<li class="breadcrumb-item active" aria-current="page">Icons</li>
 								</ol>
 							</nav>
@@ -1128,9 +1569,15 @@
 					</div>
 				</div>
 			</div>
-			<?php include('include/footer.php'); ?>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
 		</div>
 	</div>
-	<?php include('include/script.php'); ?>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/forgot-password.php b/forgot-password.html
similarity index 56%
rename from forgot-password.php
rename to forgot-password.html
index 4e92b20e..47fbcc54 100644
--- a/forgot-password.php
+++ b/forgot-password.html
@@ -2,14 +2,42 @@
 <html>
 
 <head>
-	<?php include('include/head.php'); ?>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 
 <body>
 	<div class="login-header box-shadow">
 		<div class="container-fluid d-flex justify-content-between align-items-center">
 			<div class="brand-logo">
-				<a href="login.php">
+				<a href="login.html">
 					<img src="vendors/images/deskapp-logo.svg" alt="">
 				</a>
 			</div>
@@ -46,7 +74,7 @@
 											use code for form submit
 											<input class="btn btn-primary btn-lg btn-block" type="submit" value="Submit">
 										-->
-										<a class="btn btn-primary btn-lg btn-block" href="index.php">Submit</a>
+										<a class="btn btn-primary btn-lg btn-block" href="index.html">Submit</a>
 									</div>
 								</div>
 								<div class="col-2">
@@ -54,7 +82,7 @@
 								</div>
 								<div class="col-5">
 									<div class="input-group mb-0">
-										<a class="btn btn-outline-primary btn-lg btn-block" href="login.php">Login</a>
+										<a class="btn btn-outline-primary btn-lg btn-block" href="login.html">Login</a>
 									</div>
 								</div>
 							</div>
@@ -64,7 +92,11 @@
 			</div>
 		</div>
 	</div>
-	<?php include('include/script.php'); ?>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/form-basic.php b/form-basic.html
similarity index 63%
rename from form-basic.php
rename to form-basic.html
index 0e3a852b..4efadafa 100644
--- a/form-basic.php
+++ b/form-basic.html
@@ -1,11 +1,453 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<?php include('include/head.php'); ?>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
 	<div class="main-container">
 		<div class="pd-ltr-20 xs-pd-20-10">
 			<div class="min-height-200px">
@@ -17,7 +459,7 @@
 							</div>
 							<nav aria-label="breadcrumb" role="navigation">
 								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
 									<li class="breadcrumb-item active" aria-current="page">Form Basic</li>
 								</ol>
 							</nav>
@@ -872,9 +1314,15 @@
 				<!-- Input Validation End -->
 
 			</div>
-			<?php include('include/footer.php'); ?>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
 		</div>
 	</div>
-	<?php include('include/script.php'); ?>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/form-pickers.html b/form-pickers.html
new file mode 100644
index 00000000..ef223dae
--- /dev/null
+++ b/form-pickers.html
@@ -0,0 +1,608 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="src/plugins/jquery-asColorPicker/dist/css/asColorPicker.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>Form Pickers</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Form Pickers</li>
+								</ol>
+							</nav>
+						</div>
+						<div class="col-md-6 col-sm-12 text-right">
+							<div class="dropdown">
+								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+									January 2018
+								</a>
+								<div class="dropdown-menu dropdown-menu-right">
+									<a class="dropdown-item" href="#">Export List</a>
+									<a class="dropdown-item" href="#">Policies</a>
+									<a class="dropdown-item" href="#">View Assets</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="pd-20 card-box mb-30">
+					<div class="clearfix mb-20">
+						<div class="pull-left">
+							<h4 class="text-blue h4">Date Picker</h4>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-md-4 col-sm-12">
+							<form>
+								<div class="form-group">
+									<label>Default Datedpicker</label>
+									<input class="form-control date-picker" placeholder="Select Date" type="text">
+								</div>
+								<div class="form-group">
+									<label>Date and time</label>
+									<input class="form-control datetimepicker" placeholder="Choose Date anf time" type="text">
+								</div>
+							</form>
+						</div>
+						<div class="col-md-4 col-sm-12 text-center">
+							<div class="mb-20">
+								<label>Datedpicker Inline</label>
+								<div class="datepicker-here" data-timepicker="true" data-language='en'></div>
+							</div>
+						</div>
+						<div class="col-md-4 col-sm-12">
+							<form>
+								<div class="form-group">
+									<label>Datedpicker Month View</label>
+									<input class="form-control month-picker" placeholder="Select Month" type="text">
+								</div>
+								<div class="form-group">
+									<label>Datedpicker Range View</label>
+									<input class="form-control datetimepicker-range" placeholder="Select Month" type="text">
+								</div>
+							</form>
+						</div>
+					</div>
+				</div>
+				<div class="pd-20 card-box mb-30">
+					<div class="clearfix mb-20">
+						<div class="pull-left">
+							<h4 class="text-blue h4">Clock Picker</h4>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-md-3 col-sm-12">
+							<div class="form-group">
+								<label>time Delive</label>
+								<input class="form-control time-picker-default" placeholder="time" type="text">
+							</div>
+						</div>
+						<div class="col-md-3 col-sm-12">
+							<div class="form-group">
+								<label>Train departure</label>
+								<input class="form-control time-picker-default" placeholder="time" type="text">
+							</div>
+						</div>
+						<div class="col-md-3 col-sm-12">
+							<div class="form-group">
+								<label>Alarm Clock</label>
+								<input class="form-control time-picker" placeholder="time" type="text">
+							</div>
+						</div>
+						<div class="col-md-3 col-sm-12">
+							<div class="form-group">
+								<label>Text field</label>
+								<input class="form-control time-picker-default" placeholder="time" type="text">
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="pd-20 card-box height-100-p mb-30">
+					<div class="clearfix mb-30">
+						<div class="pull-left">
+							<h4 class="text-blue h4">Color Picker</h4>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-md-4 col-sm-12">
+							<div class="form-group">
+								<label>
+									Simple mode
+									<div class="font-14">use <code>.colorpicker</code> in your input element. </div>
+								</label>
+								<input type="text" class="colorpicker form-control" value="#7ab2fa" />
+							</div>
+						</div>
+						<div class="col-md-4 col-sm-12">
+							<div class="form-group">
+								<label>
+									Simple mode
+									<div class="font-14">use <code>.complex-colorpicker</code> in your input element. </div>
+								</label>
+								<input type="text" class="complex-colorpicker form-control" value="#7ab2fa" />
+							</div>
+						</div>
+						<div class="col-md-4 col-sm-12">
+							<div class="form-group">
+								<label>
+									Simple mode
+									<div class="font-14">use <code>.gradient-colorpicker</code> in your input element. </div>
+								</label>
+								<input type="text" class="gradient-colorpicker form-control" value="#f56767" />
+							</div>
+						</div>
+					</div>
+				</div>
+
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+	<script src="src/plugins/jquery-asColor/dist/jquery-asColor.js"></script>
+	<script src="src/plugins/jquery-asGradient/dist/jquery-asGradient.js"></script>
+	<script src="src/plugins/jquery-asColorPicker/jquery-asColorPicker.js"></script>
+	<script src="vendors/scripts/colorpicker.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/form-pickers.php b/form-pickers.php
deleted file mode 100644
index 7a38b518..00000000
--- a/form-pickers.php
+++ /dev/null
@@ -1,160 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-	<link rel="stylesheet" type="text/css" href="src/plugins/jquery-asColorPicker/dist/css/asColorPicker.css">
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>Form Pickers</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Form Pickers</li>
-								</ol>
-							</nav>
-						</div>
-						<div class="col-md-6 col-sm-12 text-right">
-							<div class="dropdown">
-								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-									January 2018
-								</a>
-								<div class="dropdown-menu dropdown-menu-right">
-									<a class="dropdown-item" href="#">Export List</a>
-									<a class="dropdown-item" href="#">Policies</a>
-									<a class="dropdown-item" href="#">View Assets</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div class="pd-20 card-box mb-30">
-					<div class="clearfix mb-20">
-						<div class="pull-left">
-							<h4 class="text-blue h4">Date Picker</h4>
-						</div>
-					</div>
-					<div class="row">
-						<div class="col-md-4 col-sm-12">
-							<form>
-								<div class="form-group">
-									<label>Default Datedpicker</label>
-									<input class="form-control date-picker" placeholder="Select Date" type="text">
-								</div>
-								<div class="form-group">
-									<label>Date and time</label>
-									<input class="form-control datetimepicker" placeholder="Choose Date anf time" type="text">
-								</div>
-							</form>
-						</div>
-						<div class="col-md-4 col-sm-12 text-center">
-							<div class="mb-20">
-								<label>Datedpicker Inline</label>
-								<div class="datepicker-here" data-timepicker="true" data-language='en'></div>
-							</div>
-						</div>
-						<div class="col-md-4 col-sm-12">
-							<form>
-								<div class="form-group">
-									<label>Datedpicker Month View</label>
-									<input class="form-control month-picker" placeholder="Select Month" type="text">
-								</div>
-								<div class="form-group">
-									<label>Datedpicker Range View</label>
-									<input class="form-control datetimepicker-range" placeholder="Select Month" type="text">
-								</div>
-							</form>
-						</div>
-					</div>
-				</div>
-				<div class="pd-20 card-box mb-30">
-					<div class="clearfix mb-20">
-						<div class="pull-left">
-							<h4 class="text-blue h4">Clock Picker</h4>
-						</div>
-					</div>
-					<div class="row">
-						<div class="col-md-3 col-sm-12">
-							<div class="form-group">
-								<label>time Delive</label>
-								<input class="form-control time-picker-default" placeholder="time" type="text">
-							</div>
-						</div>
-						<div class="col-md-3 col-sm-12">
-							<div class="form-group">
-								<label>Train departure</label>
-								<input class="form-control time-picker-default" placeholder="time" type="text">
-							</div>
-						</div>
-						<div class="col-md-3 col-sm-12">
-							<div class="form-group">
-								<label>Alarm Clock</label>
-								<input class="form-control time-picker" placeholder="time" type="text">
-							</div>
-						</div>
-						<div class="col-md-3 col-sm-12">
-							<div class="form-group">
-								<label>Text field</label>
-								<input class="form-control time-picker-default" placeholder="time" type="text">
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="pd-20 card-box height-100-p mb-30">
-					<div class="clearfix mb-30">
-						<div class="pull-left">
-							<h4 class="text-blue h4">Color Picker</h4>
-						</div>
-					</div>
-					<div class="row">
-						<div class="col-md-4 col-sm-12">
-							<div class="form-group">
-								<label>
-									Simple mode
-									<div class="font-14">use <code>.colorpicker</code> in your input element. </div>
-								</label>
-								<input type="text" class="colorpicker form-control" value="#7ab2fa" />
-							</div>
-						</div>
-						<div class="col-md-4 col-sm-12">
-							<div class="form-group">
-								<label>
-									Simple mode
-									<div class="font-14">use <code>.complex-colorpicker</code> in your input element. </div>
-								</label>
-								<input type="text" class="complex-colorpicker form-control" value="#7ab2fa" />
-							</div>
-						</div>
-						<div class="col-md-4 col-sm-12">
-							<div class="form-group">
-								<label>
-									Simple mode
-									<div class="font-14">use <code>.gradient-colorpicker</code> in your input element. </div>
-								</label>
-								<input type="text" class="gradient-colorpicker form-control" value="#f56767" />
-							</div>
-						</div>
-					</div>
-				</div>
-
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-	<script src="src/plugins/jquery-asColor/dist/jquery-asColor.js"></script>
-	<script src="src/plugins/jquery-asGradient/dist/jquery-asGradient.js"></script>
-	<script src="src/plugins/jquery-asColorPicker/jquery-asColorPicker.js"></script>
-	<script src="vendors/scripts/colorpicker.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/form-wizard.html b/form-wizard.html
new file mode 100644
index 00000000..b51b819c
--- /dev/null
+++ b/form-wizard.html
@@ -0,0 +1,803 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="src/plugins/jquery-steps/jquery.steps.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>Form Wizards</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Form Wizards</li>
+								</ol>
+							</nav>
+						</div>
+						<div class="col-md-6 col-sm-12 text-right">
+							<div class="dropdown">
+								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+									January 2018
+								</a>
+								<div class="dropdown-menu dropdown-menu-right">
+									<a class="dropdown-item" href="#">Export List</a>
+									<a class="dropdown-item" href="#">Policies</a>
+									<a class="dropdown-item" href="#">View Assets</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="pd-20 card-box mb-30">
+					<div class="clearfix">
+						<h4 class="text-blue h4">Step wizard</h4>
+						<p class="mb-30">jQuery Step wizard</p>
+					</div>
+					<div class="wizard-content">
+						<form class="tab-wizard wizard-circle wizard">
+							<h5>Personal Info</h5>
+							<section>
+								<div class="row">
+									<div class="col-md-6">
+										<div class="form-group">
+											<label >First Name :</label>
+											<input type="text" class="form-control">
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="form-group">
+											<label >Last Name :</label>
+											<input type="text" class="form-control">
+										</div>
+									</div>
+								</div>
+								<div class="row">
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Email Address :</label>
+											<input type="email" class="form-control">
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Phone Number :</label>
+											<input type="text" class="form-control">
+										</div>
+									</div>
+								</div>
+								<div class="row">
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Select City :</label>
+											<select class="custom-select form-control">
+												<option value="">Select City</option>
+												<option value="Amsterdam">India</option>
+												<option value="Berlin">UK</option>
+												<option value="Frankfurt">US</option>
+											</select>
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="form-group">
+											<label >Date of Birth :</label>
+											<input type="text" class="form-control date-picker" placeholder="Select Date">
+										</div>
+									</div>
+								</div>
+							</section>
+							<!-- Step 2 -->
+							<h5>Job Status</h5>
+							<section>
+								<div class="row">
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Job Title :</label>
+											<input type="text" class="form-control">
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Company Name :</label>
+											<input type="text" class="form-control">
+										</div>
+									</div>
+									<div class="col-md-12">
+										<div class="form-group">
+											<label>Job Description :</label>
+											<textarea class="form-control"></textarea>
+										</div>
+									</div>
+								</div>
+							</section>
+							<!-- Step 3 -->
+							<h5>Interview</h5>
+							<section>
+								<div class="row">
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Interview For :</label>
+											<input type="text" class="form-control">
+										</div>
+										<div class="form-group">
+											<label>Interview Type :</label>
+											<select class="form-control">
+												<option>Normal</option>
+												<option>Difficult</option>
+												<option>Hard</option>
+											</select>
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Interview Date :</label>
+											<input type="text" class="form-control date-picker" placeholder="Select Date">
+										</div>
+										<div class="form-group">
+											<label>Interview Time :</label>
+											<input class="form-control time-picker" placeholder="Select time" type="text">
+										</div>
+									</div>
+								</div>
+							</section>
+							<!-- Step 4 -->
+							<h5>Remark</h5>
+							<section>
+								<div class="row">
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Behaviour :</label>
+											<input type="text" class="form-control">
+										</div>
+										<div class="form-group">
+											<label>Confidance</label>
+											<input type="text" class="form-control">
+										</div>
+										<div class="form-group">
+											<label>Result</label>
+											<select class="form-control">
+												<option>Select Result</option>
+												<option>Selected</option>
+												<option>Rejected</option>
+											</select>
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Comments</label>
+											<textarea class="form-control"></textarea>
+										</div>
+									</div>
+								</div>
+							</section>
+						</form>
+					</div>
+				</div>
+
+				<div class="pd-20 card-box mb-30">
+					<div class="clearfix">
+						<h4 class="text-blue h4">Step wizard vertical</h4>
+						<p class="mb-30">jQuery Step wizard</p>
+					</div>
+					<div class="wizard-content">
+						<form class="tab-wizard wizard-circle wizard vertical">
+							<h5>Personal Info</h5>
+							<section>
+								<div class="row">
+									<div class="col-md-6">
+										<div class="form-group">
+											<label >First Name :</label>
+											<input type="text" class="form-control">
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="form-group">
+											<label >Last Name :</label>
+											<input type="text" class="form-control">
+										</div>
+									</div>
+								</div>
+								<div class="row">
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Email Address :</label>
+											<input type="email" class="form-control">
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Phone Number :</label>
+											<input type="text" class="form-control">
+										</div>
+									</div>
+								</div>
+								<div class="row">
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Select City :</label>
+											<select class="custom-select form-control">
+												<option value="">Select City</option>
+												<option value="Amsterdam">India</option>
+												<option value="Berlin">UK</option>
+												<option value="Frankfurt">US</option>
+											</select>
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="form-group">
+											<label >Date of Birth :</label>
+											<input type="text" class="form-control date-picker" placeholder="Select Date">
+										</div>
+									</div>
+								</div>
+							</section>
+							<!-- Step 2 -->
+							<h5>Job Status</h5>
+							<section>
+								<div class="row">
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Job Title :</label>
+											<input type="text" class="form-control">
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Company Name :</label>
+											<input type="text" class="form-control">
+										</div>
+									</div>
+									<div class="col-md-12">
+										<div class="form-group">
+											<label>Job Description :</label>
+											<textarea class="form-control"></textarea>
+										</div>
+									</div>
+								</div>
+							</section>
+							<!-- Step 3 -->
+							<h5>Interview</h5>
+							<section>
+								<div class="row">
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Interview For :</label>
+											<input type="text" class="form-control">
+										</div>
+										<div class="form-group">
+											<label>Interview Type :</label>
+											<select class="form-control">
+												<option>Normal</option>
+												<option>Difficult</option>
+												<option>Hard</option>
+											</select>
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Interview Date :</label>
+											<input type="text" class="form-control date-picker" placeholder="Select Date">
+										</div>
+										<div class="form-group">
+											<label>Interview Time :</label>
+											<input class="form-control time-picker" placeholder="Select time" type="text">
+										</div>
+									</div>
+								</div>
+							</section>
+							<!-- Step 4 -->
+							<h5>Remark</h5>
+							<section>
+								<div class="row">
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Behaviour :</label>
+											<input type="text" class="form-control">
+										</div>
+										<div class="form-group">
+											<label>Confidance</label>
+											<input type="text" class="form-control">
+										</div>
+										<div class="form-group">
+											<label>Result</label>
+											<select class="form-control">
+												<option>Select Result</option>
+												<option>Selected</option>
+												<option>Rejected</option>
+											</select>
+										</div>
+									</div>
+									<div class="col-md-6">
+										<div class="form-group">
+											<label>Comments</label>
+											<textarea class="form-control"></textarea>
+										</div>
+									</div>
+								</div>
+							</section>
+						</form>
+					</div>
+				</div>
+
+				<!-- success Popup html Start -->
+				<div class="modal fade" id="success-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+					<div class="modal-dialog modal-dialog-centered" role="document">
+						<div class="modal-content">
+							<div class="modal-body text-center font-18">
+								<h3 class="mb-20">Form Submitted!</h3>
+								<div class="mb-30 text-center"><img src="vendors/images/success.png"></div>
+								Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+							</div>
+							<div class="modal-footer justify-content-center">
+								<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
+							</div>
+						</div>
+					</div>
+				</div>
+				<!-- success Popup html End -->
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+	<script src="src/plugins/jquery-steps/jquery.steps.js"></script>
+	<script src="vendors/scripts/steps-setting.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/form-wizard.php b/form-wizard.php
deleted file mode 100644
index 9e1dcc64..00000000
--- a/form-wizard.php
+++ /dev/null
@@ -1,355 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-	<link rel="stylesheet" type="text/css" href="src/plugins/jquery-steps/jquery.steps.css">
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>Form Wizards</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Form Wizards</li>
-								</ol>
-							</nav>
-						</div>
-						<div class="col-md-6 col-sm-12 text-right">
-							<div class="dropdown">
-								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-									January 2018
-								</a>
-								<div class="dropdown-menu dropdown-menu-right">
-									<a class="dropdown-item" href="#">Export List</a>
-									<a class="dropdown-item" href="#">Policies</a>
-									<a class="dropdown-item" href="#">View Assets</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div class="pd-20 card-box mb-30">
-					<div class="clearfix">
-						<h4 class="text-blue h4">Step wizard</h4>
-						<p class="mb-30">jQuery Step wizard</p>
-					</div>
-					<div class="wizard-content">
-						<form class="tab-wizard wizard-circle wizard">
-							<h5>Personal Info</h5>
-							<section>
-								<div class="row">
-									<div class="col-md-6">
-										<div class="form-group">
-											<label >First Name :</label>
-											<input type="text" class="form-control">
-										</div>
-									</div>
-									<div class="col-md-6">
-										<div class="form-group">
-											<label >Last Name :</label>
-											<input type="text" class="form-control">
-										</div>
-									</div>
-								</div>
-								<div class="row">
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Email Address :</label>
-											<input type="email" class="form-control">
-										</div>
-									</div>
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Phone Number :</label>
-											<input type="text" class="form-control">
-										</div>
-									</div>
-								</div>
-								<div class="row">
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Select City :</label>
-											<select class="custom-select form-control">
-												<option value="">Select City</option>
-												<option value="Amsterdam">India</option>
-												<option value="Berlin">UK</option>
-												<option value="Frankfurt">US</option>
-											</select>
-										</div>
-									</div>
-									<div class="col-md-6">
-										<div class="form-group">
-											<label >Date of Birth :</label>
-											<input type="text" class="form-control date-picker" placeholder="Select Date">
-										</div>
-									</div>
-								</div>
-							</section>
-							<!-- Step 2 -->
-							<h5>Job Status</h5>
-							<section>
-								<div class="row">
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Job Title :</label>
-											<input type="text" class="form-control">
-										</div>
-									</div>
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Company Name :</label>
-											<input type="text" class="form-control">
-										</div>
-									</div>
-									<div class="col-md-12">
-										<div class="form-group">
-											<label>Job Description :</label>
-											<textarea class="form-control"></textarea>
-										</div>
-									</div>
-								</div>
-							</section>
-							<!-- Step 3 -->
-							<h5>Interview</h5>
-							<section>
-								<div class="row">
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Interview For :</label>
-											<input type="text" class="form-control">
-										</div>
-										<div class="form-group">
-											<label>Interview Type :</label>
-											<select class="form-control">
-												<option>Normal</option>
-												<option>Difficult</option>
-												<option>Hard</option>
-											</select>
-										</div>
-									</div>
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Interview Date :</label>
-											<input type="text" class="form-control date-picker" placeholder="Select Date">
-										</div>
-										<div class="form-group">
-											<label>Interview Time :</label>
-											<input class="form-control time-picker" placeholder="Select time" type="text">
-										</div>
-									</div>
-								</div>
-							</section>
-							<!-- Step 4 -->
-							<h5>Remark</h5>
-							<section>
-								<div class="row">
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Behaviour :</label>
-											<input type="text" class="form-control">
-										</div>
-										<div class="form-group">
-											<label>Confidance</label>
-											<input type="text" class="form-control">
-										</div>
-										<div class="form-group">
-											<label>Result</label>
-											<select class="form-control">
-												<option>Select Result</option>
-												<option>Selected</option>
-												<option>Rejected</option>
-											</select>
-										</div>
-									</div>
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Comments</label>
-											<textarea class="form-control"></textarea>
-										</div>
-									</div>
-								</div>
-							</section>
-						</form>
-					</div>
-				</div>
-
-				<div class="pd-20 card-box mb-30">
-					<div class="clearfix">
-						<h4 class="text-blue h4">Step wizard vertical</h4>
-						<p class="mb-30">jQuery Step wizard</p>
-					</div>
-					<div class="wizard-content">
-						<form class="tab-wizard wizard-circle wizard vertical">
-							<h5>Personal Info</h5>
-							<section>
-								<div class="row">
-									<div class="col-md-6">
-										<div class="form-group">
-											<label >First Name :</label>
-											<input type="text" class="form-control">
-										</div>
-									</div>
-									<div class="col-md-6">
-										<div class="form-group">
-											<label >Last Name :</label>
-											<input type="text" class="form-control">
-										</div>
-									</div>
-								</div>
-								<div class="row">
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Email Address :</label>
-											<input type="email" class="form-control">
-										</div>
-									</div>
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Phone Number :</label>
-											<input type="text" class="form-control">
-										</div>
-									</div>
-								</div>
-								<div class="row">
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Select City :</label>
-											<select class="custom-select form-control">
-												<option value="">Select City</option>
-												<option value="Amsterdam">India</option>
-												<option value="Berlin">UK</option>
-												<option value="Frankfurt">US</option>
-											</select>
-										</div>
-									</div>
-									<div class="col-md-6">
-										<div class="form-group">
-											<label >Date of Birth :</label>
-											<input type="text" class="form-control date-picker" placeholder="Select Date">
-										</div>
-									</div>
-								</div>
-							</section>
-							<!-- Step 2 -->
-							<h5>Job Status</h5>
-							<section>
-								<div class="row">
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Job Title :</label>
-											<input type="text" class="form-control">
-										</div>
-									</div>
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Company Name :</label>
-											<input type="text" class="form-control">
-										</div>
-									</div>
-									<div class="col-md-12">
-										<div class="form-group">
-											<label>Job Description :</label>
-											<textarea class="form-control"></textarea>
-										</div>
-									</div>
-								</div>
-							</section>
-							<!-- Step 3 -->
-							<h5>Interview</h5>
-							<section>
-								<div class="row">
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Interview For :</label>
-											<input type="text" class="form-control">
-										</div>
-										<div class="form-group">
-											<label>Interview Type :</label>
-											<select class="form-control">
-												<option>Normal</option>
-												<option>Difficult</option>
-												<option>Hard</option>
-											</select>
-										</div>
-									</div>
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Interview Date :</label>
-											<input type="text" class="form-control date-picker" placeholder="Select Date">
-										</div>
-										<div class="form-group">
-											<label>Interview Time :</label>
-											<input class="form-control time-picker" placeholder="Select time" type="text">
-										</div>
-									</div>
-								</div>
-							</section>
-							<!-- Step 4 -->
-							<h5>Remark</h5>
-							<section>
-								<div class="row">
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Behaviour :</label>
-											<input type="text" class="form-control">
-										</div>
-										<div class="form-group">
-											<label>Confidance</label>
-											<input type="text" class="form-control">
-										</div>
-										<div class="form-group">
-											<label>Result</label>
-											<select class="form-control">
-												<option>Select Result</option>
-												<option>Selected</option>
-												<option>Rejected</option>
-											</select>
-										</div>
-									</div>
-									<div class="col-md-6">
-										<div class="form-group">
-											<label>Comments</label>
-											<textarea class="form-control"></textarea>
-										</div>
-									</div>
-								</div>
-							</section>
-						</form>
-					</div>
-				</div>
-
-				<!-- success Popup html Start -->
-				<div class="modal fade" id="success-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
-					<div class="modal-dialog modal-dialog-centered" role="document">
-						<div class="modal-content">
-							<div class="modal-body text-center font-18">
-								<h3 class="mb-20">Form Submitted!</h3>
-								<div class="mb-30 text-center"><img src="vendors/images/success.png"></div>
-								Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-							</div>
-							<div class="modal-footer justify-content-center">
-								<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
-							</div>
-						</div>
-					</div>
-				</div>
-				<!-- success Popup html End -->
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-	<script src="src/plugins/jquery-steps/jquery.steps.js"></script>
-	<script src="vendors/scripts/steps-setting.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/foundation.php b/foundation.html
similarity index 76%
rename from foundation.php
rename to foundation.html
index 39310600..59867ead 100644
--- a/foundation.php
+++ b/foundation.html
@@ -1,11 +1,452 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<?php include('include/head.php'); ?>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
 	<div class="main-container">
 		<div class="pd-ltr-20 xs-pd-20-10">
 			<div class="min-height-200px">
@@ -17,7 +458,7 @@
 							</div>
 							<nav aria-label="breadcrumb" role="navigation">
 								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
 									<li class="breadcrumb-item active" aria-current="page">Icons</li>
 								</ol>
 							</nav>
@@ -454,9 +895,15 @@
 					</div>
 				</div>
 			</div>
-			<?php include('include/footer.php'); ?>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
 		</div>
 	</div>
-	<?php include('include/script.php'); ?>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/gallery.html b/gallery.html
new file mode 100644
index 00000000..cc06c809
--- /dev/null
+++ b/gallery.html
@@ -0,0 +1,632 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="src/plugins/fancybox/dist/jquery.fancybox.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+	<!-- fancybox Popup css -->
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Gallery</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Gallery</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="gallery-wrap">
+					<ul class="row">
+						<li class="col-lg-4 col-md-6 col-sm-12">
+							<div class="da-card box-shadow">
+								<div class="da-card-photo">
+									<img src="vendors/images/product-img1.jpg" alt="">
+									<div class="da-overlay">
+										<div class="da-social">
+										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
+											<ul class="clearfix">
+												<li><a href="vendors/images/product-img1.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
+												<li><a href="#"><i class="fa fa-link"></i></a></li>
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+						</li>
+						<li class="col-lg-4 col-md-6 col-sm-12">
+							<div class="da-card box-shadow">
+								<div class="da-card-photo">
+									<img src="vendors/images/product-img2.jpg" alt="">
+									<div class="da-overlay">
+										<div class="da-social">
+										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
+											<ul class="clearfix">
+												<li><a href="vendors/images/product-img2.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
+												<li><a href="#"><i class="fa fa-link"></i></a></li>
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+						</li>
+						<li class="col-lg-4 col-md-6 col-sm-12">
+							<div class="da-card box-shadow">
+								<div class="da-card-photo">
+									<img src="vendors/images/product-img3.jpg" alt="">
+									<div class="da-overlay">
+										<div class="da-social">
+										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
+											<ul class="clearfix">
+												<li><a href="vendors/images/product-img3.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
+												<li><a href="#"><i class="fa fa-link"></i></a></li>
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+						</li>
+						<li class="col-lg-4 col-md-6 col-sm-12">
+							<div class="da-card box-shadow">
+								<div class="da-card-photo">
+									<img src="vendors/images/product-img4.jpg" alt="">
+									<div class="da-overlay">
+										<div class="da-social">
+										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
+											<ul class="clearfix">
+												<li><a href="vendors/images/product-img4.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
+												<li><a href="#"><i class="fa fa-link"></i></a></li>
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+						</li>
+						<li class="col-lg-4 col-md-6 col-sm-12">
+							<div class="da-card box-shadow">
+								<div class="da-card-photo">
+									<img src="vendors/images/product-img1.jpg" alt="">
+									<div class="da-overlay">
+										<div class="da-social">
+										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
+											<ul class="clearfix">
+												<li><a href="vendors/images/product-img1.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
+												<li><a href="#"><i class="fa fa-link"></i></a></li>
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+						</li>
+						<li class="col-lg-4 col-md-6 col-sm-12">
+							<div class="da-card box-shadow">
+								<div class="da-card-photo">
+									<img src="vendors/images/product-img2.jpg" alt="">
+									<div class="da-overlay">
+										<div class="da-social">
+										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
+											<ul class="clearfix">
+												<li><a href="vendors/images/product-img2.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
+												<li><a href="#"><i class="fa fa-link"></i></a></li>
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+						</li>
+						<li class="col-lg-4 col-md-6 col-sm-12">
+							<div class="da-card box-shadow">
+								<div class="da-card-photo">
+									<img src="vendors/images/product-img3.jpg" alt="">
+									<div class="da-overlay">
+										<div class="da-social">
+										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
+											<ul class="clearfix">
+												<li><a href="vendors/images/product-img3.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
+												<li><a href="#"><i class="fa fa-link"></i></a></li>
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+						</li>
+						<li class="col-lg-4 col-md-6 col-sm-12">
+							<div class="da-card box-shadow">
+								<div class="da-card-photo">
+									<img src="vendors/images/product-img4.jpg" alt="">
+									<div class="da-overlay">
+										<div class="da-social">
+										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
+											<ul class="clearfix">
+												<li><a href="vendors/images/product-img4.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
+												<li><a href="#"><i class="fa fa-link"></i></a></li>
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+						</li>
+						<li class="col-lg-4 col-md-6 col-sm-12">
+							<div class="da-card box-shadow">
+								<div class="da-card-photo">
+									<img src="vendors/images/product-img1.jpg" alt="">
+									<div class="da-overlay">
+										<div class="da-social">
+										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
+											<ul class="clearfix">
+												<li><a href="vendors/images/product-img1.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
+												<li><a href="#"><i class="fa fa-link"></i></a></li>
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+						</li>
+					</ul>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+	<!-- fancybox Popup Js -->
+	<script src="src/plugins/fancybox/dist/jquery.fancybox.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/gallery.php b/gallery.php
deleted file mode 100644
index c7fdc484..00000000
--- a/gallery.php
+++ /dev/null
@@ -1,185 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-	<!-- fancybox Popup css -->
-	<link rel="stylesheet" type="text/css" href="src/plugins/fancybox/dist/jquery.fancybox.css">
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Gallery</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Gallery</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="gallery-wrap">
-					<ul class="row">
-						<li class="col-lg-4 col-md-6 col-sm-12">
-							<div class="da-card box-shadow">
-								<div class="da-card-photo">
-									<img src="vendors/images/product-img1.jpg" alt="">
-									<div class="da-overlay">
-										<div class="da-social">
-										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
-											<ul class="clearfix">
-												<li><a href="vendors/images/product-img1.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
-												<li><a href="#"><i class="fa fa-link"></i></a></li>
-											</ul>
-										</div>
-									</div>
-								</div>
-							</div>
-						</li>
-						<li class="col-lg-4 col-md-6 col-sm-12">
-							<div class="da-card box-shadow">
-								<div class="da-card-photo">
-									<img src="vendors/images/product-img2.jpg" alt="">
-									<div class="da-overlay">
-										<div class="da-social">
-										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
-											<ul class="clearfix">
-												<li><a href="vendors/images/product-img2.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
-												<li><a href="#"><i class="fa fa-link"></i></a></li>
-											</ul>
-										</div>
-									</div>
-								</div>
-							</div>
-						</li>
-						<li class="col-lg-4 col-md-6 col-sm-12">
-							<div class="da-card box-shadow">
-								<div class="da-card-photo">
-									<img src="vendors/images/product-img3.jpg" alt="">
-									<div class="da-overlay">
-										<div class="da-social">
-										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
-											<ul class="clearfix">
-												<li><a href="vendors/images/product-img3.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
-												<li><a href="#"><i class="fa fa-link"></i></a></li>
-											</ul>
-										</div>
-									</div>
-								</div>
-							</div>
-						</li>
-						<li class="col-lg-4 col-md-6 col-sm-12">
-							<div class="da-card box-shadow">
-								<div class="da-card-photo">
-									<img src="vendors/images/product-img4.jpg" alt="">
-									<div class="da-overlay">
-										<div class="da-social">
-										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
-											<ul class="clearfix">
-												<li><a href="vendors/images/product-img4.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
-												<li><a href="#"><i class="fa fa-link"></i></a></li>
-											</ul>
-										</div>
-									</div>
-								</div>
-							</div>
-						</li>
-						<li class="col-lg-4 col-md-6 col-sm-12">
-							<div class="da-card box-shadow">
-								<div class="da-card-photo">
-									<img src="vendors/images/product-img1.jpg" alt="">
-									<div class="da-overlay">
-										<div class="da-social">
-										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
-											<ul class="clearfix">
-												<li><a href="vendors/images/product-img1.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
-												<li><a href="#"><i class="fa fa-link"></i></a></li>
-											</ul>
-										</div>
-									</div>
-								</div>
-							</div>
-						</li>
-						<li class="col-lg-4 col-md-6 col-sm-12">
-							<div class="da-card box-shadow">
-								<div class="da-card-photo">
-									<img src="vendors/images/product-img2.jpg" alt="">
-									<div class="da-overlay">
-										<div class="da-social">
-										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
-											<ul class="clearfix">
-												<li><a href="vendors/images/product-img2.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
-												<li><a href="#"><i class="fa fa-link"></i></a></li>
-											</ul>
-										</div>
-									</div>
-								</div>
-							</div>
-						</li>
-						<li class="col-lg-4 col-md-6 col-sm-12">
-							<div class="da-card box-shadow">
-								<div class="da-card-photo">
-									<img src="vendors/images/product-img3.jpg" alt="">
-									<div class="da-overlay">
-										<div class="da-social">
-										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
-											<ul class="clearfix">
-												<li><a href="vendors/images/product-img3.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
-												<li><a href="#"><i class="fa fa-link"></i></a></li>
-											</ul>
-										</div>
-									</div>
-								</div>
-							</div>
-						</li>
-						<li class="col-lg-4 col-md-6 col-sm-12">
-							<div class="da-card box-shadow">
-								<div class="da-card-photo">
-									<img src="vendors/images/product-img4.jpg" alt="">
-									<div class="da-overlay">
-										<div class="da-social">
-										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
-											<ul class="clearfix">
-												<li><a href="vendors/images/product-img4.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
-												<li><a href="#"><i class="fa fa-link"></i></a></li>
-											</ul>
-										</div>
-									</div>
-								</div>
-							</div>
-						</li>
-						<li class="col-lg-4 col-md-6 col-sm-12">
-							<div class="da-card box-shadow">
-								<div class="da-card-photo">
-									<img src="vendors/images/product-img1.jpg" alt="">
-									<div class="da-overlay">
-										<div class="da-social">
-										<h5 class="mb-10 color-white pd-20">Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
-											<ul class="clearfix">
-												<li><a href="vendors/images/product-img1.jpg" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>
-												<li><a href="#"><i class="fa fa-link"></i></a></li>
-											</ul>
-										</div>
-									</div>
-								</div>
-							</div>
-						</li>
-					</ul>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-	<!-- fancybox Popup Js -->
-	<script src="src/plugins/fancybox/dist/jquery.fancybox.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/getting-started.html b/getting-started.html
new file mode 100644
index 00000000..c831b7c5
--- /dev/null
+++ b/getting-started.html
@@ -0,0 +1,568 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>Getting Started</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item"><a href="javascript:;">Documentation</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Getting Started</li>
+								</ol>
+							</nav>
+						</div>
+						<div class="col-md-6 col-sm-12 text-right">
+							<div class="dropdown">
+								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+									Menu
+								</a>
+								<div class="dropdown-menu dropdown-menu-right">
+									<a class="dropdown-item" href="introduction.html">Introduction</a>
+									<a class="dropdown-item active" href="getting-started.html">Getting Started</a>
+									<a class="dropdown-item" href="color-settings.html">Color Settings</a>
+									<a class="dropdown-item" href="third-party-plugins.html">Third Party Plugins</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="pd-20 card-box mb-30">
+					<h4 class="h4 text-blue mb-10">Getting Started</h4>
+					<div class="alert alert-primary" role="alert">
+						Note: we recomonded you to please make your one own css file & one js files and add that in your page, so whenever the update of Severny admin comes it does not affect your code.
+					</div>
+					<div class="alert alert-danger" role="alert">
+						If you are using css then no need to follow below steps. Just go to the index.html and open that file in to the browser for desire output.
+					</div>
+					<div class="alert alert-danger" role="alert">
+						If you are using scss and package managing then we have compilation tool (gulp) for that please follow the below steps.
+					</div>
+					<div>
+						<ul class="list-group list-group-flush">
+							<li class="list-group-item pt-20 pb-20">
+								<h6 class="weight-400 d-flex">
+									<i class="icon-copy dw dw-checked mr-2" data-color="#1b00ff"></i> Install Node.js From <a href="https://nodejs.org/en/download/" class="ml-2" target="_blank" data-color="#1b00ff">https://nodejs.org/en/download/</a>
+								</h6>
+							</li>
+							<li class="list-group-item pt-20 pb-20">
+								<h6 class="weight-400 d-flex">
+									<i class="icon-copy dw dw-checked mr-2" data-color="#1b00ff"></i> After that open command promt or any other terminal and go to Package Path.
+								</h6>
+							</li>
+							<li class="list-group-item pt-20 pb-20">
+								<h6 class="weight-400 d-flex">
+									<i class="icon-copy dw dw-checked mr-2" data-color="#1b00ff"></i> Npm is a default package manager for the JavaScript runtime environment Node.js. If you've already then update once.
+								</h6>
+								<div class="bg-dark py-2 px-3 ml-md-4 mt-md-3 text-white rounded-lg shadow">
+									<p class="mb-0">npm install --global npm@latest</p>
+								</div>
+								<div class="ml-md-4 mt-md-3 alert alert-success p-0">
+									<div class="bg-success mb-0 text-white py-2 px-3">
+										<p class="mb-0">To check weather is node succesfully install or not.</p>
+									</div>
+									<div class="p-3">
+										<p class="mb-0 weight-500">npm --version</p>
+									</div>
+								</div>
+							</li>
+							<li class="list-group-item pt-20 pb-20">
+								<h6 class="weight-400 d-flex">
+									<i class="icon-copy dw dw-checked mr-2" data-color="#1b00ff"></i> Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks. To install gulp globally has inclue:
+								</h6>
+								<div class="bg-dark py-2 px-3 ml-md-4 mt-md-3 text-white rounded-lg shadow">
+									<p class="mb-0">npm install --global gulp-cli</p>
+								</div>
+								<div class="ml-md-4 mt-md-3 alert alert-success p-0">
+									<div class="bg-success mb-0 text-white py-2 px-3">
+										<p class="mb-0">If you have previously installed gulp then remove it.</p>
+									</div>
+									<div class="p-3">
+										<p class="mb-0 weight-500">npm rm --global gulp</p>
+									</div>
+								</div>
+								<div class="ml-md-4 mt-md-3 alert alert-success p-0">
+									<div class="bg-success mb-0 text-white py-2 px-3">
+										<p class="mb-0">To check weather is gulp succesfully install or not.</p>
+									</div>
+									<div class="p-3">
+										<p class="mb-0 weight-500">gulp --version</p>
+									</div>
+								</div>
+							</li>
+							<li class="list-group-item pt-20 pb-20">
+								<h6 class="weight-400 d-flex">
+									<i class="icon-copy dw dw-checked mr-2" data-color="#1b00ff"></i> Below Command will execute all the assets(js,css) to the dist folder separately.
+								</h6>
+								<div class="bg-dark py-2 px-3 ml-md-4 mt-md-3 text-white rounded-lg shadow">
+									<p class="mb-0">gulp</p>
+								</div>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/getting-started.php b/getting-started.php
deleted file mode 100644
index 65ea5904..00000000
--- a/getting-started.php
+++ /dev/null
@@ -1,121 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>Getting Started</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item"><a href="javascript:;">Documentation</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Getting Started</li>
-								</ol>
-							</nav>
-						</div>
-						<div class="col-md-6 col-sm-12 text-right">
-							<div class="dropdown">
-								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-									Menu
-								</a>
-								<div class="dropdown-menu dropdown-menu-right">
-									<a class="dropdown-item" href="introduction.php">Introduction</a>
-									<a class="dropdown-item active" href="getting-started.php">Getting Started</a>
-									<a class="dropdown-item" href="color-settings.php">Color Settings</a>
-									<a class="dropdown-item" href="third-party-plugins.php">Third Party Plugins</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="pd-20 card-box mb-30">
-					<h4 class="h4 text-blue mb-10">Getting Started</h4>
-					<div class="alert alert-primary" role="alert">
-						Note: we recomonded you to please make your one own css file & one js files and add that in your page, so whenever the update of Severny admin comes it does not affect your code.
-					</div>
-					<div class="alert alert-danger" role="alert">
-						If you are using css then no need to follow below steps. Just go to the index.html and open that file in to the browser for desire output.
-					</div>
-					<div class="alert alert-danger" role="alert">
-						If you are using scss and package managing then we have compilation tool (gulp) for that please follow the below steps.
-					</div>
-					<div>
-						<ul class="list-group list-group-flush">
-							<li class="list-group-item pt-20 pb-20">
-								<h6 class="weight-400 d-flex">
-									<i class="icon-copy dw dw-checked mr-2" data-color="#1b00ff"></i> Install Node.js From <a href="https://nodejs.org/en/download/" class="ml-2" target="_blank" data-color="#1b00ff">https://nodejs.org/en/download/</a>
-								</h6>
-							</li>
-							<li class="list-group-item pt-20 pb-20">
-								<h6 class="weight-400 d-flex">
-									<i class="icon-copy dw dw-checked mr-2" data-color="#1b00ff"></i> After that open command promt or any other terminal and go to Package Path.
-								</h6>
-							</li>
-							<li class="list-group-item pt-20 pb-20">
-								<h6 class="weight-400 d-flex">
-									<i class="icon-copy dw dw-checked mr-2" data-color="#1b00ff"></i> Npm is a default package manager for the JavaScript runtime environment Node.js. If you've already then update once.
-								</h6>
-								<div class="bg-dark py-2 px-3 ml-md-4 mt-md-3 text-white rounded-lg shadow">
-									<p class="mb-0">npm install --global npm@latest</p>
-								</div>
-								<div class="ml-md-4 mt-md-3 alert alert-success p-0">
-									<div class="bg-success mb-0 text-white py-2 px-3">
-										<p class="mb-0">To check weather is node succesfully install or not.</p>
-									</div>
-									<div class="p-3">
-										<p class="mb-0 weight-500">npm --version</p>
-									</div>
-								</div>
-							</li>
-							<li class="list-group-item pt-20 pb-20">
-								<h6 class="weight-400 d-flex">
-									<i class="icon-copy dw dw-checked mr-2" data-color="#1b00ff"></i> Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks. To install gulp globally has inclue:
-								</h6>
-								<div class="bg-dark py-2 px-3 ml-md-4 mt-md-3 text-white rounded-lg shadow">
-									<p class="mb-0">npm install --global gulp-cli</p>
-								</div>
-								<div class="ml-md-4 mt-md-3 alert alert-success p-0">
-									<div class="bg-success mb-0 text-white py-2 px-3">
-										<p class="mb-0">If you have previously installed gulp then remove it.</p>
-									</div>
-									<div class="p-3">
-										<p class="mb-0 weight-500">npm rm --global gulp</p>
-									</div>
-								</div>
-								<div class="ml-md-4 mt-md-3 alert alert-success p-0">
-									<div class="bg-success mb-0 text-white py-2 px-3">
-										<p class="mb-0">To check weather is gulp succesfully install or not.</p>
-									</div>
-									<div class="p-3">
-										<p class="mb-0 weight-500">gulp --version</p>
-									</div>
-								</div>
-							</li>
-							<li class="list-group-item pt-20 pb-20">
-								<h6 class="weight-400 d-flex">
-									<i class="icon-copy dw dw-checked mr-2" data-color="#1b00ff"></i> Below Command will execute all the assets(js,css) to the dist folder separately.
-								</h6>
-								<div class="bg-dark py-2 px-3 ml-md-4 mt-md-3 text-white rounded-lg shadow">
-									<p class="mb-0">gulp</p>
-								</div>
-							</li>
-						</ul>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index 1c8daa4c..b65ca142 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -70,7 +70,7 @@ var path = {
 		'src/fonts/**/*.*',
 	],
 	images: 'src/images/**/*.*',
-	php: ['*.php'],
+	php: ['*.html'],
 };
 
 gulp.task('styles', function() {
@@ -210,7 +210,7 @@ gulp.task('connect-sync', function (done) {
 	      domain: 'localhost:3000'
 	    }
 	});
-	gulp.watch("*.php").on("change", reload);
+	gulp.watch("*.html").on("change", reload);
 	gulp.watch("src/styles/**/*.css").on("change", reload);
 	gulp.watch("src/plugins/**/*.css").on("change", reload);
 });
diff --git a/highchart.html b/highchart.html
new file mode 100644
index 00000000..f9b2e566
--- /dev/null
+++ b/highchart.html
@@ -0,0 +1,520 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>Charts</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Charts</li>
+								</ol>
+							</nav>
+						</div>
+						<div class="col-md-6 col-sm-12 text-right">
+							<div class="dropdown">
+								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+									January 2020
+								</a>
+								<div class="dropdown-menu dropdown-menu-right">
+									<a class="dropdown-item" href="#">Export List</a>
+									<a class="dropdown-item" href="#">Policies</a>
+									<a class="dropdown-item" href="#">View Assets</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="bg-white pd-20 card-box mb-30">
+					<div id="chart1"></div>
+				</div>
+				<div class="bg-white pd-20 card-box mb-30">
+					<div id="chart2"></div>
+				</div>
+				<div class="bg-white pd-20 card-box mb-30">
+					<div id="chart3"></div>
+				</div>
+				<div class="bg-white pd-20 card-box mb-30">
+					<div id="chart4"></div>
+				</div>
+				<div class="bg-white pd-20 card-box mb-30">
+					<div id="chart5"></div>
+				</div>
+				<div class="bg-white pd-20 card-box mb-30">
+					<div id="chart6"></div>
+				</div>
+				<div class="bg-white pd-20 card-box mb-30">
+					<div id="chart7"></div>
+				</div>
+				<div class="bg-white pd-20 card-box mb-30">
+					<div id="chart8"></div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+	<script src="src/plugins/highcharts-6.0.7/code/highcharts.js"></script>
+	<script src="https://code.highcharts.com/highcharts-3d.js"></script>
+	<script src="src/plugins/highcharts-6.0.7/code/highcharts-more.js"></script>
+	<script src="vendors/scripts/highchart-setting.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/highchart.php b/highchart.php
deleted file mode 100644
index 253bb63a..00000000
--- a/highchart.php
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>Charts</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Charts</li>
-								</ol>
-							</nav>
-						</div>
-						<div class="col-md-6 col-sm-12 text-right">
-							<div class="dropdown">
-								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-									January 2020
-								</a>
-								<div class="dropdown-menu dropdown-menu-right">
-									<a class="dropdown-item" href="#">Export List</a>
-									<a class="dropdown-item" href="#">Policies</a>
-									<a class="dropdown-item" href="#">View Assets</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="bg-white pd-20 card-box mb-30">
-					<div id="chart1"></div>
-				</div>
-				<div class="bg-white pd-20 card-box mb-30">
-					<div id="chart2"></div>
-				</div>
-				<div class="bg-white pd-20 card-box mb-30">
-					<div id="chart3"></div>
-				</div>
-				<div class="bg-white pd-20 card-box mb-30">
-					<div id="chart4"></div>
-				</div>
-				<div class="bg-white pd-20 card-box mb-30">
-					<div id="chart5"></div>
-				</div>
-				<div class="bg-white pd-20 card-box mb-30">
-					<div id="chart6"></div>
-				</div>
-				<div class="bg-white pd-20 card-box mb-30">
-					<div id="chart7"></div>
-				</div>
-				<div class="bg-white pd-20 card-box mb-30">
-					<div id="chart8"></div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-	<script src="src/plugins/highcharts-6.0.7/code/highcharts.js"></script>
-	<script src="https://code.highcharts.com/highcharts-3d.js"></script>
-	<script src="src/plugins/highcharts-6.0.7/code/highcharts-more.js"></script>
-	<script src="vendors/scripts/highchart-setting.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/html5-editor.html b/html5-editor.html
new file mode 100644
index 00000000..062ca69b
--- /dev/null
+++ b/html5-editor.html
@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>Form</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Form</li>
+								</ol>
+							</nav>
+						</div>
+						<div class="col-md-6 col-sm-12 text-right">
+							<div class="dropdown">
+								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+									January 2018
+								</a>
+								<div class="dropdown-menu dropdown-menu-right">
+									<a class="dropdown-item" href="#">Export List</a>
+									<a class="dropdown-item" href="#">Policies</a>
+									<a class="dropdown-item" href="#">View Assets</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="html-editor pd-20 card-box mb-30">
+					<h4 class="h4 text-blue">bootstrap wysihtml5</h4>
+					<p>Simple, beautiful wysiwyg editors</p>
+					<textarea class="textarea_editor form-control border-radius-0" placeholder="Enter text ..."></textarea>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/html5-editor.php b/html5-editor.php
deleted file mode 100644
index c408a517..00000000
--- a/html5-editor.php
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>Form</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Form</li>
-								</ol>
-							</nav>
-						</div>
-						<div class="col-md-6 col-sm-12 text-right">
-							<div class="dropdown">
-								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-									January 2018
-								</a>
-								<div class="dropdown-menu dropdown-menu-right">
-									<a class="dropdown-item" href="#">Export List</a>
-									<a class="dropdown-item" href="#">Policies</a>
-									<a class="dropdown-item" href="#">View Assets</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div class="html-editor pd-20 card-box mb-30">
-					<h4 class="h4 text-blue">bootstrap wysihtml5</h4>
-					<p>Simple, beautiful wysiwyg editors</p>
-					<textarea class="textarea_editor form-control border-radius-0" placeholder="Enter text ..."></textarea>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/image-cropper.php b/image-cropper.html
similarity index 56%
rename from image-cropper.php
rename to image-cropper.html
index 317680c0..36926db9 100644
--- a/image-cropper.php
+++ b/image-cropper.html
@@ -1,12 +1,453 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<?php include('include/head.php'); ?>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
 	<link rel="stylesheet" type="text/css" href="src/plugins/cropperjs/dist/cropper.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
 	<div class="main-container">
 		<div class="pd-ltr-20 customscroll-10-p height-100-p xs-pd-20-10">
 			<div class="min-height-200px">
@@ -18,7 +459,7 @@
 							</div>
 							<nav aria-label="breadcrumb" role="navigation">
 								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
 									<li class="breadcrumb-item active" aria-current="page">Image Cropper</li>
 								</ol>
 							</nav>
@@ -537,10 +978,16 @@
 					</div>
 				</div>
 			</div>
-			<?php include('include/footer.php'); ?>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
 		</div>
 	</div>
-	<?php include('include/script.php'); ?>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
 	<script src="src/plugins/cropperjs/dist/cropper.js"></script>
 	<script src="src/plugins/cropperjs/dist/cropper-init.js"></script>
 </body>
diff --git a/image-dropzone.html b/image-dropzone.html
new file mode 100644
index 00000000..31bb128f
--- /dev/null
+++ b/image-dropzone.html
@@ -0,0 +1,519 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="src/plugins/dropzone/src/dropzone.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>Image Dropzone</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Image Dropzone</li>
+								</ol>
+							</nav>
+						</div>
+						<div class="col-md-6 col-sm-12 text-right">
+							<div class="dropdown">
+								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+									January 2018
+								</a>
+								<div class="dropdown-menu dropdown-menu-right">
+									<a class="dropdown-item" href="#">Export List</a>
+									<a class="dropdown-item" href="#">Policies</a>
+									<a class="dropdown-item" href="#">View Assets</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="pd-20 card-box mb-30">
+					<div class="clearfix mb-20">
+						<div class="pull-left">
+							<h4 class="text-blue h4">Dropzone</h4>
+						</div>
+					</div>
+					<form class="dropzone" action="#" id="my-awesome-dropzone">
+						<div class="fallback">
+							<input type="file" name="file" />
+						</div>
+					</form>
+				</div>
+
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+	<script src="src/plugins/dropzone/src/dropzone.js"></script>
+	<script>
+		Dropzone.autoDiscover = false;
+		$(".dropzone").dropzone({
+			addRemoveLinks: true,
+			removedfile: function(file) {
+				var name = file.name;
+				var _ref;
+				return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
+			}
+		});
+	</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/image-dropzone.php b/image-dropzone.php
deleted file mode 100644
index 0d89de42..00000000
--- a/image-dropzone.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-	<link rel="stylesheet" type="text/css" href="src/plugins/dropzone/src/dropzone.css">
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>Image Dropzone</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Image Dropzone</li>
-								</ol>
-							</nav>
-						</div>
-						<div class="col-md-6 col-sm-12 text-right">
-							<div class="dropdown">
-								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-									January 2018
-								</a>
-								<div class="dropdown-menu dropdown-menu-right">
-									<a class="dropdown-item" href="#">Export List</a>
-									<a class="dropdown-item" href="#">Policies</a>
-									<a class="dropdown-item" href="#">View Assets</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div class="pd-20 card-box mb-30">
-					<div class="clearfix mb-20">
-						<div class="pull-left">
-							<h4 class="text-blue h4">Dropzone</h4>
-						</div>
-					</div>
-					<form class="dropzone" action="#" id="my-awesome-dropzone">
-						<div class="fallback">
-							<input type="file" name="file" />
-						</div>
-					</form>
-				</div>
-
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-	<script src="src/plugins/dropzone/src/dropzone.js"></script>
-	<script>
-		Dropzone.autoDiscover = false;
-		$(".dropzone").dropzone({
-			addRemoveLinks: true,
-			removedfile: function(file) {
-				var name = file.name;
-				var _ref;
-				return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
-			}
-		});
-	</script>
-</body>
-</html>
\ No newline at end of file
diff --git a/include/footer.php b/include/footer.php
deleted file mode 100644
index b1afac9c..00000000
--- a/include/footer.php
+++ /dev/null
@@ -1,3 +0,0 @@
-	<div class="footer-wrap pd-20 mb-20 card-box">
-		DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
-	</div>
\ No newline at end of file
diff --git a/include/head.php b/include/head.php
deleted file mode 100644
index 636a23bc..00000000
--- a/include/head.php
+++ /dev/null
@@ -1,28 +0,0 @@
-	<!-- Basic Page Info -->
-	<meta charset="utf-8">
-	<title>DeskApp Dashboard</title>
-
-	<!-- Site favicon -->
-	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
-
-	<!-- Mobile Specific Metas -->
-	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-
-	<!-- Google Font -->
-	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
-	<!-- CSS -->
-	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
-	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
-
-
-	<!-- Global site tag (gtag.js) - Google Analytics -->
-	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
-	<script>
-	  window.dataLayer = window.dataLayer || [];
-	  function gtag(){dataLayer.push(arguments);}
-	  gtag('js', new Date());
-
-	  gtag('config', 'UA-119386393-1');
-	</script>
diff --git a/include/header.php b/include/header.php
deleted file mode 100644
index 8ee29f72..00000000
--- a/include/header.php
+++ /dev/null
@@ -1,214 +0,0 @@
-	<div class="pre-loader">
-		<div class="pre-loader-box">
-			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
-			<div class='loader-progress' id="progress_div">
-				<div class='bar' id='bar1'></div>
-			</div>
-			<div class='percent' id='percent1'>0%</div>
-			<div class="loading-text">
-				Loading...
-			</div>
-		</div>
-	</div>
-
-	<div class="header">
-		<div class="header-left">
-			<div class="menu-icon dw dw-menu"></div>
-			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
-			<div class="header-search">
-				<form>
-					<div class="form-group mb-0">
-						<i class="dw dw-search2 search-icon"></i>
-						<input type="text" class="form-control search-input" placeholder="Search Here">
-						<div class="dropdown">
-							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
-								<i class="ion-arrow-down-c"></i>
-							</a>
-							<div class="dropdown-menu dropdown-menu-right">
-								<div class="form-group row">
-									<label class="col-sm-12 col-md-2 col-form-label">From</label>
-									<div class="col-sm-12 col-md-10">
-										<input class="form-control form-control-sm form-control-line" type="text">
-									</div>
-								</div>
-								<div class="form-group row">
-									<label class="col-sm-12 col-md-2 col-form-label">To</label>
-									<div class="col-sm-12 col-md-10">
-										<input class="form-control form-control-sm form-control-line" type="text">
-									</div>
-								</div>
-								<div class="form-group row">
-									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
-									<div class="col-sm-12 col-md-10">
-										<input class="form-control form-control-sm form-control-line" type="text">
-									</div>
-								</div>
-								<div class="text-right">
-									<button class="btn btn-primary">Search</button>
-								</div>
-							</div>
-						</div>
-					</div>
-				</form>
-			</div>
-		</div>
-		<div class="header-right">
-			<div class="dashboard-setting user-notification">
-				<div class="dropdown">
-					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
-						<i class="dw dw-settings2"></i>
-					</a>
-				</div>
-			</div>
-			<div class="user-notification">
-				<div class="dropdown">
-					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
-						<i class="icon-copy dw dw-notification"></i>
-						<span class="badge notification-active"></span>
-					</a>
-					<div class="dropdown-menu dropdown-menu-right">
-						<div class="notification-list mx-h-350 customscroll">
-							<ul>
-								<li>
-									<a href="#">
-										<img src="vendors/images/img.jpg" alt="">
-										<h3>John Doe</h3>
-										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
-									</a>
-								</li>
-								<li>
-									<a href="#">
-										<img src="vendors/images/photo1.jpg" alt="">
-										<h3>Lea R. Frith</h3>
-										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
-									</a>
-								</li>
-								<li>
-									<a href="#">
-										<img src="vendors/images/photo2.jpg" alt="">
-										<h3>Erik L. Richards</h3>
-										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
-									</a>
-								</li>
-								<li>
-									<a href="#">
-										<img src="vendors/images/photo3.jpg" alt="">
-										<h3>John Doe</h3>
-										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
-									</a>
-								</li>
-								<li>
-									<a href="#">
-										<img src="vendors/images/photo4.jpg" alt="">
-										<h3>Renee I. Hansen</h3>
-										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
-									</a>
-								</li>
-								<li>
-									<a href="#">
-										<img src="vendors/images/img.jpg" alt="">
-										<h3>Vicki M. Coleman</h3>
-										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
-									</a>
-								</li>
-							</ul>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="user-info-dropdown">
-				<div class="dropdown">
-					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-						<span class="user-icon">
-							<img src="vendors/images/photo1.jpg" alt="">
-						</span>
-						<span class="user-name">Ross C. Lopez</span>
-					</a>
-					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
-						<a class="dropdown-item" href="profile.php"><i class="dw dw-user1"></i> Profile</a>
-						<a class="dropdown-item" href="profile.php"><i class="dw dw-settings2"></i> Setting</a>
-						<a class="dropdown-item" href="faq.php"><i class="dw dw-help"></i> Help</a>
-						<a class="dropdown-item" href="login.php"><i class="dw dw-logout"></i> Log Out</a>
-					</div>
-				</div>
-			</div>
-			<div class="github-link">
-				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
-			</div>
-		</div>
-	</div>
-
-	<div class="right-sidebar">
-		<div class="sidebar-title">
-			<h3 class="weight-600 font-16 text-blue">
-				Layout Settings
-				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
-			</h3>
-			<div class="close-sidebar" data-toggle="right-sidebar-close">
-				<i class="icon-copy ion-close-round"></i>
-			</div>
-		</div>
-		<div class="right-sidebar-body customscroll">
-			<div class="right-sidebar-body-content">
-				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
-				<div class="sidebar-btn-group pb-30 mb-10">
-					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
-					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
-				</div>
-
-				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
-				<div class="sidebar-btn-group pb-30 mb-10">
-					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
-					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
-				</div>
-
-				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
-				<div class="sidebar-radio-group pb-10 mb-10">
-					<div class="custom-control custom-radio custom-control-inline">
-						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
-						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
-					</div>
-					<div class="custom-control custom-radio custom-control-inline">
-						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
-						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
-					</div>
-					<div class="custom-control custom-radio custom-control-inline">
-						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
-						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
-					</div>
-				</div>
-
-				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
-				<div class="sidebar-radio-group pb-30 mb-10">
-					<div class="custom-control custom-radio custom-control-inline">
-						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
-						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
-					</div>
-					<div class="custom-control custom-radio custom-control-inline">
-						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
-						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
-					</div>
-					<div class="custom-control custom-radio custom-control-inline">
-						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
-						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
-					</div>
-					<div class="custom-control custom-radio custom-control-inline">
-						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
-						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
-					</div>
-					<div class="custom-control custom-radio custom-control-inline">
-						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
-						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
-					</div>
-					<div class="custom-control custom-radio custom-control-inline">
-						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
-						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
-					</div>
-				</div>
-
-				<div class="reset-options pt-30 text-center">
-					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
-				</div>
-			</div>
-		</div>
-	</div>
\ No newline at end of file
diff --git a/include/script.php b/include/script.php
deleted file mode 100644
index 18b464c1..00000000
--- a/include/script.php
+++ /dev/null
@@ -1,6 +0,0 @@
-	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
-	<!-- js -->
-	<script src="vendors/scripts/core.js"></script>
-	<script src="vendors/scripts/script.min.js"></script>
-	<script src="vendors/scripts/process.js"></script>
-	<script src="vendors/scripts/layout-settings.js"></script>
\ No newline at end of file
diff --git a/include/sidebar.php b/include/sidebar.php
deleted file mode 100644
index f3c4c6a5..00000000
--- a/include/sidebar.php
+++ /dev/null
@@ -1,200 +0,0 @@
-	<div class="left-side-bar">
-		<div class="brand-logo">
-			<a href="index.php">
-				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
-				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
-			</a>
-			<div class="close-sidebar" data-toggle="left-sidebar-close">
-				<i class="ion-close-round"></i>
-			</div>
-		</div>
-		<div class="menu-block customscroll">
-			<div class="sidebar-menu">
-				<ul id="accordion-menu">
-					<li class="dropdown">
-						<a href="javascript:;" class="dropdown-toggle">
-							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
-						</a>
-						<ul class="submenu">
-							<li><a href="index.php">Dashboard style 1</a></li>
-							<li><a href="index2.php">Dashboard style 2</a></li>
-						</ul>
-					</li>
-					<li class="dropdown">
-						<a href="javascript:;" class="dropdown-toggle">
-							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
-						</a>
-						<ul class="submenu">
-							<li><a href="form-basic.php">Form Basic</a></li>
-							<li><a href="advanced-components.php">Advanced Components</a></li>
-							<li><a href="form-wizard.php">Form Wizard</a></li>
-							<li><a href="html5-editor.php">HTML5 Editor</a></li>
-							<li><a href="form-pickers.php">Form Pickers</a></li>
-							<li><a href="image-cropper.php">Image Cropper</a></li>
-							<li><a href="image-dropzone.php">Image Dropzone</a></li>
-						</ul>
-					</li>
-					<li class="dropdown">
-						<a href="javascript:;" class="dropdown-toggle">
-							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
-						</a>
-						<ul class="submenu">
-							<li><a href="basic-table.php">Basic Tables</a></li>
-							<li><a href="datatable.php">DataTables</a></li>
-						</ul>
-					</li>
-					<li>
-						<a href="calendar.php" class="dropdown-toggle no-arrow">
-							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
-						</a>
-					</li>
-					<li class="dropdown">
-						<a href="javascript:;" class="dropdown-toggle">
-							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
-						</a>
-						<ul class="submenu">
-							<li><a href="ui-buttons.php">Buttons</a></li>
-							<li><a href="ui-cards.php">Cards</a></li>
-							<li><a href="ui-cards-hover.php">Cards Hover</a></li>
-							<li><a href="ui-modals.php">Modals</a></li>
-							<li><a href="ui-tabs.php">Tabs</a></li>
-							<li><a href="ui-tooltip-popover.php">Tooltip &amp; Popover</a></li>
-							<li><a href="ui-sweet-alert.php">Sweet Alert</a></li>
-							<li><a href="ui-notification.php">Notification</a></li>
-							<li><a href="ui-timeline.php">Timeline</a></li>
-							<li><a href="ui-progressbar.php">Progressbar</a></li>
-							<li><a href="ui-typography.php">Typography</a></li>
-							<li><a href="ui-list-group.php">List group</a></li>
-							<li><a href="ui-range-slider.php">Range slider</a></li>
-							<li><a href="ui-carousel.php">Carousel</a></li>
-						</ul>
-					</li>
-					<li class="dropdown">
-						<a href="javascript:;" class="dropdown-toggle">
-							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
-						</a>
-						<ul class="submenu">
-							<li><a href="font-awesome.php">FontAwesome Icons</a></li>
-							<li><a href="foundation.php">Foundation Icons</a></li>
-							<li><a href="ionicons.php">Ionicons Icons</a></li>
-							<li><a href="themify.php">Themify Icons</a></li>
-							<li><a href="custom-icon.php">Custom Icons</a></li>
-						</ul>
-					</li>
-					<li class="dropdown">
-						<a href="javascript:;" class="dropdown-toggle">
-							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
-						</a>
-						<ul class="submenu">
-							<li><a href="highchart.php">Highchart</a></li>
-							<li><a href="knob-chart.php">jQuery Knob</a></li>
-							<li><a href="jvectormap.php">jvectormap</a></li>
-							<li><a href="apexcharts.php">Apexcharts</a></li>
-						</ul>
-					</li>
-					<li class="dropdown">
-						<a href="javascript:;" class="dropdown-toggle">
-							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
-						</a>
-						<ul class="submenu">
-							<li><a href="video-player.php">Video Player</a></li>
-							<li><a href="login.php">Login</a></li>
-							<li><a href="forgot-password.php">Forgot Password</a></li>
-							<li><a href="reset-password.php">Reset Password</a></li>
-						</ul>
-					</li>
-					<li class="dropdown">
-						<a href="javascript:;" class="dropdown-toggle">
-							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
-						</a>
-						<ul class="submenu">
-							<li><a href="400.php">400</a></li>
-							<li><a href="403.php">403</a></li>
-							<li><a href="404.php">404</a></li>
-							<li><a href="500.php">500</a></li>
-							<li><a href="503.php">503</a></li>
-						</ul>
-					</li>
-
-					<li class="dropdown">
-						<a href="javascript:;" class="dropdown-toggle">
-							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
-						</a>
-						<ul class="submenu">
-							<li><a href="blank.php">Blank</a></li>
-							<li><a href="contact-directory.php">Contact Directory</a></li>
-							<li><a href="blog.php">Blog</a></li>
-							<li><a href="blog-detail.php">Blog Detail</a></li>
-							<li><a href="product.php">Product</a></li>
-							<li><a href="product-detail.php">Product Detail</a></li>
-							<li><a href="faq.php">FAQ</a></li>
-							<li><a href="profile.php">Profile</a></li>
-							<li><a href="gallery.php">Gallery</a></li>
-							<li><a href="pricing-table.php">Pricing Tables</a></li>
-						</ul>
-					</li>
-					<li class="dropdown">
-						<a href="javascript:;" class="dropdown-toggle">
-							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
-						</a>
-						<ul class="submenu">
-							<li><a href="javascript:;">Level 1</a></li>
-							<li><a href="javascript:;">Level 1</a></li>
-							<li><a href="javascript:;">Level 1</a></li>
-							<li class="dropdown">
-								<a href="javascript:;" class="dropdown-toggle">
-									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
-								</a>
-								<ul class="submenu child">
-									<li><a href="javascript:;">Level 2</a></li>
-									<li><a href="javascript:;">Level 2</a></li>
-								</ul>
-							</li>
-							<li><a href="javascript:;">Level 1</a></li>
-							<li><a href="javascript:;">Level 1</a></li>
-							<li><a href="javascript:;">Level 1</a></li>
-						</ul>
-					</li>
-					<li>
-						<a href="sitemap.php" class="dropdown-toggle no-arrow">
-							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
-						</a>
-					</li>
-					<li>
-						<a href="chat.php" class="dropdown-toggle no-arrow">
-							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
-						</a>
-					</li>
-					<li>
-						<a href="invoice.php" class="dropdown-toggle no-arrow">
-							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
-						</a>
-					</li>
-					<li>
-						<div class="dropdown-divider"></div>
-					</li>
-					<li>
-						<div class="sidebar-small-cap">Extra</div>
-					</li>
-					<li>
-						<a href="javascript:;" class="dropdown-toggle">
-							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
-						</a>
-						<ul class="submenu">
-							<li><a href="introduction.php">Introduction</a></li>
-							<li><a href="getting-started.php">Getting Started</a></li>
-							<li><a href="color-settings.php">Color Settings</a></li>
-							<li><a href="third-party-plugins.php">Third Party Plugins</a></li>
-						</ul>
-					</li>
-					<li>
-						<a href="javascript:;" class="dropdown-toggle no-arrow">
-							<span class="micon dw dw-paper-plane1"></span>
-							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
-						</a>
-					</li>
-				</ul>
-			</div>
-		</div>
-	</div>
-	<div class="mobile-menu-overlay"></div>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..54161882
--- /dev/null
+++ b/index.html
@@ -0,0 +1,695 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="src/plugins/datatables/css/dataTables.bootstrap4.min.css">
+	<link rel="stylesheet" type="text/css" href="src/plugins/datatables/css/responsive.bootstrap4.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20">
+			<div class="card-box pd-20 height-100-p mb-30">
+				<div class="row align-items-center">
+					<div class="col-md-4">
+						<img src="vendors/images/banner-img.png" alt="">
+					</div>
+					<div class="col-md-8">
+						<h4 class="font-20 weight-500 mb-10 text-capitalize">
+							Welcome back <div class="weight-600 font-30 text-blue">Johnny Brown!</div>
+						</h4>
+						<p class="font-18 max-width-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde hic non repellendus debitis iure, doloremque assumenda. Autem modi, corrupti, nobis ea iure fugiat, veniam non quaerat mollitia animi error corporis.</p>
+					</div>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-xl-3 mb-30">
+					<div class="card-box height-100-p widget-style1">
+						<div class="d-flex flex-wrap align-items-center">
+							<div class="progress-data">
+								<div id="chart"></div>
+							</div>
+							<div class="widget-data">
+								<div class="h4 mb-0">2020</div>
+								<div class="weight-600 font-14">Contact</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="col-xl-3 mb-30">
+					<div class="card-box height-100-p widget-style1">
+						<div class="d-flex flex-wrap align-items-center">
+							<div class="progress-data">
+								<div id="chart2"></div>
+							</div>
+							<div class="widget-data">
+								<div class="h4 mb-0">400</div>
+								<div class="weight-600 font-14">Deals</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="col-xl-3 mb-30">
+					<div class="card-box height-100-p widget-style1">
+						<div class="d-flex flex-wrap align-items-center">
+							<div class="progress-data">
+								<div id="chart3"></div>
+							</div>
+							<div class="widget-data">
+								<div class="h4 mb-0">350</div>
+								<div class="weight-600 font-14">Campaign</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="col-xl-3 mb-30">
+					<div class="card-box height-100-p widget-style1">
+						<div class="d-flex flex-wrap align-items-center">
+							<div class="progress-data">
+								<div id="chart4"></div>
+							</div>
+							<div class="widget-data">
+								<div class="h4 mb-0">$6060</div>
+								<div class="weight-600 font-14">Worth</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-xl-8 mb-30">
+					<div class="card-box height-100-p pd-20">
+						<h2 class="h4 mb-20">Activity</h2>
+						<div id="chart5"></div>
+					</div>
+				</div>
+				<div class="col-xl-4 mb-30">
+					<div class="card-box height-100-p pd-20">
+						<h2 class="h4 mb-20">Lead Target</h2>
+						<div id="chart6"></div>
+					</div>
+				</div>
+			</div>
+			<div class="card-box mb-30">
+				<h2 class="h4 pd-20">Best Selling Products</h2>
+				<table class="data-table table nowrap">
+					<thead>
+						<tr>
+							<th class="table-plus datatable-nosort">Product</th>
+							<th>Name</th>
+							<th>Color</th>
+							<th>Size</th>
+							<th>Price</th>
+							<th>Oty</th>
+							<th class="datatable-nosort">Action</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td class="table-plus">
+								<img src="vendors/images/product-1.jpg" width="70" height="70" alt="">
+							</td>
+							<td>
+								<h5 class="font-16">Shirt</h5>
+								by John Doe
+							</td>
+							<td>Black</td>
+							<td>M</td>
+							<td>$1000</td>
+							<td>1</td>
+							<td>
+								<div class="dropdown">
+									<a class="btn btn-link font-24 p-0 line-height-1 no-arrow dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+										<i class="dw dw-more"></i>
+									</a>
+									<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+										<a class="dropdown-item" href="#"><i class="dw dw-eye"></i> View</a>
+										<a class="dropdown-item" href="#"><i class="dw dw-edit2"></i> Edit</a>
+										<a class="dropdown-item" href="#"><i class="dw dw-delete-3"></i> Delete</a>
+									</div>
+								</div>
+							</td>
+						</tr>
+						<tr>
+							<td class="table-plus">
+								<img src="vendors/images/product-2.jpg" width="70" height="70" alt="">
+							</td>
+							<td>
+								<h5 class="font-16">Boots</h5>
+								by Lea R. Frith
+							</td>
+							<td>brown</td>
+							<td>9UK</td>
+							<td>$900</td>
+							<td>1</td>
+							<td>
+								<div class="dropdown">
+									<a class="btn btn-link font-24 p-0 line-height-1 no-arrow dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+										<i class="dw dw-more"></i>
+									</a>
+									<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+										<a class="dropdown-item" href="#"><i class="dw dw-eye"></i> View</a>
+										<a class="dropdown-item" href="#"><i class="dw dw-edit2"></i> Edit</a>
+										<a class="dropdown-item" href="#"><i class="dw dw-delete-3"></i> Delete</a>
+									</div>
+								</div>
+							</td>
+						</tr>
+						<tr>
+							<td class="table-plus">
+								<img src="vendors/images/product-3.jpg" width="70" height="70" alt="">
+							</td>
+							<td>
+								<h5 class="font-16">Hat</h5>
+								by Erik L. Richards
+							</td>
+							<td>Orange</td>
+							<td>M</td>
+							<td>$100</td>
+							<td>4</td>
+							<td>
+								<div class="dropdown">
+									<a class="btn btn-link font-24 p-0 line-height-1 no-arrow dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+										<i class="dw dw-more"></i>
+									</a>
+									<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+										<a class="dropdown-item" href="#"><i class="dw dw-eye"></i> View</a>
+										<a class="dropdown-item" href="#"><i class="dw dw-edit2"></i> Edit</a>
+										<a class="dropdown-item" href="#"><i class="dw dw-delete-3"></i> Delete</a>
+									</div>
+								</div>
+							</td>
+						</tr>
+						<tr>
+							<td class="table-plus">
+								<img src="vendors/images/product-4.jpg" width="70" height="70" alt="">
+							</td>
+							<td>
+								<h5 class="font-16">Long Dress</h5>
+								by Renee I. Hansen
+							</td>
+							<td>Gray</td>
+							<td>L</td>
+							<td>$1000</td>
+							<td>1</td>
+							<td>
+								<div class="dropdown">
+									<a class="btn btn-link font-24 p-0 line-height-1 no-arrow dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+										<i class="dw dw-more"></i>
+									</a>
+									<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+										<a class="dropdown-item" href="#"><i class="dw dw-eye"></i> View</a>
+										<a class="dropdown-item" href="#"><i class="dw dw-edit2"></i> Edit</a>
+										<a class="dropdown-item" href="#"><i class="dw dw-delete-3"></i> Delete</a>
+									</div>
+								</div>
+							</td>
+						</tr>
+						<tr>
+							<td class="table-plus">
+								<img src="vendors/images/product-5.jpg" width="70" height="70" alt="">
+							</td>
+							<td>
+								<h5 class="font-16">Blazer</h5>
+								by Vicki M. Coleman
+							</td>
+							<td>Blue</td>
+							<td>M</td>
+							<td>$1000</td>
+							<td>1</td>
+							<td>
+								<div class="dropdown">
+									<a class="btn btn-link font-24 p-0 line-height-1 no-arrow dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+										<i class="dw dw-more"></i>
+									</a>
+									<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+										<a class="dropdown-item" href="#"><i class="dw dw-eye"></i> View</a>
+										<a class="dropdown-item" href="#"><i class="dw dw-edit2"></i> Edit</a>
+										<a class="dropdown-item" href="#"><i class="dw dw-delete-3"></i> Delete</a>
+									</div>
+								</div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+	<script src="src/plugins/apexcharts/apexcharts.min.js"></script>
+	<script src="src/plugins/datatables/js/jquery.dataTables.min.js"></script>
+	<script src="src/plugins/datatables/js/dataTables.bootstrap4.min.js"></script>
+	<script src="src/plugins/datatables/js/dataTables.responsive.min.js"></script>
+	<script src="src/plugins/datatables/js/responsive.bootstrap4.min.js"></script>
+	<script src="vendors/scripts/dashboard.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.php b/index.php
deleted file mode 100644
index 2e44eec2..00000000
--- a/index.php
+++ /dev/null
@@ -1,249 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-	<!-- <link rel="stylesheet" type="text/css" href="src/plugins/datatables/css/jquery.dataTables.min.css"> -->
-	<link rel="stylesheet" type="text/css" href="src/plugins/datatables/css/dataTables.bootstrap4.min.css">
-	<link rel="stylesheet" type="text/css" href="src/plugins/datatables/css/responsive.bootstrap4.min.css">
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20">
-			<div class="card-box pd-20 height-100-p mb-30">
-				<div class="row align-items-center">
-					<div class="col-md-4">
-						<img src="vendors/images/banner-img.png" alt="">
-					</div>
-					<div class="col-md-8">
-						<h4 class="font-20 weight-500 mb-10 text-capitalize">
-							Welcome back <div class="weight-600 font-30 text-blue">Johnny Brown!</div>
-						</h4>
-						<p class="font-18 max-width-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde hic non repellendus debitis iure, doloremque assumenda. Autem modi, corrupti, nobis ea iure fugiat, veniam non quaerat mollitia animi error corporis.</p>
-					</div>
-				</div>
-			</div>
-			<div class="row">
-				<div class="col-xl-3 mb-30">
-					<div class="card-box height-100-p widget-style1">
-						<div class="d-flex flex-wrap align-items-center">
-							<div class="progress-data">
-								<div id="chart"></div>
-							</div>
-							<div class="widget-data">
-								<div class="h4 mb-0">2020</div>
-								<div class="weight-600 font-14">Contact</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-xl-3 mb-30">
-					<div class="card-box height-100-p widget-style1">
-						<div class="d-flex flex-wrap align-items-center">
-							<div class="progress-data">
-								<div id="chart2"></div>
-							</div>
-							<div class="widget-data">
-								<div class="h4 mb-0">400</div>
-								<div class="weight-600 font-14">Deals</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-xl-3 mb-30">
-					<div class="card-box height-100-p widget-style1">
-						<div class="d-flex flex-wrap align-items-center">
-							<div class="progress-data">
-								<div id="chart3"></div>
-							</div>
-							<div class="widget-data">
-								<div class="h4 mb-0">350</div>
-								<div class="weight-600 font-14">Campaign</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-xl-3 mb-30">
-					<div class="card-box height-100-p widget-style1">
-						<div class="d-flex flex-wrap align-items-center">
-							<div class="progress-data">
-								<div id="chart4"></div>
-							</div>
-							<div class="widget-data">
-								<div class="h4 mb-0">$6060</div>
-								<div class="weight-600 font-14">Worth</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="row">
-				<div class="col-xl-8 mb-30">
-					<div class="card-box height-100-p pd-20">
-						<h2 class="h4 mb-20">Activity</h2>
-						<div id="chart5"></div>
-					</div>
-				</div>
-				<div class="col-xl-4 mb-30">
-					<div class="card-box height-100-p pd-20">
-						<h2 class="h4 mb-20">Lead Target</h2>
-						<div id="chart6"></div>
-					</div>
-				</div>
-			</div>
-			<div class="card-box mb-30">
-				<h2 class="h4 pd-20">Best Selling Products</h2>
-				<table class="data-table table nowrap">
-					<thead>
-						<tr>
-							<th class="table-plus datatable-nosort">Product</th>
-							<th>Name</th>
-							<th>Color</th>
-							<th>Size</th>
-							<th>Price</th>
-							<th>Oty</th>
-							<th class="datatable-nosort">Action</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td class="table-plus">
-								<img src="vendors/images/product-1.jpg" width="70" height="70" alt="">
-							</td>
-							<td>
-								<h5 class="font-16">Shirt</h5>
-								by John Doe
-							</td>
-							<td>Black</td>
-							<td>M</td>
-							<td>$1000</td>
-							<td>1</td>
-							<td>
-								<div class="dropdown">
-									<a class="btn btn-link font-24 p-0 line-height-1 no-arrow dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-										<i class="dw dw-more"></i>
-									</a>
-									<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
-										<a class="dropdown-item" href="#"><i class="dw dw-eye"></i> View</a>
-										<a class="dropdown-item" href="#"><i class="dw dw-edit2"></i> Edit</a>
-										<a class="dropdown-item" href="#"><i class="dw dw-delete-3"></i> Delete</a>
-									</div>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td class="table-plus">
-								<img src="vendors/images/product-2.jpg" width="70" height="70" alt="">
-							</td>
-							<td>
-								<h5 class="font-16">Boots</h5>
-								by Lea R. Frith
-							</td>
-							<td>brown</td>
-							<td>9UK</td>
-							<td>$900</td>
-							<td>1</td>
-							<td>
-								<div class="dropdown">
-									<a class="btn btn-link font-24 p-0 line-height-1 no-arrow dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-										<i class="dw dw-more"></i>
-									</a>
-									<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
-										<a class="dropdown-item" href="#"><i class="dw dw-eye"></i> View</a>
-										<a class="dropdown-item" href="#"><i class="dw dw-edit2"></i> Edit</a>
-										<a class="dropdown-item" href="#"><i class="dw dw-delete-3"></i> Delete</a>
-									</div>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td class="table-plus">
-								<img src="vendors/images/product-3.jpg" width="70" height="70" alt="">
-							</td>
-							<td>
-								<h5 class="font-16">Hat</h5>
-								by Erik L. Richards
-							</td>
-							<td>Orange</td>
-							<td>M</td>
-							<td>$100</td>
-							<td>4</td>
-							<td>
-								<div class="dropdown">
-									<a class="btn btn-link font-24 p-0 line-height-1 no-arrow dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-										<i class="dw dw-more"></i>
-									</a>
-									<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
-										<a class="dropdown-item" href="#"><i class="dw dw-eye"></i> View</a>
-										<a class="dropdown-item" href="#"><i class="dw dw-edit2"></i> Edit</a>
-										<a class="dropdown-item" href="#"><i class="dw dw-delete-3"></i> Delete</a>
-									</div>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td class="table-plus">
-								<img src="vendors/images/product-4.jpg" width="70" height="70" alt="">
-							</td>
-							<td>
-								<h5 class="font-16">Long Dress</h5>
-								by Renee I. Hansen
-							</td>
-							<td>Gray</td>
-							<td>L</td>
-							<td>$1000</td>
-							<td>1</td>
-							<td>
-								<div class="dropdown">
-									<a class="btn btn-link font-24 p-0 line-height-1 no-arrow dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-										<i class="dw dw-more"></i>
-									</a>
-									<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
-										<a class="dropdown-item" href="#"><i class="dw dw-eye"></i> View</a>
-										<a class="dropdown-item" href="#"><i class="dw dw-edit2"></i> Edit</a>
-										<a class="dropdown-item" href="#"><i class="dw dw-delete-3"></i> Delete</a>
-									</div>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td class="table-plus">
-								<img src="vendors/images/product-5.jpg" width="70" height="70" alt="">
-							</td>
-							<td>
-								<h5 class="font-16">Blazer</h5>
-								by Vicki M. Coleman
-							</td>
-							<td>Blue</td>
-							<td>M</td>
-							<td>$1000</td>
-							<td>1</td>
-							<td>
-								<div class="dropdown">
-									<a class="btn btn-link font-24 p-0 line-height-1 no-arrow dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-										<i class="dw dw-more"></i>
-									</a>
-									<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
-										<a class="dropdown-item" href="#"><i class="dw dw-eye"></i> View</a>
-										<a class="dropdown-item" href="#"><i class="dw dw-edit2"></i> Edit</a>
-										<a class="dropdown-item" href="#"><i class="dw dw-delete-3"></i> Delete</a>
-									</div>
-								</div>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-	<script src="src/plugins/apexcharts/apexcharts.min.js"></script>
-	<script src="src/plugins/datatables/js/jquery.dataTables.min.js"></script>
-	<script src="src/plugins/datatables/js/dataTables.bootstrap4.min.js"></script>
-	<script src="src/plugins/datatables/js/dataTables.responsive.min.js"></script>
-	<script src="src/plugins/datatables/js/responsive.bootstrap4.min.js"></script>
-	<script src="vendors/scripts/dashboard.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/index2.html b/index2.html
new file mode 100644
index 00000000..14fb43cc
--- /dev/null
+++ b/index2.html
@@ -0,0 +1,591 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="src/plugins/jvectormap/jquery-jvectormap-2.0.3.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="xs-pd-20-10 pd-ltr-20">
+			<div class="page-header">
+				<div class="row">
+					<div class="col-md-6 col-sm-12">
+						<div class="title">
+							<h4>Dashboard</h4>
+						</div>
+						<nav aria-label="breadcrumb" role="navigation">
+							<ol class="breadcrumb">
+								<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+								<li class="breadcrumb-item active" aria-current="page">Dashboard</li>
+							</ol>
+						</nav>
+					</div>
+					<div class="col-md-6 col-sm-12 text-right">
+						<div class="dropdown">
+							<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+								January 2018
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<a class="dropdown-item" href="#">Export List</a>
+								<a class="dropdown-item" href="#">Policies</a>
+								<a class="dropdown-item" href="#">View Assets</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="row clearfix progress-box">
+				<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+					<div class="card-box pd-30 height-100-p">
+						<div class="progress-box text-center">
+							 <input type="text" class="knob dial1" value="80" data-width="120" data-height="120" data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#1b00ff" data-angleOffset="180" readonly>
+							<h5 class="text-blue padding-top-10 h5">My Earnings</h5>
+							<span class="d-block">80% Average <i class="fa fa-line-chart text-blue"></i></span>
+						</div>
+					</div>
+				</div>
+				<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+					<div class="card-box pd-30 height-100-p">
+						<div class="progress-box text-center">
+							 <input type="text" class="knob dial2" value="70" data-width="120" data-height="120" data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#00e091" data-angleOffset="180" readonly>
+							<h5 class="text-light-green padding-top-10 h5">Business Captured</h5>
+							<span class="d-block">75% Average <i class="fa text-light-green fa-line-chart"></i></span>
+						</div>
+					</div>
+				</div>
+				<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+					<div class="card-box pd-30 height-100-p">
+						<div class="progress-box text-center">
+							 <input type="text" class="knob dial3" value="90" data-width="120" data-height="120" data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#f56767" data-angleOffset="180" readonly>
+							<h5 class="text-light-orange padding-top-10 h5">Projects Speed</h5>
+							<span class="d-block">90% Average <i class="fa text-light-orange fa-line-chart"></i></span>
+						</div>
+					</div>
+				</div>
+				<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+					<div class="card-box pd-30 height-100-p">
+						<div class="progress-box text-center">
+							 <input type="text" class="knob dial4" value="65" data-width="120" data-height="120" data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#a683eb" data-angleOffset="180" readonly>
+							<h5 class="text-light-purple padding-top-10 h5">Panding Orders</h5>
+							<span class="d-block">65% Average <i class="fa text-light-purple fa-line-chart"></i></span>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+					<div class="card-box pd-30 pt-10 height-100-p">
+						<h2 class="mb-30 h4">Browser Visit</h2>
+						<div class="browser-visits">
+							<ul>
+								<li class="d-flex flex-wrap align-items-center">
+									<div class="icon"><img src="vendors/images/chrome.png" alt=""></div>
+									<div class="browser-name">Google Chrome</div>
+									<div class="visit"><span class="badge badge-pill badge-primary">50%</span></div>
+								</li>
+								<li class="d-flex flex-wrap align-items-center">
+									<div class="icon"><img src="vendors/images/firefox.png" alt=""></div>
+									<div class="browser-name">Mozilla Firefox</div>
+									<div class="visit"><span class="badge badge-pill badge-secondary">40%</span></div>
+								</li>
+								<li class="d-flex flex-wrap align-items-center">
+									<div class="icon"><img src="vendors/images/safari.png" alt=""></div>
+									<div class="browser-name">Safari</div>
+									<div class="visit"><span class="badge badge-pill badge-success">40%</span></div>
+								</li>
+								<li class="d-flex flex-wrap align-items-center">
+									<div class="icon"><img src="vendors/images/edge.png" alt=""></div>
+									<div class="browser-name">Microsoft Edge</div>
+									<div class="visit"><span class="badge badge-pill badge-warning">20%</span></div>
+								</li>
+								<li class="d-flex flex-wrap align-items-center">
+									<div class="icon"><img src="vendors/images/opera.png" alt=""></div>
+									<div class="browser-name">Opera Mini</div>
+									<div class="visit"><span class="badge badge-pill badge-info">20%</span></div>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+				<div class="col-lg-8 col-md-6 col-sm-12 mb-30">
+					<div class="card-box pd-30 pt-10 height-100-p">
+						<h2 class="mb-30 h4">World Map</h2>
+						<div id="browservisit" style="width:100%!important; height:380px"></div>
+					</div>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-lg-7 col-md-12 col-sm-12 mb-30">
+					<div class="card-box pd-30 height-100-p">
+						<h4 class="mb-30 h4">Compliance Trend</h4>
+						<div id="compliance-trend" class="compliance-trend"></div>
+					</div>
+				</div>
+				<div class="col-lg-5 col-md-12 col-sm-12 mb-30">
+					<div class="card-box pd-30 height-100-p">
+						<h4 class="mb-30 h4">Records</h4>
+						<div id="chart" class="chart"></div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+	<script src="src/plugins/jQuery-Knob-master/jquery.knob.min.js"></script>
+	<script src="src/plugins/highcharts-6.0.7/code/highcharts.js"></script>
+	<script src="src/plugins/highcharts-6.0.7/code/highcharts-more.js"></script>
+	<script src="src/plugins/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
+	<script src="src/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
+	<script src="vendors/scripts/dashboard2.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index2.php b/index2.php
deleted file mode 100644
index 34b57bff..00000000
--- a/index2.php
+++ /dev/null
@@ -1,144 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-	<link rel="stylesheet" type="text/css" href="src/plugins/jvectormap/jquery-jvectormap-2.0.3.css">
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="xs-pd-20-10 pd-ltr-20">
-			<div class="page-header">
-				<div class="row">
-					<div class="col-md-6 col-sm-12">
-						<div class="title">
-							<h4>Dashboard</h4>
-						</div>
-						<nav aria-label="breadcrumb" role="navigation">
-							<ol class="breadcrumb">
-								<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-								<li class="breadcrumb-item active" aria-current="page">Dashboard</li>
-							</ol>
-						</nav>
-					</div>
-					<div class="col-md-6 col-sm-12 text-right">
-						<div class="dropdown">
-							<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-								January 2018
-							</a>
-							<div class="dropdown-menu dropdown-menu-right">
-								<a class="dropdown-item" href="#">Export List</a>
-								<a class="dropdown-item" href="#">Policies</a>
-								<a class="dropdown-item" href="#">View Assets</a>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="row clearfix progress-box">
-				<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-					<div class="card-box pd-30 height-100-p">
-						<div class="progress-box text-center">
-							 <input type="text" class="knob dial1" value="80" data-width="120" data-height="120" data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#1b00ff" data-angleOffset="180" readonly>
-							<h5 class="text-blue padding-top-10 h5">My Earnings</h5>
-							<span class="d-block">80% Average <i class="fa fa-line-chart text-blue"></i></span>
-						</div>
-					</div>
-				</div>
-				<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-					<div class="card-box pd-30 height-100-p">
-						<div class="progress-box text-center">
-							 <input type="text" class="knob dial2" value="70" data-width="120" data-height="120" data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#00e091" data-angleOffset="180" readonly>
-							<h5 class="text-light-green padding-top-10 h5">Business Captured</h5>
-							<span class="d-block">75% Average <i class="fa text-light-green fa-line-chart"></i></span>
-						</div>
-					</div>
-				</div>
-				<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-					<div class="card-box pd-30 height-100-p">
-						<div class="progress-box text-center">
-							 <input type="text" class="knob dial3" value="90" data-width="120" data-height="120" data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#f56767" data-angleOffset="180" readonly>
-							<h5 class="text-light-orange padding-top-10 h5">Projects Speed</h5>
-							<span class="d-block">90% Average <i class="fa text-light-orange fa-line-chart"></i></span>
-						</div>
-					</div>
-				</div>
-				<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-					<div class="card-box pd-30 height-100-p">
-						<div class="progress-box text-center">
-							 <input type="text" class="knob dial4" value="65" data-width="120" data-height="120" data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#a683eb" data-angleOffset="180" readonly>
-							<h5 class="text-light-purple padding-top-10 h5">Panding Orders</h5>
-							<span class="d-block">65% Average <i class="fa text-light-purple fa-line-chart"></i></span>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="row">
-				<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-					<div class="card-box pd-30 pt-10 height-100-p">
-						<h2 class="mb-30 h4">Browser Visit</h2>
-						<div class="browser-visits">
-							<ul>
-								<li class="d-flex flex-wrap align-items-center">
-									<div class="icon"><img src="vendors/images/chrome.png" alt=""></div>
-									<div class="browser-name">Google Chrome</div>
-									<div class="visit"><span class="badge badge-pill badge-primary">50%</span></div>
-								</li>
-								<li class="d-flex flex-wrap align-items-center">
-									<div class="icon"><img src="vendors/images/firefox.png" alt=""></div>
-									<div class="browser-name">Mozilla Firefox</div>
-									<div class="visit"><span class="badge badge-pill badge-secondary">40%</span></div>
-								</li>
-								<li class="d-flex flex-wrap align-items-center">
-									<div class="icon"><img src="vendors/images/safari.png" alt=""></div>
-									<div class="browser-name">Safari</div>
-									<div class="visit"><span class="badge badge-pill badge-success">40%</span></div>
-								</li>
-								<li class="d-flex flex-wrap align-items-center">
-									<div class="icon"><img src="vendors/images/edge.png" alt=""></div>
-									<div class="browser-name">Microsoft Edge</div>
-									<div class="visit"><span class="badge badge-pill badge-warning">20%</span></div>
-								</li>
-								<li class="d-flex flex-wrap align-items-center">
-									<div class="icon"><img src="vendors/images/opera.png" alt=""></div>
-									<div class="browser-name">Opera Mini</div>
-									<div class="visit"><span class="badge badge-pill badge-info">20%</span></div>
-								</li>
-							</ul>
-						</div>
-					</div>
-				</div>
-				<div class="col-lg-8 col-md-6 col-sm-12 mb-30">
-					<div class="card-box pd-30 pt-10 height-100-p">
-						<h2 class="mb-30 h4">World Map</h2>
-						<div id="browservisit" style="width:100%!important; height:380px"></div>
-					</div>
-				</div>
-			</div>
-			<div class="row">
-				<div class="col-lg-7 col-md-12 col-sm-12 mb-30">
-					<div class="card-box pd-30 height-100-p">
-						<h4 class="mb-30 h4">Compliance Trend</h4>
-						<div id="compliance-trend" class="compliance-trend"></div>
-					</div>
-				</div>
-				<div class="col-lg-5 col-md-12 col-sm-12 mb-30">
-					<div class="card-box pd-30 height-100-p">
-						<h4 class="mb-30 h4">Records</h4>
-						<div id="chart" class="chart"></div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-	<script src="src/plugins/jQuery-Knob-master/jquery.knob.min.js"></script>
-	<script src="src/plugins/highcharts-6.0.7/code/highcharts.js"></script>
-	<script src="src/plugins/highcharts-6.0.7/code/highcharts-more.js"></script>
-	<script src="src/plugins/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
-	<script src="src/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
-	<script src="vendors/scripts/dashboard2.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/introduction.html b/introduction.html
new file mode 100644
index 00000000..976fe9e3
--- /dev/null
+++ b/introduction.html
@@ -0,0 +1,514 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>Introduction</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item"><a href="javascript:;">Documentation</a></li>
+									<li class="breadcrumb-item active" aria-current="page">introduction</li>
+								</ol>
+							</nav>
+						</div>
+						<div class="col-md-6 col-sm-12 text-right">
+							<div class="dropdown">
+								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+									Menu
+								</a>
+								<div class="dropdown-menu dropdown-menu-right">
+									<a class="dropdown-item active" href="introduction.html">Introduction</a>
+									<a class="dropdown-item" href="getting-started.html">Getting Started</a>
+									<a class="dropdown-item" href="color-settings.html">Color Settings</a>
+									<a class="dropdown-item" href="third-party-plugins.html">Third Party Plugins</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="pd-20 card-box mb-30">
+					<h4 class="h4 text-blue mb-10">Introduction</h4>
+					<p>DeskApp admin is a popular open source WebApp template for admin dashboards and control panels. DeskApp is fully responsive HTML template, which is based on the CSS framework Bootstrap 4. It utilizes all of the Bootstrap components in its design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications. DeskApp is based on a modular design, which allows it to be easily customized and built upon. This documentation will guide you through installing the template and exploring the various components that are bundled with the template.</p>
+					<p>We put a lot of love and effort to make DeskApp Admin a useful template for everyone and now It comes with New Ui. We are keen to release continuous long term updates and lots of new features will be coming soon in the future releases</p>
+				</div>
+				<div class="pd-20 card-box mb-30">
+					<h4 class="h4 text-blue mb-10">Support</h4>
+					<p>For others, you can explore the component pages in the template, and you can get the code structure of the component.</p>
+					<p>Also, you can make component requests or new features and we will consider them.</p>
+					<p>If you find a bug or think of something cool to make Stisa better, please <a href="/dropways/deskapp/issues" target="_blank" class="text-primary">create an issue.</a></p>
+				</div>
+				<h4 class="h4 text-blue mb-10">Note</h4>
+				<div class="pd-20 card-box mb-30" data-bgcolor="#ff4747" data-color="#fdfdfd">
+					<ul>
+						<li class="d-flex pb-20"><i class="dw dw-edit-file font-20 mr-2"></i> We have used our name and brand as credit in CSS / Js we have created, you need to change / remove that if you want while using in your personal or client projects.</li>
+						<li class="d-flex pb-20"><i class="dw dw-edit-file font-20 mr-2"></i> You will find name and brand of each third-party tools we have used, as credit in their respective css / js, you can remove or change as per your need.</li>
+						<li class="d-flex pb-20"><i class="dw dw-edit-file font-20 mr-2"></i> We have used third-party tools / plugins in our templates, you will find links from left navigation (menu) as Third Party Tools and you can find their documentation from their respective websites link we have given.</li>
+						<li class="d-flex pb-20"><i class="dw dw-edit-file font-20 mr-2"></i> We do not offer support on any third-party plugins / tools we have used.</li>
+					</ul>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/introduction.php b/introduction.php
deleted file mode 100644
index 83be63f3..00000000
--- a/introduction.php
+++ /dev/null
@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>Introduction</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item"><a href="javascript:;">Documentation</a></li>
-									<li class="breadcrumb-item active" aria-current="page">introduction</li>
-								</ol>
-							</nav>
-						</div>
-						<div class="col-md-6 col-sm-12 text-right">
-							<div class="dropdown">
-								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-									Menu
-								</a>
-								<div class="dropdown-menu dropdown-menu-right">
-									<a class="dropdown-item active" href="introduction.php">Introduction</a>
-									<a class="dropdown-item" href="getting-started.php">Getting Started</a>
-									<a class="dropdown-item" href="color-settings.php">Color Settings</a>
-									<a class="dropdown-item" href="third-party-plugins.php">Third Party Plugins</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="pd-20 card-box mb-30">
-					<h4 class="h4 text-blue mb-10">Introduction</h4>
-					<p>DeskApp admin is a popular open source WebApp template for admin dashboards and control panels. DeskApp is fully responsive HTML template, which is based on the CSS framework Bootstrap 4. It utilizes all of the Bootstrap components in its design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications. DeskApp is based on a modular design, which allows it to be easily customized and built upon. This documentation will guide you through installing the template and exploring the various components that are bundled with the template.</p>
-					<p>We put a lot of love and effort to make DeskApp Admin a useful template for everyone and now It comes with New Ui. We are keen to release continuous long term updates and lots of new features will be coming soon in the future releases</p>
-				</div>
-				<div class="pd-20 card-box mb-30">
-					<h4 class="h4 text-blue mb-10">Support</h4>
-					<p>For others, you can explore the component pages in the template, and you can get the code structure of the component.</p>
-					<p>Also, you can make component requests or new features and we will consider them.</p>
-					<p>If you find a bug or think of something cool to make Stisa better, please <a href="/dropways/deskapp/issues" target="_blank" class="text-primary">create an issue.</a></p>
-				</div>
-				<h4 class="h4 text-blue mb-10">Note</h4>
-				<div class="pd-20 card-box mb-30" data-bgcolor="#ff4747" data-color="#fdfdfd">
-					<ul>
-						<li class="d-flex pb-20"><i class="dw dw-edit-file font-20 mr-2"></i> We have used our name and brand as credit in CSS / Js we have created, you need to change / remove that if you want while using in your personal or client projects.</li>
-						<li class="d-flex pb-20"><i class="dw dw-edit-file font-20 mr-2"></i> You will find name and brand of each third-party tools we have used, as credit in their respective css / js, you can remove or change as per your need.</li>
-						<li class="d-flex pb-20"><i class="dw dw-edit-file font-20 mr-2"></i> We have used third-party tools / plugins in our templates, you will find links from left navigation (menu) as Third Party Tools and you can find their documentation from their respective websites link we have given.</li>
-						<li class="d-flex pb-20"><i class="dw dw-edit-file font-20 mr-2"></i> We do not offer support on any third-party plugins / tools we have used.</li>
-					</ul>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/invoice.html b/invoice.html
new file mode 100644
index 00000000..a7412c6b
--- /dev/null
+++ b/invoice.html
@@ -0,0 +1,573 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>Form</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Form</li>
+								</ol>
+							</nav>
+						</div>
+						<div class="col-md-6 col-sm-12 text-right">
+							<div class="dropdown">
+								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+									January 2018
+								</a>
+								<div class="dropdown-menu dropdown-menu-right">
+									<a class="dropdown-item" href="#">Export List</a>
+									<a class="dropdown-item" href="#">Policies</a>
+									<a class="dropdown-item" href="#">View Assets</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="invoice-wrap">
+					<div class="invoice-box">
+						<div class="invoice-header">
+							<div class="logo text-center">
+								<img src="vendors/images/deskapp-logo.png" alt="">
+							</div>
+						</div>
+						<h4 class="text-center mb-30 weight-600">INVOICE</h4>
+						<div class="row pb-30">
+							<div class="col-md-6">
+								<h5 class="mb-15">Client Name</h5>
+								<p class="font-14 mb-5">Date Issued: <strong class="weight-600">10 Jan 2018</strong></p>
+								<p class="font-14 mb-5">Invoice No: <strong class="weight-600">4556</strong></p>
+							</div>
+							<div class="col-md-6">
+								<div class="text-right">
+									<p class="font-14 mb-5">Your Name </strong></p>
+									<p class="font-14 mb-5">Your Address</p>
+									<p class="font-14 mb-5">City</p>
+									<p class="font-14 mb-5">Postcode</p>
+								</div>
+							</div>
+						</div>
+						<div class="invoice-desc pb-30">
+							<div class="invoice-desc-head clearfix">
+								<div class="invoice-sub">Description</div>
+								<div class="invoice-rate">Rate</div>
+								<div class="invoice-hours">Hours</div>
+								<div class="invoice-subtotal">Subtotal</div>
+							</div>
+							<div class="invoice-desc-body">
+								<ul>
+									<li class="clearfix">
+										<div class="invoice-sub">Website Design</div>
+										<div class="invoice-rate">$20</div>
+										<div class="invoice-hours">100</div>
+										<div class="invoice-subtotal"><span class="weight-600">$2000</span></div>
+									</li>
+									<li class="clearfix">
+										<div class="invoice-sub">Logo Design</div>
+										<div class="invoice-rate">$20</div>
+										<div class="invoice-hours">100</div>
+										<div class="invoice-subtotal"><span class="weight-600">$2000</span></div>
+									</li>
+									<li class="clearfix">
+										<div class="invoice-sub">Website Design</div>
+										<div class="invoice-rate">$20</div>
+										<div class="invoice-hours">100</div>
+										<div class="invoice-subtotal"><span class="weight-600">$2000</span></div>
+									</li>
+									<li class="clearfix">
+										<div class="invoice-sub">Logo Design</div>
+										<div class="invoice-rate">$20</div>
+										<div class="invoice-hours">100</div>
+										<div class="invoice-subtotal"><span class="weight-600">$2000</span></div>
+									</li>
+								</ul>
+							</div>
+							<div class="invoice-desc-footer">
+								<div class="invoice-desc-head clearfix">
+									<div class="invoice-sub">Bank Info</div>
+									<div class="invoice-rate">Due By</div>
+									<div class="invoice-subtotal">Total Due</div>
+								</div>
+								<div class="invoice-desc-body">
+									<ul>
+										<li class="clearfix">
+											<div class="invoice-sub">
+												<p class="font-14 mb-5">Account No: <strong class="weight-600">123 456 789</strong></p>
+												<p class="font-14 mb-5">Code: <strong class="weight-600">4556</strong></p>
+											</div>
+											<div class="invoice-rate font-20 weight-600">10 Jan 2018</div>
+											<div class="invoice-subtotal"><span class="weight-600 font-24 text-danger">$8000</span></div>
+										</li>
+									</ul>
+								</div>
+							</div>
+						</div>
+						<h4 class="text-center pb-20">Thank You!!</h4>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/invoice.php b/invoice.php
deleted file mode 100644
index 82c00aa2..00000000
--- a/invoice.php
+++ /dev/null
@@ -1,125 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>Form</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Form</li>
-								</ol>
-							</nav>
-						</div>
-						<div class="col-md-6 col-sm-12 text-right">
-							<div class="dropdown">
-								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-									January 2018
-								</a>
-								<div class="dropdown-menu dropdown-menu-right">
-									<a class="dropdown-item" href="#">Export List</a>
-									<a class="dropdown-item" href="#">Policies</a>
-									<a class="dropdown-item" href="#">View Assets</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="invoice-wrap">
-					<div class="invoice-box">
-						<div class="invoice-header">
-							<div class="logo text-center">
-								<img src="vendors/images/deskapp-logo.png" alt="">
-							</div>
-						</div>
-						<h4 class="text-center mb-30 weight-600">INVOICE</h4>
-						<div class="row pb-30">
-							<div class="col-md-6">
-								<h5 class="mb-15">Client Name</h5>
-								<p class="font-14 mb-5">Date Issued: <strong class="weight-600">10 Jan 2018</strong></p>
-								<p class="font-14 mb-5">Invoice No: <strong class="weight-600">4556</strong></p>
-							</div>
-							<div class="col-md-6">
-								<div class="text-right">
-									<p class="font-14 mb-5">Your Name </strong></p>
-									<p class="font-14 mb-5">Your Address</p>
-									<p class="font-14 mb-5">City</p>
-									<p class="font-14 mb-5">Postcode</p>
-								</div>
-							</div>
-						</div>
-						<div class="invoice-desc pb-30">
-							<div class="invoice-desc-head clearfix">
-								<div class="invoice-sub">Description</div>
-								<div class="invoice-rate">Rate</div>
-								<div class="invoice-hours">Hours</div>
-								<div class="invoice-subtotal">Subtotal</div>
-							</div>
-							<div class="invoice-desc-body">
-								<ul>
-									<li class="clearfix">
-										<div class="invoice-sub">Website Design</div>
-										<div class="invoice-rate">$20</div>
-										<div class="invoice-hours">100</div>
-										<div class="invoice-subtotal"><span class="weight-600">$2000</span></div>
-									</li>
-									<li class="clearfix">
-										<div class="invoice-sub">Logo Design</div>
-										<div class="invoice-rate">$20</div>
-										<div class="invoice-hours">100</div>
-										<div class="invoice-subtotal"><span class="weight-600">$2000</span></div>
-									</li>
-									<li class="clearfix">
-										<div class="invoice-sub">Website Design</div>
-										<div class="invoice-rate">$20</div>
-										<div class="invoice-hours">100</div>
-										<div class="invoice-subtotal"><span class="weight-600">$2000</span></div>
-									</li>
-									<li class="clearfix">
-										<div class="invoice-sub">Logo Design</div>
-										<div class="invoice-rate">$20</div>
-										<div class="invoice-hours">100</div>
-										<div class="invoice-subtotal"><span class="weight-600">$2000</span></div>
-									</li>
-								</ul>
-							</div>
-							<div class="invoice-desc-footer">
-								<div class="invoice-desc-head clearfix">
-									<div class="invoice-sub">Bank Info</div>
-									<div class="invoice-rate">Due By</div>
-									<div class="invoice-subtotal">Total Due</div>
-								</div>
-								<div class="invoice-desc-body">
-									<ul>
-										<li class="clearfix">
-											<div class="invoice-sub">
-												<p class="font-14 mb-5">Account No: <strong class="weight-600">123 456 789</strong></p>
-												<p class="font-14 mb-5">Code: <strong class="weight-600">4556</strong></p>
-											</div>
-											<div class="invoice-rate font-20 weight-600">10 Jan 2018</div>
-											<div class="invoice-subtotal"><span class="weight-600 font-24 text-danger">$8000</span></div>
-										</li>
-									</ul>
-								</div>
-							</div>
-						</div>
-						<h4 class="text-center pb-20">Thank You!!</h4>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/ionicons.php b/ionicons.html
similarity index 87%
rename from ionicons.php
rename to ionicons.html
index 5fd76a7e..f0893744 100644
--- a/ionicons.php
+++ b/ionicons.html
@@ -1,11 +1,452 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<?php include('include/head.php'); ?>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
 	<div class="main-container">
 		<div class="pd-ltr-20 xs-pd-20-10">
 			<div class="min-height-200px">
@@ -17,7 +458,7 @@
 							</div>
 							<nav aria-label="breadcrumb" role="navigation">
 								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
 									<li class="breadcrumb-item active" aria-current="page">Icons</li>
 								</ol>
 							</nav>
@@ -772,9 +1213,15 @@
 					</ul>
 				</div>
 			</div>
-			<?php include('include/footer.php'); ?>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
 		</div>
 	</div>
-	<?php include('include/script.php'); ?>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/jvectormap.html b/jvectormap.html
new file mode 100644
index 00000000..52a7ec4f
--- /dev/null
+++ b/jvectormap.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="src/plugins/jvectormap/jquery-jvectormap-2.0.3.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>jvectormap</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">jvectormap</li>
+								</ol>
+							</nav>
+						</div>
+						<div class="col-md-6 col-sm-12 text-right">
+							<div class="dropdown">
+								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+									January 2020
+								</a>
+								<div class="dropdown-menu dropdown-menu-right">
+									<a class="dropdown-item" href="#">Export List</a>
+									<a class="dropdown-item" href="#">Policies</a>
+									<a class="dropdown-item" href="#">View Assets</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="row">
+					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 mb-30">
+						<div class="pd-0 card-box height-100-p overflow-hidden">
+							<div id="chart1" style="width:100%!important; height:615px"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+	<script src="src/plugins/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
+	<script src="src/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
+	<script src="vendors/scripts/jvectormap-setting.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/jvectormap.php b/jvectormap.php
deleted file mode 100644
index b3e957d2..00000000
--- a/jvectormap.php
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-	<link rel="stylesheet" type="text/css" href="src/plugins/jvectormap/jquery-jvectormap-2.0.3.css">
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>jvectormap</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">jvectormap</li>
-								</ol>
-							</nav>
-						</div>
-						<div class="col-md-6 col-sm-12 text-right">
-							<div class="dropdown">
-								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-									January 2020
-								</a>
-								<div class="dropdown-menu dropdown-menu-right">
-									<a class="dropdown-item" href="#">Export List</a>
-									<a class="dropdown-item" href="#">Policies</a>
-									<a class="dropdown-item" href="#">View Assets</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div class="row">
-					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 mb-30">
-						<div class="pd-0 card-box height-100-p overflow-hidden">
-							<div id="chart1" style="width:100%!important; height:615px"></div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-	<script src="src/plugins/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
-	<script src="src/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
-	<script src="vendors/scripts/jvectormap-setting.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/knob-chart.html b/knob-chart.html
new file mode 100644
index 00000000..837c1960
--- /dev/null
+++ b/knob-chart.html
@@ -0,0 +1,564 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>Charts</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Charts</li>
+								</ol>
+							</nav>
+						</div>
+						<div class="col-md-6 col-sm-12 text-right">
+							<div class="dropdown">
+								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+									January 2020
+								</a>
+								<div class="dropdown-menu dropdown-menu-right">
+									<a class="dropdown-item" href="#">Export List</a>
+									<a class="dropdown-item" href="#">Policies</a>
+									<a class="dropdown-item" href="#">View Assets</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="row clearfix progress-box">
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="card-box pd-30 height-100-p">
+							<div class="progress-box text-center">
+								 <input type="text" class="knob dial1" value="80" data-width="120" data-height="120" data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#1b00ff" data-angleOffset="180" readonly>
+								<h5 class="text-blue padding-top-10 h5">My Earnings</h5>
+								<span class="d-block">80% Average <i class="fa fa-line-chart text-blue"></i></span>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="card-box pd-30 height-100-p">
+							<div class="progress-box text-center">
+								 <input type="text" class="knob dial2" value="70" data-width="120" data-height="120" data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#00e091" data-angleOffset="180" readonly>
+								<h5 class="text-light-green padding-top-10 h5">Business Captured</h5>
+								<span class="d-block">75% Average <i class="fa text-light-green fa-line-chart"></i></span>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="card-box pd-30 height-100-p">
+							<div class="progress-box text-center">
+								 <input type="text" class="knob dial3" value="90" data-width="120" data-height="120" data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#f56767" data-angleOffset="180" readonly>
+								<h5 class="text-light-orange padding-top-10 h5">Projects Speed</h5>
+								<span class="d-block">90% Average <i class="fa text-light-orange fa-line-chart"></i></span>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="card-box pd-30 height-100-p">
+							<div class="progress-box text-center">
+								 <input type="text" class="knob dial4" value="65" data-width="120" data-height="120" data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#a683eb" data-angleOffset="180" readonly>
+								<h5 class="text-light-purple padding-top-10 h5">Panding Orders</h5>
+								<span class="d-block">65% Average <i class="fa text-light-purple fa-line-chart"></i></span>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="row">
+					<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<div class="progress-box text-center">
+								 <input type="text" class="knob dial5" value="35" data-width="220" data-height="220" data-thickness="0.08" data-fgColor="#a683eb" data-cursor="true">
+							</div>
+						</div>
+					</div>
+					<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<div class="progress-box text-center">
+								 <input type="text" class="knob dial5" value="35" data-width="220" data-height="220" data-thickness="0.08" data-fgColor="#f56767" data-angleOffset="90" data-linecap="round">
+							</div>
+						</div>
+					</div>
+					<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<div class="progress-box text-center">
+								 <input type="text" class="knob dial5" value="35" data-width="220" data-height="220" data-thickness="0.02" data-fgColor="#f56767" data-skin="tron" data-angleOffset="180">
+							</div>
+						</div>
+					</div>
+					<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<div class="progress-box text-center">
+								 <input type="text" class="knob dial5" value="35" data-width="220" data-height="220" data-thickness="0.08" data-fgColor="#0099ff" data-angleOffset="-125" data-angleArc="250" data-rotation="anticlockwise">
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+	<script src="src/plugins/jQuery-Knob-master/jquery.knob.min.js"></script>
+	<script src="vendors/scripts/knob-chart-setting.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/knob-chart.php b/knob-chart.php
deleted file mode 100644
index 8a969307..00000000
--- a/knob-chart.php
+++ /dev/null
@@ -1,117 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>Charts</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Charts</li>
-								</ol>
-							</nav>
-						</div>
-						<div class="col-md-6 col-sm-12 text-right">
-							<div class="dropdown">
-								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-									January 2020
-								</a>
-								<div class="dropdown-menu dropdown-menu-right">
-									<a class="dropdown-item" href="#">Export List</a>
-									<a class="dropdown-item" href="#">Policies</a>
-									<a class="dropdown-item" href="#">View Assets</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div class="row clearfix progress-box">
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="card-box pd-30 height-100-p">
-							<div class="progress-box text-center">
-								 <input type="text" class="knob dial1" value="80" data-width="120" data-height="120" data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#1b00ff" data-angleOffset="180" readonly>
-								<h5 class="text-blue padding-top-10 h5">My Earnings</h5>
-								<span class="d-block">80% Average <i class="fa fa-line-chart text-blue"></i></span>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="card-box pd-30 height-100-p">
-							<div class="progress-box text-center">
-								 <input type="text" class="knob dial2" value="70" data-width="120" data-height="120" data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#00e091" data-angleOffset="180" readonly>
-								<h5 class="text-light-green padding-top-10 h5">Business Captured</h5>
-								<span class="d-block">75% Average <i class="fa text-light-green fa-line-chart"></i></span>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="card-box pd-30 height-100-p">
-							<div class="progress-box text-center">
-								 <input type="text" class="knob dial3" value="90" data-width="120" data-height="120" data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#f56767" data-angleOffset="180" readonly>
-								<h5 class="text-light-orange padding-top-10 h5">Projects Speed</h5>
-								<span class="d-block">90% Average <i class="fa text-light-orange fa-line-chart"></i></span>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="card-box pd-30 height-100-p">
-							<div class="progress-box text-center">
-								 <input type="text" class="knob dial4" value="65" data-width="120" data-height="120" data-linecap="round" data-thickness="0.12" data-bgColor="#fff" data-fgColor="#a683eb" data-angleOffset="180" readonly>
-								<h5 class="text-light-purple padding-top-10 h5">Panding Orders</h5>
-								<span class="d-block">65% Average <i class="fa text-light-purple fa-line-chart"></i></span>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div class="row">
-					<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<div class="progress-box text-center">
-								 <input type="text" class="knob dial5" value="35" data-width="220" data-height="220" data-thickness="0.08" data-fgColor="#a683eb" data-cursor="true">
-							</div>
-						</div>
-					</div>
-					<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<div class="progress-box text-center">
-								 <input type="text" class="knob dial5" value="35" data-width="220" data-height="220" data-thickness="0.08" data-fgColor="#f56767" data-angleOffset="90" data-linecap="round">
-							</div>
-						</div>
-					</div>
-					<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<div class="progress-box text-center">
-								 <input type="text" class="knob dial5" value="35" data-width="220" data-height="220" data-thickness="0.02" data-fgColor="#f56767" data-skin="tron" data-angleOffset="180">
-							</div>
-						</div>
-					</div>
-					<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<div class="progress-box text-center">
-								 <input type="text" class="knob dial5" value="35" data-width="220" data-height="220" data-thickness="0.08" data-fgColor="#0099ff" data-angleOffset="-125" data-angleArc="250" data-rotation="anticlockwise">
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-	<script src="src/plugins/jQuery-Knob-master/jquery.knob.min.js"></script>
-	<script src="vendors/scripts/knob-chart-setting.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/login.php b/login.html
similarity index 63%
rename from login.php
rename to login.html
index 16726153..7afc9dc8 100644
--- a/login.php
+++ b/login.html
@@ -1,19 +1,46 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<?php include('include/head.php'); ?>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body class="login-page">
 	<div class="login-header box-shadow">
 		<div class="container-fluid d-flex justify-content-between align-items-center">
 			<div class="brand-logo">
-				<a href="login.php">
+				<a href="login.html">
 					<img src="vendors/images/deskapp-logo.svg" alt="">
 				</a>
 			</div>
 			<div class="login-menu">
 				<ul>
-					<li><a href="register.php">Register</a></li>
+					<li><a href="register.html">Register</a></li>
 				</ul>
 			</div>
 		</div>
@@ -66,7 +93,7 @@
 									</div>
 								</div>
 								<div class="col-6">
-									<div class="forgot-password"><a href="forgot-password.php">Forgot Password</a></div>
+									<div class="forgot-password"><a href="forgot-password.html">Forgot Password</a></div>
 								</div>
 							</div>
 							<div class="row">
@@ -76,20 +103,24 @@
 											use code for form submit
 											<input class="btn btn-primary btn-lg btn-block" type="submit" value="Sign In">
 										-->
-										<a class="btn btn-primary btn-lg btn-block" href="index.php">Sign In</a>
+										<a class="btn btn-primary btn-lg btn-block" href="index.html">Sign In</a>
 									</div>
 									<div class="font-16 weight-600 pt-10 pb-10 text-center" data-color="#707373">OR</div>
 									<div class="input-group mb-0">
-										<a class="btn btn-outline-primary btn-lg btn-block" href="register.php">Register To Create Account</a>
+										<a class="btn btn-outline-primary btn-lg btn-block" href="register.html">Register To Create Account</a>
 									</div>
 								</div>
 							</div>
 						</form>
-					</div>				
+					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-	<?php include('include/script.php'); ?>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/pricing-table.html b/pricing-table.html
new file mode 100644
index 00000000..0ce974db
--- /dev/null
+++ b/pricing-table.html
@@ -0,0 +1,640 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>pricing Table</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">pricing Table</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+
+				<div class="container px-0">
+					<h4 class="mb-30 text-blue h4">Pricing Table Style 1</h4>
+					<div class="row">
+						<div class="col-md-4 mb-30">
+							<div class="card-box pricing-card mt-30 mb-30">
+								<div class="pricing-icon">
+									<img src="vendors/images/icon-Cash.png" alt="">
+								</div>
+								<div class="price-title">
+									Beginner
+								</div>
+								<div class="pricing-price">
+									<sup>$</sup>49<sub>/mo</sub>
+								</div>
+								<div class="text">
+									Card servicing<br> for 1month
+								</div>
+								<div class="cta">
+									<a href="#" class="btn btn-primary btn-rounded btn-lg">Order Now</a>
+								</div>
+							</div>
+						</div>
+						<div class="col-md-4 mb-30">
+							<div class="card-box pricing-card mt-30 mb-30">
+								<div class="pricing-icon">
+									<img src="vendors/images/icon-debit.png" alt="">
+								</div>
+								<div class="price-title">
+									expert
+								</div>
+								<div class="pricing-price">
+									<sup>$</sup>199<sub>/mo</sub>
+								</div>
+								<div class="text">
+									Card servicing<br> for 6month
+								</div>
+								<div class="cta">
+									<a href="#" class="btn btn-primary btn-rounded btn-lg">Order Now</a>
+								</div>
+							</div>
+						</div>
+						<div class="col-md-4 mb-30">
+							<div class="card-box pricing-card mt-30 mb-30">
+								<div class="pricing-icon">
+									<img src="vendors/images/icon-online-wallet.png" alt="">
+								</div>
+								<div class="price-title">
+									experience
+								</div>
+								<div class="pricing-price">
+									<sup>$</sup>599<sub>/yr</sub>
+								</div>
+								<div class="text">
+									Card servicing<br> for 1year
+								</div>
+								<div class="cta">
+									<a href="#" class="btn btn-primary btn-rounded btn-lg">Order Now</a>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<h4 class="mb-30 mt-30 text-blue h4">Pricing Table Style 2</h4>
+					<div class="row">
+						<div class="col-md-4 mb-30">
+							<div class="card-box pricing-card-style2">
+								<div class="pricing-card-header">
+									<div class="left">
+										<h5>Standard</h5>
+										<p>For small businesses</p>
+									</div>
+									<div class="right">
+										<div class="pricing-price">
+											€10<span>/month</span>
+										</div>
+									</div>
+								</div>
+								<div class="pricing-card-body">
+									<div class="pricing-points">
+										<ul>
+											<li>2 TB of space</li>
+											<li>120 days of file recovery</li>
+											<li>Smart Sync</li>
+											<li>Dropbox Paper admin tools</li>
+											<li>Granular sharing permissions</li>
+											<li>User and company-managed groups</li>
+											<li>Live chat support</li>
+										</ul>
+									</div>
+								</div>
+								<div class="cta">
+									<a href="#" class="btn btn-primary btn-rounded btn-lg">Get Started</a>
+								</div>
+							</div>
+						</div>
+						<div class="col-md-4 mb-30">
+							<div class="card-box pricing-card-style2">
+								<div class="pricing-card-header">
+									<div class="left">
+										<h5>Advanced</h5>
+										<p>For big businesses</p>
+									</div>
+									<div class="right">
+										<div class="pricing-price">
+											€15<span>/month</span>
+										</div>
+									</div>
+								</div>
+								<div class="pricing-card-body">
+									<div class="pricing-points">
+										<ul>
+											<li>Everything in Standard</li>
+											<li>As much space as needed</li>
+											<li>Advanced admin controls</li>
+											<li>Dropbox Showcase</li>
+											<li>Tiered admin roles</li>
+											<li>Advanced user management tools</li>
+											<li>Domain verification</li>
+										</ul>
+									</div>
+								</div>
+								<div class="cta">
+									<a href="#" class="btn btn-primary btn-rounded btn-lg">Get Started</a>
+								</div>
+							</div>
+						</div>
+						<div class="col-md-4 mb-30">
+							<div class="card-box pricing-card-style2">
+								<div class="pricing-card-header">
+									<div class="left">
+										<h5>Enterprise</h5>
+										<p>For enterprises</p>
+									</div>
+									<div class="right">
+										<div class="pricing-price">
+											€25<span>/month</span>
+										</div>
+									</div>
+								</div>
+								<div class="pricing-card-body">
+									<div class="pricing-points">
+										<ul>
+											<li>Everything in Advanced</li>
+											<li>Account Capture</li>
+											<li>Network control</li>
+											<li>Enterprise management support</li>
+											<li>Domain Insights</li>
+											<li>Advanced training for end users</li>
+											<li>24/7 phone support</li>
+										</ul>
+									</div>
+								</div>
+								<div class="cta">
+									<a href="#" class="btn btn-primary btn-rounded btn-lg">Get Started</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="footer-wrap pd-20 mb-20 card-box">
+					DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/pricing-table.php b/pricing-table.php
deleted file mode 100644
index 1e525b99..00000000
--- a/pricing-table.php
+++ /dev/null
@@ -1,193 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>pricing Table</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">pricing Table</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-
-				<div class="container px-0">
-					<h4 class="mb-30 text-blue h4">Pricing Table Style 1</h4>
-					<div class="row">
-						<div class="col-md-4 mb-30">
-							<div class="card-box pricing-card mt-30 mb-30">
-								<div class="pricing-icon">
-									<img src="vendors/images/icon-Cash.png" alt="">
-								</div>
-								<div class="price-title">
-									Beginner
-								</div>
-								<div class="pricing-price">
-									<sup>$</sup>49<sub>/mo</sub>
-								</div>
-								<div class="text">
-									Card servicing<br> for 1month
-								</div>
-								<div class="cta">
-									<a href="#" class="btn btn-primary btn-rounded btn-lg">Order Now</a>
-								</div>
-							</div>
-						</div>
-						<div class="col-md-4 mb-30">
-							<div class="card-box pricing-card mt-30 mb-30">
-								<div class="pricing-icon">
-									<img src="vendors/images/icon-debit.png" alt="">
-								</div>
-								<div class="price-title">
-									expert
-								</div>
-								<div class="pricing-price">
-									<sup>$</sup>199<sub>/mo</sub>
-								</div>
-								<div class="text">
-									Card servicing<br> for 6month
-								</div>
-								<div class="cta">
-									<a href="#" class="btn btn-primary btn-rounded btn-lg">Order Now</a>
-								</div>
-							</div>
-						</div>
-						<div class="col-md-4 mb-30">
-							<div class="card-box pricing-card mt-30 mb-30">
-								<div class="pricing-icon">
-									<img src="vendors/images/icon-online-wallet.png" alt="">
-								</div>
-								<div class="price-title">
-									experience
-								</div>
-								<div class="pricing-price">
-									<sup>$</sup>599<sub>/yr</sub>
-								</div>
-								<div class="text">
-									Card servicing<br> for 1year
-								</div>
-								<div class="cta">
-									<a href="#" class="btn btn-primary btn-rounded btn-lg">Order Now</a>
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<h4 class="mb-30 mt-30 text-blue h4">Pricing Table Style 2</h4>
-					<div class="row">
-						<div class="col-md-4 mb-30">
-							<div class="card-box pricing-card-style2">
-								<div class="pricing-card-header">
-									<div class="left">
-										<h5>Standard</h5>
-										<p>For small businesses</p>
-									</div>
-									<div class="right">
-										<div class="pricing-price">
-											€10<span>/month</span>
-										</div>
-									</div>
-								</div>
-								<div class="pricing-card-body">
-									<div class="pricing-points">
-										<ul>
-											<li>2 TB of space</li>
-											<li>120 days of file recovery</li>
-											<li>Smart Sync</li>
-											<li>Dropbox Paper admin tools</li>
-											<li>Granular sharing permissions</li>
-											<li>User and company-managed groups</li>
-											<li>Live chat support</li>
-										</ul>
-									</div>
-								</div>
-								<div class="cta">
-									<a href="#" class="btn btn-primary btn-rounded btn-lg">Get Started</a>
-								</div>
-							</div>
-						</div>
-						<div class="col-md-4 mb-30">
-							<div class="card-box pricing-card-style2">
-								<div class="pricing-card-header">
-									<div class="left">
-										<h5>Advanced</h5>
-										<p>For big businesses</p>
-									</div>
-									<div class="right">
-										<div class="pricing-price">
-											€15<span>/month</span>
-										</div>
-									</div>
-								</div>
-								<div class="pricing-card-body">
-									<div class="pricing-points">
-										<ul>
-											<li>Everything in Standard</li>
-											<li>As much space as needed</li>
-											<li>Advanced admin controls</li>
-											<li>Dropbox Showcase</li>
-											<li>Tiered admin roles</li>
-											<li>Advanced user management tools</li>
-											<li>Domain verification</li>
-										</ul>
-									</div>
-								</div>
-								<div class="cta">
-									<a href="#" class="btn btn-primary btn-rounded btn-lg">Get Started</a>
-								</div>
-							</div>
-						</div>
-						<div class="col-md-4 mb-30">
-							<div class="card-box pricing-card-style2">
-								<div class="pricing-card-header">
-									<div class="left">
-										<h5>Enterprise</h5>
-										<p>For enterprises</p>
-									</div>
-									<div class="right">
-										<div class="pricing-price">
-											€25<span>/month</span>
-										</div>
-									</div>
-								</div>
-								<div class="pricing-card-body">
-									<div class="pricing-points">
-										<ul>
-											<li>Everything in Advanced</li>
-											<li>Account Capture</li>
-											<li>Network control</li>
-											<li>Enterprise management support</li>
-											<li>Domain Insights</li>
-											<li>Advanced training for end users</li>
-											<li>24/7 phone support</li>
-										</ul>
-									</div>
-								</div>
-								<div class="cta">
-									<a href="#" class="btn btn-primary btn-rounded btn-lg">Get Started</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<?php include('include/footer.php'); ?>
-			</div>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/product-detail.html b/product-detail.html
new file mode 100644
index 00000000..5ee47ef7
--- /dev/null
+++ b/product-detail.html
@@ -0,0 +1,616 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<!-- Slick Slider css -->
+	<link rel="stylesheet" type="text/css" href="src/plugins/slick/slick.css">
+	<!-- bootstrap-touchspin css -->
+	<link rel="stylesheet" type="text/css" href="src/plugins/bootstrap-touchspin/jquery.bootstrap-touchspin.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Product Detail</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Product Detail</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="product-wrap">
+					<div class="product-detail-wrap mb-30">
+						<div class="row">
+							<div class="col-lg-6 col-md-12 col-sm-12">
+								<div class="product-slider slider-arrow">
+									<div class="product-slide">
+										<img src="vendors/images/product-img1.jpg" alt="">
+									</div>
+									<div class="product-slide">
+										<img src="vendors/images/product-img2.jpg" alt="">
+									</div>
+									<div class="product-slide">
+										<img src="vendors/images/product-img3.jpg" alt="">
+									</div>
+									<div class="product-slide">
+										<img src="vendors/images/product-img4.jpg" alt="">
+									</div>
+								</div>
+								<div class="product-slider-nav">
+									<div class="product-slide-nav">
+										<img src="vendors/images/product-img1.jpg" alt="">
+									</div>
+									<div class="product-slide-nav">
+										<img src="vendors/images/product-img2.jpg" alt="">
+									</div>
+									<div class="product-slide-nav">
+										<img src="vendors/images/product-img3.jpg" alt="">
+									</div>
+									<div class="product-slide-nav">
+										<img src="vendors/images/product-img4.jpg" alt="">
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-6 col-md-12 col-sm-12">
+								<div class="product-detail-desc pd-20 card-box height-100-p">
+									<h4 class="mb-20 pt-20">Gufram Bounce Black</h4>
+									<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>
+									<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.</p>
+									<div class="price">
+										<del>$55.5</del><ins>$49.5</ins>
+									</div>
+									<div class="mx-w-150">
+										<div class="form-group">
+											<label class="text-blue">quantity</label>
+											<input id="demo3_22" type="text" value="1" name="demo3_22">
+										</div>
+									</div>
+									<div class="row">
+										<div class="col-md-6 col-6">
+											<a href="#" class="btn btn-primary btn-block">Add To Cart</a>
+										</div>
+										<div class="col-md-6 col-6">
+											<a href="#" class="btn btn-outline-primary btn-block">Buy Now</a>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<h4 class="mb-20">Recent Product</h4>
+					<div class="product-list">
+						<ul class="row">
+							<li class="col-lg-4 col-md-6 col-sm-12">
+								<div class="product-box">
+									<div class="producct-img"><img src="vendors/images/product-img1.jpg" alt=""></div>
+									<div class="product-caption">
+										<h4><a href="#">Gufram Bounce Black</a></h4>
+										<div class="price">
+											<del>$55.5</del><ins>$49.5</ins>
+										</div>
+										<a href="#" class="btn btn-outline-primary">Read More</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-lg-4 col-md-6 col-sm-12">
+								<div class="product-box">
+									<div class="producct-img"><img src="vendors/images/product-img2.jpg" alt=""></div>
+									<div class="product-caption">
+										<h4><a href="#">Gufram Bounce White</a></h4>
+										<div class="price">
+											<del>$75.5</del><ins>$50</ins>
+										</div>
+										<a href="#" class="btn btn-outline-primary">Add To Cart</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-lg-4 col-md-6 col-sm-12">
+								<div class="product-box">
+									<div class="producct-img"><img src="vendors/images/product-img3.jpg" alt=""></div>
+									<div class="product-caption">
+										<h4><a href="#">Contrast Lace-Up Sneakers</a></h4>
+										<div class="price">
+											<ins>$80</ins>
+										</div>
+										<a href="#" class="btn btn-outline-primary">Add To Cart</a>
+									</div>
+								</div>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+	<!-- Slick Slider js -->
+	<script src="src/plugins/slick/slick.min.js"></script>
+	<!-- bootstrap-touchspin js -->
+	<script src="src/plugins/bootstrap-touchspin/jquery.bootstrap-touchspin.js"></script>
+	<script>
+		jQuery(document).ready(function() {
+			jQuery('.product-slider').slick({
+				slidesToShow: 1,
+				slidesToScroll: 1,
+				arrows: true,
+				infinite: true,
+				speed: 1000,
+				fade: true,
+				asNavFor: '.product-slider-nav'
+			});
+			jQuery('.product-slider-nav').slick({
+				slidesToShow: 3,
+				slidesToScroll: 1,
+				asNavFor: '.product-slider',
+				dots: false,
+				infinite: true,
+				arrows: false,
+				speed: 1000,
+				centerMode: true,
+				focusOnSelect: true
+			});
+			$("input[name='demo3_22']").TouchSpin({
+				initval: 1
+			});
+		});
+	</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/product-detail.php b/product-detail.php
deleted file mode 100644
index 2c2325e7..00000000
--- a/product-detail.php
+++ /dev/null
@@ -1,169 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-	<!-- Slick Slider css -->
-	<link rel="stylesheet" type="text/css" href="src/plugins/slick/slick.css">
-	<!-- bootstrap-touchspin css -->
-	<link rel="stylesheet" type="text/css" href="src/plugins/bootstrap-touchspin/jquery.bootstrap-touchspin.css">
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Product Detail</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Product Detail</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="product-wrap">
-					<div class="product-detail-wrap mb-30">
-						<div class="row">
-							<div class="col-lg-6 col-md-12 col-sm-12">
-								<div class="product-slider slider-arrow">
-									<div class="product-slide">
-										<img src="vendors/images/product-img1.jpg" alt="">
-									</div>
-									<div class="product-slide">
-										<img src="vendors/images/product-img2.jpg" alt="">
-									</div>
-									<div class="product-slide">
-										<img src="vendors/images/product-img3.jpg" alt="">
-									</div>
-									<div class="product-slide">
-										<img src="vendors/images/product-img4.jpg" alt="">
-									</div>
-								</div>
-								<div class="product-slider-nav">
-									<div class="product-slide-nav">
-										<img src="vendors/images/product-img1.jpg" alt="">
-									</div>
-									<div class="product-slide-nav">
-										<img src="vendors/images/product-img2.jpg" alt="">
-									</div>
-									<div class="product-slide-nav">
-										<img src="vendors/images/product-img3.jpg" alt="">
-									</div>
-									<div class="product-slide-nav">
-										<img src="vendors/images/product-img4.jpg" alt="">
-									</div>
-								</div>
-							</div>
-							<div class="col-lg-6 col-md-12 col-sm-12">
-								<div class="product-detail-desc pd-20 card-box height-100-p">
-									<h4 class="mb-20 pt-20">Gufram Bounce Black</h4>
-									<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>
-									<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.</p>
-									<div class="price">
-										<del>$55.5</del><ins>$49.5</ins>
-									</div>
-									<div class="mx-w-150">
-										<div class="form-group">
-											<label class="text-blue">quantity</label>
-											<input id="demo3_22" type="text" value="1" name="demo3_22">
-										</div>
-									</div>
-									<div class="row">
-										<div class="col-md-6 col-6">
-											<a href="#" class="btn btn-primary btn-block">Add To Cart</a>
-										</div>
-										<div class="col-md-6 col-6">
-											<a href="#" class="btn btn-outline-primary btn-block">Buy Now</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<h4 class="mb-20">Recent Product</h4>
-					<div class="product-list">
-						<ul class="row">
-							<li class="col-lg-4 col-md-6 col-sm-12">
-								<div class="product-box">
-									<div class="producct-img"><img src="vendors/images/product-img1.jpg" alt=""></div>
-									<div class="product-caption">
-										<h4><a href="#">Gufram Bounce Black</a></h4>
-										<div class="price">
-											<del>$55.5</del><ins>$49.5</ins>
-										</div>
-										<a href="#" class="btn btn-outline-primary">Read More</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-lg-4 col-md-6 col-sm-12">
-								<div class="product-box">
-									<div class="producct-img"><img src="vendors/images/product-img2.jpg" alt=""></div>
-									<div class="product-caption">
-										<h4><a href="#">Gufram Bounce White</a></h4>
-										<div class="price">
-											<del>$75.5</del><ins>$50</ins>
-										</div>
-										<a href="#" class="btn btn-outline-primary">Add To Cart</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-lg-4 col-md-6 col-sm-12">
-								<div class="product-box">
-									<div class="producct-img"><img src="vendors/images/product-img3.jpg" alt=""></div>
-									<div class="product-caption">
-										<h4><a href="#">Contrast Lace-Up Sneakers</a></h4>
-										<div class="price">
-											<ins>$80</ins>
-										</div>
-										<a href="#" class="btn btn-outline-primary">Add To Cart</a>
-									</div>
-								</div>
-							</li>
-						</ul>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-	<!-- Slick Slider js -->
-	<script src="src/plugins/slick/slick.min.js"></script>
-	<!-- bootstrap-touchspin js -->
-	<script src="src/plugins/bootstrap-touchspin/jquery.bootstrap-touchspin.js"></script>
-	<script>
-		jQuery(document).ready(function() {
-			jQuery('.product-slider').slick({
-				slidesToShow: 1,
-				slidesToScroll: 1,
-				arrows: true,
-				infinite: true,
-				speed: 1000,
-				fade: true,
-				asNavFor: '.product-slider-nav'
-			});
-			jQuery('.product-slider-nav').slick({
-				slidesToShow: 3,
-				slidesToScroll: 1,
-				asNavFor: '.product-slider',
-				dots: false,
-				infinite: true,
-				arrows: false,
-				speed: 1000,
-				centerMode: true,
-				focusOnSelect: true
-			});
-			$("input[name='demo3_22']").TouchSpin({
-				initval: 1
-			});
-		});
-	</script>
-</body>
-</html>
\ No newline at end of file
diff --git a/product.html b/product.html
new file mode 100644
index 00000000..69b2e5d5
--- /dev/null
+++ b/product.html
@@ -0,0 +1,645 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Product</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Product</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="product-wrap">
+					<div class="product-list">
+						<ul class="row">
+							<li class="col-lg-4 col-md-6 col-sm-12">
+								<div class="product-box">
+									<div class="producct-img"><img src="vendors/images/product-img1.jpg" alt=""></div>
+									<div class="product-caption">
+										<h4><a href="#">Gufram Bounce Black</a></h4>
+										<div class="price">
+											<del>$55.5</del><ins>$49.5</ins>
+										</div>
+										<a href="#" class="btn btn-outline-primary">Read More</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-lg-4 col-md-6 col-sm-12">
+								<div class="product-box">
+									<div class="producct-img"><img src="vendors/images/product-img2.jpg" alt=""></div>
+									<div class="product-caption">
+										<h4><a href="#">Gufram Bounce White</a></h4>
+										<div class="price">
+											<del>$75.5</del><ins>$50</ins>
+										</div>
+										<a href="#" class="btn btn-outline-primary">Add To Cart</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-lg-4 col-md-6 col-sm-12">
+								<div class="product-box">
+									<div class="producct-img"><img src="vendors/images/product-img3.jpg" alt=""></div>
+									<div class="product-caption">
+										<h4><a href="#">Contrast Lace-Up Sneakers</a></h4>
+										<div class="price">
+											<ins>$80</ins>
+										</div>
+										<a href="#" class="btn btn-outline-primary">Add To Cart</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-lg-4 col-md-6 col-sm-12">
+								<div class="product-box">
+									<div class="producct-img"><img src="vendors/images/product-img4.jpg" alt=""></div>
+									<div class="product-caption">
+										<h4><a href="#">Apple Watch Series 3</a></h4>
+										<div class="price">
+											<ins>$380</ins>
+										</div>
+										<a href="#" class="btn btn-outline-primary">Read More</a>
+									</div>
+								</div>
+							</li>
+
+							<li class="col-lg-4 col-md-6 col-sm-12">
+								<div class="product-box">
+									<div class="producct-img"><img src="vendors/images/product-img2.jpg" alt=""></div>
+									<div class="product-caption">
+										<h4><a href="#">Gufram Bounce White</a></h4>
+										<div class="price">
+											<del>$75.5</del><ins>$50</ins>
+										</div>
+										<a href="#" class="btn btn-outline-primary">Add To Cart</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-lg-4 col-md-6 col-sm-12">
+								<div class="product-box">
+									<div class="producct-img"><img src="vendors/images/product-img4.jpg" alt=""></div>
+									<div class="product-caption">
+										<h4><a href="#">Apple Watch Series 3</a></h4>
+										<div class="price">
+											<ins>$380</ins>
+										</div>
+										<a href="#" class="btn btn-outline-primary">Read More</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-lg-4 col-md-6 col-sm-12">
+								<div class="product-box">
+									<div class="producct-img"><img src="vendors/images/product-img1.jpg" alt=""></div>
+									<div class="product-caption">
+										<h4><a href="#">Gufram Bounce Black</a></h4>
+										<div class="price">
+											<del>$55.5</del><ins>$49.5</ins>
+										</div>
+										<a href="#" class="btn btn-outline-primary">Read More</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-lg-4 col-md-6 col-sm-12">
+								<div class="product-box">
+									<div class="producct-img"><img src="vendors/images/product-img3.jpg" alt=""></div>
+									<div class="product-caption">
+										<h4><a href="#">Contrast Lace-Up Sneakers</a></h4>
+										<div class="price">
+											<ins>$80</ins>
+										</div>
+										<a href="#" class="btn btn-outline-primary">Add To Cart</a>
+									</div>
+								</div>
+							</li>
+
+							<li class="col-lg-4 col-md-6 col-sm-12">
+								<div class="product-box">
+									<div class="producct-img"><img src="vendors/images/product-img1.jpg" alt=""></div>
+									<div class="product-caption">
+										<h4><a href="#">Gufram Bounce Black</a></h4>
+										<div class="price">
+											<del>$55.5</del><ins>$49.5</ins>
+										</div>
+										<a href="#" class="btn btn-outline-primary">Read More</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-lg-4 col-md-6 col-sm-12">
+								<div class="product-box">
+									<div class="producct-img"><img src="vendors/images/product-img2.jpg" alt=""></div>
+									<div class="product-caption">
+										<h4><a href="#">Gufram Bounce White</a></h4>
+										<div class="price">
+											<del>$75.5</del><ins>$50</ins>
+										</div>
+										<a href="#" class="btn btn-outline-primary">Add To Cart</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-lg-4 col-md-6 col-sm-12">
+								<div class="product-box">
+									<div class="producct-img"><img src="vendors/images/product-img3.jpg" alt=""></div>
+									<div class="product-caption">
+										<h4><a href="#">Contrast Lace-Up Sneakers</a></h4>
+										<div class="price">
+											<ins>$80</ins>
+										</div>
+										<a href="#" class="btn btn-outline-primary">Add To Cart</a>
+									</div>
+								</div>
+							</li>
+							<li class="col-lg-4 col-md-6 col-sm-12">
+								<div class="product-box">
+									<div class="producct-img"><img src="vendors/images/product-img4.jpg" alt=""></div>
+									<div class="product-caption">
+										<h4><a href="#">Apple Watch Series 3</a></h4>
+										<div class="price">
+											<ins>$380</ins>
+										</div>
+										<a href="#" class="btn btn-outline-primary">Read More</a>
+									</div>
+								</div>
+							</li>
+						</ul>
+					</div>
+					<div class="blog-pagination mb-30">
+						<div class="btn-toolbar justify-content-center mb-15">
+							<div class="btn-group">
+								<a href="#" class="btn btn-outline-primary prev"><i class="fa fa-angle-double-left"></i></a>
+								<a href="#" class="btn btn-outline-primary">1</a>
+								<a href="#" class="btn btn-outline-primary">2</a>
+								<span class="btn btn-primary current">3</span>
+								<a href="#" class="btn btn-outline-primary">4</a>
+								<a href="#" class="btn btn-outline-primary">5</a>
+								<a href="#" class="btn btn-outline-primary next"><i class="fa fa-angle-double-right"></i></a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/product.php b/product.php
deleted file mode 100644
index a913ab53..00000000
--- a/product.php
+++ /dev/null
@@ -1,198 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Product</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Product</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="product-wrap">
-					<div class="product-list">
-						<ul class="row">
-							<li class="col-lg-4 col-md-6 col-sm-12">
-								<div class="product-box">
-									<div class="producct-img"><img src="vendors/images/product-img1.jpg" alt=""></div>
-									<div class="product-caption">
-										<h4><a href="#">Gufram Bounce Black</a></h4>
-										<div class="price">
-											<del>$55.5</del><ins>$49.5</ins>
-										</div>
-										<a href="#" class="btn btn-outline-primary">Read More</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-lg-4 col-md-6 col-sm-12">
-								<div class="product-box">
-									<div class="producct-img"><img src="vendors/images/product-img2.jpg" alt=""></div>
-									<div class="product-caption">
-										<h4><a href="#">Gufram Bounce White</a></h4>
-										<div class="price">
-											<del>$75.5</del><ins>$50</ins>
-										</div>
-										<a href="#" class="btn btn-outline-primary">Add To Cart</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-lg-4 col-md-6 col-sm-12">
-								<div class="product-box">
-									<div class="producct-img"><img src="vendors/images/product-img3.jpg" alt=""></div>
-									<div class="product-caption">
-										<h4><a href="#">Contrast Lace-Up Sneakers</a></h4>
-										<div class="price">
-											<ins>$80</ins>
-										</div>
-										<a href="#" class="btn btn-outline-primary">Add To Cart</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-lg-4 col-md-6 col-sm-12">
-								<div class="product-box">
-									<div class="producct-img"><img src="vendors/images/product-img4.jpg" alt=""></div>
-									<div class="product-caption">
-										<h4><a href="#">Apple Watch Series 3</a></h4>
-										<div class="price">
-											<ins>$380</ins>
-										</div>
-										<a href="#" class="btn btn-outline-primary">Read More</a>
-									</div>
-								</div>
-							</li>
-
-							<li class="col-lg-4 col-md-6 col-sm-12">
-								<div class="product-box">
-									<div class="producct-img"><img src="vendors/images/product-img2.jpg" alt=""></div>
-									<div class="product-caption">
-										<h4><a href="#">Gufram Bounce White</a></h4>
-										<div class="price">
-											<del>$75.5</del><ins>$50</ins>
-										</div>
-										<a href="#" class="btn btn-outline-primary">Add To Cart</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-lg-4 col-md-6 col-sm-12">
-								<div class="product-box">
-									<div class="producct-img"><img src="vendors/images/product-img4.jpg" alt=""></div>
-									<div class="product-caption">
-										<h4><a href="#">Apple Watch Series 3</a></h4>
-										<div class="price">
-											<ins>$380</ins>
-										</div>
-										<a href="#" class="btn btn-outline-primary">Read More</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-lg-4 col-md-6 col-sm-12">
-								<div class="product-box">
-									<div class="producct-img"><img src="vendors/images/product-img1.jpg" alt=""></div>
-									<div class="product-caption">
-										<h4><a href="#">Gufram Bounce Black</a></h4>
-										<div class="price">
-											<del>$55.5</del><ins>$49.5</ins>
-										</div>
-										<a href="#" class="btn btn-outline-primary">Read More</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-lg-4 col-md-6 col-sm-12">
-								<div class="product-box">
-									<div class="producct-img"><img src="vendors/images/product-img3.jpg" alt=""></div>
-									<div class="product-caption">
-										<h4><a href="#">Contrast Lace-Up Sneakers</a></h4>
-										<div class="price">
-											<ins>$80</ins>
-										</div>
-										<a href="#" class="btn btn-outline-primary">Add To Cart</a>
-									</div>
-								</div>
-							</li>
-
-							<li class="col-lg-4 col-md-6 col-sm-12">
-								<div class="product-box">
-									<div class="producct-img"><img src="vendors/images/product-img1.jpg" alt=""></div>
-									<div class="product-caption">
-										<h4><a href="#">Gufram Bounce Black</a></h4>
-										<div class="price">
-											<del>$55.5</del><ins>$49.5</ins>
-										</div>
-										<a href="#" class="btn btn-outline-primary">Read More</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-lg-4 col-md-6 col-sm-12">
-								<div class="product-box">
-									<div class="producct-img"><img src="vendors/images/product-img2.jpg" alt=""></div>
-									<div class="product-caption">
-										<h4><a href="#">Gufram Bounce White</a></h4>
-										<div class="price">
-											<del>$75.5</del><ins>$50</ins>
-										</div>
-										<a href="#" class="btn btn-outline-primary">Add To Cart</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-lg-4 col-md-6 col-sm-12">
-								<div class="product-box">
-									<div class="producct-img"><img src="vendors/images/product-img3.jpg" alt=""></div>
-									<div class="product-caption">
-										<h4><a href="#">Contrast Lace-Up Sneakers</a></h4>
-										<div class="price">
-											<ins>$80</ins>
-										</div>
-										<a href="#" class="btn btn-outline-primary">Add To Cart</a>
-									</div>
-								</div>
-							</li>
-							<li class="col-lg-4 col-md-6 col-sm-12">
-								<div class="product-box">
-									<div class="producct-img"><img src="vendors/images/product-img4.jpg" alt=""></div>
-									<div class="product-caption">
-										<h4><a href="#">Apple Watch Series 3</a></h4>
-										<div class="price">
-											<ins>$380</ins>
-										</div>
-										<a href="#" class="btn btn-outline-primary">Read More</a>
-									</div>
-								</div>
-							</li>
-						</ul>
-					</div>
-					<div class="blog-pagination mb-30">
-						<div class="btn-toolbar justify-content-center mb-15">
-							<div class="btn-group">
-								<a href="#" class="btn btn-outline-primary prev"><i class="fa fa-angle-double-left"></i></a>
-								<a href="#" class="btn btn-outline-primary">1</a>
-								<a href="#" class="btn btn-outline-primary">2</a>
-								<span class="btn btn-primary current">3</span>
-								<a href="#" class="btn btn-outline-primary">4</a>
-								<a href="#" class="btn btn-outline-primary">5</a>
-								<a href="#" class="btn btn-outline-primary next"><i class="fa fa-angle-double-right"></i></a>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/profile.php b/profile.html
similarity index 58%
rename from profile.php
rename to profile.html
index 4a59274e..4245d657 100644
--- a/profile.php
+++ b/profile.html
@@ -1,12 +1,453 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<?php include('include/head.php'); ?>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
 	<link rel="stylesheet" type="text/css" href="src/plugins/cropperjs/dist/cropper.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
 	<div class="main-container">
 		<div class="pd-ltr-20 xs-pd-20-10">
 			<div class="min-height-200px">
@@ -18,7 +459,7 @@
 							</div>
 							<nav aria-label="breadcrumb" role="navigation">
 								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
 									<li class="breadcrumb-item active" aria-current="page">Profile</li>
 								</ol>
 							</nav>
@@ -545,9 +986,16 @@
 					</div>
 				</div>
 			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
 		</div>
 	</div>
-	<?php include('include/script.php'); ?>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
 	<script src="src/plugins/cropperjs/dist/cropper.js"></script>
 	<script>
 		window.addEventListener('DOMContentLoaded', function () {
diff --git a/register.php b/register.html
similarity index 84%
rename from register.php
rename to register.html
index 29ebda4a..b1c77943 100644
--- a/register.php
+++ b/register.html
@@ -2,21 +2,48 @@
 <html>
 
 <head>
-	<?php include('include/head.php'); ?>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
 	<link rel="stylesheet" type="text/css" href="src/plugins/jquery-steps/jquery.steps.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 
 <body class="login-page">
 	<div class="login-header box-shadow">
 		<div class="container-fluid d-flex justify-content-between align-items-center">
 			<div class="brand-logo">
-				<a href="login.php">
+				<a href="login.html">
 					<img src="vendors/images/deskapp-logo.svg" alt="">
 				</a>
 			</div>
 			<div class="login-menu">
 				<ul>
-					<li><a href="login.php">Login</a></li>
+					<li><a href="login.html">Login</a></li>
 				</ul>
 			</div>
 		</div>
@@ -224,13 +251,17 @@
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 				</div>
 				<div class="modal-footer justify-content-center">
-					<a href="login.php" class="btn btn-primary">Done</a>
+					<a href="login.html" class="btn btn-primary">Done</a>
 				</div>
 			</div>
 		</div>
 	</div>
 	<!-- success Popup html End -->
-	<?php include('include/script.php'); ?>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
 	<script src="src/plugins/jquery-steps/jquery.steps.js"></script>
 	<script src="vendors/scripts/steps-setting.js"></script>
 </body>
diff --git a/reset-password.php b/reset-password.html
similarity index 55%
rename from reset-password.php
rename to reset-password.html
index 7a24a61d..cef708fd 100644
--- a/reset-password.php
+++ b/reset-password.html
@@ -1,19 +1,46 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<?php include('include/head.php'); ?>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
 	<div class="login-header box-shadow">
 		<div class="container-fluid d-flex justify-content-between align-items-center">
 			<div class="brand-logo">
-				<a href="login.php">
+				<a href="login.html">
 					<img src="vendors/images/deskapp-logo.svg" alt="">
 				</a>
 			</div>
 			<div class="login-menu">
 				<ul>
-					<li><a href="login.php">Login</a></li>
+					<li><a href="login.html">Login</a></li>
 				</ul>
 			</div>
 		</div>
@@ -50,7 +77,7 @@
 											use code for form submit
 											<input class="btn btn-primary btn-lg btn-block" type="submit" value="Submit">
 										-->
-										<a class="btn btn-primary btn-lg btn-block" href="index.php">Submit</a>
+										<a class="btn btn-primary btn-lg btn-block" href="index.html">Submit</a>
 									</div>
 								</div>
 							</div>
@@ -60,6 +87,10 @@
 			</div>
 		</div>
 	</div>
-	<?php include('include/script.php'); ?>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/sitemap.html b/sitemap.html
new file mode 100644
index 00000000..6564bb83
--- /dev/null
+++ b/sitemap.html
@@ -0,0 +1,626 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Sitemap</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Sitemap</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="mb-30">
+					<div class="pb-20">
+						<div class="row">
+							<div class="col-lg-3 col-md-6 col-sm-12">
+								<div class="sitemap">
+									<h5 class="h5">Home</h5>
+									<ul>
+										<li><a href="index.html">Dashboard style 1</a></li>
+										<li><a href="index2.html">Dashboard style 2</a></li>
+									</ul>
+								</div>
+								<div class="sitemap">
+									<h5 class="h5">Forms</h5>
+									<ul>
+										<li><a href="form-basic.html">Form Basic</a></li>
+										<li><a href="advanced-components.html">Advanced Components</a></li>
+										<li><a href="form-wizard.html">Form Wizard</a></li>
+										<li><a href="html5-editor.html">HTML5 Editor</a></li>
+										<li><a href="form-pickers.html">Form Pickers</a></li>
+										<li><a href="image-cropper.html">Image Cropper</a></li>
+										<li><a href="image-dropzone.html">Image Dropzone</a></li>
+									</ul>
+								</div>
+								<div class="sitemap">
+									<h5 class="h5">Invoice</h5>
+									<ul>
+										<li><a href="invoice.html">Invoice</a></li>
+									</ul>
+								</div>
+								<div class="sitemap">
+									<h5 class="h5">Chat Module</h5>
+									<ul>
+										<li><a href="chat.html">Chat</a></li>
+									</ul>
+								</div>
+							</div>
+							<div class="col-lg-3 col-md-6 col-sm-12">
+								<div class="sitemap">
+									<h5 class="h5">Tables</h5>
+									<ul>
+										<li><a href="basic-table.html">Basic Tables</a></li>
+										<li><a href="datatable.html">DataTables</a></li>
+									</ul>
+								</div>
+								<div class="sitemap">
+									<h5 class="h5">Calendar</h5>
+									<ul>
+										<li><a href="calendar.html">Calendar</a></li>
+									</ul>
+								</div>
+								<div class="sitemap">
+									<h5 class="h5">Icons</h5>
+									<ul>
+										<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+										<li><a href="foundation.html">Foundation Icons</a></li>
+										<li><a href="ionicons.html">Ionicons Icons</a></li>
+										<li><a href="themify.html">Themify Icons</a></li>
+									</ul>
+								</div>
+								<div class="sitemap">
+									<h5 class="h5">Charts</h5>
+									<ul>
+										<li><a href="highchart.html">Highchart</a></li>
+										<li><a href="knob-chart.html">jQuery Knob</a></li>
+										<li><a href="jvectormap.html">jvectormap</a></li>
+									</ul>
+								</div>
+							</div>
+							<div class="col-lg-3 col-md-6 col-sm-12">
+								<div class="sitemap">
+									<h5 class="h5">UI Elements</h5>
+									<ul>
+										<li><a href="ui-buttons.html">Buttons</a></li>
+										<li><a href="ui-cards.html">Cards</a></li>
+										<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+										<li><a href="ui-modals.html">Modals</a></li>
+										<li><a href="ui-tabs.html">Tabs</a></li>
+										<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+										<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+										<li><a href="ui-notification.html">Notification</a></li>
+										<li><a href="ui-timeline.html">Timeline</a></li>
+										<li><a href="ui-progressbar.html">Progressbar</a></li>
+										<li><a href="ui-typography.html">Typography</a></li>
+										<li><a href="ui-list-group.html">List group</a></li>
+										<li><a href="ui-range-slider.html">Range slider</a></li>
+										<li><a href="ui-carousel.html">Carousel</a></li>
+									</ul>
+								</div>
+							</div>
+							<div class="col-lg-3 col-md-6 col-sm-12">
+								<div class="sitemap">
+									<h5 class="h5">Additional Pages</h5>
+									<ul>
+										<li><a href="video-player.html">Video Player</a></li>
+										<li><a href="login.html">Login</a></li>
+										<li><a href="forgot-password.html">Forgot Password</a></li>
+										<li><a href="reset-password.html">Reset Password</a></li>
+										<li><a href="403.html">403</a></li>
+										<li><a href="404.html">404</a></li>
+										<li><a href="500.html">500</a></li>
+									</ul>
+								</div>
+								<div class="sitemap">
+									<h5 class="h5">Extra Pages</h5>
+									<ul>
+										<li><a href="blank.html">Blank</a></li>
+										<li><a href="contact-directory.html">Contact Directory</a></li>
+										<li><a href="blog.html">Blog</a></li>
+										<li><a href="blog-detail.html">Blog Detail</a></li>
+										<li><a href="product.html">Product</a></li>
+										<li><a href="product-detail.html">Product Detail</a></li>
+										<li><a href="faq.html">FAQ</a></li>
+										<li><a href="profile.html">Profile</a></li>
+										<li><a href="gallery.html">Gallery</a></li>
+										<li><a href="pricing-table.html">Pricing Tables</a></li>
+									</ul>
+								</div>
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-lg-12 col-md-12 col-sm-12">
+								<div class="sitemap">
+									<h5 class="h5">Multi Level Sitemap</h5>
+									<ul>
+										<li><a href="#">Level 1</a></li>
+										<li><a href="#">Level 1</a></li>
+										<li class="child">
+											<h5 class="h5">Level 2</h5>
+											<ul>
+												<li><a href="#">Level 2</a></li>
+												<li><a href="#">Level 2</a></li>
+												<li class="child">
+													<h5 class="h5">Level 3</h5>
+													<ul>
+														<li><a href="#">Level 3</a></li>
+														<li><a href="#">Level 3</a></li>
+													</ul>
+												</li>
+											</ul>
+										</li>
+									</ul>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/sitemap.php b/sitemap.php
deleted file mode 100644
index 4c8d6cc0..00000000
--- a/sitemap.php
+++ /dev/null
@@ -1,179 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Sitemap</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Sitemap</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="mb-30">
-					<div class="pb-20">
-						<div class="row">
-							<div class="col-lg-3 col-md-6 col-sm-12">
-								<div class="sitemap">
-									<h5 class="h5">Home</h5>
-									<ul>
-										<li><a href="index.php">Dashboard style 1</a></li>
-										<li><a href="index2.php">Dashboard style 2</a></li>
-									</ul>
-								</div>
-								<div class="sitemap">
-									<h5 class="h5">Forms</h5>
-									<ul>
-										<li><a href="form-basic.php">Form Basic</a></li>
-										<li><a href="advanced-components.php">Advanced Components</a></li>
-										<li><a href="form-wizard.php">Form Wizard</a></li>
-										<li><a href="html5-editor.php">HTML5 Editor</a></li>
-										<li><a href="form-pickers.php">Form Pickers</a></li>
-										<li><a href="image-cropper.php">Image Cropper</a></li>
-										<li><a href="image-dropzone.php">Image Dropzone</a></li>
-									</ul>
-								</div>
-								<div class="sitemap">
-									<h5 class="h5">Invoice</h5>
-									<ul>
-										<li><a href="invoice.php">Invoice</a></li>
-									</ul>
-								</div>
-								<div class="sitemap">
-									<h5 class="h5">Chat Module</h5>
-									<ul>
-										<li><a href="chat.php">Chat</a></li>
-									</ul>
-								</div>
-							</div>
-							<div class="col-lg-3 col-md-6 col-sm-12">
-								<div class="sitemap">
-									<h5 class="h5">Tables</h5>
-									<ul>
-										<li><a href="basic-table.php">Basic Tables</a></li>
-										<li><a href="datatable.php">DataTables</a></li>
-									</ul>
-								</div>
-								<div class="sitemap">
-									<h5 class="h5">Calendar</h5>
-									<ul>
-										<li><a href="calendar.php">Calendar</a></li>
-									</ul>
-								</div>
-								<div class="sitemap">
-									<h5 class="h5">Icons</h5>
-									<ul>
-										<li><a href="font-awesome.php">FontAwesome Icons</a></li>
-										<li><a href="foundation.php">Foundation Icons</a></li>
-										<li><a href="ionicons.php">Ionicons Icons</a></li>
-										<li><a href="themify.php">Themify Icons</a></li>
-									</ul>
-								</div>
-								<div class="sitemap">
-									<h5 class="h5">Charts</h5>
-									<ul>
-										<li><a href="highchart.php">Highchart</a></li>
-										<li><a href="knob-chart.php">jQuery Knob</a></li>
-										<li><a href="jvectormap.php">jvectormap</a></li>
-									</ul>
-								</div>
-							</div>
-							<div class="col-lg-3 col-md-6 col-sm-12">
-								<div class="sitemap">
-									<h5 class="h5">UI Elements</h5>
-									<ul>
-										<li><a href="ui-buttons.php">Buttons</a></li>
-										<li><a href="ui-cards.php">Cards</a></li>
-										<li><a href="ui-cards-hover.php">Cards Hover</a></li>
-										<li><a href="ui-modals.php">Modals</a></li>
-										<li><a href="ui-tabs.php">Tabs</a></li>
-										<li><a href="ui-tooltip-popover.php">Tooltip &amp; Popover</a></li>
-										<li><a href="ui-sweet-alert.php">Sweet Alert</a></li>
-										<li><a href="ui-notification.php">Notification</a></li>
-										<li><a href="ui-timeline.php">Timeline</a></li>
-										<li><a href="ui-progressbar.php">Progressbar</a></li>
-										<li><a href="ui-typography.php">Typography</a></li>
-										<li><a href="ui-list-group.php">List group</a></li>
-										<li><a href="ui-range-slider.php">Range slider</a></li>
-										<li><a href="ui-carousel.php">Carousel</a></li>
-									</ul>
-								</div>
-							</div>
-							<div class="col-lg-3 col-md-6 col-sm-12">
-								<div class="sitemap">
-									<h5 class="h5">Additional Pages</h5>
-									<ul>
-										<li><a href="video-player.php">Video Player</a></li>
-										<li><a href="login.php">Login</a></li>
-										<li><a href="forgot-password.php">Forgot Password</a></li>
-										<li><a href="reset-password.php">Reset Password</a></li>
-										<li><a href="403.php">403</a></li>
-										<li><a href="404.php">404</a></li>
-										<li><a href="500.php">500</a></li>
-									</ul>
-								</div>
-								<div class="sitemap">
-									<h5 class="h5">Extra Pages</h5>
-									<ul>
-										<li><a href="blank.php">Blank</a></li>
-										<li><a href="contact-directory.php">Contact Directory</a></li>
-										<li><a href="blog.php">Blog</a></li>
-										<li><a href="blog-detail.php">Blog Detail</a></li>
-										<li><a href="product.php">Product</a></li>
-										<li><a href="product-detail.php">Product Detail</a></li>
-										<li><a href="faq.php">FAQ</a></li>
-										<li><a href="profile.php">Profile</a></li>
-										<li><a href="gallery.php">Gallery</a></li>
-										<li><a href="pricing-table.php">Pricing Tables</a></li>
-									</ul>
-								</div>
-							</div>
-						</div>
-						<div class="row">
-							<div class="col-lg-12 col-md-12 col-sm-12">
-								<div class="sitemap">
-									<h5 class="h5">Multi Level Sitemap</h5>
-									<ul>
-										<li><a href="#">Level 1</a></li>
-										<li><a href="#">Level 1</a></li>
-										<li class="child">
-											<h5 class="h5">Level 2</h5>
-											<ul>
-												<li><a href="#">Level 2</a></li>
-												<li><a href="#">Level 2</a></li>
-												<li class="child">
-													<h5 class="h5">Level 3</h5>
-													<ul>
-														<li><a href="#">Level 3</a></li>
-														<li><a href="#">Level 3</a></li>
-													</ul>
-												</li>
-											</ul>
-										</li>
-									</ul>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/src/styles/media.css b/src/styles/media.css
index a0623ac6..14a886e0 100644
--- a/src/styles/media.css
+++ b/src/styles/media.css
@@ -45,6 +45,8 @@
 	.device-usage-chart .width-50-p{width: 100%;}
 }
 @media (max-width: 767px){
+	.header{position: fixed; left: 0; top: 0; -webkit-box-shadow: 0px 5px 25px rgba(0, 0, 0, .1); -moz-box-shadow: 0px 5px 25px rgba(0, 0, 0, .1); box-shadow: 0px 5px 25px rgba(0, 0, 0, .1);}
+	.main-container{padding-top: 80px;}
 	.login-box{padding: 40px 15px;}
 	.login-header .brand-logo a img{max-width: 150px;}
 	/*.main-container{height: auto;}*/
diff --git a/src/styles/style.css b/src/styles/style.css
index fe7e8d34..76da604f 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -874,6 +874,12 @@ table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after,
 table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:after{
 	color: #1b00ff;
 }
+table.dataTable>tbody>tr.child ul.dtr-details{
+	white-space: normal;
+}
+table.dataTable>tbody>tr.child ul.dtr-details .dtr-title{
+	display: block;
+}
 div.dataTables_wrapper div.dataTables_info,
 div.dataTables_wrapper div.dataTables_paginate,
 .dataTables_length,
@@ -1008,9 +1014,9 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
 	-moz-transition: all 0.3s ease-in-out;
 	-o-transition: all 0.3s ease-in-out;
 	transition: all 0.3s ease-in-out;
-	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .06);
-	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .06);
-	box-shadow: 0px 0px 10px rgba(0, 0, 0, .06);
+	-webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, .1);
+	-moz-box-shadow: 0px 0px 25px rgba(0, 0, 0, .1);
+	box-shadow: 0px 0px 25px rgba(0, 0, 0, .1);
 }
 .header-left{
 	display: flex;
@@ -1544,6 +1550,16 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
 	color: #ffffff;
 	background-color: rgba(0, 0, 0, .4);
 }
+.sidebar-menu > ul > li > .dropdown-toggle.active{
+	background-color: rgba(0, 0, 0, .4);
+}
+.sidebar-light .sidebar-menu > ul > li > .dropdown-toggle.active{
+	background-color: #0b132b;
+	color: #ffffff;
+}
+.sidebar-light .sidebar-menu > ul > li > .dropdown-toggle.active .micon{
+	color: #ffffff;
+}
 .sidebar-menu .dropdown-toggle.active, .sidebar-menu .dropdown-toggle.active .micon{
 	color: #ffffff;
 }
diff --git a/themify.php b/themify.html
similarity index 81%
rename from themify.php
rename to themify.html
index 3b644af5..79d1f3f5 100644
--- a/themify.php
+++ b/themify.html
@@ -1,11 +1,452 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<?php include('include/head.php'); ?>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
 	<div class="main-container">
 		<div class="pd-ltr-20 xs-pd-20-10">
 			<div class="min-height-200px">
@@ -17,7 +458,7 @@
 							</div>
 							<nav aria-label="breadcrumb" role="navigation">
 								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
 									<li class="breadcrumb-item active" aria-current="page">Icons</li>
 								</ol>
 							</nav>
@@ -1132,9 +1573,15 @@
 					</div>
 				</div>
 			</div>
-			<?php include('include/footer.php'); ?>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
 		</div>
 	</div>
-	<?php include('include/script.php'); ?>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/third-party-plugins.html b/third-party-plugins.html
new file mode 100644
index 00000000..cc4c7fea
--- /dev/null
+++ b/third-party-plugins.html
@@ -0,0 +1,646 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="src/plugins/datatables/css/dataTables.bootstrap4.min.css">
+	<link rel="stylesheet" type="text/css" href="src/plugins/datatables/css/responsive.bootstrap4.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>Third Party Plugins</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item"><a href="javascript:;">Documentation</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Third Party Plugins</li>
+								</ol>
+							</nav>
+						</div>
+						<div class="col-md-6 col-sm-12 text-right">
+							<div class="dropdown">
+								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+									Menu
+								</a>
+								<div class="dropdown-menu dropdown-menu-right">
+									<a class="dropdown-item" href="introduction.html">Introduction</a>
+									<a class="dropdown-item" href="getting-started.html">Getting Started</a>
+									<a class="dropdown-item" href="color-settings.html">Color Settings</a>
+									<a class="dropdown-item active" href="third-party-plugins.html">Third Party Plugins</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<!-- Simple Datatable start -->
+				<div class="card-box mb-30">
+					<div class="pd-20">
+						<h4 class="text-blue h4">Third Party Plugins</h4>
+						<p class="mb-0">We have used some third party plugins which are has include:</p>
+					</div>
+					<div class="pb-20">
+						<table class="data-table table nowrap">
+							<thead>
+								<tr>
+									<th class="table-plus">Plugins Name</th>
+									<th class="datatable-nosort">More Details</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">air-datepicker</span></td>
+									<td><a target="_blank" class="text-blue" href="http://t1m0n.name/air-datepicker/docs/">http://t1m0n.name/air-datepicker/docs/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">apexcharts</span></td>
+									<td><a target="_blank" class="text-blue" href="https://apexcharts.com/">https://apexcharts.com/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">bootstrap</span></td>
+									<td><a target="_blank" class="text-blue" href="https://getbootstrap.com/">https://getbootstrap.com/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">bootstrap select</span></td>
+									<td><a target="_blank" class="text-blue" href="https://developer.snapappointments.com/bootstrap-select/">https://developer.snapappointments.com/bootstrap-select/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">bootstrap-tagsinput</span></td>
+									<td><a target="_blank" class="text-blue" href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/">https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">Bootstrap TouchSpin</span></td>
+									<td><a target="_blank" class="text-blue" href="https://www.virtuosoft.eu/code/bootstrap-touchspin/">https://www.virtuosoft.eu/code/bootstrap-touchspin/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">bootstrap-wysihtml5</span></td>
+									<td><a target="_blank" class="text-blue" href="https://jhollingworth.github.io/bootstrap-wysihtml5/">https://jhollingworth.github.io/bootstrap-wysihtml5/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">cropperjs</span></td>
+									<td><a target="_blank" class="text-blue" href="https://fengyuanchen.github.io/cropperjs/">https://fengyuanchen.github.io/cropperjs/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">datatables</span></td>
+									<td><a target="_blank" class="text-blue" href="https://datatables.net/">https://datatables.net/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">dropzonejs</span></td>
+									<td><a target="_blank" class="text-blue" href="https://www.dropzonejs.com/">https://www.dropzonejs.com/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">fancybox</span></td>
+									<td><a target="_blank" class="text-blue" href="http://fancyapps.com/fancybox/">http://fancyapps.com/fancybox/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">fullcalendar</span></td>
+									<td><a target="_blank" class="text-blue" href="https://fullcalendar.io/">https://fullcalendar.io/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">Highcharts JS</span></td>
+									<td><a target="_blank" class="text-blue" href="https://www.highcharts.com/">https://www.highcharts.com/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">highlightjs</span></td>
+									<td><a target="_blank" class="text-blue" href="https://highlightjs.org/">https://highlightjs.org/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">Ion.RangeSlider</span></td>
+									<td><a target="_blank" class="text-blue" href="http://ionden.com/a/plugins/ion.rangeSlider/index.html">http://ionden.com/a/plugins/ion.rangeSlider/index.html</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">jquery-asColor</span></td>
+									<td><a target="_blank" class="text-blue" href="/thecreation/jquery-asColor">https://github.com/thecreation/jquery-asColor</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">jquery-asColorPicker</span></td>
+									<td><a target="_blank" class="text-blue" href="/thecreation/jquery-asColorPicker">https://github.com/thecreation/jquery-asColorPicker</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">jquery-asGradient</span></td>
+									<td><a target="_blank" class="text-blue" href="/thecreation/jquery-asGradient">https://github.com/thecreation/jquery-asGradient</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">jQuery Knob</span></td>
+									<td><a target="_blank" class="text-blue" href="http://anthonyterrien.com/knob/">http://anthonyterrien.com/knob/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">jquery-steps</span></td>
+									<td><a target="_blank" class="text-blue" href="http://www.jquery-steps.com">http://www.jquery-steps.com</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">jVectorMap</span></td>
+									<td><a target="_blank" class="text-blue" href="https://jvectormap.com/">https://jvectormap.com/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">malihu jquery custom scrollbar</span></td>
+									<td><a target="_blank" class="text-blue" href="http://manos.malihu.gr/jquery-custom-content-scroller/">http://manos.malihu.gr/jquery-custom-content-scroller/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">plyr</span></td>
+									<td><a target="_blank" class="text-blue" href="https://plyr.io/">https://plyr.io/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">select2</span></td>
+									<td><a target="_blank" class="text-blue" href="https://select2.github.io">https://select2.github.io</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">slick</span></td>
+									<td><a target="_blank" class="text-blue" href="https://kenwheeler.github.io/slick/">https://kenwheeler.github.io/slick/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">sweetalert2</span></td>
+									<td><a target="_blank" class="text-blue" href="https://sweetalert2.github.io/">https://sweetalert2.github.io/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">switchery</span></td>
+									<td><a target="_blank" class="text-blue" href="https://abpetkov.github.io/switchery/">https://abpetkov.github.io/switchery/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">timedropper</span></td>
+									<td><a target="_blank" class="text-blue" href="https://felicegattuso.com/projects/timedropper/">https://felicegattuso.com/projects/timedropper/</a></td>
+								</tr>
+								<tr>
+									<td class="table-plus"><span class="badge badge-pill table-badge">wysihtml5</span></td>
+									<td><a target="_blank" class="text-blue" href="/xing/wysihtml5">https://github.com/xing/wysihtml5</a></td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+				<!-- Simple Datatable End -->
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+	<script src="src/plugins/datatables/js/jquery.dataTables.min.js"></script>
+	<script src="src/plugins/datatables/js/dataTables.bootstrap4.min.js"></script>
+	<script src="src/plugins/datatables/js/dataTables.responsive.min.js"></script>
+	<script src="src/plugins/datatables/js/responsive.bootstrap4.min.js"></script>
+	<!-- buttons for Export datatable -->
+	<script src="src/plugins/datatables/js/dataTables.buttons.min.js"></script>
+	<script src="src/plugins/datatables/js/buttons.bootstrap4.min.js"></script>
+	<script src="src/plugins/datatables/js/buttons.print.min.js"></script>
+	<script src="src/plugins/datatables/js/buttons.html5.min.js"></script>
+	<script src="src/plugins/datatables/js/buttons.flash.min.js"></script>
+	<script src="src/plugins/datatables/js/pdfmake.min.js"></script>
+	<script src="src/plugins/datatables/js/vfs_fonts.js"></script>
+	<!-- Datatable Setting js -->
+	<script src="vendors/scripts/datatable-setting.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/third-party-plugins.php b/third-party-plugins.php
deleted file mode 100644
index e234c006..00000000
--- a/third-party-plugins.php
+++ /dev/null
@@ -1,199 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-	<link rel="stylesheet" type="text/css" href="src/plugins/datatables/css/dataTables.bootstrap4.min.css">
-	<link rel="stylesheet" type="text/css" href="src/plugins/datatables/css/responsive.bootstrap4.min.css">
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>Third Party Plugins</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item"><a href="javascript:;">Documentation</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Third Party Plugins</li>
-								</ol>
-							</nav>
-						</div>
-						<div class="col-md-6 col-sm-12 text-right">
-							<div class="dropdown">
-								<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">
-									Menu
-								</a>
-								<div class="dropdown-menu dropdown-menu-right">
-									<a class="dropdown-item" href="introduction.php">Introduction</a>
-									<a class="dropdown-item" href="getting-started.php">Getting Started</a>
-									<a class="dropdown-item" href="color-settings.php">Color Settings</a>
-									<a class="dropdown-item active" href="third-party-plugins.php">Third Party Plugins</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<!-- Simple Datatable start -->
-				<div class="card-box mb-30">
-					<div class="pd-20">
-						<h4 class="text-blue h4">Third Party Plugins</h4>
-						<p class="mb-0">We have used some third party plugins which are has include:</p>
-					</div>
-					<div class="pb-20">
-						<table class="data-table table nowrap">
-							<thead>
-								<tr>
-									<th class="table-plus">Plugins Name</th>
-									<th class="datatable-nosort">More Details</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">air-datepicker</span></td>
-									<td><a target="_blank" class="text-blue" href="http://t1m0n.name/air-datepicker/docs/">http://t1m0n.name/air-datepicker/docs/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">apexcharts</span></td>
-									<td><a target="_blank" class="text-blue" href="https://apexcharts.com/">https://apexcharts.com/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">bootstrap</span></td>
-									<td><a target="_blank" class="text-blue" href="https://getbootstrap.com/">https://getbootstrap.com/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">bootstrap select</span></td>
-									<td><a target="_blank" class="text-blue" href="https://developer.snapappointments.com/bootstrap-select/">https://developer.snapappointments.com/bootstrap-select/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">bootstrap-tagsinput</span></td>
-									<td><a target="_blank" class="text-blue" href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/">https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">Bootstrap TouchSpin</span></td>
-									<td><a target="_blank" class="text-blue" href="https://www.virtuosoft.eu/code/bootstrap-touchspin/">https://www.virtuosoft.eu/code/bootstrap-touchspin/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">bootstrap-wysihtml5</span></td>
-									<td><a target="_blank" class="text-blue" href="https://jhollingworth.github.io/bootstrap-wysihtml5/">https://jhollingworth.github.io/bootstrap-wysihtml5/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">cropperjs</span></td>
-									<td><a target="_blank" class="text-blue" href="https://fengyuanchen.github.io/cropperjs/">https://fengyuanchen.github.io/cropperjs/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">datatables</span></td>
-									<td><a target="_blank" class="text-blue" href="https://datatables.net/">https://datatables.net/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">dropzonejs</span></td>
-									<td><a target="_blank" class="text-blue" href="https://www.dropzonejs.com/">https://www.dropzonejs.com/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">fancybox</span></td>
-									<td><a target="_blank" class="text-blue" href="http://fancyapps.com/fancybox/">http://fancyapps.com/fancybox/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">fullcalendar</span></td>
-									<td><a target="_blank" class="text-blue" href="https://fullcalendar.io/">https://fullcalendar.io/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">Highcharts JS</span></td>
-									<td><a target="_blank" class="text-blue" href="https://www.highcharts.com/">https://www.highcharts.com/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">highlightjs</span></td>
-									<td><a target="_blank" class="text-blue" href="https://highlightjs.org/">https://highlightjs.org/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">Ion.RangeSlider</span></td>
-									<td><a target="_blank" class="text-blue" href="http://ionden.com/a/plugins/ion.rangeSlider/index.html">http://ionden.com/a/plugins/ion.rangeSlider/index.html</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">jquery-asColor</span></td>
-									<td><a target="_blank" class="text-blue" href="/thecreation/jquery-asColor">https://github.com/thecreation/jquery-asColor</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">jquery-asColorPicker</span></td>
-									<td><a target="_blank" class="text-blue" href="/thecreation/jquery-asColorPicker">https://github.com/thecreation/jquery-asColorPicker</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">jquery-asGradient</span></td>
-									<td><a target="_blank" class="text-blue" href="/thecreation/jquery-asGradient">https://github.com/thecreation/jquery-asGradient</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">jQuery Knob</span></td>
-									<td><a target="_blank" class="text-blue" href="http://anthonyterrien.com/knob/">http://anthonyterrien.com/knob/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">jquery-steps</span></td>
-									<td><a target="_blank" class="text-blue" href="http://www.jquery-steps.com">http://www.jquery-steps.com</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">jVectorMap</span></td>
-									<td><a target="_blank" class="text-blue" href="https://jvectormap.com/">https://jvectormap.com/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">malihu jquery custom scrollbar</span></td>
-									<td><a target="_blank" class="text-blue" href="http://manos.malihu.gr/jquery-custom-content-scroller/">http://manos.malihu.gr/jquery-custom-content-scroller/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">plyr</span></td>
-									<td><a target="_blank" class="text-blue" href="https://plyr.io/">https://plyr.io/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">select2</span></td>
-									<td><a target="_blank" class="text-blue" href="https://select2.github.io">https://select2.github.io</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">slick</span></td>
-									<td><a target="_blank" class="text-blue" href="https://kenwheeler.github.io/slick/">https://kenwheeler.github.io/slick/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">sweetalert2</span></td>
-									<td><a target="_blank" class="text-blue" href="https://sweetalert2.github.io/">https://sweetalert2.github.io/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">switchery</span></td>
-									<td><a target="_blank" class="text-blue" href="https://abpetkov.github.io/switchery/">https://abpetkov.github.io/switchery/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">timedropper</span></td>
-									<td><a target="_blank" class="text-blue" href="https://felicegattuso.com/projects/timedropper/">https://felicegattuso.com/projects/timedropper/</a></td>
-								</tr>
-								<tr>
-									<td class="table-plus"><span class="badge badge-pill table-badge">wysihtml5</span></td>
-									<td><a target="_blank" class="text-blue" href="/xing/wysihtml5">https://github.com/xing/wysihtml5</a></td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-				</div>
-				<!-- Simple Datatable End -->
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-	<script src="src/plugins/datatables/js/jquery.dataTables.min.js"></script>
-	<script src="src/plugins/datatables/js/dataTables.bootstrap4.min.js"></script>
-	<script src="src/plugins/datatables/js/dataTables.responsive.min.js"></script>
-	<script src="src/plugins/datatables/js/responsive.bootstrap4.min.js"></script>
-	<!-- buttons for Export datatable -->
-	<script src="src/plugins/datatables/js/dataTables.buttons.min.js"></script>
-	<script src="src/plugins/datatables/js/buttons.bootstrap4.min.js"></script>
-	<script src="src/plugins/datatables/js/buttons.print.min.js"></script>
-	<script src="src/plugins/datatables/js/buttons.html5.min.js"></script>
-	<script src="src/plugins/datatables/js/buttons.flash.min.js"></script>
-	<script src="src/plugins/datatables/js/pdfmake.min.js"></script>
-	<script src="src/plugins/datatables/js/vfs_fonts.js"></script>
-	<!-- Datatable Setting js -->
-	<script src="vendors/scripts/datatable-setting.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/ui-buttons.html b/ui-buttons.html
new file mode 100644
index 00000000..6bf0e931
--- /dev/null
+++ b/ui-buttons.html
@@ -0,0 +1,723 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Buttons</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Buttons</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="row clearfix">
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-15 text-blue h4">Examples</h4>
+							<p>Bootstrap includes several predefined button styles, each serving its own semantic purpose.</p>
+							<div class="btn-list">
+								<button type="button" class="btn btn-primary">Primary</button>
+								<button type="button" class="btn btn-secondary">Secondary</button>
+								<button type="button" class="btn btn-success">Success</button>
+								<button type="button" class="btn btn-danger">Danger</button>
+								<button type="button" class="btn btn-warning">Warning</button>
+								<button type="button" class="btn btn-info">Info</button>
+								<button type="button" class="btn btn-light">Light</button>
+								<button type="button" class="btn btn-dark">Dark</button>
+								<button type="button" class="btn btn-link">Link</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-15 text-blue h4">Outline buttons</h4>
+							<p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code>.btn-outline-*</code> ones to remove all background images and colors on any button.</p>
+							<div class="btn-list">
+								<button type="button" class="btn btn-outline-primary">Primary</button>
+								<button type="button" class="btn btn-outline-secondary">Secondary</button>
+								<button type="button" class="btn btn-outline-success">Success</button>
+								<button type="button" class="btn btn-outline-danger">Danger</button>
+								<button type="button" class="btn btn-outline-warning">Warning</button>
+								<button type="button" class="btn btn-outline-info">Info</button>
+								<button type="button" class="btn btn-outline-light">Light</button>
+								<button type="button" class="btn btn-outline-dark">Dark</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-15 text-blue h4">Button tags</h4>
+							<p>The <code>.btn</code> classes are designed to be used with the <code>&lt;button&gt;</code> element. However, you can also use these classes on <code>&lt;a&gt;</code> or <code>&lt;input&gt;</code> elements (though some browsers may apply a slightly different rendering).</p>
+							<div class="btn-list">
+								<a class="btn btn-primary" href="#" role="button">Link</a>
+								<button class="btn btn-secondary" type="submit">Button</button>
+								<input class="btn btn-success" type="button" value="Input">
+								<input class="btn btn-primary" type="submit" value="Submit">
+								<input class="btn btn-info" type="reset" value="Reset">
+							</div>
+						</div>
+					</div>
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-15 text-blue h4">Sizes</h4>
+							<p>Fancy larger or smaller buttons? Add <code>.btn-lg</code> or <code>.btn-sm</code> for additional sizes.</p>
+							<div class="btn-list">
+								<button type="button" class="btn btn-primary btn-lg">Large button</button>
+								<button type="button" class="btn btn-secondary btn-lg">Large button</button>
+								<button type="button" class="btn btn-primary btn-sm">Small button</button>
+								<button type="button" class="btn btn-secondary btn-sm">Small button</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-15 text-blue h4">Disabled Buttons</h4>
+							<p>Make buttons look inactive by adding the disabled boolean attribute to any <code>&lt;button&gt;</code> element.</p>
+							<div class="btn-list">
+								<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
+								<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-15 text-blue h4">Disabled Links</h4>
+							<p><code>&lt;a&gt;</code>s don’t support the disabled attribute, so you must add the <code>.disabled</code> class to make it visually appear disabled.</p>
+							<div class="btn-list">
+								<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
+								<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-15 text-blue h4">Block Buttons</h4>
+							<p>Create block level buttons—those that span the full width of a parent—by adding <code>.btn-block</code>.</p>
+							<div class="btn-list">
+								<button type="button" class="btn btn-success btn-lg btn-block">Block level button</button>
+								<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-15 text-blue h4">Toggle states</h4>
+							<p>Add <code>data-toggle="button"</code> to toggle a button’s <code>active</code> state. If you’re pre-toggling a button, you must manually add the <code>.active</code> class and <code>aria-pressed="true"</code> to the <code>&lt;button&gt;</code>.</p>
+							<div class="btn-list">
+								<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Single toggle</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-15 text-blue h4">Checkbox buttons</h4>
+							<p>Bootstrap’s <code>.button</code> styles can be applied to other elements, such as <code>&lt;label&gt;</code>s, to provide checkbox or radio style button toggling. Add <code>data-toggle="buttons"</code> to a <code>.btn-group</code> containing those modified buttons to enable toggling in their respective styles.</p>
+							<div class="btn-group-toggle btn-group" data-toggle="buttons">
+								<label class="btn btn btn-outline-primary active">
+									<input type="checkbox" checked autocomplete="off"> Checked
+								</label>
+								<label class="btn btn btn-outline-primary">
+									<input type="checkbox" checked autocomplete="on"> Check
+								</label>
+								<label class="btn btn btn-outline-primary">
+									<input type="checkbox" checked autocomplete="on"> Check
+								</label>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-15 text-blue h4">radio buttons</h4>
+							<p>Bootstrap’s <code>.button</code> styles can be applied to other elements, such as <code>&lt;label&gt;</code>s, to provide checkbox or radio style button toggling. Add <code>data-toggle="buttons"</code> to a <code>.btn-group</code> containing those modified buttons to enable toggling in their respective styles.</p>
+							<div class="btn-group btn-group-toggle" data-toggle="buttons">
+								<label class="btn btn-outline-secondary active">
+									<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
+								</label>
+								<label class="btn btn-outline-secondary">
+									<input type="radio" name="options" id="option2" autocomplete="off"> Radio
+								</label>
+								<label class="btn btn-outline-secondary">
+									<input type="radio" name="options" id="option3" autocomplete="off"> Radio
+								</label>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-15 text-blue h4">Input With Button Groups</h4>
+							<p>Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly..</p>
+							<div class="btn-toolbar mb-15" role="toolbar" aria-label="Toolbar with button groups">
+								<div class="btn-group mr-2" role="group" aria-label="First group">
+									<button type="button" class="btn btn-outline-primary">1</button>
+									<button type="button" class="btn btn-outline-primary">2</button>
+									<button type="button" class="btn btn-outline-primary">3</button>
+									<button type="button" class="btn btn-outline-primary">4</button>
+								</div>
+							</div>
+							<div class="input-group custom">
+								<div class="input-group-prepend custom">
+									<div class="input-group-text" id="btnGroupAddon">@</div>
+								</div>
+								<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
+							</div>
+						</div>
+					</div>
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-15 text-blue h4">Button Groups</h4>
+							<p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.Make a set of buttons appear vertically stacked rather than horizontally.</p>
+							<div class="row">
+								<div class="col-lg-3 col-md-6 col-sm-12 mb-15">
+									<div class="btn-group-vertical">
+										<button type="button" class="btn btn-light">Top</button>
+										<button type="button" class="btn btn-light">Middle</button>
+										<button type="button" class="btn btn-light">Bottom</button>
+									</div>
+								</div>
+								<div class="col-lg-3 col-md-6 col-sm-12 mb-15">
+									<div class="btn-group-vertical">
+										<button type="button" class="btn btn-light">Button 1</button>
+										<button type="button" class="btn btn-light">Button 2</button>
+										<button type="button" class="btn btn-light dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false"> Button 3 <span class="caret"></span> </button>
+										<div class="dropdown-menu">
+											<a class="dropdown-item" href="#">Dropdown link</a>
+											<a class="dropdown-item" href="#">Dropdown link</a>
+										</div>
+									</div>
+								</div>
+								<div class="col-lg-6 col-md-12 col-sm-12">
+									<div class="btn-group mb-15">
+										<button type="button" class="btn btn-light">1</button>
+										<button type="button" class="btn btn-light">2</button>
+										<button type="button" class="btn btn-success ">3</button>
+										<button type="button" class="btn btn-light">4</button>
+									</div>
+									<div class="btn-group mb-15">
+										<button type="button" class="btn btn-light">5</button>
+										<button type="button" class="btn btn-success ">6</button>
+										<button type="button" class="btn btn-light">7</button>
+									</div>
+									<div class="btn-group mb-15">
+										<button type="button" class="btn btn-light">8</button>
+									</div>
+									<div class="btn-group">
+										<button type="button" class="btn btn-light">1</button>
+										<button type="button" class="btn btn-dark">2</button>
+										<button type="button" class="btn btn-light">3</button>
+										<div class="btn-group dropdown">
+											<button type="button" class="btn btn-light dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button>
+											<div class="dropdown-menu">
+												<a class="dropdown-item" href="#">Dropdown link</a>
+												<a class="dropdown-item" href="#">Dropdown link</a>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-15 text-blue h4">Icon With Label Buttons</h4>
+							<p>button using icon with label. </p>
+							<div class="btn-list">
+								<button type="button" class="btn" data-bgcolor="#3b5998" data-color="#ffffff"><i class="fa fa-facebook"></i> facebook</button>
+								<button type="button" class="btn" data-bgcolor="#1da1f2" data-color="#ffffff"><i class="fa fa-twitter"></i> twitter</button>
+								<button type="button" class="btn" data-bgcolor="#007bb5" data-color="#ffffff"><i class="fa fa-linkedin"></i> linkedin</button>
+								<button type="button" class="btn" data-bgcolor="#f46f30" data-color="#ffffff"><i class="fa fa-instagram"></i> instagram</button>
+								<button type="button" class="btn" data-bgcolor="#c32361" data-color="#ffffff"><i class="fa fa-dribbble"></i> dribbble</button>
+								<button type="button" class="btn" data-bgcolor="#3d464d" data-color="#ffffff"><i class="fa fa-dropbox"></i> dropbox</button>
+								<button type="button" class="btn" data-bgcolor="#db4437" data-color="#ffffff"><i class="fa fa-google-plus"></i> google-plus</button>
+								<button type="button" class="btn" data-bgcolor="#bd081c" data-color="#ffffff"><i class="fa fa-pinterest-p"></i> pinterest</button>
+								<button type="button" class="btn" data-bgcolor="#00aff0" data-color="#ffffff"><i class="fa fa-skype"></i> skype</button>
+								<button type="button" class="btn" data-bgcolor="#00b489" data-color="#ffffff"><i class="fa fa-vine"></i> vine</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-15 text-blue h4">Icon Buttons</h4>
+							<p>button using icon.</p>
+							<div class="btn-list">
+								<button type="button" class="btn" data-bgcolor="#3b5998" data-color="#ffffff"><i class="fa fa-facebook"></i></button>
+								<button type="button" class="btn" data-bgcolor="#1da1f2" data-color="#ffffff"><i class="fa fa-twitter"></i></button>
+								<button type="button" class="btn" data-bgcolor="#007bb5" data-color="#ffffff"><i class="fa fa-linkedin"></i></button>
+								<button type="button" class="btn" data-bgcolor="#f46f30" data-color="#ffffff"><i class="fa fa-instagram"></i></button>
+								<button type="button" class="btn" data-bgcolor="#c32361" data-color="#ffffff"><i class="fa fa-dribbble"></i></button>
+								<button type="button" class="btn" data-bgcolor="#3d464d" data-color="#ffffff"><i class="fa fa-dropbox"></i></button>
+								<button type="button" class="btn" data-bgcolor="#db4437" data-color="#ffffff"><i class="fa fa-google-plus"></i></button>
+								<button type="button" class="btn" data-bgcolor="#bd081c" data-color="#ffffff"><i class="fa fa-pinterest-p"></i></button>
+								<button type="button" class="btn" data-bgcolor="#00aff0" data-color="#ffffff"><i class="fa fa-skype"></i></button>
+								<button type="button" class="btn" data-bgcolor="#00b489" data-color="#ffffff"><i class="fa fa-vine"></i></button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ui-buttons.php b/ui-buttons.php
deleted file mode 100644
index 0ddc7bbd..00000000
--- a/ui-buttons.php
+++ /dev/null
@@ -1,276 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Buttons</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Buttons</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="row clearfix">
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-15 text-blue h4">Examples</h4>
-							<p>Bootstrap includes several predefined button styles, each serving its own semantic purpose.</p>
-							<div class="btn-list">
-								<button type="button" class="btn btn-primary">Primary</button>
-								<button type="button" class="btn btn-secondary">Secondary</button>
-								<button type="button" class="btn btn-success">Success</button>
-								<button type="button" class="btn btn-danger">Danger</button>
-								<button type="button" class="btn btn-warning">Warning</button>
-								<button type="button" class="btn btn-info">Info</button>
-								<button type="button" class="btn btn-light">Light</button>
-								<button type="button" class="btn btn-dark">Dark</button>
-								<button type="button" class="btn btn-link">Link</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-15 text-blue h4">Outline buttons</h4>
-							<p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code>.btn-outline-*</code> ones to remove all background images and colors on any button.</p>
-							<div class="btn-list">
-								<button type="button" class="btn btn-outline-primary">Primary</button>
-								<button type="button" class="btn btn-outline-secondary">Secondary</button>
-								<button type="button" class="btn btn-outline-success">Success</button>
-								<button type="button" class="btn btn-outline-danger">Danger</button>
-								<button type="button" class="btn btn-outline-warning">Warning</button>
-								<button type="button" class="btn btn-outline-info">Info</button>
-								<button type="button" class="btn btn-outline-light">Light</button>
-								<button type="button" class="btn btn-outline-dark">Dark</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-15 text-blue h4">Button tags</h4>
-							<p>The <code>.btn</code> classes are designed to be used with the <code>&lt;button&gt;</code> element. However, you can also use these classes on <code>&lt;a&gt;</code> or <code>&lt;input&gt;</code> elements (though some browsers may apply a slightly different rendering).</p>
-							<div class="btn-list">
-								<a class="btn btn-primary" href="#" role="button">Link</a>
-								<button class="btn btn-secondary" type="submit">Button</button>
-								<input class="btn btn-success" type="button" value="Input">
-								<input class="btn btn-primary" type="submit" value="Submit">
-								<input class="btn btn-info" type="reset" value="Reset">
-							</div>
-						</div>
-					</div>
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-15 text-blue h4">Sizes</h4>
-							<p>Fancy larger or smaller buttons? Add <code>.btn-lg</code> or <code>.btn-sm</code> for additional sizes.</p>
-							<div class="btn-list">
-								<button type="button" class="btn btn-primary btn-lg">Large button</button>
-								<button type="button" class="btn btn-secondary btn-lg">Large button</button>
-								<button type="button" class="btn btn-primary btn-sm">Small button</button>
-								<button type="button" class="btn btn-secondary btn-sm">Small button</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-15 text-blue h4">Disabled Buttons</h4>
-							<p>Make buttons look inactive by adding the disabled boolean attribute to any <code>&lt;button&gt;</code> element.</p>
-							<div class="btn-list">
-								<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
-								<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-15 text-blue h4">Disabled Links</h4>
-							<p><code>&lt;a&gt;</code>s don’t support the disabled attribute, so you must add the <code>.disabled</code> class to make it visually appear disabled.</p>
-							<div class="btn-list">
-								<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
-								<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-15 text-blue h4">Block Buttons</h4>
-							<p>Create block level buttons—those that span the full width of a parent—by adding <code>.btn-block</code>.</p>
-							<div class="btn-list">
-								<button type="button" class="btn btn-success btn-lg btn-block">Block level button</button>
-								<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-15 text-blue h4">Toggle states</h4>
-							<p>Add <code>data-toggle="button"</code> to toggle a button’s <code>active</code> state. If you’re pre-toggling a button, you must manually add the <code>.active</code> class and <code>aria-pressed="true"</code> to the <code>&lt;button&gt;</code>.</p>
-							<div class="btn-list">
-								<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Single toggle</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-15 text-blue h4">Checkbox buttons</h4>
-							<p>Bootstrap’s <code>.button</code> styles can be applied to other elements, such as <code>&lt;label&gt;</code>s, to provide checkbox or radio style button toggling. Add <code>data-toggle="buttons"</code> to a <code>.btn-group</code> containing those modified buttons to enable toggling in their respective styles.</p>
-							<div class="btn-group-toggle btn-group" data-toggle="buttons">
-								<label class="btn btn btn-outline-primary active">
-									<input type="checkbox" checked autocomplete="off"> Checked
-								</label>
-								<label class="btn btn btn-outline-primary">
-									<input type="checkbox" checked autocomplete="on"> Check
-								</label>
-								<label class="btn btn btn-outline-primary">
-									<input type="checkbox" checked autocomplete="on"> Check
-								</label>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-15 text-blue h4">radio buttons</h4>
-							<p>Bootstrap’s <code>.button</code> styles can be applied to other elements, such as <code>&lt;label&gt;</code>s, to provide checkbox or radio style button toggling. Add <code>data-toggle="buttons"</code> to a <code>.btn-group</code> containing those modified buttons to enable toggling in their respective styles.</p>
-							<div class="btn-group btn-group-toggle" data-toggle="buttons">
-								<label class="btn btn-outline-secondary active">
-									<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
-								</label>
-								<label class="btn btn-outline-secondary">
-									<input type="radio" name="options" id="option2" autocomplete="off"> Radio
-								</label>
-								<label class="btn btn-outline-secondary">
-									<input type="radio" name="options" id="option3" autocomplete="off"> Radio
-								</label>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-15 text-blue h4">Input With Button Groups</h4>
-							<p>Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly..</p>
-							<div class="btn-toolbar mb-15" role="toolbar" aria-label="Toolbar with button groups">
-								<div class="btn-group mr-2" role="group" aria-label="First group">
-									<button type="button" class="btn btn-outline-primary">1</button>
-									<button type="button" class="btn btn-outline-primary">2</button>
-									<button type="button" class="btn btn-outline-primary">3</button>
-									<button type="button" class="btn btn-outline-primary">4</button>
-								</div>
-							</div>
-							<div class="input-group custom">
-								<div class="input-group-prepend custom">
-									<div class="input-group-text" id="btnGroupAddon">@</div>
-								</div>
-								<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
-							</div>
-						</div>
-					</div>
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-15 text-blue h4">Button Groups</h4>
-							<p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.Make a set of buttons appear vertically stacked rather than horizontally.</p>
-							<div class="row">
-								<div class="col-lg-3 col-md-6 col-sm-12 mb-15">
-									<div class="btn-group-vertical">
-										<button type="button" class="btn btn-light">Top</button>
-										<button type="button" class="btn btn-light">Middle</button>
-										<button type="button" class="btn btn-light">Bottom</button>
-									</div>
-								</div>
-								<div class="col-lg-3 col-md-6 col-sm-12 mb-15">
-									<div class="btn-group-vertical">
-										<button type="button" class="btn btn-light">Button 1</button>
-										<button type="button" class="btn btn-light">Button 2</button>
-										<button type="button" class="btn btn-light dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false"> Button 3 <span class="caret"></span> </button>
-										<div class="dropdown-menu">
-											<a class="dropdown-item" href="#">Dropdown link</a>
-											<a class="dropdown-item" href="#">Dropdown link</a>
-										</div>
-									</div>
-								</div>
-								<div class="col-lg-6 col-md-12 col-sm-12">
-									<div class="btn-group mb-15">
-										<button type="button" class="btn btn-light">1</button>
-										<button type="button" class="btn btn-light">2</button>
-										<button type="button" class="btn btn-success ">3</button>
-										<button type="button" class="btn btn-light">4</button>
-									</div>
-									<div class="btn-group mb-15">
-										<button type="button" class="btn btn-light">5</button>
-										<button type="button" class="btn btn-success ">6</button>
-										<button type="button" class="btn btn-light">7</button>
-									</div>
-									<div class="btn-group mb-15">
-										<button type="button" class="btn btn-light">8</button>
-									</div>
-									<div class="btn-group">
-										<button type="button" class="btn btn-light">1</button>
-										<button type="button" class="btn btn-dark">2</button>
-										<button type="button" class="btn btn-light">3</button>
-										<div class="btn-group dropdown">
-											<button type="button" class="btn btn-light dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button>
-											<div class="dropdown-menu">
-												<a class="dropdown-item" href="#">Dropdown link</a>
-												<a class="dropdown-item" href="#">Dropdown link</a>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-15 text-blue h4">Icon With Label Buttons</h4>
-							<p>button using icon with label. </p>
-							<div class="btn-list">
-								<button type="button" class="btn" data-bgcolor="#3b5998" data-color="#ffffff"><i class="fa fa-facebook"></i> facebook</button>
-								<button type="button" class="btn" data-bgcolor="#1da1f2" data-color="#ffffff"><i class="fa fa-twitter"></i> twitter</button>
-								<button type="button" class="btn" data-bgcolor="#007bb5" data-color="#ffffff"><i class="fa fa-linkedin"></i> linkedin</button>
-								<button type="button" class="btn" data-bgcolor="#f46f30" data-color="#ffffff"><i class="fa fa-instagram"></i> instagram</button>
-								<button type="button" class="btn" data-bgcolor="#c32361" data-color="#ffffff"><i class="fa fa-dribbble"></i> dribbble</button>
-								<button type="button" class="btn" data-bgcolor="#3d464d" data-color="#ffffff"><i class="fa fa-dropbox"></i> dropbox</button>
-								<button type="button" class="btn" data-bgcolor="#db4437" data-color="#ffffff"><i class="fa fa-google-plus"></i> google-plus</button>
-								<button type="button" class="btn" data-bgcolor="#bd081c" data-color="#ffffff"><i class="fa fa-pinterest-p"></i> pinterest</button>
-								<button type="button" class="btn" data-bgcolor="#00aff0" data-color="#ffffff"><i class="fa fa-skype"></i> skype</button>
-								<button type="button" class="btn" data-bgcolor="#00b489" data-color="#ffffff"><i class="fa fa-vine"></i> vine</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-15 text-blue h4">Icon Buttons</h4>
-							<p>button using icon.</p>
-							<div class="btn-list">
-								<button type="button" class="btn" data-bgcolor="#3b5998" data-color="#ffffff"><i class="fa fa-facebook"></i></button>
-								<button type="button" class="btn" data-bgcolor="#1da1f2" data-color="#ffffff"><i class="fa fa-twitter"></i></button>
-								<button type="button" class="btn" data-bgcolor="#007bb5" data-color="#ffffff"><i class="fa fa-linkedin"></i></button>
-								<button type="button" class="btn" data-bgcolor="#f46f30" data-color="#ffffff"><i class="fa fa-instagram"></i></button>
-								<button type="button" class="btn" data-bgcolor="#c32361" data-color="#ffffff"><i class="fa fa-dribbble"></i></button>
-								<button type="button" class="btn" data-bgcolor="#3d464d" data-color="#ffffff"><i class="fa fa-dropbox"></i></button>
-								<button type="button" class="btn" data-bgcolor="#db4437" data-color="#ffffff"><i class="fa fa-google-plus"></i></button>
-								<button type="button" class="btn" data-bgcolor="#bd081c" data-color="#ffffff"><i class="fa fa-pinterest-p"></i></button>
-								<button type="button" class="btn" data-bgcolor="#00aff0" data-color="#ffffff"><i class="fa fa-skype"></i></button>
-								<button type="button" class="btn" data-bgcolor="#00b489" data-color="#ffffff"><i class="fa fa-vine"></i></button>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/ui-cards-hover.html b/ui-cards-hover.html
new file mode 100644
index 00000000..698a75d1
--- /dev/null
+++ b/ui-cards-hover.html
@@ -0,0 +1,910 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Cards Hover</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">UI Cards Hover</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<!-- Fade-in effect -->
+				<h5 class="h4 text-blue mb-10">Fade-in effect</h5>
+				<p class="mb-30">You can use by default <code>.da-overlay</code></p>
+				<div class="row clearfix">
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo1.jpg" alt="">
+								<div class="da-overlay">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo2.jpg" alt="">
+								<div class="da-overlay">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo3.jpg" alt="">
+								<div class="da-overlay">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo4.jpg" alt="">
+								<div class="da-overlay">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- Slide Left effect -->
+				<h5 class="h4 text-blue mb-10">Slide Left effect</h5>
+				<p class="mb-30">You can use by default <code>.da-overlay .da-slide-left</code></p>
+				<div class="row clearfix">
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo1.jpg" alt="">
+								<div class="da-overlay da-slide-left">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo2.jpg" alt="">
+								<div class="da-overlay da-slide-left">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo3.jpg" alt="">
+								<div class="da-overlay da-slide-left">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo4.jpg" alt="">
+								<div class="da-overlay da-slide-left">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- Slide Right effect -->
+				<h5 class="h4 text-blue mb-10">Slide Right effect</h5>
+				<p class="mb-30">You can use by default <code>.da-overlay .da-slide-right</code></p>
+				<div class="row clearfix">
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo1.jpg" alt="">
+								<div class="da-overlay da-slide-right">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo2.jpg" alt="">
+								<div class="da-overlay da-slide-right">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo3.jpg" alt="">
+								<div class="da-overlay da-slide-right">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo4.jpg" alt="">
+								<div class="da-overlay da-slide-right">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- Slide Top effect -->
+				<h5 class="h4 text-blue mb-10">Slide Top effect</h5>
+				<p class="mb-30">You can use by default <code>.da-overlay .da-slide-top</code></p>
+				<div class="row clearfix">
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo1.jpg" alt="">
+								<div class="da-overlay da-slide-top">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo2.jpg" alt="">
+								<div class="da-overlay da-slide-top">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo3.jpg" alt="">
+								<div class="da-overlay da-slide-top">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo4.jpg" alt="">
+								<div class="da-overlay da-slide-top">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- Slide Bottom effect -->
+				<h5 class="h4 text-blue mb-10">Slide Bottom effect</h5>
+				<p class="mb-30">You can use by default <code>.da-overlay .da-slide-bottom</code></p>
+				<div class="row clearfix">
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo1.jpg" alt="">
+								<div class="da-overlay da-slide-bottom">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo2.jpg" alt="">
+								<div class="da-overlay da-slide-bottom">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo3.jpg" alt="">
+								<div class="da-overlay da-slide-bottom">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="da-card">
+							<div class="da-card-photo">
+								<img src="vendors/images/photo4.jpg" alt="">
+								<div class="da-overlay da-slide-bottom">
+									<div class="da-social">
+										<ul class="clearfix">
+											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
+											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
+											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="da-card-content">
+								<h5 class="h5 mb-10">Don H. Rabon</h5>
+								<p class="mb-0">Lorem ipsum dolor sit amet</p>
+							</div>
+						</div>
+					</div>
+				</div>
+
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ui-cards-hover.php b/ui-cards-hover.php
deleted file mode 100644
index 2b30324f..00000000
--- a/ui-cards-hover.php
+++ /dev/null
@@ -1,463 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Cards Hover</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">UI Cards Hover</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<!-- Fade-in effect -->
-				<h5 class="h4 text-blue mb-10">Fade-in effect</h5>
-				<p class="mb-30">You can use by default <code>.da-overlay</code></p>
-				<div class="row clearfix">
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo1.jpg" alt="">
-								<div class="da-overlay">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo2.jpg" alt="">
-								<div class="da-overlay">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo3.jpg" alt="">
-								<div class="da-overlay">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo4.jpg" alt="">
-								<div class="da-overlay">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<!-- Slide Left effect -->
-				<h5 class="h4 text-blue mb-10">Slide Left effect</h5>
-				<p class="mb-30">You can use by default <code>.da-overlay .da-slide-left</code></p>
-				<div class="row clearfix">
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo1.jpg" alt="">
-								<div class="da-overlay da-slide-left">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo2.jpg" alt="">
-								<div class="da-overlay da-slide-left">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo3.jpg" alt="">
-								<div class="da-overlay da-slide-left">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo4.jpg" alt="">
-								<div class="da-overlay da-slide-left">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<!-- Slide Right effect -->
-				<h5 class="h4 text-blue mb-10">Slide Right effect</h5>
-				<p class="mb-30">You can use by default <code>.da-overlay .da-slide-right</code></p>
-				<div class="row clearfix">
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo1.jpg" alt="">
-								<div class="da-overlay da-slide-right">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo2.jpg" alt="">
-								<div class="da-overlay da-slide-right">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo3.jpg" alt="">
-								<div class="da-overlay da-slide-right">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo4.jpg" alt="">
-								<div class="da-overlay da-slide-right">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<!-- Slide Top effect -->
-				<h5 class="h4 text-blue mb-10">Slide Top effect</h5>
-				<p class="mb-30">You can use by default <code>.da-overlay .da-slide-top</code></p>
-				<div class="row clearfix">
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo1.jpg" alt="">
-								<div class="da-overlay da-slide-top">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo2.jpg" alt="">
-								<div class="da-overlay da-slide-top">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo3.jpg" alt="">
-								<div class="da-overlay da-slide-top">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo4.jpg" alt="">
-								<div class="da-overlay da-slide-top">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<!-- Slide Bottom effect -->
-				<h5 class="h4 text-blue mb-10">Slide Bottom effect</h5>
-				<p class="mb-30">You can use by default <code>.da-overlay .da-slide-bottom</code></p>
-				<div class="row clearfix">
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo1.jpg" alt="">
-								<div class="da-overlay da-slide-bottom">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo2.jpg" alt="">
-								<div class="da-overlay da-slide-bottom">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo3.jpg" alt="">
-								<div class="da-overlay da-slide-bottom">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="da-card">
-							<div class="da-card-photo">
-								<img src="vendors/images/photo4.jpg" alt="">
-								<div class="da-overlay da-slide-bottom">
-									<div class="da-social">
-										<ul class="clearfix">
-											<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-											<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-											<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
-										</ul>
-									</div>
-								</div>
-							</div>
-							<div class="da-card-content">
-								<h5 class="h5 mb-10">Don H. Rabon</h5>
-								<p class="mb-0">Lorem ipsum dolor sit amet</p>
-							</div>
-						</div>
-					</div>
-				</div>
-
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/ui-cards.html b/ui-cards.html
new file mode 100644
index 00000000..2fc13ed1
--- /dev/null
+++ b/ui-cards.html
@@ -0,0 +1,852 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Cards</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Cards</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="row clearfix">
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="card card-box">
+							<img class="card-img-top" src="vendors/images/img2.jpg" alt="Card image cap">
+							<div class="card-body">
+								<h5 class="card-title weight-500">Card title</h5>
+								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+								<a href="#" class="btn btn-primary">Go somewhere</a>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="card card-box">
+							<img class="card-img-top" src="vendors/images/img3.jpg" alt="Card image cap">
+							<div class="card-body">
+								<h5 class="card-title weight-500">Card title</h5>
+								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+							</div>
+							<ul class="list-group list-group-flush">
+								<li class="list-group-item">Cras justo odio</li>
+								<li class="list-group-item">Dapibus ac facilisis in</li>
+								<li class="list-group-item">Vestibulum at eros</li>
+							</ul>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="card card-box">
+							<div class="card-body">
+								<h5 class="card-title weight-500">Card title</h5>
+								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+							</div>
+							<img class="card-img-top" src="vendors/images/img1.jpg" alt="Card image cap">
+							<div class="card-body">
+								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+								<a href="#" class="card-link text-primary">Card link</a>
+								<a href="#" class="card-link text-primary">Another link</a>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
+						<div class="card card-box">
+							<img class="card-img-top" src="vendors/images/img4.jpg" alt="Card image cap">
+							<div class="card-body">
+								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="row clearfix">
+					<div class="col-sm-12 col-md-4 mb-30">
+						<div class="card card-box">
+							<h5 class="card-header weight-500">Featured</h5>
+							<div class="card-body">
+								<h5 class="card-title">Special title treatment</h5>
+								<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+								<a href="#" class="btn btn-primary">Go somewhere</a>
+							</div>
+							<div class="card-footer text-muted">
+								2 days ago
+							</div>
+						</div>
+					</div>
+					<div class="col-sm-12 col-md-4 mb-30">
+						<div class="card card-box">
+							<div class="card-header">
+								Quote
+							</div>
+							<div class="card-body">
+								<blockquote class="blockquote mb-0">
+									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+									<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+								</blockquote>
+							</div>
+						</div>
+					</div>
+					<div class="col-sm-12 col-md-4 mb-30">
+						<div class="card card-box">
+							<div class="card-header">
+								Featured
+							</div>
+							<div class="card-body">
+								<h5 class="card-title">Special title treatment</h5>
+								<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+								<a href="#" class="btn btn-primary">Go somewhere</a>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="row clearfix">
+					<div class="col-sm-12 col-md-12 col-lg-4 mb-30">
+						<div class="card card-box">
+							<img class="card-img-top" src="vendors/images/img4.jpg" alt="Card image cap">
+							<div class="card-body">
+								<h5 class="card-title weight-500">Card title</h5>
+								<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+								<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+							</div>
+						</div>
+					</div>
+					<div class="col-sm-12 col-md-12 col-lg-4 mb-30">
+						<div class="card bg-dark card-box">
+							<img class="card-img" src="vendors/images/img1.jpg" alt="Card image">
+							<div class="card-img-overlay">
+								<h5 class="card-title weight-500">Card title</h5>
+								<p class="card-text">This is a wider card with supporting text below as a natural lead-in.</p>
+								<p class="card-text">Last updated 3 mins ago</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-sm-12 col-md-12 col-lg-4 mb-30">
+						<div class="card card-box">
+							<div class="card-body">
+								<h5 class="card-title weight-500">Card title</h5>
+								<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+								<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+							</div>
+							<img class="card-img-bottom" src="vendors/images/img5.jpg" alt="Card image cap">
+						</div>
+					</div>
+				</div>
+				<div class="row clearfix">
+					<div class="col-sm-12 col-md-4 mb-30">
+						<div class="card card-box">
+							<div class="card-body">
+								<h5 class="card-title">Special title treatment</h5>
+								<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+								<a href="#" class="btn btn-primary">Go somewhere</a>
+							</div>
+						</div>
+					</div>
+					<div class="col-sm-12 col-md-4 mb-30">
+						<div class="card card-box text-center">
+							<div class="card-body">
+								<h5 class="card-title">Special title treatment</h5>
+								<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+								<a href="#" class="btn btn-primary">Go somewhere</a>
+							</div>
+						</div>
+					</div>
+					<div class="col-sm-12 col-md-4 mb-30">
+						<div class="card card-box text-right">
+							<div class="card-body">
+								<h5 class="card-title">Special title treatment</h5>
+								<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+								<a href="#" class="btn btn-primary">Go somewhere</a>
+							</div>
+						</div>
+					</div>
+				</div>
+				<h4 class="h4 text-blue mb-30">Navigation</h4>
+				<div class="row clearfix">
+					<div class="col-sm-12 col-md-6 mb-30">
+						<div class="card card-box text-center">
+							<div class="card-header">
+								<ul class="nav nav-tabs card-header-tabs">
+									<li class="nav-item">
+										<a class="nav-link active" href="#">Active</a>
+									</li>
+									<li class="nav-item">
+										<a class="nav-link" href="#">Link</a>
+									</li>
+									<li class="nav-item">
+										<a class="nav-link disabled" href="#">Disabled</a>
+									</li>
+								</ul>
+							</div>
+							<div class="card-body">
+								<h5 class="card-title">Special title treatment</h5>
+								<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+								<a href="#" class="btn btn-primary">Go somewhere</a>
+							</div>
+						</div>
+					</div>
+					<div class="col-sm-12 col-md-6 mb-30">
+						<div class="card card-box">
+							<div class="card-header">
+								<ul class="nav nav-pills card-header-pills">
+									<li class="nav-item">
+										<a class="nav-link active" href="#">Active</a>
+									</li>
+									<li class="nav-item">
+										<a class="nav-link" href="#">Link</a>
+									</li>
+									<li class="nav-item">
+										<a class="nav-link disabled" href="#">Disabled</a>
+									</li>
+								</ul>
+							</div>
+							<div class="card-body">
+								<h5 class="card-title">Special title treatment</h5>
+								<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+								<a href="#" class="btn btn-primary">Go somewhere</a>
+							</div>
+						</div>
+					</div>
+				</div>
+				<h4 class="h4 text-blue mb-30">Background and color</h4>
+				<div class="row clearfix">
+					<div class="col-md-4 col-sm-12 mb-30">
+						<div class="card text-white bg-primary card-box">
+							<div class="card-header">Header</div>
+							<div class="card-body">
+								<h5 class="card-title text-white">Primary card title</h5>
+								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-4 col-sm-12 mb-30">
+						<div class="card text-white bg-secondary card-box">
+							<div class="card-header">Header</div>
+							<div class="card-body">
+								<h5 class="card-title text-white">Secondary card title</h5>
+								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-4 col-sm-12 mb-30">
+						<div class="card text-white bg-success card-box">
+							<div class="card-header">Header</div>
+							<div class="card-body">
+								<h5 class="card-title text-white">Success card title</h5>
+								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-4 col-sm-12 mb-30">
+						<div class="card text-black bg-warning card-box">
+							<div class="card-header">Header</div>
+							<div class="card-body">
+								<h5 class="card-title">Warning card title</h5>
+								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-4 col-sm-12 mb-30">
+						<div class="card text-white bg-info card-box">
+							<div class="card-header">Header</div>
+							<div class="card-body">
+								<h5 class="card-title text-white">Info card title</h5>
+								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-4 col-sm-12 mb-30">
+						<div class="card text-white bg-dark card-box">
+							<div class="card-header">Header</div>
+							<div class="card-body">
+								<h5 class="card-title text-white">Dark card title</h5>
+								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<h4 class="h4 text-blue mb-30">Card groups</h4>
+				<div class="card-group mb-30">
+					<div class="card card-box">
+						<img class="card-img-top" src="vendors/images/img3.jpg" alt="Card image cap">
+						<div class="card-body">
+							<h5 class="card-title">Card title</h5>
+							<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+						</div>
+					</div>
+					<div class="card card-box">
+						<img class="card-img-top" src="vendors/images/img4.jpg" alt="Card image cap">
+						<div class="card-body">
+							<h5 class="card-title">Card title</h5>
+							<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+						</div>
+					</div>
+					<div class="card card-box">
+						<img class="card-img-top" src="vendors/images/img2.jpg" alt="Card image cap">
+						<div class="card-body">
+							<h5 class="card-title">Card title</h5>
+							<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+						</div>
+					</div>
+				</div>
+				<h4 class="h4 text-blue mb-30">Card decks</h4>
+				<div class="card-deck mb-30">
+					<div class="card">
+						<img class="card-img-top" src="vendors/images/img2.jpg" alt="Card image cap">
+						<div class="card-body">
+							<h5 class="card-title">Card title</h5>
+							<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+						</div>
+					</div>
+					<div class="card">
+						<img class="card-img-top" src="vendors/images/img3.jpg" alt="Card image cap">
+						<div class="card-body">
+							<h5 class="card-title">Card title</h5>
+							<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+						</div>
+					</div>
+					<div class="card">
+						<img class="card-img-top" src="vendors/images/img4.jpg" alt="Card image cap">
+						<div class="card-body">
+							<h5 class="card-title">Card title</h5>
+							<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+						</div>
+					</div>
+				</div>
+				<h4 class="h4 text-blue mb-30">Card columns</h4>
+				<div class="card-columns mb-30">
+					<div class="card card-box">
+						<img class="card-img-top" src="vendors/images/img1.jpg" alt="Card image cap">
+						<div class="card-body">
+							<h5 class="card-title">Card title that wraps to a new line</h5>
+							<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+						</div>
+					</div>
+					<div class="card card-box p-3">
+						<blockquote class="blockquote mb-0 card-body">
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+							<footer class="blockquote-footer">
+								<small class="text-muted">
+									Someone famous in <cite title="Source Title">Source Title</cite>
+								</small>
+							</footer>
+						</blockquote>
+					</div>
+					<div class="card card-box">
+						<img class="card-img-top" src="vendors/images/img2.jpg" alt="Card image cap">
+						<div class="card-body">
+							<h5 class="card-title">Card title</h5>
+							<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+						</div>
+					</div>
+					<div class="card card-box bg-primary text-white text-center p-3">
+						<blockquote class="blockquote mb-0">
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
+							<footer class="blockquote-footer">
+								<small class="text-white">
+									Someone famous in <cite title="Source Title">Source Title</cite>
+								</small>
+							</footer>
+						</blockquote>
+					</div>
+					<div class="card card-box text-center">
+						<div class="card-body">
+							<h5 class="card-title">Card title</h5>
+							<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+						</div>
+					</div>
+					<div class="card card-box">
+						<img class="card-img" src="vendors/images/img3.jpg" alt="Card image">
+					</div>
+					<div class="card card-box p-3 text-right">
+						<blockquote class="blockquote mb-0">
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+							<footer class="blockquote-footer">
+								<small class="text-muted">
+									Someone famous in <cite title="Source Title">Source Title</cite>
+								</small>
+							</footer>
+						</blockquote>
+					</div>
+					<div class="card card-box">
+						<div class="card-body">
+							<h5 class="card-title">Card title</h5>
+							<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ui-cards.php b/ui-cards.php
deleted file mode 100644
index 2a952bf4..00000000
--- a/ui-cards.php
+++ /dev/null
@@ -1,405 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Cards</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Cards</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="row clearfix">
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="card card-box">
-							<img class="card-img-top" src="vendors/images/img2.jpg" alt="Card image cap">
-							<div class="card-body">
-								<h5 class="card-title weight-500">Card title</h5>
-								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-								<a href="#" class="btn btn-primary">Go somewhere</a>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="card card-box">
-							<img class="card-img-top" src="vendors/images/img3.jpg" alt="Card image cap">
-							<div class="card-body">
-								<h5 class="card-title weight-500">Card title</h5>
-								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-							</div>
-							<ul class="list-group list-group-flush">
-								<li class="list-group-item">Cras justo odio</li>
-								<li class="list-group-item">Dapibus ac facilisis in</li>
-								<li class="list-group-item">Vestibulum at eros</li>
-							</ul>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="card card-box">
-							<div class="card-body">
-								<h5 class="card-title weight-500">Card title</h5>
-								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-							</div>
-							<img class="card-img-top" src="vendors/images/img1.jpg" alt="Card image cap">
-							<div class="card-body">
-								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-								<a href="#" class="card-link text-primary">Card link</a>
-								<a href="#" class="card-link text-primary">Another link</a>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 col-md-6 col-sm-12 mb-30">
-						<div class="card card-box">
-							<img class="card-img-top" src="vendors/images/img4.jpg" alt="Card image cap">
-							<div class="card-body">
-								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="row clearfix">
-					<div class="col-sm-12 col-md-4 mb-30">
-						<div class="card card-box">
-							<h5 class="card-header weight-500">Featured</h5>
-							<div class="card-body">
-								<h5 class="card-title">Special title treatment</h5>
-								<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-								<a href="#" class="btn btn-primary">Go somewhere</a>
-							</div>
-							<div class="card-footer text-muted">
-								2 days ago
-							</div>
-						</div>
-					</div>
-					<div class="col-sm-12 col-md-4 mb-30">
-						<div class="card card-box">
-							<div class="card-header">
-								Quote
-							</div>
-							<div class="card-body">
-								<blockquote class="blockquote mb-0">
-									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-									<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
-								</blockquote>
-							</div>
-						</div>
-					</div>
-					<div class="col-sm-12 col-md-4 mb-30">
-						<div class="card card-box">
-							<div class="card-header">
-								Featured
-							</div>
-							<div class="card-body">
-								<h5 class="card-title">Special title treatment</h5>
-								<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-								<a href="#" class="btn btn-primary">Go somewhere</a>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="row clearfix">
-					<div class="col-sm-12 col-md-12 col-lg-4 mb-30">
-						<div class="card card-box">
-							<img class="card-img-top" src="vendors/images/img4.jpg" alt="Card image cap">
-							<div class="card-body">
-								<h5 class="card-title weight-500">Card title</h5>
-								<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-								<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-							</div>
-						</div>
-					</div>
-					<div class="col-sm-12 col-md-12 col-lg-4 mb-30">
-						<div class="card bg-dark card-box">
-							<img class="card-img" src="vendors/images/img1.jpg" alt="Card image">
-							<div class="card-img-overlay">
-								<h5 class="card-title weight-500">Card title</h5>
-								<p class="card-text">This is a wider card with supporting text below as a natural lead-in.</p>
-								<p class="card-text">Last updated 3 mins ago</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-sm-12 col-md-12 col-lg-4 mb-30">
-						<div class="card card-box">
-							<div class="card-body">
-								<h5 class="card-title weight-500">Card title</h5>
-								<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-								<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-							</div>
-							<img class="card-img-bottom" src="vendors/images/img5.jpg" alt="Card image cap">
-						</div>
-					</div>
-				</div>
-				<div class="row clearfix">
-					<div class="col-sm-12 col-md-4 mb-30">
-						<div class="card card-box">
-							<div class="card-body">
-								<h5 class="card-title">Special title treatment</h5>
-								<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-								<a href="#" class="btn btn-primary">Go somewhere</a>
-							</div>
-						</div>
-					</div>
-					<div class="col-sm-12 col-md-4 mb-30">
-						<div class="card card-box text-center">
-							<div class="card-body">
-								<h5 class="card-title">Special title treatment</h5>
-								<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-								<a href="#" class="btn btn-primary">Go somewhere</a>
-							</div>
-						</div>
-					</div>
-					<div class="col-sm-12 col-md-4 mb-30">
-						<div class="card card-box text-right">
-							<div class="card-body">
-								<h5 class="card-title">Special title treatment</h5>
-								<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-								<a href="#" class="btn btn-primary">Go somewhere</a>
-							</div>
-						</div>
-					</div>
-				</div>
-				<h4 class="h4 text-blue mb-30">Navigation</h4>
-				<div class="row clearfix">
-					<div class="col-sm-12 col-md-6 mb-30">
-						<div class="card card-box text-center">
-							<div class="card-header">
-								<ul class="nav nav-tabs card-header-tabs">
-									<li class="nav-item">
-										<a class="nav-link active" href="#">Active</a>
-									</li>
-									<li class="nav-item">
-										<a class="nav-link" href="#">Link</a>
-									</li>
-									<li class="nav-item">
-										<a class="nav-link disabled" href="#">Disabled</a>
-									</li>
-								</ul>
-							</div>
-							<div class="card-body">
-								<h5 class="card-title">Special title treatment</h5>
-								<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-								<a href="#" class="btn btn-primary">Go somewhere</a>
-							</div>
-						</div>
-					</div>
-					<div class="col-sm-12 col-md-6 mb-30">
-						<div class="card card-box">
-							<div class="card-header">
-								<ul class="nav nav-pills card-header-pills">
-									<li class="nav-item">
-										<a class="nav-link active" href="#">Active</a>
-									</li>
-									<li class="nav-item">
-										<a class="nav-link" href="#">Link</a>
-									</li>
-									<li class="nav-item">
-										<a class="nav-link disabled" href="#">Disabled</a>
-									</li>
-								</ul>
-							</div>
-							<div class="card-body">
-								<h5 class="card-title">Special title treatment</h5>
-								<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-								<a href="#" class="btn btn-primary">Go somewhere</a>
-							</div>
-						</div>
-					</div>
-				</div>
-				<h4 class="h4 text-blue mb-30">Background and color</h4>
-				<div class="row clearfix">
-					<div class="col-md-4 col-sm-12 mb-30">
-						<div class="card text-white bg-primary card-box">
-							<div class="card-header">Header</div>
-							<div class="card-body">
-								<h5 class="card-title text-white">Primary card title</h5>
-								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-4 col-sm-12 mb-30">
-						<div class="card text-white bg-secondary card-box">
-							<div class="card-header">Header</div>
-							<div class="card-body">
-								<h5 class="card-title text-white">Secondary card title</h5>
-								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-4 col-sm-12 mb-30">
-						<div class="card text-white bg-success card-box">
-							<div class="card-header">Header</div>
-							<div class="card-body">
-								<h5 class="card-title text-white">Success card title</h5>
-								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-4 col-sm-12 mb-30">
-						<div class="card text-black bg-warning card-box">
-							<div class="card-header">Header</div>
-							<div class="card-body">
-								<h5 class="card-title">Warning card title</h5>
-								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-4 col-sm-12 mb-30">
-						<div class="card text-white bg-info card-box">
-							<div class="card-header">Header</div>
-							<div class="card-body">
-								<h5 class="card-title text-white">Info card title</h5>
-								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-4 col-sm-12 mb-30">
-						<div class="card text-white bg-dark card-box">
-							<div class="card-header">Header</div>
-							<div class="card-body">
-								<h5 class="card-title text-white">Dark card title</h5>
-								<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-							</div>
-						</div>
-					</div>
-				</div>
-				<h4 class="h4 text-blue mb-30">Card groups</h4>
-				<div class="card-group mb-30">
-					<div class="card card-box">
-						<img class="card-img-top" src="vendors/images/img3.jpg" alt="Card image cap">
-						<div class="card-body">
-							<h5 class="card-title">Card title</h5>
-							<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-						</div>
-					</div>
-					<div class="card card-box">
-						<img class="card-img-top" src="vendors/images/img4.jpg" alt="Card image cap">
-						<div class="card-body">
-							<h5 class="card-title">Card title</h5>
-							<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-						</div>
-					</div>
-					<div class="card card-box">
-						<img class="card-img-top" src="vendors/images/img2.jpg" alt="Card image cap">
-						<div class="card-body">
-							<h5 class="card-title">Card title</h5>
-							<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
-							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-						</div>
-					</div>
-				</div>
-				<h4 class="h4 text-blue mb-30">Card decks</h4>
-				<div class="card-deck mb-30">
-					<div class="card">
-						<img class="card-img-top" src="vendors/images/img2.jpg" alt="Card image cap">
-						<div class="card-body">
-							<h5 class="card-title">Card title</h5>
-							<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-						</div>
-					</div>
-					<div class="card">
-						<img class="card-img-top" src="vendors/images/img3.jpg" alt="Card image cap">
-						<div class="card-body">
-							<h5 class="card-title">Card title</h5>
-							<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-						</div>
-					</div>
-					<div class="card">
-						<img class="card-img-top" src="vendors/images/img4.jpg" alt="Card image cap">
-						<div class="card-body">
-							<h5 class="card-title">Card title</h5>
-							<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
-							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-						</div>
-					</div>
-				</div>
-				<h4 class="h4 text-blue mb-30">Card columns</h4>
-				<div class="card-columns mb-30">
-					<div class="card card-box">
-						<img class="card-img-top" src="vendors/images/img1.jpg" alt="Card image cap">
-						<div class="card-body">
-							<h5 class="card-title">Card title that wraps to a new line</h5>
-							<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-						</div>
-					</div>
-					<div class="card card-box p-3">
-						<blockquote class="blockquote mb-0 card-body">
-							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-							<footer class="blockquote-footer">
-								<small class="text-muted">
-									Someone famous in <cite title="Source Title">Source Title</cite>
-								</small>
-							</footer>
-						</blockquote>
-					</div>
-					<div class="card card-box">
-						<img class="card-img-top" src="vendors/images/img2.jpg" alt="Card image cap">
-						<div class="card-body">
-							<h5 class="card-title">Card title</h5>
-							<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-						</div>
-					</div>
-					<div class="card card-box bg-primary text-white text-center p-3">
-						<blockquote class="blockquote mb-0">
-							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
-							<footer class="blockquote-footer">
-								<small class="text-white">
-									Someone famous in <cite title="Source Title">Source Title</cite>
-								</small>
-							</footer>
-						</blockquote>
-					</div>
-					<div class="card card-box text-center">
-						<div class="card-body">
-							<h5 class="card-title">Card title</h5>
-							<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-						</div>
-					</div>
-					<div class="card card-box">
-						<img class="card-img" src="vendors/images/img3.jpg" alt="Card image">
-					</div>
-					<div class="card card-box p-3 text-right">
-						<blockquote class="blockquote mb-0">
-							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-							<footer class="blockquote-footer">
-								<small class="text-muted">
-									Someone famous in <cite title="Source Title">Source Title</cite>
-								</small>
-							</footer>
-						</blockquote>
-					</div>
-					<div class="card card-box">
-						<div class="card-body">
-							<h5 class="card-title">Card title</h5>
-							<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
-							<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/ui-carousel.html b/ui-carousel.html
new file mode 100644
index 00000000..0611621d
--- /dev/null
+++ b/ui-carousel.html
@@ -0,0 +1,770 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Carousel</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">UI Carousel</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-lg-6 col-md-12 col-sm-12 mb-30">
+						<!-- Slides only -->
+						<div class="card-box mb-30">
+							<div class="clearfix pd-20">
+								<div class="pull-left">
+									<h4 class="h4">Slides only</h4>
+								</div>
+								<div class="pull-right">
+									<a href="#carousel1" class="btn btn-primary btn-sm scroll-click" rel="content-y" data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
+								</div>
+							</div>
+							<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
+								<div class="carousel-inner">
+									<div class="carousel-item active">
+										<img class="d-block w-100" src="vendors/images/img2.jpg" alt="First slide">
+									</div>
+									<div class="carousel-item">
+										<img class="d-block w-100" src="vendors/images/img3.jpg" alt="Second slide">
+									</div>
+									<div class="carousel-item">
+										<img class="d-block w-100" src="vendors/images/img4.jpg" alt="Third slide">
+									</div>
+								</div>
+							</div>
+							<div class="collapse collapse-box" id="carousel1">
+								<div class="code-box">
+									<div class="clearfix">
+										<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#copy-carousel1"><i class="fa fa-clipboard"></i> Copy Code</a>
+										<a href="#carousel1" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
+									</div>
+									<pre><code class="xml copy-pre" id="copy-carousel1">
+<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
+	<div class="carousel-inner">
+		<div class="carousel-item active">
+			<img class="d-block w-100" src="vendors/images/img2.jpg" alt="First slide">
+		</div>
+		<div class="carousel-item">
+			<img class="d-block w-100" src="vendors/images/img3.jpg" alt="Second slide">
+		</div>
+		<div class="carousel-item">
+			<img class="d-block w-100" src="vendors/images/img4.jpg" alt="Third slide">
+		</div>
+	</div>
+</div>
+									</code></pre>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- With controls -->
+					<div class="col-lg-6 col-md-12 col-sm-12 mb-30">
+						<div class="card-box mb-30">
+							<div class="clearfix pd-20">
+								<div class="pull-left">
+									<h4 class="h4">With controls</h4>
+								</div>
+								<div class="pull-right">
+									<a href="#carousel2" class="btn btn-primary btn-sm scroll-click" rel="content-y" data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
+								</div>
+							</div>
+							<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
+								<div class="carousel-inner">
+									<div class="carousel-item active">
+										<img class="d-block w-100" src="vendors/images/img2.jpg" alt="First slide">
+									</div>
+									<div class="carousel-item">
+										<img class="d-block w-100" src="vendors/images/img3.jpg" alt="Second slide">
+									</div>
+									<div class="carousel-item">
+										<img class="d-block w-100" src="vendors/images/img4.jpg" alt="Third slide">
+									</div>
+								</div>
+								<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+									<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+									<span class="sr-only">Previous</span>
+								</a>
+								<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+									<span class="carousel-control-next-icon" aria-hidden="true"></span>
+									<span class="sr-only">Next</span>
+								</a>
+							</div>
+							<div class="collapse collapse-box" id="carousel2">
+								<div class="code-box">
+									<div class="clearfix">
+										<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#copy-carousel2"><i class="fa fa-clipboard"></i> Copy Code</a>
+										<a href="#carousel2" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
+									</div>
+									<pre><code class="xml copy-pre" id="copy-carousel2">
+<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
+	<div class="carousel-inner">
+		<div class="carousel-item active">
+			<img class="d-block w-100" src="vendors/images/img2.jpg" alt="First slide">
+		</div>
+		<div class="carousel-item">
+			<img class="d-block w-100" src="vendors/images/img3.jpg" alt="Second slide">
+		</div>
+		<div class="carousel-item">
+			<img class="d-block w-100" src="vendors/images/img4.jpg" alt="Third slide">
+		</div>
+	</div>
+	<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+		<span class="sr-only">Previous</span>
+	</a>
+	<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+		<span class="carousel-control-next-icon" aria-hidden="true"></span>
+		<span class="sr-only">Next</span>
+	</a>
+</div>
+									</code></pre>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- With indicators -->
+					<div class="col-lg-6 col-md-12 col-sm-12 mb-30">
+						<div class="card-box mb-30">
+							<div class="clearfix pd-20">
+								<div class="pull-left">
+									<h4 class="h4">With indicators</h4>
+								</div>
+								<div class="pull-right">
+									<a href="#carousel3" class="btn btn-primary btn-sm scroll-click" rel="content-y" data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
+								</div>
+							</div>
+							<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+								<ol class="carousel-indicators">
+									<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+									<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+									<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+								</ol>
+								<div class="carousel-inner">
+									<div class="carousel-item active">
+										<img class="d-block w-100" src="vendors/images/img3.jpg" alt="First slide">
+									</div>
+									<div class="carousel-item">
+										<img class="d-block w-100" src="vendors/images/img4.jpg" alt="Second slide">
+									</div>
+									<div class="carousel-item">
+										<img class="d-block w-100" src="vendors/images/img5.jpg" alt="Third slide">
+									</div>
+								</div>
+								<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+									<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+									<span class="sr-only">Previous</span>
+								</a>
+								<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+									<span class="carousel-control-next-icon" aria-hidden="true"></span>
+									<span class="sr-only">Next</span>
+								</a>
+							</div>
+							<div class="collapse collapse-box" id="carousel3">
+								<div class="code-box">
+									<div class="clearfix">
+										<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#copy-carousel3"><i class="fa fa-clipboard"></i> Copy Code</a>
+										<a href="#carousel3" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
+									</div>
+									<pre><code class="xml copy-pre" id="copy-carousel3">
+<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+	<ol class="carousel-indicators">
+		<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+		<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+		<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+	</ol>
+	<div class="carousel-inner">
+		<div class="carousel-item active">
+			<img class="d-block w-100" src="vendors/images/img3.jpg" alt="First slide">
+		</div>
+		<div class="carousel-item">
+			<img class="d-block w-100" src="vendors/images/img4.jpg" alt="Second slide">
+		</div>
+		<div class="carousel-item">
+			<img class="d-block w-100" src="vendors/images/img5.jpg" alt="Third slide">
+		</div>
+	</div>
+	<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+		<span class="sr-only">Previous</span>
+	</a>
+	<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+		<span class="carousel-control-next-icon" aria-hidden="true"></span>
+		<span class="sr-only">Next</span>
+	</a>
+</div>
+									</code></pre>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- With captions -->
+					<div class="col-lg-6 col-md-12 col-sm-12 mb-30">
+						<div class="card-box mb-30">
+							<div class="clearfix pd-20">
+								<div class="pull-left">
+									<h4 class="h4">With captions</h4>
+								</div>
+								<div class="pull-right">
+									<a href="#carousel4" class="btn btn-primary btn-sm scroll-click" rel="content-y" data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
+								</div>
+							</div>
+							<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
+								<ol class="carousel-indicators">
+									<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
+									<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
+									<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
+								</ol>
+								<div class="carousel-inner">
+									<div class="carousel-item active">
+										<img class="d-block w-100" src="vendors/images/img1.jpg" alt="First slide" />
+										<div class="carousel-caption d-none d-md-block">
+											<h5 class="color-white">First slide label</h5>
+											<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+										</div>
+									</div>
+									<div class="carousel-item">
+										<img class="d-block w-100" src="vendors/images/img3.jpg" alt="Second slide" />
+										<div class="carousel-caption d-none d-md-block">
+											<h5 class="color-white">Second slide label</h5>
+											<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+										</div>
+									</div>
+									<div class="carousel-item">
+										<img class="d-block w-100" src="vendors/images/img2.jpg" alt="Third slide" />
+										<div class="carousel-caption d-none d-md-block">
+											<h5 class="color-white">Third slide label</h5>
+											<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+										</div>
+									</div>
+								</div>
+								<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
+									<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+									<span class="sr-only">Previous</span>
+								</a>
+								<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
+									<span class="carousel-control-next-icon" aria-hidden="true"></span>
+									<span class="sr-only">Next</span>
+								</a>
+							</div>
+							<div class="collapse collapse-box" id="carousel4">
+								<div class="code-box">
+									<div class="clearfix">
+										<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#copy-carousel4"><i class="fa fa-clipboard"></i> Copy Code</a>
+										<a href="#carousel4" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
+									</div>
+									<pre><code class="xml copy-pre" id="copy-carousel4">
+<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
+	<ol class="carousel-indicators">
+		<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
+		<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
+		<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
+	</ol>
+	<div class="carousel-inner">
+		<div class="carousel-item active">
+			<img class="d-block w-100" src="vendors/images/img1.jpg" alt="First slide" />
+			<div class="carousel-caption d-none d-md-block">
+				<h5 class="color-white">First slide label</h5>
+				<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+			</div>
+		</div>
+		<div class="carousel-item">
+			<img class="d-block w-100" src="vendors/images/img3.jpg" alt="Second slide" />
+			<div class="carousel-caption d-none d-md-block">
+				<h5 class="color-white">Second slide label</h5>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+			</div>
+		</div>
+		<div class="carousel-item">
+			<img class="d-block w-100" src="vendors/images/img2.jpg" alt="Third slide" />
+			<div class="carousel-caption d-none d-md-block">
+				<h5 class="color-white">Third slide label</h5>
+				<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+			</div>
+		</div>
+	</div>
+	<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
+		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+		<span class="sr-only">Previous</span>
+	</a>
+	<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
+		<span class="carousel-control-next-icon" aria-hidden="true"></span>
+		<span class="sr-only">Next</span>
+	</a>
+</div>
+									</code></pre>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ui-carousel.php b/ui-carousel.php
deleted file mode 100644
index 932ede81..00000000
--- a/ui-carousel.php
+++ /dev/null
@@ -1,323 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Carousel</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">UI Carousel</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="row">
-					<div class="col-lg-6 col-md-12 col-sm-12 mb-30">
-						<!-- Slides only -->
-						<div class="card-box mb-30">
-							<div class="clearfix pd-20">
-								<div class="pull-left">
-									<h4 class="h4">Slides only</h4>
-								</div>
-								<div class="pull-right">
-									<a href="#carousel1" class="btn btn-primary btn-sm scroll-click" rel="content-y" data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
-								</div>
-							</div>
-							<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
-								<div class="carousel-inner">
-									<div class="carousel-item active">
-										<img class="d-block w-100" src="vendors/images/img2.jpg" alt="First slide">
-									</div>
-									<div class="carousel-item">
-										<img class="d-block w-100" src="vendors/images/img3.jpg" alt="Second slide">
-									</div>
-									<div class="carousel-item">
-										<img class="d-block w-100" src="vendors/images/img4.jpg" alt="Third slide">
-									</div>
-								</div>
-							</div>
-							<div class="collapse collapse-box" id="carousel1">
-								<div class="code-box">
-									<div class="clearfix">
-										<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#copy-carousel1"><i class="fa fa-clipboard"></i> Copy Code</a>
-										<a href="#carousel1" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
-									</div>
-									<pre><code class="xml copy-pre" id="copy-carousel1">
-<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
-	<div class="carousel-inner">
-		<div class="carousel-item active">
-			<img class="d-block w-100" src="vendors/images/img2.jpg" alt="First slide">
-		</div>
-		<div class="carousel-item">
-			<img class="d-block w-100" src="vendors/images/img3.jpg" alt="Second slide">
-		</div>
-		<div class="carousel-item">
-			<img class="d-block w-100" src="vendors/images/img4.jpg" alt="Third slide">
-		</div>
-	</div>
-</div>
-									</code></pre>
-								</div>
-							</div>
-						</div>
-					</div>
-					<!-- With controls -->
-					<div class="col-lg-6 col-md-12 col-sm-12 mb-30">
-						<div class="card-box mb-30">
-							<div class="clearfix pd-20">
-								<div class="pull-left">
-									<h4 class="h4">With controls</h4>
-								</div>
-								<div class="pull-right">
-									<a href="#carousel2" class="btn btn-primary btn-sm scroll-click" rel="content-y" data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
-								</div>
-							</div>
-							<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
-								<div class="carousel-inner">
-									<div class="carousel-item active">
-										<img class="d-block w-100" src="vendors/images/img2.jpg" alt="First slide">
-									</div>
-									<div class="carousel-item">
-										<img class="d-block w-100" src="vendors/images/img3.jpg" alt="Second slide">
-									</div>
-									<div class="carousel-item">
-										<img class="d-block w-100" src="vendors/images/img4.jpg" alt="Third slide">
-									</div>
-								</div>
-								<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
-									<span class="carousel-control-prev-icon" aria-hidden="true"></span>
-									<span class="sr-only">Previous</span>
-								</a>
-								<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
-									<span class="carousel-control-next-icon" aria-hidden="true"></span>
-									<span class="sr-only">Next</span>
-								</a>
-							</div>
-							<div class="collapse collapse-box" id="carousel2">
-								<div class="code-box">
-									<div class="clearfix">
-										<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#copy-carousel2"><i class="fa fa-clipboard"></i> Copy Code</a>
-										<a href="#carousel2" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
-									</div>
-									<pre><code class="xml copy-pre" id="copy-carousel2">
-<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
-	<div class="carousel-inner">
-		<div class="carousel-item active">
-			<img class="d-block w-100" src="vendors/images/img2.jpg" alt="First slide">
-		</div>
-		<div class="carousel-item">
-			<img class="d-block w-100" src="vendors/images/img3.jpg" alt="Second slide">
-		</div>
-		<div class="carousel-item">
-			<img class="d-block w-100" src="vendors/images/img4.jpg" alt="Third slide">
-		</div>
-	</div>
-	<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
-		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
-		<span class="sr-only">Previous</span>
-	</a>
-	<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
-		<span class="carousel-control-next-icon" aria-hidden="true"></span>
-		<span class="sr-only">Next</span>
-	</a>
-</div>
-									</code></pre>
-								</div>
-							</div>
-						</div>
-					</div>
-					<!-- With indicators -->
-					<div class="col-lg-6 col-md-12 col-sm-12 mb-30">
-						<div class="card-box mb-30">
-							<div class="clearfix pd-20">
-								<div class="pull-left">
-									<h4 class="h4">With indicators</h4>
-								</div>
-								<div class="pull-right">
-									<a href="#carousel3" class="btn btn-primary btn-sm scroll-click" rel="content-y" data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
-								</div>
-							</div>
-							<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
-								<ol class="carousel-indicators">
-									<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
-									<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
-									<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
-								</ol>
-								<div class="carousel-inner">
-									<div class="carousel-item active">
-										<img class="d-block w-100" src="vendors/images/img3.jpg" alt="First slide">
-									</div>
-									<div class="carousel-item">
-										<img class="d-block w-100" src="vendors/images/img4.jpg" alt="Second slide">
-									</div>
-									<div class="carousel-item">
-										<img class="d-block w-100" src="vendors/images/img5.jpg" alt="Third slide">
-									</div>
-								</div>
-								<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
-									<span class="carousel-control-prev-icon" aria-hidden="true"></span>
-									<span class="sr-only">Previous</span>
-								</a>
-								<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
-									<span class="carousel-control-next-icon" aria-hidden="true"></span>
-									<span class="sr-only">Next</span>
-								</a>
-							</div>
-							<div class="collapse collapse-box" id="carousel3">
-								<div class="code-box">
-									<div class="clearfix">
-										<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#copy-carousel3"><i class="fa fa-clipboard"></i> Copy Code</a>
-										<a href="#carousel3" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
-									</div>
-									<pre><code class="xml copy-pre" id="copy-carousel3">
-<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
-	<ol class="carousel-indicators">
-		<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
-		<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
-		<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
-	</ol>
-	<div class="carousel-inner">
-		<div class="carousel-item active">
-			<img class="d-block w-100" src="vendors/images/img3.jpg" alt="First slide">
-		</div>
-		<div class="carousel-item">
-			<img class="d-block w-100" src="vendors/images/img4.jpg" alt="Second slide">
-		</div>
-		<div class="carousel-item">
-			<img class="d-block w-100" src="vendors/images/img5.jpg" alt="Third slide">
-		</div>
-	</div>
-	<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
-		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
-		<span class="sr-only">Previous</span>
-	</a>
-	<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
-		<span class="carousel-control-next-icon" aria-hidden="true"></span>
-		<span class="sr-only">Next</span>
-	</a>
-</div>
-									</code></pre>
-								</div>
-							</div>
-						</div>
-					</div>
-					<!-- With captions -->
-					<div class="col-lg-6 col-md-12 col-sm-12 mb-30">
-						<div class="card-box mb-30">
-							<div class="clearfix pd-20">
-								<div class="pull-left">
-									<h4 class="h4">With captions</h4>
-								</div>
-								<div class="pull-right">
-									<a href="#carousel4" class="btn btn-primary btn-sm scroll-click" rel="content-y" data-toggle="collapse" role="button"><i class="fa fa-code"></i> Source Code</a>
-								</div>
-							</div>
-							<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
-								<ol class="carousel-indicators">
-									<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
-									<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
-									<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
-								</ol>
-								<div class="carousel-inner">
-									<div class="carousel-item active">
-										<img class="d-block w-100" src="vendors/images/img1.jpg" alt="First slide" />
-										<div class="carousel-caption d-none d-md-block">
-											<h5 class="color-white">First slide label</h5>
-											<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-										</div>
-									</div>
-									<div class="carousel-item">
-										<img class="d-block w-100" src="vendors/images/img3.jpg" alt="Second slide" />
-										<div class="carousel-caption d-none d-md-block">
-											<h5 class="color-white">Second slide label</h5>
-											<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-										</div>
-									</div>
-									<div class="carousel-item">
-										<img class="d-block w-100" src="vendors/images/img2.jpg" alt="Third slide" />
-										<div class="carousel-caption d-none d-md-block">
-											<h5 class="color-white">Third slide label</h5>
-											<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
-										</div>
-									</div>
-								</div>
-								<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
-									<span class="carousel-control-prev-icon" aria-hidden="true"></span>
-									<span class="sr-only">Previous</span>
-								</a>
-								<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
-									<span class="carousel-control-next-icon" aria-hidden="true"></span>
-									<span class="sr-only">Next</span>
-								</a>
-							</div>
-							<div class="collapse collapse-box" id="carousel4">
-								<div class="code-box">
-									<div class="clearfix">
-										<a href="javascript:;" class="btn btn-primary btn-sm code-copy pull-left"  data-clipboard-target="#copy-carousel4"><i class="fa fa-clipboard"></i> Copy Code</a>
-										<a href="#carousel4" class="btn btn-primary btn-sm pull-right" rel="content-y"  data-toggle="collapse" role="button"><i class="fa fa-eye-slash"></i> Hide Code</a>
-									</div>
-									<pre><code class="xml copy-pre" id="copy-carousel4">
-<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
-	<ol class="carousel-indicators">
-		<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
-		<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
-		<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
-	</ol>
-	<div class="carousel-inner">
-		<div class="carousel-item active">
-			<img class="d-block w-100" src="vendors/images/img1.jpg" alt="First slide" />
-			<div class="carousel-caption d-none d-md-block">
-				<h5 class="color-white">First slide label</h5>
-				<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-			</div>
-		</div>
-		<div class="carousel-item">
-			<img class="d-block w-100" src="vendors/images/img3.jpg" alt="Second slide" />
-			<div class="carousel-caption d-none d-md-block">
-				<h5 class="color-white">Second slide label</h5>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-			</div>
-		</div>
-		<div class="carousel-item">
-			<img class="d-block w-100" src="vendors/images/img2.jpg" alt="Third slide" />
-			<div class="carousel-caption d-none d-md-block">
-				<h5 class="color-white">Third slide label</h5>
-				<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
-			</div>
-		</div>
-	</div>
-	<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
-		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
-		<span class="sr-only">Previous</span>
-	</a>
-	<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
-		<span class="carousel-control-next-icon" aria-hidden="true"></span>
-		<span class="sr-only">Next</span>
-	</a>
-</div>
-									</code></pre>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/ui-list-group.html b/ui-list-group.html
new file mode 100644
index 00000000..73a5c1ad
--- /dev/null
+++ b/ui-list-group.html
@@ -0,0 +1,615 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>List group</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">UI List group</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-20 h4">Basic List</h4>
+							<ul class="list-group">
+								<li class="list-group-item">Cras justo odio</li>
+								<li class="list-group-item">Dapibus ac facilisis in</li>
+								<li class="list-group-item">Morbi leo risus</li>
+								<li class="list-group-item">Porta ac consectetur ac</li>
+								<li class="list-group-item">Vestibulum at eros</li>
+							</ul>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-20 h4">Links items List</h4>
+							<div class="list-group">
+								<a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
+								<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
+								<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
+								<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
+								<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-20 h4">buttons items List</h4>
+							<div class="list-group">
+								<button type="button" class="list-group-item list-group-item-action ">Cras justo odio</button>
+								<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
+								<button type="button" class="list-group-item list-group-item-action active">Morbi leo risus</button>
+								<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
+								<button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-20 h4">Flush List</h4>
+							<ul class="list-group list-group-flush">
+								<li class="list-group-item">Cras justo odio</li>
+								<li class="list-group-item">Dapibus ac facilisis in</li>
+								<li class="list-group-item">Morbi leo risus</li>
+								<li class="list-group-item">Porta ac consectetur ac</li>
+								<li class="list-group-item">Vestibulum at eros</li>
+							</ul>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-20 h4">Disabled items List</h4>
+							<ul class="list-group">
+								<li class="list-group-item disabled">Cras justo odio</li>
+								<li class="list-group-item">Dapibus ac facilisis in</li>
+								<li class="list-group-item">Morbi leo risus</li>
+								<li class="list-group-item">Porta ac consectetur ac</li>
+								<li class="list-group-item">Vestibulum at eros</li>
+							</ul>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-20 h4">With badges List</h4>
+							<ul class="list-group">
+								<li class="list-group-item d-flex justify-content-between align-items-center">
+									Cras justo odio
+									<span class="badge badge-primary badge-pill">14</span>
+								</li>
+								<li class="list-group-item d-flex justify-content-between align-items-center">
+									Dapibus ac facilisis in
+									<span class="badge badge-primary badge-pill">2</span>
+								</li>
+								<li class="list-group-item d-flex justify-content-between align-items-center">
+									Morbi leo risus
+									<span class="badge badge-primary badge-pill">1</span>
+								</li>
+								<li class="list-group-item d-flex justify-content-between align-items-center">
+									Dapibus ac facilisis in
+									<span class="badge badge-primary badge-pill">5</span>
+								</li>
+								<li class="list-group-item d-flex justify-content-between align-items-center">
+									Morbi leo risus
+									<span class="badge badge-primary badge-pill">7</span>
+								</li>
+							</ul>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-20 h4">Contextual List</h4>
+							<ul class="list-group">
+								<li class="list-group-item">Dapibus ac facilisis in</li>
+								<li class="list-group-item list-group-item-primary">This is a primary list group item</li>
+								<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
+								<li class="list-group-item list-group-item-success">This is a success list group item</li>
+								<li class="list-group-item list-group-item-danger">This is a danger list group item</li>
+								<li class="list-group-item list-group-item-warning">This is a warning list group item</li>
+								<li class="list-group-item list-group-item-info">This is a info list group item</li>
+								<li class="list-group-item list-group-item-dark">This is a dark list group item</li>
+							</ul>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="mb-20 h4">Custom content List</h4>
+							<div class="list-group">
+								<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
+									<h5 class="mb-1 h5 color-white">List group item heading</h5>
+									<div class="pb-1">
+										<small class="weight-600">3 days ago</small>
+									</div>
+									<p class="mb-1 font-14">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+									<small>Donec id elit non mi porta.</small>
+								</a>
+								<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
+									<h5 class="mb-1 h5">List group item heading</h5>
+									<div class="pb-1">
+										<small class="text-muted weight-600">3 days ago</small>
+									</div>
+									<p class="mb-1 font-14">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+									<small class="text-muted">Donec id elit non mi porta.</small>
+								</a>
+								<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
+									<h5 class="mb-1 h5">List group item heading</h5>
+									<div class="pb-1">
+										<small class="text-muted weight-600">3 days ago</small>
+									</div>
+									<p class="mb-1 font-14">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+									<small class="text-muted">Donec id elit non mi porta.</small>
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ui-list-group.php b/ui-list-group.php
deleted file mode 100644
index 8eb50896..00000000
--- a/ui-list-group.php
+++ /dev/null
@@ -1,168 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>List group</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">UI List group</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="row">
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-20 h4">Basic List</h4>
-							<ul class="list-group">
-								<li class="list-group-item">Cras justo odio</li>
-								<li class="list-group-item">Dapibus ac facilisis in</li>
-								<li class="list-group-item">Morbi leo risus</li>
-								<li class="list-group-item">Porta ac consectetur ac</li>
-								<li class="list-group-item">Vestibulum at eros</li>
-							</ul>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-20 h4">Links items List</h4>
-							<div class="list-group">
-								<a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
-								<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-								<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
-								<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
-								<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-20 h4">buttons items List</h4>
-							<div class="list-group">
-								<button type="button" class="list-group-item list-group-item-action ">Cras justo odio</button>
-								<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
-								<button type="button" class="list-group-item list-group-item-action active">Morbi leo risus</button>
-								<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
-								<button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-20 h4">Flush List</h4>
-							<ul class="list-group list-group-flush">
-								<li class="list-group-item">Cras justo odio</li>
-								<li class="list-group-item">Dapibus ac facilisis in</li>
-								<li class="list-group-item">Morbi leo risus</li>
-								<li class="list-group-item">Porta ac consectetur ac</li>
-								<li class="list-group-item">Vestibulum at eros</li>
-							</ul>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-20 h4">Disabled items List</h4>
-							<ul class="list-group">
-								<li class="list-group-item disabled">Cras justo odio</li>
-								<li class="list-group-item">Dapibus ac facilisis in</li>
-								<li class="list-group-item">Morbi leo risus</li>
-								<li class="list-group-item">Porta ac consectetur ac</li>
-								<li class="list-group-item">Vestibulum at eros</li>
-							</ul>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-20 h4">With badges List</h4>
-							<ul class="list-group">
-								<li class="list-group-item d-flex justify-content-between align-items-center">
-									Cras justo odio
-									<span class="badge badge-primary badge-pill">14</span>
-								</li>
-								<li class="list-group-item d-flex justify-content-between align-items-center">
-									Dapibus ac facilisis in
-									<span class="badge badge-primary badge-pill">2</span>
-								</li>
-								<li class="list-group-item d-flex justify-content-between align-items-center">
-									Morbi leo risus
-									<span class="badge badge-primary badge-pill">1</span>
-								</li>
-								<li class="list-group-item d-flex justify-content-between align-items-center">
-									Dapibus ac facilisis in
-									<span class="badge badge-primary badge-pill">5</span>
-								</li>
-								<li class="list-group-item d-flex justify-content-between align-items-center">
-									Morbi leo risus
-									<span class="badge badge-primary badge-pill">7</span>
-								</li>
-							</ul>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-20 h4">Contextual List</h4>
-							<ul class="list-group">
-								<li class="list-group-item">Dapibus ac facilisis in</li>
-								<li class="list-group-item list-group-item-primary">This is a primary list group item</li>
-								<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
-								<li class="list-group-item list-group-item-success">This is a success list group item</li>
-								<li class="list-group-item list-group-item-danger">This is a danger list group item</li>
-								<li class="list-group-item list-group-item-warning">This is a warning list group item</li>
-								<li class="list-group-item list-group-item-info">This is a info list group item</li>
-								<li class="list-group-item list-group-item-dark">This is a dark list group item</li>
-							</ul>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="mb-20 h4">Custom content List</h4>
-							<div class="list-group">
-								<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
-									<h5 class="mb-1 h5 color-white">List group item heading</h5>
-									<div class="pb-1">
-										<small class="weight-600">3 days ago</small>
-									</div>
-									<p class="mb-1 font-14">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
-									<small>Donec id elit non mi porta.</small>
-								</a>
-								<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
-									<h5 class="mb-1 h5">List group item heading</h5>
-									<div class="pb-1">
-										<small class="text-muted weight-600">3 days ago</small>
-									</div>
-									<p class="mb-1 font-14">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
-									<small class="text-muted">Donec id elit non mi porta.</small>
-								</a>
-								<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
-									<h5 class="mb-1 h5">List group item heading</h5>
-									<div class="pb-1">
-										<small class="text-muted weight-600">3 days ago</small>
-									</div>
-									<p class="mb-1 font-14">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
-									<small class="text-muted">Donec id elit non mi porta.</small>
-								</a>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/ui-modals.html b/ui-modals.html
new file mode 100644
index 00000000..adb181fa
--- /dev/null
+++ b/ui-modals.html
@@ -0,0 +1,741 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Modals</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">UI Modals</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="row clearfix">
+					<!-- Large modal -->
+					<div class="col-md-4 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h5 class="h4">Large modal</h5>
+							<a href="#" class="btn-block" data-toggle="modal" data-target="#bd-example-modal-lg" type="button">
+								<img src="vendors/images/modal-img1.jpg" alt="modal">
+							</a>
+							<div class="modal fade bs-example-modal-lg" id="bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+								<div class="modal-dialog modal-lg modal-dialog-centered">
+									<div class="modal-content">
+										<div class="modal-header">
+											<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
+											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+										</div>
+										<div class="modal-body">
+											<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>
+											<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>
+										</div>
+										<div class="modal-footer">
+											<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+											<button type="button" class="btn btn-primary">Save changes</button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- Medium modal -->
+					<div class="col-md-4 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h5 class="h4">Medium modal</h5>
+							<a href="#" class="btn-block" data-toggle="modal" data-target="#Medium-modal" type="button">
+								<img src="vendors/images/modal-img2.jpg" alt="modal">
+							</a>
+							<div class="modal fade" id="Medium-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+								<div class="modal-dialog modal-dialog-centered">
+									<div class="modal-content">
+										<div class="modal-header">
+											<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
+											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+										</div>
+										<div class="modal-body">
+											<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>
+										</div>
+										<div class="modal-footer">
+											<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+											<button type="button" class="btn btn-primary">Save changes</button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- Small modal -->
+					<div class="col-md-4 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h5 class="h4">Small modal</h5>
+							<a href="#" class="btn-block" data-toggle="modal" data-target="#small-modal" type="button">
+								<img src="vendors/images/modal-img3.jpg" alt="modal">
+							</a>
+							<div class="modal fade" id="small-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+								<div class="modal-dialog modal-sm modal-dialog-centered">
+									<div class="modal-content">
+										<div class="modal-header">
+											<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
+											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+										</div>
+										<div class="modal-body">
+											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+											tempor incididunt ut labore et dolore magna aliqua.</p>
+										</div>
+										<div class="modal-footer">
+											<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- Login modal -->
+					<div class="col-md-4 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h5 class="h4">Login modal</h5>
+							<a href="#" class="btn-block" data-backdrop="static" data-toggle="modal" data-target="#login-modal" type="button">
+								<img src="vendors/images/modal-img2.jpg" alt="modal">
+							</a>
+							<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+								<div class="modal-dialog modal-dialog-centered">
+									<div class="modal-content">
+										<div class="login-box bg-white box-shadow border-radius-10">
+											<div class="login-title">
+												<h2 class="text-center text-primary">Login To DeskApp</h2>
+											</div>
+											<form>
+												<div class="select-role">
+													<div class="btn-group btn-group-toggle" data-toggle="buttons">
+														<label class="btn active">
+															<input type="radio" name="options" id="admin">
+															<div class="icon"><img src="vendors/images/briefcase.svg" class="svg" alt=""></div>
+															<span>I'm</span>
+															Manager
+														</label>
+														<label class="btn">
+															<input type="radio" name="options" id="user">
+															<div class="icon"><img src="vendors/images/person.svg" class="svg" alt=""></div>
+															<span>I'm</span>
+															Employee
+														</label>
+													</div>
+												</div>
+												<div class="input-group custom">
+													<input type="text" class="form-control form-control-lg" placeholder="Username">
+													<div class="input-group-append custom">
+														<span class="input-group-text"><i class="icon-copy dw dw-user1"></i></span>
+													</div>
+												</div>
+												<div class="input-group custom">
+													<input type="password" class="form-control form-control-lg" placeholder="**********">
+													<div class="input-group-append custom">
+														<span class="input-group-text"><i class="dw dw-padlock1"></i></span>
+													</div>
+												</div>
+												<div class="row pb-30">
+													<div class="col-6">
+														<div class="custom-control custom-checkbox">
+															<input type="checkbox" class="custom-control-input" id="customCheck1">
+															<label class="custom-control-label" for="customCheck1">Remember</label>
+														</div>
+													</div>
+													<div class="col-6">
+														<div class="forgot-password"><a href="forgot-password.html">Forgot Password</a></div>
+													</div>
+												</div>
+												<div class="row">
+													<div class="col-sm-12">
+														<div class="input-group mb-0">
+															<!--
+																use code for form submit
+																<input class="btn btn-primary btn-lg btn-block" type="submit" value="Sign In">
+															-->
+															<a class="btn btn-primary btn-lg btn-block" href="index.html">Sign In</a>
+														</div>
+													</div>
+												</div>
+											</form>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- Alert modal -->
+					<div class="col-md-4 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h5 class="h4">Alert modal</h5>
+							<a href="#" class="btn-block" data-toggle="modal" data-target="#alert-modal" type="button">
+								<img src="vendors/images/modal-img3.jpg" alt="modal">
+							</a>
+							<div class="modal fade" id="alert-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+								<div class="modal-dialog modal-sm modal-dialog-centered">
+									<div class="modal-content bg-danger text-white">
+										<div class="modal-body text-center">
+											<h3 class="text-white mb-15"><i class="fa fa-exclamation-triangle"></i> Alert</h3>
+											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+											tempor incididunt ut labore et dolore magna aliqua.</p>
+											<button type="button" class="btn btn-light" data-dismiss="modal">Ok</button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- Warning modal -->
+					<div class="col-md-4 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h5 class="h4">Warning modal</h5>
+							<a href="#" class="btn-block" data-toggle="modal" data-target="#warning-modal" type="button">
+								<img src="vendors/images/modal-img3.jpg" alt="modal">
+							</a>
+							<div class="modal fade" id="warning-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+								<div class="modal-dialog modal-sm modal-dialog-centered">
+									<div class="modal-content bg-warning">
+										<div class="modal-body text-center">
+											<h3 class="mb-15"><i class="fa fa-exclamation-triangle"></i> Warning</h3>
+											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+											tempor incididunt ut labore et dolore magna aliqua.</p>
+											<button type="button" class="btn btn-dark" data-dismiss="modal">Ok</button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- Success modal -->
+					<div class="col-md-4 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h5 class="h4">Success modal</h5>
+							<a href="#" class="btn-block" data-toggle="modal" data-target="#success-modal" type="button">
+								<img src="vendors/images/modal-img3.jpg" alt="modal">
+							</a>
+							<div class="modal fade" id="success-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+								<div class="modal-dialog modal-dialog-centered" role="document">
+									<div class="modal-content">
+										<div class="modal-body text-center font-18">
+											<h3 class="mb-20">Form Submitted!</h3>
+											<div class="mb-30 text-center"><img src="vendors/images/success.png"></div>
+											Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+										</div>
+										<div class="modal-footer justify-content-center">
+											<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- Confirmation modal -->
+					<div class="col-md-4 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h5 class="h4">Confirmation modal</h5>
+							<a href="#" class="btn-block" data-toggle="modal" data-target="#confirmation-modal" type="button">
+								<img src="vendors/images/modal-img3.jpg" alt="modal">
+							</a>
+							<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog" aria-hidden="true">
+								<div class="modal-dialog modal-dialog-centered" role="document">
+									<div class="modal-content">
+										<div class="modal-body text-center font-18">
+											<h4 class="padding-top-30 mb-30 weight-500">Are you sure you want to continue?</h4>
+											<div class="padding-bottom-30 row" style="max-width: 170px; margin: 0 auto;">
+												<div class="col-6">
+													<button type="button" class="btn btn-secondary border-radius-100 btn-block confirmation-btn" data-dismiss="modal"><i class="fa fa-times"></i></button>
+													NO
+												</div>
+												<div class="col-6">
+													<button type="button" class="btn btn-primary border-radius-100 btn-block confirmation-btn" data-dismiss="modal"><i class="fa fa-check"></i></button>
+													YES
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ui-modals.php b/ui-modals.php
deleted file mode 100644
index 4c28905b..00000000
--- a/ui-modals.php
+++ /dev/null
@@ -1,294 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Modals</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">UI Modals</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="row clearfix">
-					<!-- Large modal -->
-					<div class="col-md-4 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h5 class="h4">Large modal</h5>
-							<a href="#" class="btn-block" data-toggle="modal" data-target="#bd-example-modal-lg" type="button">
-								<img src="vendors/images/modal-img1.jpg" alt="modal">
-							</a>
-							<div class="modal fade bs-example-modal-lg" id="bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
-								<div class="modal-dialog modal-lg modal-dialog-centered">
-									<div class="modal-content">
-										<div class="modal-header">
-											<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
-											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-										</div>
-										<div class="modal-body">
-											<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>
-											<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>
-										</div>
-										<div class="modal-footer">
-											<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-											<button type="button" class="btn btn-primary">Save changes</button>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<!-- Medium modal -->
-					<div class="col-md-4 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h5 class="h4">Medium modal</h5>
-							<a href="#" class="btn-block" data-toggle="modal" data-target="#Medium-modal" type="button">
-								<img src="vendors/images/modal-img2.jpg" alt="modal">
-							</a>
-							<div class="modal fade" id="Medium-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
-								<div class="modal-dialog modal-dialog-centered">
-									<div class="modal-content">
-										<div class="modal-header">
-											<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
-											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-										</div>
-										<div class="modal-body">
-											<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>
-										</div>
-										<div class="modal-footer">
-											<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-											<button type="button" class="btn btn-primary">Save changes</button>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<!-- Small modal -->
-					<div class="col-md-4 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h5 class="h4">Small modal</h5>
-							<a href="#" class="btn-block" data-toggle="modal" data-target="#small-modal" type="button">
-								<img src="vendors/images/modal-img3.jpg" alt="modal">
-							</a>
-							<div class="modal fade" id="small-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
-								<div class="modal-dialog modal-sm modal-dialog-centered">
-									<div class="modal-content">
-										<div class="modal-header">
-											<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
-											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-										</div>
-										<div class="modal-body">
-											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-											tempor incididunt ut labore et dolore magna aliqua.</p>
-										</div>
-										<div class="modal-footer">
-											<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<!-- Login modal -->
-					<div class="col-md-4 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h5 class="h4">Login modal</h5>
-							<a href="#" class="btn-block" data-backdrop="static" data-toggle="modal" data-target="#login-modal" type="button">
-								<img src="vendors/images/modal-img2.jpg" alt="modal">
-							</a>
-							<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
-								<div class="modal-dialog modal-dialog-centered">
-									<div class="modal-content">
-										<div class="login-box bg-white box-shadow border-radius-10">
-											<div class="login-title">
-												<h2 class="text-center text-primary">Login To DeskApp</h2>
-											</div>
-											<form>
-												<div class="select-role">
-													<div class="btn-group btn-group-toggle" data-toggle="buttons">
-														<label class="btn active">
-															<input type="radio" name="options" id="admin">
-															<div class="icon"><img src="vendors/images/briefcase.svg" class="svg" alt=""></div>
-															<span>I'm</span>
-															Manager
-														</label>
-														<label class="btn">
-															<input type="radio" name="options" id="user">
-															<div class="icon"><img src="vendors/images/person.svg" class="svg" alt=""></div>
-															<span>I'm</span>
-															Employee
-														</label>
-													</div>
-												</div>
-												<div class="input-group custom">
-													<input type="text" class="form-control form-control-lg" placeholder="Username">
-													<div class="input-group-append custom">
-														<span class="input-group-text"><i class="icon-copy dw dw-user1"></i></span>
-													</div>
-												</div>
-												<div class="input-group custom">
-													<input type="password" class="form-control form-control-lg" placeholder="**********">
-													<div class="input-group-append custom">
-														<span class="input-group-text"><i class="dw dw-padlock1"></i></span>
-													</div>
-												</div>
-												<div class="row pb-30">
-													<div class="col-6">
-														<div class="custom-control custom-checkbox">
-															<input type="checkbox" class="custom-control-input" id="customCheck1">
-															<label class="custom-control-label" for="customCheck1">Remember</label>
-														</div>
-													</div>
-													<div class="col-6">
-														<div class="forgot-password"><a href="forgot-password.php">Forgot Password</a></div>
-													</div>
-												</div>
-												<div class="row">
-													<div class="col-sm-12">
-														<div class="input-group mb-0">
-															<!--
-																use code for form submit
-																<input class="btn btn-primary btn-lg btn-block" type="submit" value="Sign In">
-															-->
-															<a class="btn btn-primary btn-lg btn-block" href="index.php">Sign In</a>
-														</div>
-													</div>
-												</div>
-											</form>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<!-- Alert modal -->
-					<div class="col-md-4 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h5 class="h4">Alert modal</h5>
-							<a href="#" class="btn-block" data-toggle="modal" data-target="#alert-modal" type="button">
-								<img src="vendors/images/modal-img3.jpg" alt="modal">
-							</a>
-							<div class="modal fade" id="alert-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
-								<div class="modal-dialog modal-sm modal-dialog-centered">
-									<div class="modal-content bg-danger text-white">
-										<div class="modal-body text-center">
-											<h3 class="text-white mb-15"><i class="fa fa-exclamation-triangle"></i> Alert</h3>
-											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-											tempor incididunt ut labore et dolore magna aliqua.</p>
-											<button type="button" class="btn btn-light" data-dismiss="modal">Ok</button>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<!-- Warning modal -->
-					<div class="col-md-4 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h5 class="h4">Warning modal</h5>
-							<a href="#" class="btn-block" data-toggle="modal" data-target="#warning-modal" type="button">
-								<img src="vendors/images/modal-img3.jpg" alt="modal">
-							</a>
-							<div class="modal fade" id="warning-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
-								<div class="modal-dialog modal-sm modal-dialog-centered">
-									<div class="modal-content bg-warning">
-										<div class="modal-body text-center">
-											<h3 class="mb-15"><i class="fa fa-exclamation-triangle"></i> Warning</h3>
-											<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-											tempor incididunt ut labore et dolore magna aliqua.</p>
-											<button type="button" class="btn btn-dark" data-dismiss="modal">Ok</button>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<!-- Success modal -->
-					<div class="col-md-4 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h5 class="h4">Success modal</h5>
-							<a href="#" class="btn-block" data-toggle="modal" data-target="#success-modal" type="button">
-								<img src="vendors/images/modal-img3.jpg" alt="modal">
-							</a>
-							<div class="modal fade" id="success-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
-								<div class="modal-dialog modal-dialog-centered" role="document">
-									<div class="modal-content">
-										<div class="modal-body text-center font-18">
-											<h3 class="mb-20">Form Submitted!</h3>
-											<div class="mb-30 text-center"><img src="vendors/images/success.png"></div>
-											Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-										</div>
-										<div class="modal-footer justify-content-center">
-											<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<!-- Confirmation modal -->
-					<div class="col-md-4 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h5 class="h4">Confirmation modal</h5>
-							<a href="#" class="btn-block" data-toggle="modal" data-target="#confirmation-modal" type="button">
-								<img src="vendors/images/modal-img3.jpg" alt="modal">
-							</a>
-							<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog" aria-hidden="true">
-								<div class="modal-dialog modal-dialog-centered" role="document">
-									<div class="modal-content">
-										<div class="modal-body text-center font-18">
-											<h4 class="padding-top-30 mb-30 weight-500">Are you sure you want to continue?</h4>
-											<div class="padding-bottom-30 row" style="max-width: 170px; margin: 0 auto;">
-												<div class="col-6">
-													<button type="button" class="btn btn-secondary border-radius-100 btn-block confirmation-btn" data-dismiss="modal"><i class="fa fa-times"></i></button>
-													NO
-												</div>
-												<div class="col-6">
-													<button type="button" class="btn btn-primary border-radius-100 btn-block confirmation-btn" data-dismiss="modal"><i class="fa fa-check"></i></button>
-													YES
-												</div>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/ui-notification.html b/ui-notification.html
new file mode 100644
index 00000000..05af8ed9
--- /dev/null
+++ b/ui-notification.html
@@ -0,0 +1,615 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Notification</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">UI Notification</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+
+				<div class="row clearfix">
+					<div class="col-lg-6 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="h4">Examples</h4>
+							<p class="pb-20">Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight <strong>required</strong> contextual classes <code>(e.g., .alert-success)</code>. For inline dismissal, use the alerts jQuery plugin.</p>
+
+							<div class="alert alert-primary" role="alert">
+								This is a primary alert—check it out!
+							</div>
+							<div class="alert alert-secondary" role="alert">
+								This is a secondary alert—check it out!
+							</div>
+							<div class="alert alert-success" role="alert">
+								This is a success alert—check it out!
+							</div>
+							<div class="alert alert-danger" role="alert">
+								This is a danger alert—check it out!
+							</div>
+							<div class="alert alert-warning" role="alert">
+								This is a warning alert—check it out!
+							</div>
+							<div class="alert alert-info" role="alert">
+								This is a info alert—check it out!
+							</div>
+							<div class="alert alert-light" role="alert">
+								This is a light alert—check it out!
+							</div>
+							<div class="alert alert-dark" role="alert">
+								This is a dark alert—check it out!
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-6 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="h4">Link color</h4>
+							<p class="pb-20">Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
+
+							<div class="alert alert-primary" role="alert">
+								This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+							</div>
+							<div class="alert alert-secondary" role="alert">
+								This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+							</div>
+							<div class="alert alert-success" role="alert">
+								This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+							</div>
+							<div class="alert alert-danger" role="alert">
+								This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+							</div>
+							<div class="alert alert-warning" role="alert">
+								This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+							</div>
+							<div class="alert alert-info" role="alert">
+								This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+							</div>
+							<div class="alert alert-light" role="alert">
+								This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+							</div>
+							<div class="alert alert-dark" role="alert">
+								This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-6 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<h4 class="h4">Dismissing</h4>
+							<p class="pb-20">You can see this in action with a live demo:</p>
+							<div class="alert alert-success alert-dismissible fade show" role="alert">
+								<strong>Holy guacamole!</strong> You should check in on some of those fields below.
+								<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+									<span aria-hidden="true">&times;</span>
+								</button>
+							</div>
+							<div class="alert alert-warning alert-dismissible fade show" role="alert">
+								<strong>Holy guacamole!</strong> You should check in on some of those fields below.
+								<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+									<span aria-hidden="true">&times;</span>
+								</button>
+							</div>
+							<div class="alert alert-primary alert-dismissible fade show" role="alert">
+								<strong>Holy guacamole!</strong> You should check in on some of those fields below.
+								<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+									<span aria-hidden="true">&times;</span>
+								</button>
+							</div>
+							<div class="alert alert-secondary alert-dismissible fade show" role="alert">
+								<strong>Holy guacamole!</strong> You should check in on some of those fields below.
+								<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+									<span aria-hidden="true">&times;</span>
+								</button>
+							</div>
+							<div class="alert alert-info alert-dismissible fade show" role="alert">
+								<strong>Holy guacamole!</strong> You should check in on some of those fields below.
+								<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+									<span aria-hidden="true">&times;</span>
+								</button>
+							</div>
+							<div class="alert alert-dark alert-dismissible fade show" role="alert">
+								<strong>Holy guacamole!</strong> You should check in on some of those fields below.
+								<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+									<span aria-hidden="true">&times;</span>
+								</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-6 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box height-100-p">
+							<div class="alert alert-success" role="alert">
+								<h4 class="alert-heading h4">Well done!</h4>
+								<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+								<hr>
+								<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+							</div>
+							<div class="alert alert-primary" role="alert">
+								<h4 class="alert-heading h4">Well done!</h4>
+								<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+								<hr>
+								<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+							</div>
+							<div class="alert alert-secondary" role="alert">
+								<h4 class="alert-heading h4">Well done!</h4>
+								<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+								<hr>
+								<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+
+	<!-- add sweet alert js & css in footer -->
+	<script src="src/plugins/sweetalert2/sweetalert2.all.js"></script>
+	<link rel="stylesheet" type="text/css" href="src/plugins/sweetalert2/sweetalert2.css">
+	<script src="src/plugins/sweetalert2/sweet-alert.init.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/ui-notification.php b/ui-notification.php
deleted file mode 100644
index 79f4d249..00000000
--- a/ui-notification.php
+++ /dev/null
@@ -1,168 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Notification</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">UI Notification</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-
-				<div class="row clearfix">
-					<div class="col-lg-6 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="h4">Examples</h4>
-							<p class="pb-20">Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight <strong>required</strong> contextual classes <code>(e.g., .alert-success)</code>. For inline dismissal, use the alerts jQuery plugin.</p>
-
-							<div class="alert alert-primary" role="alert">
-								This is a primary alert—check it out!
-							</div>
-							<div class="alert alert-secondary" role="alert">
-								This is a secondary alert—check it out!
-							</div>
-							<div class="alert alert-success" role="alert">
-								This is a success alert—check it out!
-							</div>
-							<div class="alert alert-danger" role="alert">
-								This is a danger alert—check it out!
-							</div>
-							<div class="alert alert-warning" role="alert">
-								This is a warning alert—check it out!
-							</div>
-							<div class="alert alert-info" role="alert">
-								This is a info alert—check it out!
-							</div>
-							<div class="alert alert-light" role="alert">
-								This is a light alert—check it out!
-							</div>
-							<div class="alert alert-dark" role="alert">
-								This is a dark alert—check it out!
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-6 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="h4">Link color</h4>
-							<p class="pb-20">Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
-
-							<div class="alert alert-primary" role="alert">
-								This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-							</div>
-							<div class="alert alert-secondary" role="alert">
-								This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-							</div>
-							<div class="alert alert-success" role="alert">
-								This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-							</div>
-							<div class="alert alert-danger" role="alert">
-								This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-							</div>
-							<div class="alert alert-warning" role="alert">
-								This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-							</div>
-							<div class="alert alert-info" role="alert">
-								This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-							</div>
-							<div class="alert alert-light" role="alert">
-								This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-							</div>
-							<div class="alert alert-dark" role="alert">
-								This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-6 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<h4 class="h4">Dismissing</h4>
-							<p class="pb-20">You can see this in action with a live demo:</p>
-							<div class="alert alert-success alert-dismissible fade show" role="alert">
-								<strong>Holy guacamole!</strong> You should check in on some of those fields below.
-								<button type="button" class="close" data-dismiss="alert" aria-label="Close">
-									<span aria-hidden="true">&times;</span>
-								</button>
-							</div>
-							<div class="alert alert-warning alert-dismissible fade show" role="alert">
-								<strong>Holy guacamole!</strong> You should check in on some of those fields below.
-								<button type="button" class="close" data-dismiss="alert" aria-label="Close">
-									<span aria-hidden="true">&times;</span>
-								</button>
-							</div>
-							<div class="alert alert-primary alert-dismissible fade show" role="alert">
-								<strong>Holy guacamole!</strong> You should check in on some of those fields below.
-								<button type="button" class="close" data-dismiss="alert" aria-label="Close">
-									<span aria-hidden="true">&times;</span>
-								</button>
-							</div>
-							<div class="alert alert-secondary alert-dismissible fade show" role="alert">
-								<strong>Holy guacamole!</strong> You should check in on some of those fields below.
-								<button type="button" class="close" data-dismiss="alert" aria-label="Close">
-									<span aria-hidden="true">&times;</span>
-								</button>
-							</div>
-							<div class="alert alert-info alert-dismissible fade show" role="alert">
-								<strong>Holy guacamole!</strong> You should check in on some of those fields below.
-								<button type="button" class="close" data-dismiss="alert" aria-label="Close">
-									<span aria-hidden="true">&times;</span>
-								</button>
-							</div>
-							<div class="alert alert-dark alert-dismissible fade show" role="alert">
-								<strong>Holy guacamole!</strong> You should check in on some of those fields below.
-								<button type="button" class="close" data-dismiss="alert" aria-label="Close">
-									<span aria-hidden="true">&times;</span>
-								</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-6 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box height-100-p">
-							<div class="alert alert-success" role="alert">
-								<h4 class="alert-heading h4">Well done!</h4>
-								<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
-								<hr>
-								<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
-							</div>
-							<div class="alert alert-primary" role="alert">
-								<h4 class="alert-heading h4">Well done!</h4>
-								<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
-								<hr>
-								<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
-							</div>
-							<div class="alert alert-secondary" role="alert">
-								<h4 class="alert-heading h4">Well done!</h4>
-								<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
-								<hr>
-								<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-
-	<!-- add sweet alert js & css in footer -->
-	<script src="src/plugins/sweetalert2/sweetalert2.all.js"></script>
-	<link rel="stylesheet" type="text/css" href="src/plugins/sweetalert2/sweetalert2.css">
-	<script src="src/plugins/sweetalert2/sweet-alert.init.js"></script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/ui-progressbar.html b/ui-progressbar.html
new file mode 100644
index 00000000..6d1a3b68
--- /dev/null
+++ b/ui-progressbar.html
@@ -0,0 +1,610 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Progress Bar</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">UI Progress Bar</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box">
+							<h5 class="h5 mb-20">Basic Progress</h5>
+							<div class="progress mb-20">
+								<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress mb-20">
+								<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress mb-20">
+								<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress mb-20">
+								<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress">
+								<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box">
+							<h5 class="h5 mb-20">Backgrounds Progress</h5>
+							<div class="progress mb-20">
+								<div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress mb-20">
+								<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress mb-20">
+								<div class="progress-bar bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress mb-20">
+								<div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress">
+								<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box">
+							<h5 class="h5 mb-20">Multiple Progress</h5>
+							<div class="progress mb-20">
+								<div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+								<div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+								<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress mb-20">
+								<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+								<div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress mb-20">
+								<div class="progress-bar bg-warning" role="progressbar" style="width: 40%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+								<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress mb-20">
+								<div class="progress-bar bg-danger" role="progressbar" style="width: 45%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+								<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+								<div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress">
+								<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box">
+							<h5 class="h5 mb-20">Labels Progress</h5>
+							<div class="progress mb-20">
+								<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">50%</div>
+							</div>
+							<div class="progress mb-20">
+								<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+							</div>
+							<div class="progress">
+								<div class="progress-bar bg-info" role="progressbar" style="width: 75%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">75%</div>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box">
+							<h5 class="h5 mb-20">Height Progress</h5>
+							<div class="progress mb-20" style="height: 5px;">
+								<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress mb-20" style="height: 18px;">
+								<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+							</div>
+							<div class="progress" style="height: 25px;">
+								<div class="progress-bar bg-info" role="progressbar" style="width: 75%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">75%</div>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box">
+							<h5 class="h5 mb-20">Animated  Progress</h5>
+							<div class="progress mb-20">
+								<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" style="width: 50%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress mb-20">
+								<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress">
+								<div class="progress-bar bg-info progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box">
+							<h5 class="h5 mb-20">Striped Progress</h5>
+							<div class="progress mb-20">
+								<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress mb-20">
+								<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress mb-20">
+								<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress mb-20">
+								<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+							<div class="progress">
+								<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ui-progressbar.php b/ui-progressbar.php
deleted file mode 100644
index 5e6bc832..00000000
--- a/ui-progressbar.php
+++ /dev/null
@@ -1,163 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Progress Bar</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">UI Progress Bar</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="row">
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box">
-							<h5 class="h5 mb-20">Basic Progress</h5>
-							<div class="progress mb-20">
-								<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress mb-20">
-								<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress mb-20">
-								<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress mb-20">
-								<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress">
-								<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box">
-							<h5 class="h5 mb-20">Backgrounds Progress</h5>
-							<div class="progress mb-20">
-								<div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress mb-20">
-								<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress mb-20">
-								<div class="progress-bar bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress mb-20">
-								<div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress">
-								<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box">
-							<h5 class="h5 mb-20">Multiple Progress</h5>
-							<div class="progress mb-20">
-								<div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
-								<div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
-								<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress mb-20">
-								<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-								<div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress mb-20">
-								<div class="progress-bar bg-warning" role="progressbar" style="width: 40%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-								<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress mb-20">
-								<div class="progress-bar bg-danger" role="progressbar" style="width: 45%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-								<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-								<div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress">
-								<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box">
-							<h5 class="h5 mb-20">Labels Progress</h5>
-							<div class="progress mb-20">
-								<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">50%</div>
-							</div>
-							<div class="progress mb-20">
-								<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
-							</div>
-							<div class="progress">
-								<div class="progress-bar bg-info" role="progressbar" style="width: 75%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">75%</div>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box">
-							<h5 class="h5 mb-20">Height Progress</h5>
-							<div class="progress mb-20" style="height: 5px;">
-								<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress mb-20" style="height: 18px;">
-								<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
-							</div>
-							<div class="progress" style="height: 25px;">
-								<div class="progress-bar bg-info" role="progressbar" style="width: 75%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">75%</div>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box">
-							<h5 class="h5 mb-20">Animated  Progress</h5>
-							<div class="progress mb-20">
-								<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" style="width: 50%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress mb-20">
-								<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress">
-								<div class="progress-bar bg-info progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box">
-							<h5 class="h5 mb-20">Striped Progress</h5>
-							<div class="progress mb-20">
-								<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress mb-20">
-								<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress mb-20">
-								<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress mb-20">
-								<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-							<div class="progress">
-								<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/ui-range-slider.html b/ui-range-slider.html
new file mode 100644
index 00000000..34295ad5
--- /dev/null
+++ b/ui-range-slider.html
@@ -0,0 +1,540 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="src/plugins/ion-rangeslider/css/ion.rangeSlider.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Range slider</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">UI Range slider</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="container pd-0">
+					<div class="pd-20 card-box mb-30">
+						<h4 class="h4 pb-10">Range slider HTML5</h4>
+						<div class="row">
+							<div class="col-md-6 mb-30 mb-md-0">
+								<input id="range_01" />
+							</div>
+							<div class="col-md-6">
+								<input id="range_01_1" />
+							</div>
+						</div>
+					</div>
+					<div class="pd-20 card-box mb-30">
+						<h4 class="h4 pb-10">range and step</h4>
+						<div class="row">
+							<div class="col-md-6 mb-30 mb-md-0">
+								<input id="range_02" />
+							</div>
+							<div class="col-md-6">
+								<input id="range_02_1" />
+							</div>
+						</div>
+					</div>
+					<div class="pd-20 card-box mb-30">
+						<h4 class="h4 pb-10">custom values</h4>
+						<div class="row">
+							<div class="col-md-6 mb-30 mb-md-0">
+								<input id="range_03" />
+							</div>
+							<div class="col-md-6">
+								<input id="range_03_1" />
+							</div>
+						</div>
+					</div>
+					<div class="pd-20 card-box mb-30">
+						<h4 class="h4 pb-10">Prettify visual look of numbers</h4>
+						<div class="row">
+							<div class="col-md-6 mb-30 mb-md-0">
+								<input id="range_04" />
+							</div>
+							<div class="col-md-6">
+								<input id="range_04_1" />
+							</div>
+						</div>
+					</div>
+					<div class="pd-20 card-box mb-30">
+						<h4 class="h4 pb-10">Visual details</h4>
+						<div class="row">
+							<div class="col-md-6 mb-30 mb-md-0">
+								<input id="range_05" />
+							</div>
+							<div class="col-md-6">
+								<input id="range_05_1" />
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+	<script src="src/plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
+	<script src="vendors/scripts/range-slider-setting.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ui-range-slider.php b/ui-range-slider.php
deleted file mode 100644
index 6920b0ad..00000000
--- a/ui-range-slider.php
+++ /dev/null
@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-	<link rel="stylesheet" type="text/css" href="src/plugins/ion-rangeslider/css/ion.rangeSlider.css">
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Range slider</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">UI Range slider</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="container pd-0">
-					<div class="pd-20 card-box mb-30">
-						<h4 class="h4 pb-10">Range slider HTML5</h4>
-						<div class="row">
-							<div class="col-md-6 mb-30 mb-md-0">
-								<input id="range_01" />
-							</div>
-							<div class="col-md-6">
-								<input id="range_01_1" />
-							</div>
-						</div>
-					</div>
-					<div class="pd-20 card-box mb-30">
-						<h4 class="h4 pb-10">range and step</h4>
-						<div class="row">
-							<div class="col-md-6 mb-30 mb-md-0">
-								<input id="range_02" />
-							</div>
-							<div class="col-md-6">
-								<input id="range_02_1" />
-							</div>
-						</div>
-					</div>
-					<div class="pd-20 card-box mb-30">
-						<h4 class="h4 pb-10">custom values</h4>
-						<div class="row">
-							<div class="col-md-6 mb-30 mb-md-0">
-								<input id="range_03" />
-							</div>
-							<div class="col-md-6">
-								<input id="range_03_1" />
-							</div>
-						</div>
-					</div>
-					<div class="pd-20 card-box mb-30">
-						<h4 class="h4 pb-10">Prettify visual look of numbers</h4>
-						<div class="row">
-							<div class="col-md-6 mb-30 mb-md-0">
-								<input id="range_04" />
-							</div>
-							<div class="col-md-6">
-								<input id="range_04_1" />
-							</div>
-						</div>
-					</div>
-					<div class="pd-20 card-box mb-30">
-						<h4 class="h4 pb-10">Visual details</h4>
-						<div class="row">
-							<div class="col-md-6 mb-30 mb-md-0">
-								<input id="range_05" />
-							</div>
-							<div class="col-md-6">
-								<input id="range_05_1" />
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-	<script src="src/plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
-	<script src="vendors/scripts/range-slider-setting.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/ui-sweet-alert.html b/ui-sweet-alert.html
new file mode 100644
index 00000000..023aff9e
--- /dev/null
+++ b/ui-sweet-alert.html
@@ -0,0 +1,601 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="src/plugins/sweetalert2/sweetalert2.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Sweet Alert</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">UI Sweet Alert</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+
+				<div class="row clearfix">
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box text-center height-100-p">
+							<h5 class="pt-20 h5 mb-30">A basic message</h5>
+							<div class="max-width-200 mx-auto">
+								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-basic">Click me</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box text-center height-100-p">
+							<h5 class="pt-20 h5 mb-30">A title with a text under</h5>
+							<div class="max-width-200 mx-auto">
+								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-title">Click me</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box text-center height-100-p">
+							<h5 class="pt-20 h5 mb-30">A success message!</h5>
+							<div class="max-width-200 mx-auto">
+								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-success">Click me</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box text-center height-100-p">
+							<h5 class="pt-20 h5 mb-30">A error message!</h5>
+							<div class="max-width-200 mx-auto">
+								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-error">Click me</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box text-center height-100-p">
+							<h5 class="pt-20 h5 mb-30">A warning message, with a function attached to the "Confirm"-button...</h5>
+							<div class="max-width-200 mx-auto">
+								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-warning">Click me</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box text-center height-100-p">
+							<h5 class="pt-20 h5 mb-30">A custom positioned dialog</h5>
+							<div class="max-width-200 mx-auto">
+								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-custom-position">Click me</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box text-center height-100-p">
+							<h5 class="pt-20 h5 mb-30">By passing a parameter, you can execute something else for "Cancel".</h5>
+							<div class="max-width-200 mx-auto">
+								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-params">Click me</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box text-center height-100-p">
+							<h5 class="pt-20 h5 mb-30">A message with custom Image Header</h5>
+							<div class="max-width-200 mx-auto">
+								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-image">Click me</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box text-center height-100-p">
+							<h5 class="pt-20 h5 mb-30">A message with auto close timer</h5>
+							<div class="max-width-200 mx-auto">
+								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-close">Click me</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box text-center height-100-p">
+							<h5 class="pt-20 h5 mb-30">Custom HTML description and buttons</h5>
+							<div class="max-width-200 mx-auto">
+								<button type="button" class="btn mb-20 btn-primary btn-block" id="custom-html-alert">Click me</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box text-center height-100-p">
+							<h5 class="pt-20 h5 mb-30">A message with custom width, padding and background</h5>
+							<div class="max-width-200 mx-auto">
+								<button type="button" class="btn mb-20 btn-primary btn-block" id="custom-padding-width-alert">Click me</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box text-center height-100-p">
+							<h5 class="pt-20 h5 mb-30">Ajax request example</h5>
+							<div class="max-width-200 mx-auto">
+								<button type="button" class="btn mb-20 btn-primary btn-block" id="ajax-alert">Click me</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box text-center height-100-p">
+							<h5 class="pt-20 h5 mb-30">Chaining modals (queue) example</h5>
+							<div class="max-width-200 mx-auto">
+								<button type="button" class="btn mb-20 btn-primary btn-block" id="chaining-alert">Click me</button>
+							</div>
+						</div>
+					</div>
+					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box text-center height-100-p">
+							<h5 class="pt-20 h5 mb-30">Dynamic queue example</h5>
+							<div class="max-width-200 mx-auto">
+								<button type="button" class="btn mb-20 btn-primary btn-block" id="dynamic-alert">Click me</button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+
+	<!-- add sweet alert js & css in footer -->
+	<script src="src/plugins/sweetalert2/sweetalert2.all.js"></script>
+	<script src="src/plugins/sweetalert2/sweet-alert.init.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/ui-sweet-alert.php b/ui-sweet-alert.php
deleted file mode 100644
index 653e348c..00000000
--- a/ui-sweet-alert.php
+++ /dev/null
@@ -1,154 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-	<link rel="stylesheet" type="text/css" href="src/plugins/sweetalert2/sweetalert2.css">
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Sweet Alert</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">UI Sweet Alert</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-
-				<div class="row clearfix">
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box text-center height-100-p">
-							<h5 class="pt-20 h5 mb-30">A basic message</h5>
-							<div class="max-width-200 mx-auto">
-								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-basic">Click me</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box text-center height-100-p">
-							<h5 class="pt-20 h5 mb-30">A title with a text under</h5>
-							<div class="max-width-200 mx-auto">
-								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-title">Click me</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box text-center height-100-p">
-							<h5 class="pt-20 h5 mb-30">A success message!</h5>
-							<div class="max-width-200 mx-auto">
-								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-success">Click me</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box text-center height-100-p">
-							<h5 class="pt-20 h5 mb-30">A error message!</h5>
-							<div class="max-width-200 mx-auto">
-								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-error">Click me</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box text-center height-100-p">
-							<h5 class="pt-20 h5 mb-30">A warning message, with a function attached to the "Confirm"-button...</h5>
-							<div class="max-width-200 mx-auto">
-								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-warning">Click me</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box text-center height-100-p">
-							<h5 class="pt-20 h5 mb-30">A custom positioned dialog</h5>
-							<div class="max-width-200 mx-auto">
-								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-custom-position">Click me</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box text-center height-100-p">
-							<h5 class="pt-20 h5 mb-30">By passing a parameter, you can execute something else for "Cancel".</h5>
-							<div class="max-width-200 mx-auto">
-								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-params">Click me</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box text-center height-100-p">
-							<h5 class="pt-20 h5 mb-30">A message with custom Image Header</h5>
-							<div class="max-width-200 mx-auto">
-								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-image">Click me</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box text-center height-100-p">
-							<h5 class="pt-20 h5 mb-30">A message with auto close timer</h5>
-							<div class="max-width-200 mx-auto">
-								<button type="button" class="btn mb-20 btn-primary btn-block" id="sa-close">Click me</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box text-center height-100-p">
-							<h5 class="pt-20 h5 mb-30">Custom HTML description and buttons</h5>
-							<div class="max-width-200 mx-auto">
-								<button type="button" class="btn mb-20 btn-primary btn-block" id="custom-html-alert">Click me</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box text-center height-100-p">
-							<h5 class="pt-20 h5 mb-30">A message with custom width, padding and background</h5>
-							<div class="max-width-200 mx-auto">
-								<button type="button" class="btn mb-20 btn-primary btn-block" id="custom-padding-width-alert">Click me</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box text-center height-100-p">
-							<h5 class="pt-20 h5 mb-30">Ajax request example</h5>
-							<div class="max-width-200 mx-auto">
-								<button type="button" class="btn mb-20 btn-primary btn-block" id="ajax-alert">Click me</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box text-center height-100-p">
-							<h5 class="pt-20 h5 mb-30">Chaining modals (queue) example</h5>
-							<div class="max-width-200 mx-auto">
-								<button type="button" class="btn mb-20 btn-primary btn-block" id="chaining-alert">Click me</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-4 col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box text-center height-100-p">
-							<h5 class="pt-20 h5 mb-30">Dynamic queue example</h5>
-							<div class="max-width-200 mx-auto">
-								<button type="button" class="btn mb-20 btn-primary btn-block" id="dynamic-alert">Click me</button>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-
-	<!-- add sweet alert js & css in footer -->
-	<script src="src/plugins/sweetalert2/sweetalert2.all.js"></script>
-	<script src="src/plugins/sweetalert2/sweet-alert.init.js"></script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/ui-tabs.php b/ui-tabs.html
similarity index 53%
rename from ui-tabs.php
rename to ui-tabs.html
index 9041abcb..ef040b15 100644
--- a/ui-tabs.php
+++ b/ui-tabs.html
@@ -1,11 +1,452 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<?php include('include/head.php'); ?>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
 	<div class="main-container">
 		<div class="pd-ltr-20 xs-pd-20-10">
 			<div class="min-height-200px">
@@ -17,7 +458,7 @@
 							</div>
 							<nav aria-label="breadcrumb" role="navigation">
 								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
 									<li class="breadcrumb-item active" aria-current="page">UI Tabs</li>
 								</ol>
 							</nav>
@@ -332,9 +773,15 @@
 					</div>
 				</div>
 			</div>
-			<?php include('include/footer.php'); ?>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
 		</div>
 	</div>
-	<?php include('include/script.php'); ?>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/ui-timeline.html b/ui-timeline.html
new file mode 100644
index 00000000..67237dbe
--- /dev/null
+++ b/ui-timeline.html
@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Timeline</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">UI Timeline</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="container pd-0">
+					<div class="timeline mb-30">
+						<ul>
+							<li>
+								<div class="timeline-date">
+									15 Jan 2020
+								</div>
+								<div class="timeline-desc card-box">
+									<div class="pd-20">
+										<h4 class="mb-10 h4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
+										<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>
+									</div>
+								</div>
+							</li>
+							<li>
+								<div class="timeline-date">
+									14 Jan 2020
+								</div>
+								<div class="timeline-desc card-box">
+									<div class="pd-20">
+										<h4 class="mb-10 h4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
+										<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>
+										<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>
+									</div>
+								</div>
+							</li>
+							<li>
+								<div class="timeline-date">
+									13 Jan 2020
+								</div>
+								<div class="timeline-desc card-box">
+									<div class="card card-box">
+										<img class="card-img-top" src="vendors/images/img2.jpg" alt="Card image cap">
+										<div class="card-body">
+											<h5 class="card-title weight-500">Card title</h5>
+											<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+											<a href="#" class="btn btn-primary">Go somewhere</a>
+										</div>
+									</div>
+								</div>
+							</li>
+							<li>
+								<div class="timeline-date">
+									12 Jan 2020
+								</div>
+								<div class="timeline-desc card-box">
+									<div class="pd-20">
+										<blockquote class="blockquote mb-0">
+											<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>
+											<footer class="blockquote-footer">
+												<small>
+													Someone famous in <cite title="Source Title">Source Title</cite>
+												</small>
+											</footer>
+										</blockquote>
+									</div>
+								</div>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ui-timeline.php b/ui-timeline.php
deleted file mode 100644
index 2d6c296d..00000000
--- a/ui-timeline.php
+++ /dev/null
@@ -1,94 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Timeline</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">UI Timeline</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="container pd-0">
-					<div class="timeline mb-30">
-						<ul>
-							<li>
-								<div class="timeline-date">
-									15 Jan 2020
-								</div>
-								<div class="timeline-desc card-box">
-									<div class="pd-20">
-										<h4 class="mb-10 h4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
-										<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>
-									</div>
-								</div>
-							</li>
-							<li>
-								<div class="timeline-date">
-									14 Jan 2020
-								</div>
-								<div class="timeline-desc card-box">
-									<div class="pd-20">
-										<h4 class="mb-10 h4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
-										<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>
-										<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>
-									</div>
-								</div>
-							</li>
-							<li>
-								<div class="timeline-date">
-									13 Jan 2020
-								</div>
-								<div class="timeline-desc card-box">
-									<div class="card card-box">
-										<img class="card-img-top" src="vendors/images/img2.jpg" alt="Card image cap">
-										<div class="card-body">
-											<h5 class="card-title weight-500">Card title</h5>
-											<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-											<a href="#" class="btn btn-primary">Go somewhere</a>
-										</div>
-									</div>
-								</div>
-							</li>
-							<li>
-								<div class="timeline-date">
-									12 Jan 2020
-								</div>
-								<div class="timeline-desc card-box">
-									<div class="pd-20">
-										<blockquote class="blockquote mb-0">
-											<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>
-											<footer class="blockquote-footer">
-												<small>
-													Someone famous in <cite title="Source Title">Source Title</cite>
-												</small>
-											</footer>
-										</blockquote>
-									</div>
-								</div>
-							</li>
-						</ul>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/ui-tooltip-popover.html b/ui-tooltip-popover.html
new file mode 100644
index 00000000..cbfc78a9
--- /dev/null
+++ b/ui-tooltip-popover.html
@@ -0,0 +1,516 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Tooltip &amp; Popover</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">UI Tooltip &amp; Popover</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="pd-20 card-box mb-30">
+					<h4 class="h4 text-blue">Tooltips</h4>
+					<p class="pb-20">you can use <code>data-toggle="tooltip" title="Tooltip on top"</code></p>
+					<div class="pb-20">
+						<button type="button" class="btn btn-primary margin-5" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
+							Tooltip on top
+						</button>
+						<button type="button" class="btn btn-primary margin-5" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
+							Tooltip on right
+						</button>
+						<button type="button" class="btn btn-primary margin-5" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
+							Tooltip on bottom
+						</button>
+						<button type="button" class="btn btn-primary margin-5" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
+							Tooltip on left
+						</button>
+					</div>
+				</div>
+				<div class="pd-20 card-box mb-30">
+					<h4 class="h4 text-blue">Popovers</h4>
+					<p class="pb-20">you can use <code>data-container="body" data-toggle="popover" data-content=""</code></p>
+					<div class="pb-20">
+						<button type="button" class="btn btn-outline-primary margin-5" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="popover">
+							Popover on top
+						</button>
+						<button type="button" class="btn btn-outline-primary margin-5" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="popover">
+							Popover on right
+						</button>
+						<button type="button" class="btn btn-outline-primary margin-5" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus	sagittis lacus vel augue laoreet rutrum faucibus." title="popover">
+							Popover on bottom
+						</button>
+						<button type="button" class="btn btn-outline-primary margin-5" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="popover">
+							Popover on left
+						</button>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ui-tooltip-popover.php b/ui-tooltip-popover.php
deleted file mode 100644
index 992368b3..00000000
--- a/ui-tooltip-popover.php
+++ /dev/null
@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Tooltip &amp; Popover</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">UI Tooltip &amp; Popover</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="pd-20 card-box mb-30">
-					<h4 class="h4 text-blue">Tooltips</h4>
-					<p class="pb-20">you can use <code>data-toggle="tooltip" title="Tooltip on top"</code></p>
-					<div class="pb-20">
-						<button type="button" class="btn btn-primary margin-5" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
-							Tooltip on top
-						</button>
-						<button type="button" class="btn btn-primary margin-5" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
-							Tooltip on right
-						</button>
-						<button type="button" class="btn btn-primary margin-5" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
-							Tooltip on bottom
-						</button>
-						<button type="button" class="btn btn-primary margin-5" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
-							Tooltip on left
-						</button>
-					</div>
-				</div>
-				<div class="pd-20 card-box mb-30">
-					<h4 class="h4 text-blue">Popovers</h4>
-					<p class="pb-20">you can use <code>data-container="body" data-toggle="popover" data-content=""</code></p>
-					<div class="pb-20">
-						<button type="button" class="btn btn-outline-primary margin-5" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="popover">
-							Popover on top
-						</button>
-						<button type="button" class="btn btn-outline-primary margin-5" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="popover">
-							Popover on right
-						</button>
-						<button type="button" class="btn btn-outline-primary margin-5" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus	sagittis lacus vel augue laoreet rutrum faucibus." title="popover">
-							Popover on bottom
-						</button>
-						<button type="button" class="btn btn-outline-primary margin-5" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="popover">
-							Popover on left
-						</button>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/ui-typography.html b/ui-typography.html
new file mode 100644
index 00000000..0ae8984c
--- /dev/null
+++ b/ui-typography.html
@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-12 col-sm-12">
+							<div class="title">
+								<h4>Typography</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">UI Typography</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box">
+							<h4 class="mb-30 h4">Headings</h4>
+							<h1>h1. Bootstrap heading</h1>
+							<h2 class="mb-10">h2. Bootstrap heading</h2>
+							<h3 class="mb-10">h3. Bootstrap heading</h3>
+							<h4 class="mb-10">h4. Bootstrap heading</h4>
+							<h5 class="mb-10">h5. Bootstrap heading</h5>
+							<h6 class="mb-10">h6. Bootstrap heading</h6>
+						</div>
+					</div>
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box">
+							<h4 class="mb-30 h4">Inline text elements</h4>
+							<p>You can use the mark tag to <mark>highlight</mark> text.</p>
+							<p><del>This line of text is meant to be treated as deleted text.</del></p>
+							<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+							<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+							<p><u>This line of text will render as underlined</u></p>
+							<p><small>This line of text is meant to be treated as fine print.</small></p>
+							<p><strong>This line rendered as bold text.</strong></p>
+							<p><em>This line rendered as italicized text.</em></p>
+						</div>
+					</div>
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box">
+							<h4 class="mb-30 h4">Display headings</h4>
+							<h1 class="display-1">Display 1</h1>
+							<h1 class="display-2">Display 2</h1>
+							<h1 class="display-3">Display 3</h1>
+							<h1 class="display-4">Display 4</h1>
+						</div>
+					</div>
+					<div class="col-md-6 col-sm-12 mb-30">
+						<div class="pd-20 card-box mb-30">
+							<h4 class="mb-20 h4">Blockquotes</h4>
+							<blockquote class="blockquote">
+								<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+								<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+							</blockquote>
+							<blockquote class="blockquote text-right">
+								<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+								<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+							</blockquote>
+						</div>
+						<div class="pd-20 card-box">
+							<h4 class="mb-30 h4">List Inline</h4>
+							<ul class="list-inline">
+								<li class="list-inline-item">Lorem ipsum</li>
+								<li class="list-inline-item">Phasellus iaculis</li>
+								<li class="list-inline-item">Nulla volutpat</li>
+							</ul>
+						</div>
+					</div>
+					<div class="col-md-4 col-sm-12 mb-30">
+						<div class="pd-20 card-box">
+							<h4 class="mb-30 h4">List Unstyled</h4>
+							<ul class="list-unstyled">
+								<li>Lorem ipsum dolor sit amet</li>
+								<li>Consectetur adipiscing elit</li>
+								<li>Integer molestie lorem at massa</li>
+								<li>Facilisis in pretium nisl aliquet</li>
+								<li>Nulla volutpat aliquam velit
+									<ul>
+										<li>Phasellus iaculis neque</li>
+										<li>Purus sodales ultricies</li>
+										<li>Vestibulum laoreet porttitor sem</li>
+										<li>Ac tristique libero volutpat at</li>
+									</ul>
+								</li>
+								<li>Faucibus porta lacus fringilla vel</li>
+								<li>Aenean sit amet erat nunc</li>
+								<li>Eget porttitor lorem</li>
+							</ul>
+						</div>
+					</div>
+					<div class="col-md-8 col-sm-12 mb-30">
+						<div class="pd-20 card-box">
+							<h4 class="mb-30 h4">Description list alignment</h4>
+							<dl class="row">
+								<dt class="col-sm-3">Description lists</dt>
+								<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
+
+								<dt class="col-sm-3">Euismod</dt>
+								<dd class="col-sm-9">
+									<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
+									<p>Donec id elit non mi porta gravida at eget metus.</p>
+								</dd>
+
+								<dt class="col-sm-3">Malesuada porta</dt>
+								<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
+
+								<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
+								<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
+
+								<dt class="col-sm-3">Nesting</dt>
+								<dd class="col-sm-9">
+									<dl class="row">
+										<dt class="col-sm-4">Nested definition list</dt>
+										<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
+									</dl>
+								</dd>
+							</dl>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ui-typography.php b/ui-typography.php
deleted file mode 100644
index 4f5d4978..00000000
--- a/ui-typography.php
+++ /dev/null
@@ -1,140 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-12 col-sm-12">
-							<div class="title">
-								<h4>Typography</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">UI Typography</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-				<div class="row">
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box">
-							<h4 class="mb-30 h4">Headings</h4>
-							<h1>h1. Bootstrap heading</h1>
-							<h2 class="mb-10">h2. Bootstrap heading</h2>
-							<h3 class="mb-10">h3. Bootstrap heading</h3>
-							<h4 class="mb-10">h4. Bootstrap heading</h4>
-							<h5 class="mb-10">h5. Bootstrap heading</h5>
-							<h6 class="mb-10">h6. Bootstrap heading</h6>
-						</div>
-					</div>
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box">
-							<h4 class="mb-30 h4">Inline text elements</h4>
-							<p>You can use the mark tag to <mark>highlight</mark> text.</p>
-							<p><del>This line of text is meant to be treated as deleted text.</del></p>
-							<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
-							<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
-							<p><u>This line of text will render as underlined</u></p>
-							<p><small>This line of text is meant to be treated as fine print.</small></p>
-							<p><strong>This line rendered as bold text.</strong></p>
-							<p><em>This line rendered as italicized text.</em></p>
-						</div>
-					</div>
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box">
-							<h4 class="mb-30 h4">Display headings</h4>
-							<h1 class="display-1">Display 1</h1>
-							<h1 class="display-2">Display 2</h1>
-							<h1 class="display-3">Display 3</h1>
-							<h1 class="display-4">Display 4</h1>
-						</div>
-					</div>
-					<div class="col-md-6 col-sm-12 mb-30">
-						<div class="pd-20 card-box mb-30">
-							<h4 class="mb-20 h4">Blockquotes</h4>
-							<blockquote class="blockquote">
-								<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-								<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
-							</blockquote>
-							<blockquote class="blockquote text-right">
-								<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-								<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
-							</blockquote>
-						</div>
-						<div class="pd-20 card-box">
-							<h4 class="mb-30 h4">List Inline</h4>
-							<ul class="list-inline">
-								<li class="list-inline-item">Lorem ipsum</li>
-								<li class="list-inline-item">Phasellus iaculis</li>
-								<li class="list-inline-item">Nulla volutpat</li>
-							</ul>
-						</div>
-					</div>
-					<div class="col-md-4 col-sm-12 mb-30">
-						<div class="pd-20 card-box">
-							<h4 class="mb-30 h4">List Unstyled</h4>
-							<ul class="list-unstyled">
-								<li>Lorem ipsum dolor sit amet</li>
-								<li>Consectetur adipiscing elit</li>
-								<li>Integer molestie lorem at massa</li>
-								<li>Facilisis in pretium nisl aliquet</li>
-								<li>Nulla volutpat aliquam velit
-									<ul>
-										<li>Phasellus iaculis neque</li>
-										<li>Purus sodales ultricies</li>
-										<li>Vestibulum laoreet porttitor sem</li>
-										<li>Ac tristique libero volutpat at</li>
-									</ul>
-								</li>
-								<li>Faucibus porta lacus fringilla vel</li>
-								<li>Aenean sit amet erat nunc</li>
-								<li>Eget porttitor lorem</li>
-							</ul>
-						</div>
-					</div>
-					<div class="col-md-8 col-sm-12 mb-30">
-						<div class="pd-20 card-box">
-							<h4 class="mb-30 h4">Description list alignment</h4>
-							<dl class="row">
-								<dt class="col-sm-3">Description lists</dt>
-								<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
-
-								<dt class="col-sm-3">Euismod</dt>
-								<dd class="col-sm-9">
-									<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
-									<p>Donec id elit non mi porta gravida at eget metus.</p>
-								</dd>
-
-								<dt class="col-sm-3">Malesuada porta</dt>
-								<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
-
-								<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
-								<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
-
-								<dt class="col-sm-3">Nesting</dt>
-								<dd class="col-sm-9">
-									<dl class="row">
-										<dt class="col-sm-4">Nested definition list</dt>
-										<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
-									</dl>
-								</dd>
-							</dl>
-						</div>
-					</div>
-				</div>
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-</body>
-</html>
\ No newline at end of file
diff --git a/vendors/styles/style.css b/vendors/styles/style.css
index 0b68380f..03d70bc8 100644
--- a/vendors/styles/style.css
+++ b/vendors/styles/style.css
@@ -2,5 +2,5 @@
 Version: 3.0.0
 Author: Ankit Hingarajiya - DeskApp
 */
-@charset "utf-8";body,html{-webkit-font-smoothing:antialiased;width:100%;height:100%}html{-webkit-text-size-adjust:none;-moz-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=submit]{-webkit-appearance:none}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}body{margin:0;padding:0;font-family:'Inter',sans-serif;font-weight:400;min-height:100%;color:#031e23;background:#ecf0f4}a{text-decoration:none;color:#555}a:focus,a:hover{outline:0;text-decoration:none}:focus{outline:0}img{border:0;vertical-align:top;max-width:100%;height:auto}input,select,textarea{resize:none;font-family:'Inter',sans-serif}select,textarea{outline:0}.slick-slide,a,button,input{outline:0!important}button::-moz-focus-inner{border:0}h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-weight:700;color:#202342;font-family:'Inter',sans-serif}ol,p,ul{padding:0}ol,ul{margin:0;list-style:none}p{margin:0 0 15px}.container{max-width:1120px;width:100%}.pre-loader{background:#fff;background-position:center center;background-size:13%;position:fixed;left:0;top:0;width:100%;height:100%;z-index:12345;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pre-loader .loader-logo{padding-bottom:15px}.pre-loader .loader-progress{height:8px;border-radius:15px;max-width:200px;margin:0 auto;display:block;background:#ecf0f4;overflow:hidden}.pre-loader .bar{width:0%;height:8px;display:block;background:#1b00ff}.pre-loader .percent{text-align:center;font-size:24px;display:none}.pre-loader .loading-text{text-align:center;font-size:18px;font-weight:500;padding-top:15px}.mx-w-150{max-width:150px}.mx-h-300{max-height:300px}.mx-h-350{max-height:350px}.mx-h-380{max-height:380px}.mx-h-400{max-height:400px}.mx-h-450{max-height:450px}.pd-0{padding:0}.padding-top-10{padding-top:10px}.padding-top-30{padding-top:30px}.padding-bottom-30{padding-bottom:30px}.pd-5{padding:5px}.pd-10{padding:10px}.pd-20{padding:20px}.chat-box .chat-desc ul,.pd-ltr-20{padding:20px 20px 0}.pd-30{padding:30px}.pb-10{padding-bottom:10px}.pb-15{padding-bottom:15px}.pb-20{padding-bottom:20px}.pb-30{padding-bottom:30px}.pt-10{padding-top:10px}.pt-15{padding-top:15px}.pt-20{padding-top:20px}.pt-30{padding-top:30px}.pr-10{padding-right:10px}.pr-20{padding-right:20px}.pr-30{padding-right:30px}.pl-10{padding-left:10px}.pl-20{padding-left:20px}.pl-30{padding-left:30px}.margin-5{margin:5px}.mt-15{margin-top:15px}.mt-30{margin-top:30px}.device-manage-progress-chart ul li,.mb-30{margin-bottom:30px}.mb-20{margin-bottom:20px}.mb-15{margin-bottom:15px}.mb-10{margin-bottom:10px}.mb-5{margin-bottom:5px!important}.mr-10{margin-right:10px}.mr-20{margin-right:20px}.font-30{font-size:30px;line-height:1.33em}.font-24{font-size:24px;line-height:1.42em}.font-20{font-size:20px;line-height:1.5em}.font-18{font-size:18px;line-height:1.55em}.font-16{font-size:16px;line-height:1.62em}.font-14{font-size:14px;line-height:1.71em}.font-12{font-size:12px;line-height:1.83em}.h1{font-size:40px;font-weight:700;line-height:1.3}.h1,.h2,.h3{color:#1b3133;font-family:'Inter',sans-serif}.h2{font-size:28px;font-weight:700;line-height:1.35}.h3{font-size:24px;line-height:1.5}.h3,.h4{font-weight:700}.h4,.h5,.page-header h4{font-size:20px;line-height:1.35;color:#1b3133;font-family:'Inter',sans-serif}.h5{font-size:18px;font-weight:600}.line-height-1{line-height:1}.line-height-1-2{line-height:1.2}.line-height-1-3{line-height:1.3}.weight-300{font-weight:300}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-600{font-weight:600}.weight-700{font-weight:700}.weight-800{font-weight:800}.height-auto{height:auto}.height-100-p{height:100%}.width-50-p{width:50%}.width-box{width:50px;height:50px}.max-width-200{max-width:200px}.max-width-300{max-width:300px}.max-width-400{max-width:400px}.max-width-500{max-width:500px}.max-width-600{max-width:600px}.max-width-700{max-width:700px}.max-width-800{max-width:800px}.max-width-900{max-width:900px}.max-width-1000{max-width:1000px}.min-height-200px{min-height:200px}.bg-cover{background-size:cover!important}.bg-light-blue{background-color:#e1e1f5}.color-light-blue{color:#e1e1f5}.bg-light-gray{background-color:#ecf0f4}.bg-white{background:#fff}.color-white{color:#fff}.bg-light-green{background-color:#41ccba}.text-light-green{color:#00e091}.bg-blue{background-color:#1b00ff}.text-blue{color:#1b00ff}.text-light-blue{color:#2976aa}.bg-light-orange{background-color:#f56767}.text-light-orange{color:#f56767}.bg-light-purple{background-color:#a683eb}.text-light-purple{color:#a683eb}.bg-orange{background-color:#f5956c}.text-orange{color:#f5956c}.text-yellow{color:#ecc72f}.text-green{color:#46be8a}.text-orange-50{color:#f2a654}.text-blue-50{color:#62a8ea}.text-red-50{color:#e14e50}.mCSB_inside>.mCSB_container{margin-right:0}.border-radius-0{border-radius:0}.border-radius-4{border-radius:4px}.border-radius-5{border-radius:5px}.border-radius-6{border-radius:6px}.border-radius-8{border-radius:8px}.border-radius-10{border-radius:10px}.border-radius-100,.user-info-dropdown .dropdown-toggle .user-icon img{border-radius:100%}.box-shadow{-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08)}.wave1{background-image:url(../images/wave.png);background-size:cover;background-position:center bottom;background-repeat:no-repeat}.card-box,.da-card{background-color:#fff;border-radius:10px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08)}.card-img-top{border-radius:10px 10px 0 0}.card-img-bottom{border-radius:0 0 10px 10px}.card-img{border-radius:10px}.card-title{font-size:18px;font-weight:600}.card-header{font-weight:500;font-size:16px}.card-text,.price del{font-size:15px}.badge{padding:.75em}.page-link:focus{-webkit-box-shadow:none;box-shadow:none}.highcharts-root{font-family:'Inter',sans-serif!important}.bootstrap-select .dropdown-toggle{height:45px}.bootstrap-select .dropdown-toggle.btn-light{background-color:transparent;border-color:#d4d4d4}.bootstrap-select .dropdown-toggle.btn-light:not(:disabled):not(.disabled):active{background-color:transparent;border-color:#d4d4d4}.dropdown-toggle::after{content:"\f107";font-family:"FontAwesome";vertical-align:unset;width:auto;height:auto;border:0!important}.bootstrap-select .dropdown-toggle::after{position:relative;right:5px}.dropdown.show>.dropdown-toggle::after{content:"\f106"}.dropdown-toggle.no-arrow:after{display:none}.dropdown-menu{border:0;padding:0;overflow:hidden;border-radius:10px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.1);box-shadow:0 0 28px rgba(0,0,0,.1)}.dropdown-item{font-size:16px;font-weight:400;padding:.657rem 1rem;color:#444;font-family:'Inter',sans-serif;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.dropdown-item:focus,.dropdown-item:hover{background:#ecf0f4;color:#1b00ff}.form-group{margin-bottom:20px}.form-group>label{font-weight:500;font-size:14px}.custom-file-input,.custom-file-label,.custom-select,.form-control{font-family:'Inter',sans-serif;color:#131e22;font-weight:400;height:45px;border-color:#d4d4d4;letter-spacing:.035em;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.form-control.form-control-sm{height:38px}.form-control.form-control-line{border-left:0;border-right:0;border-top:0;border-radius:0}.custom-file-label{padding-top:.475rem}.custom-file-label::after{height:100%;padding-top:.475rem}textarea.form-control{height:180px}.custom-file-input:focus,.custom-select:focus,.form-control:focus{color:#131e22;border-color:#1b00ff;-webkit-box-shadow:0 0 28px rgba(0,0,0,.1);box-shadow:0 0 28px rgba(0,0,0,.1)}.form-control.height-auto{height:auto}.input-group{margin-bottom:25px}.input-group.custom>.custom-select,.input-group.custom>.form-control{width:100%}.input-group.custom>.custom-select:not(:first-child),.input-group.custom>.form-control:not(:first-child){border-radius:.25rem;padding-left:50px}.input-group.custom>.custom-select:not(:last-child),.input-group.custom>.form-control:not(:last-child){border-radius:.25rem;padding-right:50px}.input-group-prepend.custom{position:absolute;left:0;top:0;z-index:12;height:100%}.input-group-append.custom{position:absolute;right:0;top:0;z-index:12;height:100%}.input-group-text{border:0;background:0 0}.input-group-text i{font-size:20px}.form-control:focus~.input-group-append .fa{color:#1b00ff}.form-control-lg,.input-group-lg>.form-control,.input-group-lg>.input-group-append>.btn,.input-group-lg>.input-group-append>.input-group-text,.input-group-lg>.input-group-prepend>.btn,.input-group-lg>.input-group-prepend>.input-group-text{height:50px;font-size:16px}.has-success{color:#28a745}.form-control-success{border-color:#28a745;background-image:url(../images/check-mark-green.png);background-repeat:no-repeat;background-position:center right 10px;background-size:20px 20px}.form-control-success:focus{border-color:#28a745;-webkit-box-shadow:0 0 0 1px #28a745;box-shadow:0 0 0 1px #28a745}.has-warning{color:#ffc107}.form-control-warning{border-color:#ffc107;background-image:url(../images/caution-sign.png);background-repeat:no-repeat;background-position:center right 10px;background-size:20px 20px}.form-control-warning:focus{border-color:#ffc107;-webkit-box-shadow:0 0 0 1px #ffc107;box-shadow:0 0 0 1px #ffc107}.has-danger{color:#dc3545}.form-control-danger{border-color:#dc3545;background-image:url(../images/cross.png);background-repeat:no-repeat;background-position:center right 10px;background-size:14px 14px}.form-control-danger:focus{border-color:#dc3545;-webkit-box-shadow:0 0 0 1px #dc3545;box-shadow:0 0 0 1px #dc3545}.btn{font-family:'Inter',sans-serif;letter-spacing:0;font-weight:500;padding:.438rem 1rem}.btn-lg{padding:.657rem 1rem}.btn-group-lg>.btn,.btn-lg{font-size:18px}.btn-group-sm>.btn,.btn-sm{padding:.4rem .8rem;font-size:14px}.btn.focus,.btn:focus{-webkit-box-shadow:none!important;box-shadow:none!important}.btn-rounded{border-radius:25px}.breadcrumb{background:0 0;padding:.75rem 0}.breadcrumb-item.active{color:#1b00ff;font-weight:500}.breadcrumb-item a{color:#031e23}.breadcrumb-item+.breadcrumb-item::before{font-family:"FontAwesome";content:"\f105"}.customscroll-10-p>.mCustomScrollBox>.mCSB_container{padding:10px}.datepicker{z-index:1060}.datepicker--day-name,.datepicker--time-current-hours,.datepicker--time-current-minutes{color:#1b00ff}.datepicker--nav-action path{stroke:#1b00ff}.datepicker--cell.-focus-,.datepicker--nav-action:hover,.datepicker--nav-title:hover{background:#e1e1f5;color:#1b00ff}.datepicker--cell.-selected-{color:#fff}.datepicker--time-current-hours:after,.datepicker--time-current-minutes:after{display:none}.datepicker-inline .datepicker{margin:0 auto}.form-control.time-picker-default:disabled,.form-control.time-picker-default[readonly],.form-control.time-picker:disabled,.form-control.time-picker[readonly]{background:#fff}.custom-control{padding-left:35px;cursor:pointer;padding-bottom:5px}.custom-control-label{cursor:pointer;font-weight:400}.custom-control-label::before{width:20px;height:20px;top:2px;left:-30px;background-color:transparent;border:2px solid #1b00ff}.custom-control-label::after{width:20px;height:20px;left:-30px;background-size:60%;top:2px}.custom-control-input:focus~.custom-control-label::before{-webkit-box-shadow:none;box-shadow:none;background-color:none}.custom-checkbox .custom-control-input:checked~.custom-control-label::before{background-color:#1b00ff}.custom-checkbox .custom-control-input:checked~.custom-control-label::after{background-image:url(../images/check-mark.png);background-repeat:no-repeat;background-position:center center}.custom-radio .custom-control-input:checked~.custom-control-label::before{background-color:#1b00ff}.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before{border:2px solid transparent}.select2-container .select2-selection--single{height:45px;border-color:#d4d4d4;outline:0;letter-spacing:.035em;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.select2-container--default.select2-container--focus .select2-selection--multiple,.select2-dropdown{border-color:#d4d4d4}.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:43px}.select2-container--default .select2-selection--single .select2-selection__arrow{height:43px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#1b00ff;color:#fff;border-color:#1b00ff}.select2-container--default .select2-selection--multiple{min-height:45px;border-color:#d4d4d4}.select2-container--default .select2-selection--multiple .select2-selection__rendered{padding-top:3px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#fff}.select2-dropdown{-webkit-box-shadow:0 0 28px rgba(0,0,0,.1);box-shadow:0 0 28px rgba(0,0,0,.1)}.select2-search--dropdown{padding:10px}.select2-container--default .select2-search--dropdown .select2-search__field{border-radius:5px}.bootstrap-select .dropdown-menu li .dropdown-item.active:hover,.select2-container--default .select2-results__option[aria-selected=true]{background-color:#1b00ff;color:#fff}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#1b00ff}.bootstrap-select.btn-group .dropdown-menu.inner{display:block}.bootstrap-select .dropdown-toggle:focus{outline:0!important}.bootstrap-select .dropdown-header{color:#222;font-weight:700;font-size:15px}.bootstrap-select .dropdown-menu li .dropdown-item:hover{color:#1b00ff}.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark{top:13px}.bootstrap-select .bs-ok-default:after{border-width:0 2px 2px 0}.dropup .dropdown-toggle::after{content:"\f107";font-family:"FontAwesome";vertical-align:unset;width:auto;height:auto;border:0!important}.bootstrap-select.btn-group .dropdown-menu li a{display:block;font-size:15px;font-weight:400;padding:.55rem 1rem;color:#667f87;font-family:'Inter',sans-serif;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.bootstrap-select.btn-group .dropdown-menu li.divider{border:1px solid #eaeaea}.bootstrap-select.btn-group .dropdown-menu li.selected a{background:#e1e1f5;color:#131e22}.bootstrap-select.btn-group .dropdown-menu li.disabled a{color:#cecece}.bootstrap-select.btn-group .dropdown-menu li a:hover{background:#e1e1f5;color:#131e22}.bootstrap-select.btn-group .dropdown-menu li a span.check-mark{background:url(../images/check-mark-green.png);width:15px;height:15px;background-size:contain}.label-info{background-color:#009efb}.bootstrap-tagsinput .tag{display:inline-block;padding:2px 6px;margin:2px;font-size:15px;border-radius:2px}.docs-options .dropdown-menu{max-height:250px;overflow:auto}.docs-buttons{padding-top:15px}.docs-buttons label,.notification-list ul li a p,.project-info-right p{margin-bottom:0}.docs-buttons .btn{margin-bottom:5px}.table thead th{font-weight:600;font-size:15px;border-bottom:0;padding-left:1rem}.table td,.table th{vertical-align:middle}.table td{font-size:14px;font-weight:500;padding:1rem}.table-striped tbody tr:nth-of-type(odd){background:#eaeef2}table.dataTable.display tbody tr.odd,table.dataTable.display tbody tr:hover,table.dataTable.hover tbody tr:hover,table.dataTable.stripe tbody tr.odd{background:#ecf0f3!important}table.dataTable tbody tr.selected,table.dataTable.display tbody tr:hover.selected,table.dataTable.hover tbody tr:hover.selected{background-color:#181f48!important;color:#fff}table.dataTable.display tbody tr.odd.selected,table.dataTable.stripe tbody tr.odd.selected{background-color:#1b00ff!important}table.dataTable thead .sorting:after,table.dataTable thead .sorting:before,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc_disabled:after,table.dataTable thead .sorting_desc_disabled:before{font-family:"dropways";font-size:14px}table.dataTable thead .sorting:before,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc_disabled:before{content:"\eabb"}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_desc_disabled:after{content:"\eaba";right:.2em}.blog-list ul li:hover .blog-caption h4 a,.fontawesome-icon-list .fa-hover:hover a,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:after{color:#1b00ff}.dataTables_length,.dt-buttons,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{padding-left:15px;padding-right:15px}.dt-checkbox,.dt-checkbox input{width:20px;height:20px;position:relative}.dt-checkbox input{position:absolute;opacity:0;z-index:1;left:0;top:0}.dt-checkbox span,.dt-checkbox span:before{width:20px;height:20px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.dt-checkbox span{position:relative;display:block;border:1px solid #9e9e9e;border-radius:4px}.dt-checkbox span:before{content:"";background:url(../images/check-mark.png) no-repeat;position:absolute;left:0;top:-1px;background-size:12px 12px;background-position:center center;-webkit-transform:scale(0);transform:scale(0)}.dt-checkbox input:checked~span{background:#1b00ff;border-color:#1b00ff;color:#fff}.dt-checkbox input:checked~span:before{-webkit-transform:scale(1);transform:scale(1)}.plyr{border-radius:10px;-webkit-box-shadow:0 0 10px 2px rgba(0,0,0,.15);box-shadow:0 0 10px 2px rgba(0,0,0,.15)}.popover-header{font-weight:500}.list-group-flush .list-group-item{border-top:0;margin-bottom:0}.docs-cropped .modal-body>canvas,.docs-cropped .modal-body>img,.img-preview>img{max-width:100%}.apexcharts-svg *{font-family:'Muli',sans-serif!important}table.dataTable.dtr-inline.collapsed>tbody>tr[role=row]>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr[role=row]>th:first-child:before{-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;font-family:"FontAwesome";background:0 0;content:"\f107";color:#444;font-size:23px;left:7px;top:50%;margin-top:-7px}table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before{content:"\f106";background:0 0}.header{position:fixed;height:70px;width:calc(100% - 280px);background:#fff;right:0;top:0;z-index:123;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-box-shadow:0 0 10px rgba(0,0,0,.06);box-shadow:0 0 10px rgba(0,0,0,.06)}.header-left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;width:50%}.brand-logo a .dark-logo,.header-left .menu-icon,.header-left .search-toggle-icon,.sidebar-light .brand-logo a .light-logo,.sidebar-menu .submenu li.dropdown:before{display:none}.header-left .header-search{width:100%;padding-left:20px}.header-left .header-search .form-group,.sidebar-menu .submenu li{position:relative}.header-left .header-search .search-icon{position:absolute;left:17px;top:12px;font-size:20px;color:#777}.header-left .header-search .dropdown{position:static;right:0;top:0;padding-right:10px}.header-left .header-search .dropdown .dropdown-toggle{position:absolute;right:0;top:0;width:45px;height:45px;font-size:20px;line-height:45px;text-align:center;border-radius:0 .25rem .25rem 0;color:#777;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.contact-directory-box:hover .view-contact a,.header-left .header-search .dropdown .dropdown-toggle:hover,.header-left .header-search .dropdown.show .dropdown-toggle{background:#1b00ff;color:#fff}.header-left .header-search .dropdown .dropdown-menu{width:100%;min-width:100%;margin-top:5px;padding:20px}.header-left .header-search .search-input{padding-left:50px;padding-right:55px}.header-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;height:70px;width:50%}.header-left .brand-logo{max-width:180px;display:block}.header-right .brand-logo a{padding:0 6px}.header-right .menu-icon{position:relative;right:0;float:left;display:none}.user-info-dropdown{padding:5px 10px 5px 0}.user-info-dropdown .dropdown-toggle{display:block;padding:5px 0;font-size:16px}.user-info-dropdown .dropdown-toggle .user-icon{width:52px;height:52px;font-size:24px;background:#ebeff3;color:#1b00ff;line-height:52px;text-align:center;display:inline-block;vertical-align:middle;border-radius:100%;-webkit-box-shadow:0 0 10px rgba(0,0,0,.18);box-shadow:0 0 10px rgba(0,0,0,.18)}.user-info-dropdown .dropdown-toggle .user-name{font-weight:500;display:inline-block;vertical-align:middle;margin-left:5px;color:#131e22;font-family:'Inter',sans-serif}.user-info-dropdown .dropdown-menu{min-width:185px}.dropdown-menu-icon-list .dropdown-item{position:relative;padding-left:45px}.dropdown-menu-icon-list .dropdown-item i{position:absolute;left:16px;top:50%;font-size:18px;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}.user-notification{float:right;margin-right:10px;padding:22px 5px 10px 0}.user-notification .dropdown-toggle{font-size:20px;padding:10px;color:#555;position:relative}.user-notification .dropdown-toggle .badge{position:absolute;right:8px;top:10px;background:#f5678a;width:5px;height:5px;display:block;padding:0}.user-notification .dropdown-menu{width:400px;padding:20px 10px}.notification-list ul li a{display:block;position:relative;padding:10px 15px 10px 75px;min-height:75px;color:#666;font-size:14px;font-weight:500;font-family:'Inter',sans-serif;border-radius:5px}.notification-list ul li a img{width:50px;height:50px;position:absolute;left:10px;top:13px;border-radius:10px;-webkit-box-shadow:1px 2px 13px rgba(0,0,0,.2);box-shadow:1px 2px 13px rgba(0,0,0,.2)}.notification-list ul li a h3{font-size:16px;color:#202342;font-weight:700;text-transform:capitalize;font-family:'Inter',sans-serif;padding-bottom:5px}.notification-list ul li a h3 span{float:right;font-size:12px;font-weight:500;padding-top:2px}.header-dark .header,.header-dark .header-left .header-search{background:#0b132b}.header-dark .header .user-info-dropdown .dropdown-toggle,.header-dark .header .user-info-dropdown .dropdown-toggle .user-name,.header-dark .menu-icon,.header-dark .search-toggle-icon,.header-dark .user-notification .dropdown-toggle{color:#ecf0f4}.header-dark .header .header-left .header-search .search-input{background:rgba(236,236,236,.1);border-color:transparent;color:#ecf0f4}.header-dark .header .header-left .header-search .search-input:focus{border-color:#4b4d50}.header-dark .header .header-left .header-search .search-input::-webkit-input-placeholder{opacity:1;color:#bfc4ca}.header-dark .header .header-left .header-search .search-input:-moz-placeholder,.header-dark .header .header-left .header-search .search-input::-moz-placeholder{opacity:1;color:#bfc4ca}.header-dark .header .header-left .header-search .search-input:-ms-input-placeholder{opacity:1;color:#bfc4ca}.header-dark .header .header-left .header-search .search-icon{color:#ecf0f4}.footer-wrap{width:100%;position:relative;text-align:center;font-weight:500}.footer-wrap a{color:#1b00ff;text-decoration:underline}.menu-icon,.search-toggle-icon{width:47px;height:47px;font-size:22px;line-height:1;color:#555;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.brand-logo{width:280px;height:70px;border-bottom:1px solid rgba(0,0,0,.1)}.brand-logo a{display:-webkit-box;display:-ms-flexbox;display:flex;vertical-align:middle;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;height:100%;font-size:22px;color:#fff;letter-spacing:.05em;font-weight:500;line-height:45px;font-family:'Inter',sans-serif;padding:0 20px}.brand-logo a .light-logo,.sidebar-light .brand-logo a .dark-logo{display:block}.brand-logo a span{display:block;vertical-align:middle;margin-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand-logo a .svg,.brand-logo a img{max-width:180px;display:block;height:auto}.left-side-bar,.left-side-bar:before{position:fixed;left:0;top:0;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.left-side-bar{width:280px;height:100vh;z-index:1000;background:#0b132b}.left-side-bar .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background:#ecf0f4}.left-side-bar:before{content:"";z-index:-1;width:100%;height:100%;background:rgba(0,0,0,.3);display:none}.left-side-bar.open{left:0}.left-side-bar .menu-block{height:calc(100vh - 70px)}.left-side-bar .close-sidebar{font-size:18px;color:#888;cursor:pointer;position:absolute;right:10px;top:20px;display:none}.sidebar-menu{padding:0 0 20px}.sidebar-menu .dropdown-toggle{display:block;padding:18px 15px 18px 67px;font-size:16px;color:#fff;font-weight:300;letter-spacing:.03em;position:relative;font-family:'Inter',sans-serif;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.sidebar-menu .dropdown-toggle:after{position:absolute;right:15px;font-size:18px}.sidebar-menu.icon-style-2 .dropdown-toggle:after{content:"\f217";font-family:Ionicons}.sidebar-menu.icon-style-2 .dropdown.show .dropdown-toggle:after{content:"\f208"}.sidebar-menu.icon-style-3 .dropdown-toggle:after{content:"\f101"}.sidebar-menu.icon-style-3 .dropdown.show .dropdown-toggle:after{content:"\f103"}.sidebar-menu .dropdown-toggle:hover,.sidebar-menu .show>.dropdown-toggle{background:rgba(0,0,0,.4);color:#fff}.sidebar-menu .dropdown-toggle .micon{position:absolute;left:10px;width:42px;height:42px;font-size:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;background-color:transparent;top:50%;text-align:center;border-radius:4px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}.sidebar-menu .dropdown-toggle:hover .micon,.sidebar-menu .show>.dropdown-toggle .micon{color:#fff}.sidebar-menu .dropdown-toggle .new{font-size:24px;line-height:14px;display:inline-block;vertical-align:middle}.sidebar-menu .dropdown-toggle .new:before{line-height:14px}.sidebar-menu .submenu{position:relative;width:100%;display:none}.sidebar-menu .submenu:before{content:"";width:1px;height:100%;position:absolute;left:31px;top:0;display:none;background:0 0;border-left:2px dashed #1b00ff}.sidebar-menu .submenu li>a:before{content:"\f208";position:absolute;line-height:1;left:28px;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);font-family:Ionicons}.sidebar-menu.icon-list-style-2 .submenu li>a:before{content:"\f10c";font-family:FontAwesome}.sidebar-menu.icon-list-style-3 .submenu li>a:before{content:"\eb1d";font-family:dropways}.sidebar-menu.icon-list-style-4 .submenu li>a:before{content:"\edd2";font-family:dropways}.sidebar-menu.icon-list-style-5 .submenu li>a:before{content:"\ee07";font-family:dropways}.sidebar-menu.icon-list-style-6 .submenu li>a:before{content:"\ee36";font-family:dropways}.mobile-menu-overlay,.sidebar-menu .submenu li a,.sidebar-menu .submenu li>a:before{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.sidebar-menu .submenu li a{display:block;padding:18px 15px 18px 60px;font-size:14px;color:#fff;font-weight:300;letter-spacing:.03em;position:relative;font-family:'Inter',sans-serif}.chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .left .overlay,.chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .right a,.sidebar-menu .submenu li.dropdown>a:before,.sitemap ul li.child:after,.sitemap ul li.child:before{display:none}.sidebar-menu .submenu li a.dropdown-toggle{padding:18px 15px 18px 60px;font-size:16px}.sidebar-menu .submenu.child{padding-left:15px}.sidebar-menu .submenu li:hover>a:before{left:18px}.sidebar-menu .submenu li a.active,.sidebar-menu .submenu li a:hover{color:#fff;background-color:rgba(0,0,0,.4)}.sidebar-light .sidebar-menu .dropdown-toggle:hover .micon,.sidebar-light .sidebar-menu .show>.dropdown-toggle .micon,.sidebar-menu .dropdown-toggle.active,.sidebar-menu .dropdown-toggle.active .micon{color:#fff}.mobile-menu-overlay{position:fixed;left:0;top:0;width:100%;height:100%;background:#121421;opacity:.6;z-index:123;background-size:20px;background-position:98% 15px;display:none}.sidebar-light .left-side-bar{background:#fff}.sidebar-light .sidebar-menu .dropdown-toggle,.sidebar-light .sidebar-menu .submenu li a{color:#0b132b;font-weight:400}.sidebar-light .sidebar-menu .dropdown-toggle .micon{color:#0b132b}.sidebar-light .sidebar-menu .dropdown-toggle:hover,.sidebar-light .sidebar-menu .show>.dropdown-toggle,.sidebar-light .sidebar-menu .submenu li a.active,.sidebar-light .sidebar-menu .submenu li a:hover{color:#fff;background-color:#0b132b}.sidebar-light .menu-block .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{background-color:#0e132b}.sidebar-menu .dropdown-divider{margin:20px 0;border-color:rgba(255,255,255,.2);border-width:2px}.sidebar-light .sidebar-menu .dropdown-divider{border-color:rgba(0,0,0,.2)}.sidebar-menu .sidebar-small-cap{font-size:14px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:#fff;padding:0 15px 10px}.sidebar-light .sidebar-menu .sidebar-small-cap{color:#1502bd}.login-header{position:relative;padding:0 15px;background-color:#fff;z-index:1}.login-header .brand-logo{width:auto;border:0}.login-menu a{font-size:20px;font-weight:600;color:#1b00ff}.login-wrap{height:calc(100% - 70px);overflow:auto;padding:30px 0}body.IE .login-wrap,body.IE .register-page-wrap{display:block!important;padding:0}body.IE .login-wrap .container,body.IE .register-page-wrap .container{padding-top:10vh;padding-bottom:10vh}.login-wrap .container,.register-page-wrap .container{max-width:1300px}.login-wrap .mCustomScrollBox{height:auto;width:100%}.login-box{max-width:400px;width:100%;padding:40px 20px;margin:5px auto}.select-role{margin-bottom:25px;padding:0 5px}.select-role .btn-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 -10px}.select-role .btn-group .btn{margin:0 5px;border:1px solid #d4d4d4;text-align:left;padding-left:60px;padding-top:10px;padding-bottom:10px;width:calc(50% - 10px);border-radius:5px!important;font-size:16px;line-height:1.3;font-weight:700;color:#333;position:relative}.select-role .btn-group .btn.active,.select-role .btn-group .btn.active:focus,.select-role .btn-group .btn.focus.active{background-color:rgba(27,0,255,.05);border-color:rgba(27,0,255,.5);color:#1b00ff}.select-role .btn-group .btn .icon{position:absolute;left:15px;width:30px;height:30px;top:50%;margin-top:-15px}.select-role .btn-group .btn .icon .svg{width:30px;height:30px}.select-role .btn-group .btn span{display:block;font-size:14px;font-weight:500;color:#222}.login-box .login-title{padding:0 0 10px;margin-bottom:30px}.login-box .login-title h2{font-size:24px;font-weight:700}.login-box .login-img{display:block;margin:0 auto 20px;max-width:100px}.forgot-password{text-align:right}.register-page-wrap{height:calc(100% - 70px);padding:30px 0}.register-page-wrap .register-box{max-width:410px;margin:0 auto}.register-page-wrap,.register-page-wrap .wizard-content .wizard{position:relative;overflow:auto}.register-page-wrap .wizard-content .wizard .steps{position:relative}.register-page-wrap .wizard-content .wizard>.steps .step{position:relative;top:0;left:0;display:block;margin:0 auto;border-width:2px;background-color:#fff;border-color:rgba(24,31,72,.3)}.register-page-wrap .wizard-content .wizard>.steps>ul>li.done>a .step{background:url(../images/tick.svg) no-repeat #ecf0f4;font-size:0;background-size:22px;background-position:center center;border-color:rgba(24,31,72,.3)}.register-page-wrap .wizard-content .wizard.wizard-circle>.steps>ul>li:after,.register-page-wrap .wizard-content .wizard.wizard-circle>.steps>ul>li:before,.wizard-content .wizard.wizard-circle>.steps>ul>li.current~li:after,.wizard-content .wizard.wizard-circle>.steps>ul>li.current~li:before{background:rgba(24,31,72,.3)}.wizard-content .wizard.vertical.wizard-circle>.steps>ul>li.current~li:after,.wizard-content .wizard.vertical.wizard-circle>.steps>ul>li.current~li:before{background-color:transparent}.register-page-wrap .wizard-content .wizard>.steps>ul>li.current .step{border-color:#1b00ff;color:#181f48;background-color:#fff}.register-page-wrap .wizard-content .wizard>.steps .info,.register-page-wrap .wizard-content .wizard>.steps .step,.register-page-wrap .wizard-content .wizard>.steps>ul>li a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.register-page-wrap .wizard-content .wizard>.steps .info{display:block;width:100%;padding-top:10px}.register-page-wrap .wizard-content .wizard>.steps>ul{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100%;padding:0 10px}.register-page-wrap .wizard-content .wizard>.steps>ul>li{width:25%}.register-page-wrap .wizard-content .wizard>.steps>ul>li a{padding:20px 10px;margin:0;text-align:center;color:rgba(24,31,72,.6);font-size:11px;font-weight:700}.register-page-wrap .wizard-content .wizard>.steps>ul>li.current>a,.register-page-wrap .wizard-content .wizard>.steps>ul>li.done>a{color:#181f48}.register-page-wrap .wizard-content .wizard>.content{overflow:hidden;padding:15px 15px 0;min-height:320px}.register-page-wrap .wizard-content .wizard>.actions{padding:0 15px 20px;text-align:right}.register-info li{margin-bottom:15px;font-size:14px}.main-container{padding:80px 20px 0 300px}.page-header .dropdown-menu{border-radius:5px}.page-header{background-color:#fff;border-radius:10px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08);margin-bottom:30px;padding:20px}.page-header .row{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.page-header h4{font-weight:600;padding-bottom:5px}.page-header .breadcrumb{padding:0;margin:0}.search-icon-box,.timeline ul{position:relative}.search-icon-box input{height:70px;width:100%;font-size:20px;padding:0 60px 0 30px;font-weight:300;border:0;color:#fff;background:#6209ab}.search-icon-box input::-webkit-input-placeholder{opacity:1;color:#fff}.search-icon-box input:-moz-placeholder,.search-icon-box input::-moz-placeholder{opacity:1;color:#fff}.search-icon-box input:-ms-input-placeholder{opacity:1;color:#fff}.search-icon-box .search_icon{position:absolute;font-size:24px;line-height:1;right:20px;top:26px;color:#fff}.fontawesome-icon-list{padding-top:20px}.fontawesome-icon-list.custom-icon-list,.sitemap ul li.child h5{padding-top:0}.fontawesome-icon-list .fa-hover,.fontawesome-icon-list a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.fontawesome-icon-list .fa-hover{padding-top:13px;padding-bottom:13px;margin-bottom:10px;cursor:pointer;border-radius:8px}.fontawesome-icon-list .fa-hover:hover{background:rgba(68,66,87,.13);-webkit-box-shadow:0 0 18px rgba(0,0,0,.08);box-shadow:0 0 18px rgba(0,0,0,.08)}.fontawesome-icon-list a{display:block;font-size:14px;font-weight:500;position:relative;padding-left:45px;color:#131e22}.fontawesome-icon-list a .icon-copy{position:absolute;left:10px;top:4px;font-size:18px}.fontawesome-icon-list.custom-icon-list a{font-size:14px;line-height:24px}.fontawesome-icon-list.custom-icon-list a .icon-copy{font-size:24px;line-height:1;top:0}.foundation-icon.fontawesome-icon-list a .icon-copy{top:0;font-size:24px;line-height:24px}.ionicons-list li{width:8.3%;text-align:center}.ionicons-list.fontawesome-icon-list a{padding-left:0}.ionicons-list.fontawesome-icon-list a .icon-copy{font-size:24px;left:0;position:relative}.wysihtml5-toolbar .dropdown-menu a{display:block;font-size:15px;font-weight:400;padding:.55rem 1rem;color:#667f87;font-family:'Inter',sans-serif;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.html-editor textarea.form-control{height:300px;font-weight:400}.copy-notification{color:#fff;background-color:rgba(0,0,0,.8);padding:12px 20px;border-radius:30px;position:fixed;top:50%;left:50%;width:150px;margin-top:-30px;margin-left:-85px;display:none;text-align:center}.error-page h1,.error-page-wrap{font-size:16px;line-height:26px;font-weight:700;color:#222}.error-page h1{font-size:210px;text-shadow:2px 2px 0 #181f48,4px 4px 0 #fff,8px 8px 0 #181f48;line-height:1;color:#181f48}.error-page h3{font-size:18px;text-transform:uppercase;font-weight:700;margin-bottom:30px;padding-top:30px}.project-info{padding-bottom:15px}.project-info-left{float:left;width:60px;padding-top:10px}.project-info-left .icon{width:50px;height:50px;border-radius:100%;line-height:50px;text-align:center;font-size:20px}.project-info-right{float:right;width:calc(100% - 60px);text-align:right}.device-manage-progress-chart ul li:last-child{margin-bottom:0}.device-manage-progress-chart .device-name{width:75px;float:left;text-align:right}.device-manage-progress-chart .device-total{float:left;width:45px;font-size:14px}.device-manage-progress-chart .device-progress{float:left;width:calc(100% - 120px);padding:7px 10px 0}.device-manage-progress-chart .device-progress .grand_total{float:right}.device-manage-progress-chart .device-progress .progress{margin-bottom:0;height:10px}.device-manage-progress-chart .device-progress .progress .progress-bar{height:100%}.device-manage-progress-chart .device-progress .progress .progress-bar.window{background:#00bcf2}.device-manage-progress-chart .device-progress .progress .progress-bar.mac{background:#027496}.device-manage-progress-chart .device-progress .progress .progress-bar.android{background:#0059b2}.device-manage-progress-chart .device-progress .progress .progress-bar.linux{background:#8ab1b7}.to-do-list ul li{padding:15px}.to-do-list ul li,.to-do-list ul li:hover{background:#ecf0f4}.to-do-list ul li:nth-child(2n){background:#fff}#browservisit path.jvectormap-region.jvectormap-element{stroke-width:.5px;stroke:#667f87}.jvectormap-goback,.jvectormap-zoomin,.jvectormap-zoomout{background:#667f87}.browser-visits ul li{margin-bottom:40px}.browser-visits ul li .icon,.browser-visits ul li .visit{width:50px}.browser-visits ul li .browser-name{width:calc(100% - 100px);font-size:14px;font-weight:600}.docs-preview{margin-right:-1rem}.img-preview{float:left;margin-bottom:.5rem;margin-right:.5rem;overflow:hidden}.preview-lg{height:9rem;width:16rem}.preview-md{height:4.5rem;width:8rem}.preview-sm{height:2.25rem;width:4rem}.preview-xs{height:1.125rem;margin-right:0;width:2rem}.btn-list .btn{margin:5px}#login-modal .modal-dialog{max-width:380px}#login-modal .login-box{margin:0}.confirmation-btn{width:50px;height:50px;margin:0 auto}.da-card .da-card-content{padding:20px 15px;background:#fff;font-size:14px}.da-card,.da-card .da-card-photo{position:relative;overflow:hidden}.da-card .da-card-photo img{position:relative;display:block;width:100%;-webkit-transition:all .4s linear;transition:all .4s linear}.da-card .da-overlay{position:absolute;width:100%;height:100%;left:0;top:0;opacity:0;overflow:hidden;background:rgba(19,30,34,.7);-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.da-card .da-overlay.da-slide-left{left:-100%}.da-card .da-card-photo:hover .da-overlay.da-slide-left{left:0}.da-card .da-overlay.da-slide-bottom,.da-card .da-overlay.da-slide-left,.da-card .da-overlay.da-slide-right,.da-card .da-overlay.da-slide-top{-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.da-card .da-overlay.da-slide-right{right:-100%;left:inherit}.da-card .da-card-photo:hover .da-overlay.da-slide-right{right:0}.da-card .da-overlay.da-slide-bottom,.da-card .da-overlay.da-slide-top{top:-100%}.da-card .da-card-photo:hover .da-overlay.da-slide-bottom,.da-card .da-card-photo:hover .da-overlay.da-slide-top{top:0}.da-card .da-overlay.da-slide-bottom{top:100%}.da-card .da-card-photo:hover img{-webkit-transform:scale(1.2) translateZ(0);transform:scale(1.2) translateZ(0)}.da-card .da-card-photo:hover .da-overlay{opacity:1;filter:alpha(opacity=100);-webkit-transform:translateZ(0);transform:translateZ(0)}.da-card .da-card-photo:hover .da-social{opacity:1}.da-card .da-social{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;padding:20px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;opacity:0;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.da-card .da-social h5{position:absolute;top:0;white-space:nowrap;overflow:hidden;width:100%;text-overflow:ellipsis;font-size:16px;font-weight:500}.chat-box .chat-desc ul li .chat-img,.da-card .da-social ul li{float:left}.da-card .da-social ul li a{display:block;width:45px;height:45px;border:1px solid #fff;line-height:43px;font-size:20px;text-align:center;color:#fff;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.da-card .da-social ul li:first-child a{border-top-left-radius:5px;border-bottom-left-radius:5px}.da-card .da-social ul li:last-child a{border-top-right-radius:5px;border-bottom-right-radius:5px}.da-card .da-social ul li a:hover{background:#fff;color:#1b00ff}.nav-tabs.customtab .nav-item.show .nav-link,.nav-tabs.customtab .nav-link.active{color:#1b00ff;border:0;border-bottom:2px solid #1b00ff}.nav-tabs.customtab .nav-item{margin-bottom:0}.nav-tabs.customtab .nav-link{color:#181f48;border:0;border-bottom:2px solid transparent;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.nav-tabs.customtab .nav-link:focus,.nav-tabs.customtab .nav-link:hover{color:#1b00ff;border:0;border-bottom:2px solid #1b00ff}.nav.vtabs{border-bottom:0;border-right:1px solid #dee2e6;height:100%}.nav.vtabs .nav-link{border-radius:0}.nav.vtabs .nav-item.show .nav-link,.nav.vtabs .nav-link.active{border-right:0;border-color:#dee2e6;color:#1b00ff}.nav.vtabs.nav-pills .nav-item.show .nav-link,.nav.vtabs.nav-pills .nav-link.active{border-right:0;border-color:#dee2e6;color:#fff}.nav.vtabs.customtab .nav-item.show .nav-link,.nav.vtabs.customtab .nav-link.active{border-color:#1b00ff}.timeline ul:before{content:"";width:3px;height:100%;background:#1b00ff;position:absolute;left:150px}.timeline ul li{position:relative;padding-left:180px;padding-top:20px;padding-bottom:30px}.timeline ul li:before{content:"";position:absolute;top:30px;left:142px;width:18px;height:18px;background:#fff;border-radius:100%;-webkit-box-shadow:0 0 0 3px #1b00ff;box-shadow:0 0 0 3px #1b00ff}.timeline .timeline-date{position:absolute;left:0;top:20px;width:120px;background:#1b00ff;color:#fff;font-size:16px;padding:6px 10px;border-radius:5px}.list-unstyled>li>ul{margin-left:35px}.list-unstyled>li>ul li{list-style:circle}.sitemap{border-left:2px dashed #1b00ff}.sitemap h5{padding:15px;margin-bottom:10px;font-weight:600;color:#1b00ff}.sitemap ul,.sitemap ul li{position:relative;padding-left:25px}.sitemap ul li{min-height:40px;padding-left:35px;margin-bottom:10px;padding-top:2px}.sitemap ul li:last-child{margin-bottom:0}.sitemap ul li:before{content:"";background:#fff;width:20px;height:20px;border:2px solid #1b00ff;border-radius:100%;position:absolute;left:6px;top:5px}.sitemap ul li:after{content:"";width:25px;left:-25px;top:40%;position:absolute;border-top:2px dashed #1b00ff}.blog-list ul li,.sitemap ul li a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.fc th,.sitemap ul li a{font-weight:500;font-size:15px}.sitemap ul li a{display:inline-block;color:#0b132b}.sitemap ul li a:hover{color:#000}.sitemap ul li.child{padding-left:0;padding-top:0;border-left:2px dashed #2976aa}.calendar-wrap .fc-event.ui-draggable-handle{padding:5px;margin-bottom:5px}.fc th{padding:10px!important;background:#e1e1f5;line-height:1}.fc-day-grid-event .fc-time{font-weight:500!important}.fc-day-grid-event .fc-content{padding:3px 9px}.fc-header-toolbar h2{font-size:18px;padding-top:7px}.blog-wrap{padding-bottom:50px}.blog-list ul li{border-radius:10px;margin-bottom:40px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08);background:#fff}.blog-list ul li:hover{-webkit-box-shadow:0 0 48px rgba(0,0,0,.25);box-shadow:0 0 48px rgba(0,0,0,.25)}.blog-list ul li .blog-img{height:100%;min-height:300px;border-radius:10px 0 0 10px;background-size:cover!important}.blog-list ul li .blog-caption{padding:20px;font-size:16px;line-height:1.5;color:#031e23}.blog-list ul li .blog-caption h4{font-size:17px;line-height:1.5;font-weight:700;margin-bottom:12px}.blog-list ul li .blog-caption h4 a,.product-caption h4 a{color:#131e22}.latest-post ul li{padding:.75rem 1.25rem;font-size:14px;color:#78909c;border-bottom:1px solid rgba(0,0,0,.125)}.latest-post ul li h4{font-size:14px;font-weight:600;line-height:1.5;margin-bottom:5px}.blog-list ul li .blog-caption h4 a,.latest-post ul li h4 a,.product-box,.product-caption h4 a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.latest-post ul li h4 a{display:block;color:#131e22}.latest-post ul li h4 a:hover{color:#1b00ff}.blog-detail,.product-box{background:#fff}.blog-detail .blog-caption{padding:20px;font-size:16px;color:#78909c}.blog-detail ul li{position:relative;padding-left:25px;margin-bottom:5px;line-height:28px}.blog-detail ul li:before{content:"\f101";font-family:"FontAwesome";position:absolute;color:#405158;left:0;top:0}.blog-detail ol,.blog-detail ul{padding-left:15px}.blog-detail ol>li{position:relative;padding-left:20px;margin-bottom:5px}.blog-detail ol,.blog-detail ol>li>ol,.blog-detail ol>li>ol>li>ol{counter-reset:my-badass-counter}.blog-detail ol>li>ol>li:before{content:counter(my-badass-counter,lower-alpha);counter-increment:my-badass-counter}.blog-detail ol>li:before,.blog-detail ol>li>ol>li>ol>li:before{content:counter(my-badass-counter,lower-roman);counter-increment:my-badass-counter}.blog-detail ol>li:before{content:counter(my-badass-counter);position:absolute;left:0;top:0;color:#405158;font-weight:500}.gallery-wrap>ul>li,.product-list ul li{margin-bottom:30px}.product-box{border-radius:10px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08);height:100%}.producct-img{overflow:hidden}.producct-img img{position:relative;border-radius:10px 10px 0 0;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out}.product-list ul li:hover .producct-img img{-webkit-transform:scale(1.3);transform:scale(1.3)}.product-caption{padding:20px}.product-caption h4{font-size:18px;margin-bottom:8px}.product-caption .btn{border-radius:22px}.price{font-size:15px;font-weight:600;padding-bottom:15px;color:#78909c}.price ins{text-decoration:none;display:inline-block;margin-left:10px;color:#131e22}.product-slider{margin-bottom:20px}.slider-arrow .slick-arrow,.slider-arrow .slick-arrow:before{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.slider-arrow .slick-arrow{position:absolute;bottom:0;width:40px;height:40px;top:50%;margin-top:-20px;border:1px solid #1b00ff;background:#1b00ff;border-radius:0;cursor:pointer;font-size:0;text-align:center}.slider-arrow .slick-arrow:hover{border-color:#2a2d31}.slider-arrow .slick-arrow:hover:before{color:#fff}.slider-arrow .slick-arrow:before{font-family:"dropways";font-size:16px;color:#fff;line-height:38px}.slider-arrow .slick-arrow.slick-prev{z-index:12;left:15px}.slider-arrow .slick-arrow.slick-prev:before{content:"\eabc"}.slider-arrow .slick-arrow.slick-next{right:15px}.slider-arrow .slick-arrow.slick-next:before{content:"\eabd"}.product-slide-nav{padding:10px}.product-detail-desc{font-size:16px;line-height:1.5}.faq-wrap .card{margin-bottom:20px;border:0;border-radius:10px;overflow:hidden;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08)}.faq-wrap .card-header{background:#fff;text-align:left;border:0;padding:0}.faq-wrap .card-header .btn{background:0 0;border-radius:0;text-align:left;font-size:16px;font-weight:500;padding:16px 40px 16px 16px;position:relative;white-space:normal;color:#1b00ff;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.faq-wrap .card-header .btn.collapsed{color:#222}.faq-wrap .card-header .btn:after{content:"\f209";font-family:"Ionicons";position:absolute;right:10px;color:#1b00ff;top:16px}.faq-wrap .card-header .btn.collapsed:after{content:"\f218"}.faq-wrap .card-body{padding-top:0}.pricing-table-wrap .card{border:0;-webkit-box-shadow:0 0 48px rgba(0,0,0,.2);box-shadow:0 0 48px rgba(0,0,0,.2)}.pricing-table-wrap .btn{padding-left:30px;padding-right:30px}.pricing-table-wrap .list-group-flush .list-group-item{background:0 0}.pricing-card{text-align:center}.pricing-card .price-title,.pricing-card .pricing-icon{padding-bottom:30px;text-align:center}.pricing-card .pricing-icon img{margin-top:-30px}.pricing-card .price-title{text-transform:uppercase;font-size:16px;font-weight:500;color:#1b00ff;letter-spacing:.15em}.pricing-card .pricing-price{font-size:60px;line-height:1;font-weight:400;padding-bottom:40px;padding-top:20px;color:#1b00ff}.pricing-card .pricing-price sub{font-size:16px;font-weight:400;color:#fd486e}.pricing-card .pricing-price sup{font-size:20px;font-weight:400;color:#fd486e;top:10px;vertical-align:top}.pricing-card .text{padding-bottom:30px}.pricing-card .cta{max-width:170px;margin:0 auto;-webkit-transform:translate(0,50%);transform:translate(0,50%)}.pricing-card .cta .btn{display:block;text-align:center}.pricing-card-style2,.profile-setting .profile-edit-list>li{padding:20px}.pricing-card-style2 .pricing-card-header{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-bottom:15px;border-bottom:2px solid #f0f2f7}.pricing-card-style2 .pricing-card-header .left{width:60%}.pricing-card-style2 .pricing-card-header .left h5{color:#1b00ff;font-size:18px;font-weight:700}.pricing-card-style2 .pricing-card-header .left p,.pricing-points ul li{font-size:14px;font-weight:500;margin-bottom:0}.pricing-card-style2 .pricing-card-header .right{width:40%;text-align:right;color:#000;font-size:18px;line-height:1.4;font-weight:700}.pricing-card-style2 .pricing-card-header .right span{display:block;font-size:12px}.pricing-card-style2 .pricing-card-body{padding-top:30px;padding-bottom:10px}.pricing-points ul li{padding:0 30px 0 0;margin-bottom:20px;color:#000;position:relative}.pricing-points ul li:after{content:"\f121";font-family:Ionicons;font-size:18px;line-height:1;color:#1061e4;position:absolute;right:0;top:0}.pricing-card-style2 .cta{max-width:170px;margin:0 auto;padding-top:10px;padding-bottom:20px}.pricing-card-style2 .cta .btn{display:block;text-align:center}.profile-photo{width:160px;height:160px;margin:0 auto 15px;position:relative}.profile-photo .edit-avatar{position:absolute;right:-15px;top:0;width:30px;height:30px;line-height:30px;font-size:14px;text-align:center;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.4);box-shadow:0 2px 4px rgba(0,0,0,.4)}.contact-directory-box .contact-avatar span img,.profile-photo .avatar-photo,.profile-photo .edit-avatar{border-radius:100%}.profile-info,.profile-skills,.profile-social{border-top:2px dashed #ecf0f4;padding:15px}.profile-info ul li{margin-bottom:15px;font-size:14px;font-weight:500;word-wrap:break-word}.profile-info ul li span{display:block;font-size:14px;color:#1b00ff;font-weight:500;padding-bottom:5px}.profile-info ul li:last-child{margin-bottom:0}.profile-social ul li{float:left;margin:5px}.profile-social ul li .btn{padding:0;width:36px;height:36px;text-align:center;line-height:36px}.notification-list.chat-notification-list ul li.active a,.notification-list.chat-notification-list ul li:hover a,.profile-tab .nav-tabs.customtab{background:#fff}.profile-tab .nav-tabs.customtab .nav-link{padding:18px 30px;background:0 0;font-weight:500}.profile-setting{height:100%}.profile-setting .container{max-width:800px}.profile-tab .tab-content{height:calc(100% - 63px)}.profile-setting .profile-edit-list{padding:30px 0;margin:0}.profile-setting .btn-outline-secondary{border-color:#ced4da}.profile-setting .profile-edit-list .form-control{font-weight:400}.task-title{padding-bottom:30px}.task-title a{padding-left:20px;padding-right:20px}.profile-task-wrap .container{max-width:800px}.profile-task-list ul li{position:relative;padding-left:30px;font-size:18px;line-height:24px;color:#263238;margin-bottom:25px}.profile-task-list.close-tasks ul li{color:#90a4ae;text-decoration:line-through}.profile-task-list ul li .task-type{font-size:16px;color:#90a4ae;font-weight:500}.profile-task-list ul li .task-assign{font-size:16px;color:#90a4ae;font-weight:300}.profile-task-list ul li .due-date{display:inline-block;padding-left:10px}.profile-task-list ul li .due-date:before{content:"\f111";font-family:"FontAwesome";display:inline-block;font-size:8px;vertical-align:middle;margin-right:8px;opacity:.5}.profile-task-list ul li .custom-control,.profile-timeline-list ul:before{position:absolute;left:0;top:0;width:100%;height:100%}.profile-task-list ul li .custom-control-label{position:absolute;width:100%;height:100%;left:0}.profile-task-list ul li .custom-control-label::after,.profile-task-list ul li .custom-control-label::before{top:50%;margin-top:-12px;left:0}.task-list-scroll{height:303px}.task-list-form>ul>li{padding:30px 20px;background:#e7eef0;position:relative;border-bottom:2px dashed #2976aa}.task-list-form>ul>li .remove-task{position:absolute;right:22px;top:3px;font-size:18px;color:#2976aa}.task-list-form .form-control{font-weight:400}.task-list-form textarea.form-control{height:80px}.task-list-form .btn-outline-primary{border-color:#ced4da}.add-more-task,.chat-box .chat-desc ul li.admin_chat .chat-body .chat_time{text-align:right}.add-more-task a{display:inline-block;padding:10px;color:#2976aa}.profile-timeline{padding:30px}.profile-timeline .timeline-month{margin-bottom:20px}.profile-timeline .timeline-month h5{font-size:16px;font-weight:700}.profile-timeline-list ul{padding-left:15px;position:relative}.profile-timeline-list ul:before{content:"";width:2px;left:4px;background-color:#1b00ff}.profile-timeline-list ul li{margin-bottom:10px;position:relative;padding-left:100px;line-height:24px;padding-top:8px}.profile-timeline-list ul li p{margin-bottom:5px;font-size:14px;line-height:1.5;font-weight:500}.profile-timeline-list ul li:before{content:"";width:12px;height:12px;border:2px solid #1b00ff;border-radius:22px;position:absolute;left:-16px;top:15px;background:#1b00ff}.profile-timeline-list .date{position:absolute;top:8px;left:5px;font-weight:700;font-size:13px}.profile-timeline-list .task-name{text-transform:uppercase;font-weight:600;color:#1b00ff;font-size:14px;line-height:22px;position:relative}.profile-timeline-list .task-name i{position:absolute;left:-22px;top:0;font-size:18px}.profile-timeline-list .task-time{color:rgba(24,31,72,.71);font-size:12px;font-weight:700}.contact-directory-list>ul>li{margin-bottom:30px}.contact-directory-box{background:#fff;min-height:400px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08);border-radius:10px}.contact-dire-info{padding:30px 25px 20px}.contact-directory-box .contact-avatar span{display:block;margin:0 auto 20px;width:150px;height:150px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3);border-radius:100%;overflow:hidden}.contact-directory-box .contact-name,.contact-directory-box .contact-skill{padding-bottom:20px}.contact-directory-box .contact-name h4{font-weight:600;font-size:18px}.contact-directory-box .contact-name p{margin-bottom:2px;color:#7f92a9;font-size:14px}.contact-directory-box .contact-skill .badge{border:1px solid #ced9ee;font-weight:500;font-size:16px;padding:7px 11px;margin:3px 0}.contact-directory-box .contact-skill .badge.badge-primary{background:#1b00ff;border-color:#1b00ff;-webkit-box-shadow:0 0 10px rgba(0,0,0,.2);box-shadow:0 0 10px rgba(0,0,0,.2)}.contact-directory-box .profile-sort-desc{font-weight:400;color:#6f7c8d}.contact-directory-box .view-contact a{display:block;text-align:center;text-transform:uppercase;font-size:15px;font-weight:600;padding:20px 5px;letter-spacing:.05em;position:relative;border-radius:0 0 6px 6px}.contact-directory-box:hover .view-contact a:before{opacity:0}.contact-directory-box .view-contact a,.contact-directory-box .view-contact a:before,.notification-list.chat-notification-list ul li a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.contact-directory-box .view-contact a:before{content:"";width:80px;height:1px;background:#1b00ff;position:absolute;left:0;right:0;top:0;margin:0 auto}.invoice-wrap{overflow:auto}.invoice-box{background:#fff;width:800px;margin:0 auto;padding:20px}.invoice-header{padding-bottom:30px}.invoice-desc .invoice-sub{width:40%;float:left;padding:8px 15px}.invoice-desc .invoice-hours,.invoice-desc .invoice-rate{width:20%;float:left;padding:8px 15px}.invoice-desc .invoice-subtotal{width:20%;float:right;padding:8px 15px}.invoice-desc .invoice-desc-head{background:#eaeaea;font-weight:500}.invoice-desc .invoice-desc-body{padding-top:15px;min-height:400px}.invoice-desc .invoice-desc-footer .invoice-desc-body{min-height:50px}.invoice-desc .invoice-desc-body ul li{border-bottom:1px solid #eaeaea;padding-bottom:5px}.chat-list{border:1px solid #ecf0f4;border-radius:5px;height:72vh}.chat-search{border-bottom:1px solid #ccc;padding:10px;position:relative}.chat-search>span{position:absolute;left:30px;top:30px;color:#33484f}.chat-search input{height:55px;width:100%;border:0;background:0 0;padding-left:50px;color:#33484f}.chat-list .notification-list{height:calc(100% - 76px);padding:10px}.notification-list.chat-notification-list ul li a{padding-top:16px}.notification-list.chat-notification-list ul li a p,.upload-file-box .right h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-list.chat-notification-list ul li a p .fa{font-size:10px}.notification-list.chat-notification-list ul li a img{-webkit-box-shadow:none;box-shadow:none}.chat-detail{height:72vh}.chat-profile-header{padding:10px 30px 10px 20px;border-bottom:1px solid #eff0f4}.chat-profile-header .left{float:left;width:60%}.chat-profile-header .left .chat-profile-photo{float:left;width:90px}.chat-profile-header .left .chat-profile-photo img{width:66px;height:66px;border-radius:100%}.chat-profile-header .left .chat-profile-name{float:left;padding-top:15px}.chat-profile-header .left .chat-profile-name h3{font-size:18px;color:#44aeff}.chat-profile-header .left .chat-profile-name span{font-size:12px;color:#a4a4a4;display:block;margin-bottom:6px}.chat-profile-header .left .chat-profile-name a{font-size:10px;color:#44aeff;display:inline-block}.chat-profile-header .right{float:right;width:40%;padding-top:15px}.chat-profile-header .right .text-light-orange{color:#f56767!important}.chat-box{height:calc(100% - 89px)}.chat-box .chat-desc{height:calc(100% - 86px);padding-bottom:10px}.chat-box .chat-desc ul li{margin-bottom:35px}.chat-box .chat-desc ul li .chat-img img,.upload-file-box .left .overlay a span{width:40px;height:40px;border-radius:100%}.chat-box .chat-desc ul li .chat-body{margin-left:60px}.chat-box .chat-desc ul li .chat-body p{font-size:15px;line-height:24px;color:#33484f;min-height:50px;padding:12px 15px;border:1px solid #ecf0f4;background:#ecf0f4;border-radius:5px}.chat-box .chat-desc ul li .chat-body .chat_time{font-size:12px;color:#a4a4a4}.chat-box .chat-desc ul li.admin_chat .chat-img,.chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .left{float:right}.chat-box .chat-desc ul li.admin_chat .chat-body{margin-left:0;margin-right:60px;text-align:right}.chat-box .chat-desc ul li.admin_chat .chat-body p{text-align:right;display:inline-block;background:#e1e1f5;padding:12px 15px;border-radius:5px;position:relative}.chat-box .chat-desc ul li.admin_chat .chat-body p:after{content:"";width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #389bff;position:absolute;right:-6px;top:16px;opacity:0}.chat-footer{height:86px;border-top:1px solid #eff0f4}.chat-footer .file-upload{float:left;width:55px}.chat-footer .file-upload a{display:block;text-align:center;font-size:20px;color:#222;padding-top:30px;padding-bottom:27px}.chat-footer .chat_text_area{float:left;width:calc(100% - 145px)}.chat-footer .chat_text_area textarea{width:100%;height:78px;border:0;font-size:16px;color:#33484f;padding-top:33px}.chat-footer .chat_send{float:right;width:90px}.chat-footer .chat_send .btn{display:block;width:100%;height:86px;font-size:35px;color:#44aeff;text-decoration:none;font-weight:900;padding:25px 10px 5px}.chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .right{float:right;padding-left:0;padding-right:17px}.upload-file-box{padding-bottom:10px}.upload-file-box .left{float:left;position:relative;width:114px;height:84px;overflow:hidden;border-radius:5px}.upload-file-box .left .overlay{background-color:rgba(0,0,0,.5);position:absolute;left:0;top:0;width:100%;height:100%}.upload-file-box .left .overlay a{display:block;width:100%;height:100%}.upload-file-box .left .overlay a span{width:35px;height:35px;display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;background:#fff;color:#222;line-height:35px;text-align:center;font-size:22px}.upload-file-box .right{float:left;width:calc(100% - 114px);padding-left:17px;padding-top:17px}.upload-file-box .right h3{display:block;font-size:14px;color:#000;margin-bottom:5px}.upload-file-box .right a{display:inline-block;color:#1d8df1;font-size:14px}.chat-profile-section{height:calc(100vh - 274px)}.chat-profile-section .chat--profile-desc{height:100%;padding:20px}.wizard-content .wizard>.actions>ul>li>a{background-color:#1b00ff;font-weight:600}.wizard-content .wizard>.actions>ul>li>a[href="#previous"]{border-color:#1b00ff;border-width:2px;color:#1b00ff}.wizard-content .wizard>.actions>ul>li.disabled>a[href="#previous"]{display:none;border-color:#1b00ff}.widget-style1{padding:10px}.widget-style1 .widget-data{width:calc(100% - 80px);padding:0 5px 0 15px}.widget-style1 .progress-data{width:80px}.widget-style1 .progress-data .apexcharts-canvas{margin:0 auto}.right-sidebar .right-sidebar-body .right-sidebar-body-content,.widget-style2 .widget-data{padding:20px}.right-sidebar{position:fixed;right:-315px;top:0;width:315px;height:100%;background:#fff;z-index:123;-webkit-box-shadow:0 0 18px rgba(0,0,0,.08);box-shadow:0 0 18px rgba(0,0,0,.08);-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.right-sidebar-visible{right:0}.right-sidebar .sidebar-title{height:70px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:5px 15px;border-bottom:1px solid #d4d4d4}.right-sidebar .sidebar-title h3{font-weight:600}.right-sidebar .sidebar-title h3 span{font-weight:400;color:#000}.right-sidebar .close-sidebar{font-size:18px;color:#888;cursor:pointer}.right-sidebar .right-sidebar-body{height:calc(100% - 70px);overflow:auto}.sidebar-btn-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.sidebar-btn-group .btn{width:48%}.sidebar-radio-group .custom-control-inline{margin-right:0;width:25%;margin-bottom:10px}.bootstrap-tagsinput .label-info{background:#1b00ff}.bootstrap-touchspin .btn{background:#1b00ff;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:0;padding-bottom:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.bootstrap-touchspin .input-group-btn-vertical .btn{height:52%}.bootstrap-touchspin .bootstrap-touchspin-postfix,.bootstrap-touchspin .bootstrap-touchspin-prefix{border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4}.asColorPicker-buttons a,.asColorPicker-gradient-control a{font-size:13px;font-weight:500}.dropzone{border-color:#1b00ff}.dropzone .dz-preview .dz-remove{color:red}.fc-view-container tr:first-child>td>.fc-day-grid-event{background:#1b00ff}.fc-today.alert-info{background:#e0deef}.fc-day-number,.fc-ltr .fc-axis{font-size:13px;font-weight:500}.swal2-popup .swal2-title{font-size:18px;font-weight:600}.swal2-popup .swal2-styled.swal2-confirm{background:#100099}.documentation-wrap{position:relative;height:100%;padding-left:300px}.documentation-wrap .doc-sidebar{position:absolute;left:0;top:0;background:#fff;width:300px;height:100%}.doc-content-wrap{padding:30px}.table-badge{padding:8px 20px;font-size:14px;background:#1b00ff;color:#ebecef;font-weight:500}
-@media (min-width:1301px) and (max-width:1400px){.header{width:calc(100% - 250px)}.brand-logo,.left-side-bar{width:250px}.main-container{padding-left:270px}}@media (min-width:1200px) and (max-width:1400px){.device-usage-chart .width-50-p{width:100%}}@media (max-width:1300px){.main-container{padding-left:0;padding-right:0}.header-left .menu-icon{display:-webkit-box;display:-ms-flexbox;display:flex}.header{width:100%}.left-side-bar{left:-281px}.left-side-bar .close-sidebar{display:block}.left-side-bar:before{display:block;opacity:0;visibility:hidden}.left-side-bar.open:before{opacity:1;visibility:visible;display:none}.left-side-bar .brand-logo a{text-align:left;padding:5px 15px}.left-side-bar .brand-logo a .svg,.left-side-bar .brand-logo a img{margin:0}.header-right .brand-logo{display:table}.header-right .menu-icon{display:block;padding-left:15px;padding-top:7px}.footer-wrap{width:100%}.mobile-menu-overlay{display:block;opacity:0;visibility:hidden}.mobile-menu-overlay.show{opacity:.6;visibility:visible}}@media (min-width:1025px){.header-left .header-search{display:block!important}}@media (max-width:1024px){.header{position:relative}.header-left{width:25%}.header-right{width:75%}.main-container{padding-top:10px}.header-left .search-toggle-icon{display:-webkit-box;display:-ms-flexbox;display:flex}.header-left .header-search{padding:15px 20px;position:absolute;left:0;top:100%;background:#fff;display:none}.register-page-wrap .wizard-content .wizard{padding-left:300px}.register-page-wrap .wizard-content .wizard .steps{width:300px}}@media (max-width:991px){.device-usage-chart .width-50-p{width:100%}}@media (max-width:767px){.login-box{padding:40px 15px}.login-header .brand-logo a img{max-width:150px}.pre-loader{background-size:43%}.xs-pd-20-10{padding:20px 10px}.xs-mb-20{margin-bottom:20px}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h4,h4{font-size:1.4rem}.main-container,.timeline ul li{padding-bottom:0}.footer-wrap{position:relative;height:auto}.user-notification{margin-right:5px}.user-notification .dropdown-menu{width:100%;min-width:300px}.user-info-dropdown .dropdown-toggle .user-name{display:none}.page-header{margin-bottom:30px}.forgot-password{text-align:center}.ionicons-list li{width:16.6%}.timeline .timeline-date{position:relative;top:0;margin-bottom:20px;left:35px}.timeline ul:before{left:10px}.timeline ul li{padding-left:0}.timeline ul li:before{left:2px;top:28px}.fc-toolbar .fc-left,.fc-toolbar .fc-right{float:none!important;padding-bottom:10px}.fc-toolbar .fc-left:after,.fc-toolbar .fc-right:after{content:"";clear:both;display:table}.faq-wrap .card-header .btn{font-size:17px}.error-page h1{font-size:150px}}@media (max-width:660px){.docs-buttons .btn-group-crop{display:block}.select-role .btn-group .btn{padding-left:35px;font-size:14px}.select-role .btn-group .btn .icon{left:5px;width:25px;height:25px}.select-role .btn-group .btn .icon .svg{width:25px;height:25px}.forgot-password a{font-size:14px;font-weight:600}.btn-group-lg>.btn,.btn-lg{font-size:16px}.register-page-wrap .wizard-content .wizard{padding-left:0}.register-page-wrap .wizard-content .wizard .steps{display:none}}
\ No newline at end of file
+@charset "utf-8";body,html{-webkit-font-smoothing:antialiased;width:100%;height:100%}html{-webkit-text-size-adjust:none;-moz-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=submit]{-webkit-appearance:none}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}body{margin:0;padding:0;font-family:'Inter',sans-serif;font-weight:400;min-height:100%;color:#031e23;background:#ecf0f4}a{text-decoration:none;color:#555}a:focus,a:hover{outline:0;text-decoration:none}:focus{outline:0}img{border:0;vertical-align:top;max-width:100%;height:auto}input,select,textarea{resize:none;font-family:'Inter',sans-serif}select,textarea{outline:0}.slick-slide,a,button,input{outline:0!important}button::-moz-focus-inner{border:0}h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-weight:700;color:#202342;font-family:'Inter',sans-serif}ol,p,ul{padding:0}ol,ul{margin:0;list-style:none}p{margin:0 0 15px}.container{max-width:1120px;width:100%}.pre-loader{background:#fff;background-position:center center;background-size:13%;position:fixed;left:0;top:0;width:100%;height:100%;z-index:12345;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pre-loader .loader-logo{padding-bottom:15px}.pre-loader .loader-progress{height:8px;border-radius:15px;max-width:200px;margin:0 auto;display:block;background:#ecf0f4;overflow:hidden}.pre-loader .bar{width:0%;height:8px;display:block;background:#1b00ff}.pre-loader .percent{text-align:center;font-size:24px;display:none}.pre-loader .loading-text{text-align:center;font-size:18px;font-weight:500;padding-top:15px}.mx-w-150{max-width:150px}.mx-h-300{max-height:300px}.mx-h-350{max-height:350px}.mx-h-380{max-height:380px}.mx-h-400{max-height:400px}.mx-h-450{max-height:450px}.pd-0{padding:0}.padding-top-10{padding-top:10px}.padding-top-30{padding-top:30px}.padding-bottom-30{padding-bottom:30px}.pd-5{padding:5px}.pd-10{padding:10px}.pd-20{padding:20px}.chat-box .chat-desc ul,.pd-ltr-20{padding:20px 20px 0}.pd-30{padding:30px}.pb-10{padding-bottom:10px}.pb-15{padding-bottom:15px}.pb-20{padding-bottom:20px}.pb-30{padding-bottom:30px}.pt-10{padding-top:10px}.pt-15{padding-top:15px}.pt-20{padding-top:20px}.pt-30{padding-top:30px}.pr-10{padding-right:10px}.pr-20{padding-right:20px}.pr-30{padding-right:30px}.pl-10{padding-left:10px}.pl-20{padding-left:20px}.pl-30{padding-left:30px}.margin-5{margin:5px}.mt-15{margin-top:15px}.mt-30{margin-top:30px}.device-manage-progress-chart ul li,.mb-30{margin-bottom:30px}.mb-20{margin-bottom:20px}.mb-15{margin-bottom:15px}.mb-10{margin-bottom:10px}.mb-5{margin-bottom:5px!important}.mr-10{margin-right:10px}.mr-20{margin-right:20px}.font-30{font-size:30px;line-height:1.33em}.font-24{font-size:24px;line-height:1.42em}.font-20{font-size:20px;line-height:1.5em}.font-18{font-size:18px;line-height:1.55em}.font-16{font-size:16px;line-height:1.62em}.font-14{font-size:14px;line-height:1.71em}.font-12{font-size:12px;line-height:1.83em}.h1{font-size:40px;font-weight:700;line-height:1.3}.h1,.h2,.h3{color:#1b3133;font-family:'Inter',sans-serif}.h2{font-size:28px;font-weight:700;line-height:1.35}.h3{font-size:24px;line-height:1.5}.h3,.h4{font-weight:700}.h4,.h5,.page-header h4{font-size:20px;line-height:1.35;color:#1b3133;font-family:'Inter',sans-serif}.h5{font-size:18px;font-weight:600}.line-height-1{line-height:1}.line-height-1-2{line-height:1.2}.line-height-1-3{line-height:1.3}.weight-300{font-weight:300}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-600{font-weight:600}.weight-700{font-weight:700}.weight-800{font-weight:800}.height-auto{height:auto}.height-100-p{height:100%}.width-50-p{width:50%}.width-box{width:50px;height:50px}.max-width-200{max-width:200px}.max-width-300{max-width:300px}.max-width-400{max-width:400px}.max-width-500{max-width:500px}.max-width-600{max-width:600px}.max-width-700{max-width:700px}.max-width-800{max-width:800px}.max-width-900{max-width:900px}.max-width-1000{max-width:1000px}.min-height-200px{min-height:200px}.bg-cover{background-size:cover!important}.bg-light-blue{background-color:#e1e1f5}.color-light-blue{color:#e1e1f5}.bg-light-gray{background-color:#ecf0f4}.bg-white{background:#fff}.color-white{color:#fff}.bg-light-green{background-color:#41ccba}.text-light-green{color:#00e091}.bg-blue{background-color:#1b00ff}.text-blue{color:#1b00ff}.text-light-blue{color:#2976aa}.bg-light-orange{background-color:#f56767}.text-light-orange{color:#f56767}.bg-light-purple{background-color:#a683eb}.text-light-purple{color:#a683eb}.bg-orange{background-color:#f5956c}.text-orange{color:#f5956c}.text-yellow{color:#ecc72f}.text-green{color:#46be8a}.text-orange-50{color:#f2a654}.text-blue-50{color:#62a8ea}.text-red-50{color:#e14e50}.mCSB_inside>.mCSB_container{margin-right:0}.border-radius-0{border-radius:0}.border-radius-4{border-radius:4px}.border-radius-5{border-radius:5px}.border-radius-6{border-radius:6px}.border-radius-8{border-radius:8px}.border-radius-10{border-radius:10px}.border-radius-100,.user-info-dropdown .dropdown-toggle .user-icon img{border-radius:100%}.box-shadow{-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08)}.wave1{background-image:url(../images/wave.png);background-size:cover;background-position:center bottom;background-repeat:no-repeat}.card-box,.da-card{background-color:#fff;border-radius:10px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08)}.card-img-top{border-radius:10px 10px 0 0}.card-img-bottom{border-radius:0 0 10px 10px}.card-img{border-radius:10px}.card-title{font-size:18px;font-weight:600}.card-header{font-weight:500;font-size:16px}.card-text,.price del{font-size:15px}.badge{padding:.75em}.page-link:focus{-webkit-box-shadow:none;box-shadow:none}.highcharts-root{font-family:'Inter',sans-serif!important}.bootstrap-select .dropdown-toggle{height:45px}.bootstrap-select .dropdown-toggle.btn-light{background-color:transparent;border-color:#d4d4d4}.bootstrap-select .dropdown-toggle.btn-light:not(:disabled):not(.disabled):active{background-color:transparent;border-color:#d4d4d4}.dropdown-toggle::after{content:"\f107";font-family:"FontAwesome";vertical-align:unset;width:auto;height:auto;border:0!important}.bootstrap-select .dropdown-toggle::after{position:relative;right:5px}.dropdown.show>.dropdown-toggle::after{content:"\f106"}.dropdown-toggle.no-arrow:after{display:none}.dropdown-menu{border:0;padding:0;overflow:hidden;border-radius:10px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.1);box-shadow:0 0 28px rgba(0,0,0,.1)}.dropdown-item{font-size:16px;font-weight:400;padding:.657rem 1rem;color:#444;font-family:'Inter',sans-serif;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.dropdown-item:focus,.dropdown-item:hover{background:#ecf0f4;color:#1b00ff}.form-group{margin-bottom:20px}.form-group>label{font-weight:500;font-size:14px}.custom-file-input,.custom-file-label,.custom-select,.form-control{font-family:'Inter',sans-serif;color:#131e22;font-weight:400;height:45px;border-color:#d4d4d4;letter-spacing:.035em;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.form-control.form-control-sm{height:38px}.form-control.form-control-line{border-left:0;border-right:0;border-top:0;border-radius:0}.custom-file-label{padding-top:.475rem}.custom-file-label::after{height:100%;padding-top:.475rem}textarea.form-control{height:180px}.custom-file-input:focus,.custom-select:focus,.form-control:focus{color:#131e22;border-color:#1b00ff;-webkit-box-shadow:0 0 28px rgba(0,0,0,.1);box-shadow:0 0 28px rgba(0,0,0,.1)}.form-control.height-auto{height:auto}.input-group{margin-bottom:25px}.input-group.custom>.custom-select,.input-group.custom>.form-control{width:100%}.input-group.custom>.custom-select:not(:first-child),.input-group.custom>.form-control:not(:first-child){border-radius:.25rem;padding-left:50px}.input-group.custom>.custom-select:not(:last-child),.input-group.custom>.form-control:not(:last-child){border-radius:.25rem;padding-right:50px}.input-group-prepend.custom{position:absolute;left:0;top:0;z-index:12;height:100%}.input-group-append.custom{position:absolute;right:0;top:0;z-index:12;height:100%}.input-group-text{border:0;background:0 0}.input-group-text i{font-size:20px}.form-control:focus~.input-group-append .fa{color:#1b00ff}.form-control-lg,.input-group-lg>.form-control,.input-group-lg>.input-group-append>.btn,.input-group-lg>.input-group-append>.input-group-text,.input-group-lg>.input-group-prepend>.btn,.input-group-lg>.input-group-prepend>.input-group-text{height:50px;font-size:16px}.has-success{color:#28a745}.form-control-success{border-color:#28a745;background-image:url(../images/check-mark-green.png);background-repeat:no-repeat;background-position:center right 10px;background-size:20px 20px}.form-control-success:focus{border-color:#28a745;-webkit-box-shadow:0 0 0 1px #28a745;box-shadow:0 0 0 1px #28a745}.has-warning{color:#ffc107}.form-control-warning{border-color:#ffc107;background-image:url(../images/caution-sign.png);background-repeat:no-repeat;background-position:center right 10px;background-size:20px 20px}.form-control-warning:focus{border-color:#ffc107;-webkit-box-shadow:0 0 0 1px #ffc107;box-shadow:0 0 0 1px #ffc107}.has-danger{color:#dc3545}.form-control-danger{border-color:#dc3545;background-image:url(../images/cross.png);background-repeat:no-repeat;background-position:center right 10px;background-size:14px 14px}.form-control-danger:focus{border-color:#dc3545;-webkit-box-shadow:0 0 0 1px #dc3545;box-shadow:0 0 0 1px #dc3545}.btn{font-family:'Inter',sans-serif;letter-spacing:0;font-weight:500;padding:.438rem 1rem}.btn-lg{padding:.657rem 1rem}.btn-group-lg>.btn,.btn-lg{font-size:18px}.btn-group-sm>.btn,.btn-sm{padding:.4rem .8rem;font-size:14px}.btn.focus,.btn:focus{-webkit-box-shadow:none!important;box-shadow:none!important}.btn-rounded{border-radius:25px}.breadcrumb{background:0 0;padding:.75rem 0}.breadcrumb-item.active{color:#1b00ff;font-weight:500}.breadcrumb-item a{color:#031e23}.breadcrumb-item+.breadcrumb-item::before{font-family:"FontAwesome";content:"\f105"}.customscroll-10-p>.mCustomScrollBox>.mCSB_container{padding:10px}.datepicker{z-index:1060}.datepicker--day-name,.datepicker--time-current-hours,.datepicker--time-current-minutes{color:#1b00ff}.datepicker--nav-action path{stroke:#1b00ff}.datepicker--cell.-focus-,.datepicker--nav-action:hover,.datepicker--nav-title:hover{background:#e1e1f5;color:#1b00ff}.datepicker--cell.-selected-{color:#fff}.datepicker--time-current-hours:after,.datepicker--time-current-minutes:after{display:none}.datepicker-inline .datepicker{margin:0 auto}.form-control.time-picker-default:disabled,.form-control.time-picker-default[readonly],.form-control.time-picker:disabled,.form-control.time-picker[readonly]{background:#fff}.custom-control{padding-left:35px;cursor:pointer;padding-bottom:5px}.custom-control-label{cursor:pointer;font-weight:400}.custom-control-label::before{width:20px;height:20px;top:2px;left:-30px;background-color:transparent;border:2px solid #1b00ff}.custom-control-label::after{width:20px;height:20px;left:-30px;background-size:60%;top:2px}.custom-control-input:focus~.custom-control-label::before{-webkit-box-shadow:none;box-shadow:none;background-color:none}.custom-checkbox .custom-control-input:checked~.custom-control-label::before{background-color:#1b00ff}.custom-checkbox .custom-control-input:checked~.custom-control-label::after{background-image:url(../images/check-mark.png);background-repeat:no-repeat;background-position:center center}.custom-radio .custom-control-input:checked~.custom-control-label::before{background-color:#1b00ff}.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before{border:2px solid transparent}.select2-container .select2-selection--single{height:45px;border-color:#d4d4d4;outline:0;letter-spacing:.035em;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.select2-container--default.select2-container--focus .select2-selection--multiple,.select2-dropdown{border-color:#d4d4d4}.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:43px}.select2-container--default .select2-selection--single .select2-selection__arrow{height:43px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#1b00ff;color:#fff;border-color:#1b00ff}.select2-container--default .select2-selection--multiple{min-height:45px;border-color:#d4d4d4}.select2-container--default .select2-selection--multiple .select2-selection__rendered{padding-top:3px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#fff}.select2-dropdown{-webkit-box-shadow:0 0 28px rgba(0,0,0,.1);box-shadow:0 0 28px rgba(0,0,0,.1)}.select2-search--dropdown{padding:10px}.select2-container--default .select2-search--dropdown .select2-search__field{border-radius:5px}.bootstrap-select .dropdown-menu li .dropdown-item.active:hover,.select2-container--default .select2-results__option[aria-selected=true]{background-color:#1b00ff;color:#fff}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#1b00ff}.bootstrap-select.btn-group .dropdown-menu.inner,table.dataTable>tbody>tr.child ul.dtr-details .dtr-title{display:block}.bootstrap-select .dropdown-toggle:focus{outline:0!important}.bootstrap-select .dropdown-header{color:#222;font-weight:700;font-size:15px}.bootstrap-select .dropdown-menu li .dropdown-item:hover{color:#1b00ff}.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark{top:13px}.bootstrap-select .bs-ok-default:after{border-width:0 2px 2px 0}.dropup .dropdown-toggle::after{content:"\f107";font-family:"FontAwesome";vertical-align:unset;width:auto;height:auto;border:0!important}.bootstrap-select.btn-group .dropdown-menu li a{display:block;font-size:15px;font-weight:400;padding:.55rem 1rem;color:#667f87;font-family:'Inter',sans-serif;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.bootstrap-select.btn-group .dropdown-menu li.divider{border:1px solid #eaeaea}.bootstrap-select.btn-group .dropdown-menu li.selected a{background:#e1e1f5;color:#131e22}.bootstrap-select.btn-group .dropdown-menu li.disabled a{color:#cecece}.bootstrap-select.btn-group .dropdown-menu li a:hover{background:#e1e1f5;color:#131e22}.bootstrap-select.btn-group .dropdown-menu li a span.check-mark{background:url(../images/check-mark-green.png);width:15px;height:15px;background-size:contain}.label-info{background-color:#009efb}.bootstrap-tagsinput .tag{display:inline-block;padding:2px 6px;margin:2px;font-size:15px;border-radius:2px}.docs-options .dropdown-menu{max-height:250px;overflow:auto}.docs-buttons{padding-top:15px}.docs-buttons label,.notification-list ul li a p,.project-info-right p{margin-bottom:0}.docs-buttons .btn{margin-bottom:5px}.table thead th{font-weight:600;font-size:15px;border-bottom:0;padding-left:1rem}.table td,.table th{vertical-align:middle}.table td{font-size:14px;font-weight:500;padding:1rem}.table-striped tbody tr:nth-of-type(odd){background:#eaeef2}table.dataTable.display tbody tr.odd,table.dataTable.display tbody tr:hover,table.dataTable.hover tbody tr:hover,table.dataTable.stripe tbody tr.odd{background:#ecf0f3!important}table.dataTable tbody tr.selected,table.dataTable.display tbody tr:hover.selected,table.dataTable.hover tbody tr:hover.selected{background-color:#181f48!important;color:#fff}table.dataTable.display tbody tr.odd.selected,table.dataTable.stripe tbody tr.odd.selected{background-color:#1b00ff!important}table.dataTable thead .sorting:after,table.dataTable thead .sorting:before,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc_disabled:after,table.dataTable thead .sorting_desc_disabled:before{font-family:"dropways";font-size:14px}table.dataTable thead .sorting:before,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc_disabled:before{content:"\eabb"}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_desc_disabled:after{content:"\eaba";right:.2em}.blog-list ul li:hover .blog-caption h4 a,.fontawesome-icon-list .fa-hover:hover a,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:after{color:#1b00ff}table.dataTable>tbody>tr.child ul.dtr-details{white-space:normal}.dataTables_length,.dt-buttons,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{padding-left:15px;padding-right:15px}.dt-checkbox,.dt-checkbox input{width:20px;height:20px;position:relative}.dt-checkbox input{position:absolute;opacity:0;z-index:1;left:0;top:0}.dt-checkbox span,.dt-checkbox span:before{width:20px;height:20px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.dt-checkbox span{position:relative;display:block;border:1px solid #9e9e9e;border-radius:4px}.dt-checkbox span:before{content:"";background:url(../images/check-mark.png) no-repeat;position:absolute;left:0;top:-1px;background-size:12px 12px;background-position:center center;-webkit-transform:scale(0);transform:scale(0)}.dt-checkbox input:checked~span{background:#1b00ff;border-color:#1b00ff;color:#fff}.dt-checkbox input:checked~span:before{-webkit-transform:scale(1);transform:scale(1)}.plyr{border-radius:10px;-webkit-box-shadow:0 0 10px 2px rgba(0,0,0,.15);box-shadow:0 0 10px 2px rgba(0,0,0,.15)}.popover-header{font-weight:500}.list-group-flush .list-group-item{border-top:0;margin-bottom:0}.docs-cropped .modal-body>canvas,.docs-cropped .modal-body>img,.img-preview>img{max-width:100%}.apexcharts-svg *{font-family:'Muli',sans-serif!important}table.dataTable.dtr-inline.collapsed>tbody>tr[role=row]>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr[role=row]>th:first-child:before{-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;font-family:"FontAwesome";background:0 0;content:"\f107";color:#444;font-size:23px;left:7px;top:50%;margin-top:-7px}table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before{content:"\f106";background:0 0}.header{position:fixed;height:70px;width:calc(100% - 280px);background:#fff;right:0;top:0;z-index:123;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-box-shadow:0 0 25px rgba(0,0,0,.1);box-shadow:0 0 25px rgba(0,0,0,.1)}.header-left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;width:50%}.brand-logo a .dark-logo,.header-left .menu-icon,.header-left .search-toggle-icon,.sidebar-light .brand-logo a .light-logo,.sidebar-menu .submenu li.dropdown:before{display:none}.header-left .header-search{width:100%;padding-left:20px}.header-left .header-search .form-group,.sidebar-menu .submenu li{position:relative}.header-left .header-search .search-icon{position:absolute;left:17px;top:12px;font-size:20px;color:#777}.header-left .header-search .dropdown{position:static;right:0;top:0;padding-right:10px}.header-left .header-search .dropdown .dropdown-toggle{position:absolute;right:0;top:0;width:45px;height:45px;font-size:20px;line-height:45px;text-align:center;border-radius:0 .25rem .25rem 0;color:#777;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.contact-directory-box:hover .view-contact a,.header-left .header-search .dropdown .dropdown-toggle:hover,.header-left .header-search .dropdown.show .dropdown-toggle{background:#1b00ff;color:#fff}.header-left .header-search .dropdown .dropdown-menu{width:100%;min-width:100%;margin-top:5px;padding:20px}.header-left .header-search .search-input{padding-left:50px;padding-right:55px}.header-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;height:70px;width:50%}.header-left .brand-logo{max-width:180px;display:block}.header-right .brand-logo a{padding:0 6px}.header-right .menu-icon{position:relative;right:0;float:left;display:none}.user-info-dropdown{padding:5px 10px 5px 0}.user-info-dropdown .dropdown-toggle{display:block;padding:5px 0;font-size:16px}.user-info-dropdown .dropdown-toggle .user-icon{width:52px;height:52px;font-size:24px;background:#ebeff3;color:#1b00ff;line-height:52px;text-align:center;display:inline-block;vertical-align:middle;border-radius:100%;-webkit-box-shadow:0 0 10px rgba(0,0,0,.18);box-shadow:0 0 10px rgba(0,0,0,.18)}.user-info-dropdown .dropdown-toggle .user-name{font-weight:500;display:inline-block;vertical-align:middle;margin-left:5px;color:#131e22;font-family:'Inter',sans-serif}.user-info-dropdown .dropdown-menu{min-width:185px}.dropdown-menu-icon-list .dropdown-item{position:relative;padding-left:45px}.dropdown-menu-icon-list .dropdown-item i{position:absolute;left:16px;top:50%;font-size:18px;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}.user-notification{float:right;margin-right:10px;padding:22px 5px 10px 0}.user-notification .dropdown-toggle{font-size:20px;padding:10px;color:#555;position:relative}.user-notification .dropdown-toggle .badge{position:absolute;right:8px;top:10px;background:#f5678a;width:5px;height:5px;display:block;padding:0}.user-notification .dropdown-menu{width:400px;padding:20px 10px}.notification-list ul li a{display:block;position:relative;padding:10px 15px 10px 75px;min-height:75px;color:#666;font-size:14px;font-weight:500;font-family:'Inter',sans-serif;border-radius:5px}.notification-list ul li a img{width:50px;height:50px;position:absolute;left:10px;top:13px;border-radius:10px;-webkit-box-shadow:1px 2px 13px rgba(0,0,0,.2);box-shadow:1px 2px 13px rgba(0,0,0,.2)}.notification-list ul li a h3{font-size:16px;color:#202342;font-weight:700;text-transform:capitalize;font-family:'Inter',sans-serif;padding-bottom:5px}.notification-list ul li a h3 span{float:right;font-size:12px;font-weight:500;padding-top:2px}.header-dark .header,.header-dark .header-left .header-search{background:#0b132b}.header-dark .header .user-info-dropdown .dropdown-toggle,.header-dark .header .user-info-dropdown .dropdown-toggle .user-name,.header-dark .menu-icon,.header-dark .search-toggle-icon,.header-dark .user-notification .dropdown-toggle{color:#ecf0f4}.header-dark .header .header-left .header-search .search-input{background:rgba(236,236,236,.1);border-color:transparent;color:#ecf0f4}.header-dark .header .header-left .header-search .search-input:focus{border-color:#4b4d50}.header-dark .header .header-left .header-search .search-input::-webkit-input-placeholder{opacity:1;color:#bfc4ca}.header-dark .header .header-left .header-search .search-input:-moz-placeholder,.header-dark .header .header-left .header-search .search-input::-moz-placeholder{opacity:1;color:#bfc4ca}.header-dark .header .header-left .header-search .search-input:-ms-input-placeholder{opacity:1;color:#bfc4ca}.header-dark .header .header-left .header-search .search-icon{color:#ecf0f4}.footer-wrap{width:100%;position:relative;text-align:center;font-weight:500}.footer-wrap a{color:#1b00ff;text-decoration:underline}.menu-icon,.search-toggle-icon{width:47px;height:47px;font-size:22px;line-height:1;color:#555;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.brand-logo{width:280px;height:70px;border-bottom:1px solid rgba(0,0,0,.1)}.brand-logo a{display:-webkit-box;display:-ms-flexbox;display:flex;vertical-align:middle;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;height:100%;font-size:22px;color:#fff;letter-spacing:.05em;font-weight:500;line-height:45px;font-family:'Inter',sans-serif;padding:0 20px}.brand-logo a .light-logo,.sidebar-light .brand-logo a .dark-logo{display:block}.brand-logo a span{display:block;vertical-align:middle;margin-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand-logo a .svg,.brand-logo a img{max-width:180px;display:block;height:auto}.left-side-bar,.left-side-bar:before{position:fixed;left:0;top:0;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.left-side-bar{width:280px;height:100vh;z-index:1000;background:#0b132b}.left-side-bar .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background:#ecf0f4}.left-side-bar:before{content:"";z-index:-1;width:100%;height:100%;background:rgba(0,0,0,.3);display:none}.left-side-bar.open{left:0}.left-side-bar .menu-block{height:calc(100vh - 70px)}.left-side-bar .close-sidebar{font-size:18px;color:#888;cursor:pointer;position:absolute;right:10px;top:20px;display:none}.sidebar-menu{padding:0 0 20px}.sidebar-menu .dropdown-toggle{display:block;padding:18px 15px 18px 67px;font-size:16px;color:#fff;font-weight:300;letter-spacing:.03em;position:relative;font-family:'Inter',sans-serif;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.sidebar-menu .dropdown-toggle:after{position:absolute;right:15px;font-size:18px}.sidebar-menu.icon-style-2 .dropdown-toggle:after{content:"\f217";font-family:Ionicons}.sidebar-menu.icon-style-2 .dropdown.show .dropdown-toggle:after{content:"\f208"}.sidebar-menu.icon-style-3 .dropdown-toggle:after{content:"\f101"}.sidebar-menu.icon-style-3 .dropdown.show .dropdown-toggle:after{content:"\f103"}.sidebar-menu .dropdown-toggle:hover,.sidebar-menu .show>.dropdown-toggle{background:rgba(0,0,0,.4);color:#fff}.sidebar-menu .dropdown-toggle .micon{position:absolute;left:10px;width:42px;height:42px;font-size:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;background-color:transparent;top:50%;text-align:center;border-radius:4px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}.sidebar-light .sidebar-menu>ul>li>.dropdown-toggle.active .micon,.sidebar-menu .dropdown-toggle:hover .micon,.sidebar-menu .show>.dropdown-toggle .micon{color:#fff}.sidebar-menu .dropdown-toggle .new{font-size:24px;line-height:14px;display:inline-block;vertical-align:middle}.sidebar-menu .dropdown-toggle .new:before{line-height:14px}.sidebar-menu .submenu{position:relative;width:100%;display:none}.sidebar-menu .submenu:before{content:"";width:1px;height:100%;position:absolute;left:31px;top:0;display:none;background:0 0;border-left:2px dashed #1b00ff}.sidebar-menu .submenu li>a:before{content:"\f208";position:absolute;line-height:1;left:28px;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);font-family:Ionicons}.sidebar-menu.icon-list-style-2 .submenu li>a:before{content:"\f10c";font-family:FontAwesome}.sidebar-menu.icon-list-style-3 .submenu li>a:before{content:"\eb1d";font-family:dropways}.sidebar-menu.icon-list-style-4 .submenu li>a:before{content:"\edd2";font-family:dropways}.sidebar-menu.icon-list-style-5 .submenu li>a:before{content:"\ee07";font-family:dropways}.sidebar-menu.icon-list-style-6 .submenu li>a:before{content:"\ee36";font-family:dropways}.mobile-menu-overlay,.sidebar-menu .submenu li a,.sidebar-menu .submenu li>a:before{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.sidebar-menu .submenu li a{display:block;padding:18px 15px 18px 60px;font-size:14px;color:#fff;font-weight:300;letter-spacing:.03em;position:relative;font-family:'Inter',sans-serif}.chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .left .overlay,.chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .right a,.sidebar-menu .submenu li.dropdown>a:before,.sitemap ul li.child:after,.sitemap ul li.child:before{display:none}.sidebar-menu .submenu li a.dropdown-toggle{padding:18px 15px 18px 60px;font-size:16px}.sidebar-menu .submenu.child{padding-left:15px}.sidebar-menu .submenu li:hover>a:before{left:18px}.sidebar-menu .submenu li a.active,.sidebar-menu .submenu li a:hover{color:#fff;background-color:rgba(0,0,0,.4)}.sidebar-menu>ul>li>.dropdown-toggle.active{background-color:rgba(0,0,0,.4)}.sidebar-light .sidebar-menu>ul>li>.dropdown-toggle.active{background-color:#0b132b;color:#fff}.sidebar-light .sidebar-menu .dropdown-toggle:hover .micon,.sidebar-light .sidebar-menu .show>.dropdown-toggle .micon,.sidebar-menu .dropdown-toggle.active,.sidebar-menu .dropdown-toggle.active .micon{color:#fff}.mobile-menu-overlay{position:fixed;left:0;top:0;width:100%;height:100%;background:#121421;opacity:.6;z-index:123;background-size:20px;background-position:98% 15px;display:none}.sidebar-light .left-side-bar{background:#fff}.sidebar-light .sidebar-menu .dropdown-toggle,.sidebar-light .sidebar-menu .submenu li a{color:#0b132b;font-weight:400}.sidebar-light .sidebar-menu .dropdown-toggle .micon{color:#0b132b}.sidebar-light .sidebar-menu .dropdown-toggle:hover,.sidebar-light .sidebar-menu .show>.dropdown-toggle,.sidebar-light .sidebar-menu .submenu li a.active,.sidebar-light .sidebar-menu .submenu li a:hover{color:#fff;background-color:#0b132b}.sidebar-light .menu-block .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{background-color:#0e132b}.sidebar-menu .dropdown-divider{margin:20px 0;border-color:rgba(255,255,255,.2);border-width:2px}.sidebar-light .sidebar-menu .dropdown-divider{border-color:rgba(0,0,0,.2)}.sidebar-menu .sidebar-small-cap{font-size:14px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:#fff;padding:0 15px 10px}.sidebar-light .sidebar-menu .sidebar-small-cap{color:#1502bd}.login-header{position:relative;padding:0 15px;background-color:#fff;z-index:1}.login-header .brand-logo{width:auto;border:0}.login-menu a{font-size:20px;font-weight:600;color:#1b00ff}.login-wrap{height:calc(100% - 70px);overflow:auto;padding:30px 0}body.IE .login-wrap,body.IE .register-page-wrap{display:block!important;padding:0}body.IE .login-wrap .container,body.IE .register-page-wrap .container{padding-top:10vh;padding-bottom:10vh}.login-wrap .container,.register-page-wrap .container{max-width:1300px}.login-wrap .mCustomScrollBox{height:auto;width:100%}.login-box{max-width:400px;width:100%;padding:40px 20px;margin:5px auto}.select-role{margin-bottom:25px;padding:0 5px}.select-role .btn-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 -10px}.select-role .btn-group .btn{margin:0 5px;border:1px solid #d4d4d4;text-align:left;padding-left:60px;padding-top:10px;padding-bottom:10px;width:calc(50% - 10px);border-radius:5px!important;font-size:16px;line-height:1.3;font-weight:700;color:#333;position:relative}.select-role .btn-group .btn.active,.select-role .btn-group .btn.active:focus,.select-role .btn-group .btn.focus.active{background-color:rgba(27,0,255,.05);border-color:rgba(27,0,255,.5);color:#1b00ff}.select-role .btn-group .btn .icon{position:absolute;left:15px;width:30px;height:30px;top:50%;margin-top:-15px}.select-role .btn-group .btn .icon .svg{width:30px;height:30px}.select-role .btn-group .btn span{display:block;font-size:14px;font-weight:500;color:#222}.login-box .login-title{padding:0 0 10px;margin-bottom:30px}.login-box .login-title h2{font-size:24px;font-weight:700}.login-box .login-img{display:block;margin:0 auto 20px;max-width:100px}.forgot-password{text-align:right}.register-page-wrap{height:calc(100% - 70px);padding:30px 0}.register-page-wrap .register-box{max-width:410px;margin:0 auto}.register-page-wrap,.register-page-wrap .wizard-content .wizard{position:relative;overflow:auto}.register-page-wrap .wizard-content .wizard .steps{position:relative}.register-page-wrap .wizard-content .wizard>.steps .step{position:relative;top:0;left:0;display:block;margin:0 auto;border-width:2px;background-color:#fff;border-color:rgba(24,31,72,.3)}.register-page-wrap .wizard-content .wizard>.steps>ul>li.done>a .step{background:url(../images/tick.svg) no-repeat #ecf0f4;font-size:0;background-size:22px;background-position:center center;border-color:rgba(24,31,72,.3)}.register-page-wrap .wizard-content .wizard.wizard-circle>.steps>ul>li:after,.register-page-wrap .wizard-content .wizard.wizard-circle>.steps>ul>li:before,.wizard-content .wizard.wizard-circle>.steps>ul>li.current~li:after,.wizard-content .wizard.wizard-circle>.steps>ul>li.current~li:before{background:rgba(24,31,72,.3)}.wizard-content .wizard.vertical.wizard-circle>.steps>ul>li.current~li:after,.wizard-content .wizard.vertical.wizard-circle>.steps>ul>li.current~li:before{background-color:transparent}.register-page-wrap .wizard-content .wizard>.steps>ul>li.current .step{border-color:#1b00ff;color:#181f48;background-color:#fff}.register-page-wrap .wizard-content .wizard>.steps .info,.register-page-wrap .wizard-content .wizard>.steps .step,.register-page-wrap .wizard-content .wizard>.steps>ul>li a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.register-page-wrap .wizard-content .wizard>.steps .info{display:block;width:100%;padding-top:10px}.register-page-wrap .wizard-content .wizard>.steps>ul{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100%;padding:0 10px}.register-page-wrap .wizard-content .wizard>.steps>ul>li{width:25%}.register-page-wrap .wizard-content .wizard>.steps>ul>li a{padding:20px 10px;margin:0;text-align:center;color:rgba(24,31,72,.6);font-size:11px;font-weight:700}.register-page-wrap .wizard-content .wizard>.steps>ul>li.current>a,.register-page-wrap .wizard-content .wizard>.steps>ul>li.done>a{color:#181f48}.register-page-wrap .wizard-content .wizard>.content{overflow:hidden;padding:15px 15px 0;min-height:320px}.register-page-wrap .wizard-content .wizard>.actions{padding:0 15px 20px;text-align:right}.register-info li{margin-bottom:15px;font-size:14px}.main-container{padding:80px 20px 0 300px}.page-header .dropdown-menu{border-radius:5px}.page-header{background-color:#fff;border-radius:10px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08);margin-bottom:30px;padding:20px}.page-header .row{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.page-header h4{font-weight:600;padding-bottom:5px}.page-header .breadcrumb{padding:0;margin:0}.search-icon-box,.timeline ul{position:relative}.search-icon-box input{height:70px;width:100%;font-size:20px;padding:0 60px 0 30px;font-weight:300;border:0;color:#fff;background:#6209ab}.search-icon-box input::-webkit-input-placeholder{opacity:1;color:#fff}.search-icon-box input:-moz-placeholder,.search-icon-box input::-moz-placeholder{opacity:1;color:#fff}.search-icon-box input:-ms-input-placeholder{opacity:1;color:#fff}.search-icon-box .search_icon{position:absolute;font-size:24px;line-height:1;right:20px;top:26px;color:#fff}.fontawesome-icon-list{padding-top:20px}.fontawesome-icon-list.custom-icon-list,.sitemap ul li.child h5{padding-top:0}.fontawesome-icon-list .fa-hover,.fontawesome-icon-list a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.fontawesome-icon-list .fa-hover{padding-top:13px;padding-bottom:13px;margin-bottom:10px;cursor:pointer;border-radius:8px}.fontawesome-icon-list .fa-hover:hover{background:rgba(68,66,87,.13);-webkit-box-shadow:0 0 18px rgba(0,0,0,.08);box-shadow:0 0 18px rgba(0,0,0,.08)}.fontawesome-icon-list a{display:block;font-size:14px;font-weight:500;position:relative;padding-left:45px;color:#131e22}.fontawesome-icon-list a .icon-copy{position:absolute;left:10px;top:4px;font-size:18px}.fontawesome-icon-list.custom-icon-list a{font-size:14px;line-height:24px}.fontawesome-icon-list.custom-icon-list a .icon-copy{font-size:24px;line-height:1;top:0}.foundation-icon.fontawesome-icon-list a .icon-copy{top:0;font-size:24px;line-height:24px}.ionicons-list li{width:8.3%;text-align:center}.ionicons-list.fontawesome-icon-list a{padding-left:0}.ionicons-list.fontawesome-icon-list a .icon-copy{font-size:24px;left:0;position:relative}.wysihtml5-toolbar .dropdown-menu a{display:block;font-size:15px;font-weight:400;padding:.55rem 1rem;color:#667f87;font-family:'Inter',sans-serif;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.html-editor textarea.form-control{height:300px;font-weight:400}.copy-notification{color:#fff;background-color:rgba(0,0,0,.8);padding:12px 20px;border-radius:30px;position:fixed;top:50%;left:50%;width:150px;margin-top:-30px;margin-left:-85px;display:none;text-align:center}.error-page h1,.error-page-wrap{font-size:16px;line-height:26px;font-weight:700;color:#222}.error-page h1{font-size:210px;text-shadow:2px 2px 0 #181f48,4px 4px 0 #fff,8px 8px 0 #181f48;line-height:1;color:#181f48}.error-page h3{font-size:18px;text-transform:uppercase;font-weight:700;margin-bottom:30px;padding-top:30px}.project-info{padding-bottom:15px}.project-info-left{float:left;width:60px;padding-top:10px}.project-info-left .icon{width:50px;height:50px;border-radius:100%;line-height:50px;text-align:center;font-size:20px}.project-info-right{float:right;width:calc(100% - 60px);text-align:right}.device-manage-progress-chart ul li:last-child{margin-bottom:0}.device-manage-progress-chart .device-name{width:75px;float:left;text-align:right}.device-manage-progress-chart .device-total{float:left;width:45px;font-size:14px}.device-manage-progress-chart .device-progress{float:left;width:calc(100% - 120px);padding:7px 10px 0}.device-manage-progress-chart .device-progress .grand_total{float:right}.device-manage-progress-chart .device-progress .progress{margin-bottom:0;height:10px}.device-manage-progress-chart .device-progress .progress .progress-bar{height:100%}.device-manage-progress-chart .device-progress .progress .progress-bar.window{background:#00bcf2}.device-manage-progress-chart .device-progress .progress .progress-bar.mac{background:#027496}.device-manage-progress-chart .device-progress .progress .progress-bar.android{background:#0059b2}.device-manage-progress-chart .device-progress .progress .progress-bar.linux{background:#8ab1b7}.to-do-list ul li{padding:15px}.to-do-list ul li,.to-do-list ul li:hover{background:#ecf0f4}.to-do-list ul li:nth-child(2n){background:#fff}#browservisit path.jvectormap-region.jvectormap-element{stroke-width:.5px;stroke:#667f87}.jvectormap-goback,.jvectormap-zoomin,.jvectormap-zoomout{background:#667f87}.browser-visits ul li{margin-bottom:40px}.browser-visits ul li .icon,.browser-visits ul li .visit{width:50px}.browser-visits ul li .browser-name{width:calc(100% - 100px);font-size:14px;font-weight:600}.docs-preview{margin-right:-1rem}.img-preview{float:left;margin-bottom:.5rem;margin-right:.5rem;overflow:hidden}.preview-lg{height:9rem;width:16rem}.preview-md{height:4.5rem;width:8rem}.preview-sm{height:2.25rem;width:4rem}.preview-xs{height:1.125rem;margin-right:0;width:2rem}.btn-list .btn{margin:5px}#login-modal .modal-dialog{max-width:380px}#login-modal .login-box{margin:0}.confirmation-btn{width:50px;height:50px;margin:0 auto}.da-card .da-card-content{padding:20px 15px;background:#fff;font-size:14px}.da-card,.da-card .da-card-photo{position:relative;overflow:hidden}.da-card .da-card-photo img{position:relative;display:block;width:100%;-webkit-transition:all .4s linear;transition:all .4s linear}.da-card .da-overlay{position:absolute;width:100%;height:100%;left:0;top:0;opacity:0;overflow:hidden;background:rgba(19,30,34,.7);-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.da-card .da-overlay.da-slide-left{left:-100%}.da-card .da-card-photo:hover .da-overlay.da-slide-left{left:0}.da-card .da-overlay.da-slide-bottom,.da-card .da-overlay.da-slide-left,.da-card .da-overlay.da-slide-right,.da-card .da-overlay.da-slide-top{-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.da-card .da-overlay.da-slide-right{right:-100%;left:inherit}.da-card .da-card-photo:hover .da-overlay.da-slide-right{right:0}.da-card .da-overlay.da-slide-bottom,.da-card .da-overlay.da-slide-top{top:-100%}.da-card .da-card-photo:hover .da-overlay.da-slide-bottom,.da-card .da-card-photo:hover .da-overlay.da-slide-top{top:0}.da-card .da-overlay.da-slide-bottom{top:100%}.da-card .da-card-photo:hover img{-webkit-transform:scale(1.2) translateZ(0);transform:scale(1.2) translateZ(0)}.da-card .da-card-photo:hover .da-overlay{opacity:1;filter:alpha(opacity=100);-webkit-transform:translateZ(0);transform:translateZ(0)}.da-card .da-card-photo:hover .da-social{opacity:1}.da-card .da-social{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;padding:20px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;opacity:0;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.da-card .da-social h5{position:absolute;top:0;white-space:nowrap;overflow:hidden;width:100%;text-overflow:ellipsis;font-size:16px;font-weight:500}.chat-box .chat-desc ul li .chat-img,.da-card .da-social ul li{float:left}.da-card .da-social ul li a{display:block;width:45px;height:45px;border:1px solid #fff;line-height:43px;font-size:20px;text-align:center;color:#fff;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.da-card .da-social ul li:first-child a{border-top-left-radius:5px;border-bottom-left-radius:5px}.da-card .da-social ul li:last-child a{border-top-right-radius:5px;border-bottom-right-radius:5px}.da-card .da-social ul li a:hover{background:#fff;color:#1b00ff}.nav-tabs.customtab .nav-item.show .nav-link,.nav-tabs.customtab .nav-link.active{color:#1b00ff;border:0;border-bottom:2px solid #1b00ff}.nav-tabs.customtab .nav-item{margin-bottom:0}.nav-tabs.customtab .nav-link{color:#181f48;border:0;border-bottom:2px solid transparent;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.nav-tabs.customtab .nav-link:focus,.nav-tabs.customtab .nav-link:hover{color:#1b00ff;border:0;border-bottom:2px solid #1b00ff}.nav.vtabs{border-bottom:0;border-right:1px solid #dee2e6;height:100%}.nav.vtabs .nav-link{border-radius:0}.nav.vtabs .nav-item.show .nav-link,.nav.vtabs .nav-link.active{border-right:0;border-color:#dee2e6;color:#1b00ff}.nav.vtabs.nav-pills .nav-item.show .nav-link,.nav.vtabs.nav-pills .nav-link.active{border-right:0;border-color:#dee2e6;color:#fff}.nav.vtabs.customtab .nav-item.show .nav-link,.nav.vtabs.customtab .nav-link.active{border-color:#1b00ff}.timeline ul:before{content:"";width:3px;height:100%;background:#1b00ff;position:absolute;left:150px}.timeline ul li{position:relative;padding-left:180px;padding-top:20px;padding-bottom:30px}.timeline ul li:before{content:"";position:absolute;top:30px;left:142px;width:18px;height:18px;background:#fff;border-radius:100%;-webkit-box-shadow:0 0 0 3px #1b00ff;box-shadow:0 0 0 3px #1b00ff}.timeline .timeline-date{position:absolute;left:0;top:20px;width:120px;background:#1b00ff;color:#fff;font-size:16px;padding:6px 10px;border-radius:5px}.list-unstyled>li>ul{margin-left:35px}.list-unstyled>li>ul li{list-style:circle}.sitemap{border-left:2px dashed #1b00ff}.sitemap h5{padding:15px;margin-bottom:10px;font-weight:600;color:#1b00ff}.sitemap ul,.sitemap ul li{position:relative;padding-left:25px}.sitemap ul li{min-height:40px;padding-left:35px;margin-bottom:10px;padding-top:2px}.sitemap ul li:last-child{margin-bottom:0}.sitemap ul li:before{content:"";background:#fff;width:20px;height:20px;border:2px solid #1b00ff;border-radius:100%;position:absolute;left:6px;top:5px}.sitemap ul li:after{content:"";width:25px;left:-25px;top:40%;position:absolute;border-top:2px dashed #1b00ff}.blog-list ul li,.sitemap ul li a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.fc th,.sitemap ul li a{font-weight:500;font-size:15px}.sitemap ul li a{display:inline-block;color:#0b132b}.sitemap ul li a:hover{color:#000}.sitemap ul li.child{padding-left:0;padding-top:0;border-left:2px dashed #2976aa}.calendar-wrap .fc-event.ui-draggable-handle{padding:5px;margin-bottom:5px}.fc th{padding:10px!important;background:#e1e1f5;line-height:1}.fc-day-grid-event .fc-time{font-weight:500!important}.fc-day-grid-event .fc-content{padding:3px 9px}.fc-header-toolbar h2{font-size:18px;padding-top:7px}.blog-wrap{padding-bottom:50px}.blog-list ul li{border-radius:10px;margin-bottom:40px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08);background:#fff}.blog-list ul li:hover{-webkit-box-shadow:0 0 48px rgba(0,0,0,.25);box-shadow:0 0 48px rgba(0,0,0,.25)}.blog-list ul li .blog-img{height:100%;min-height:300px;border-radius:10px 0 0 10px;background-size:cover!important}.blog-list ul li .blog-caption{padding:20px;font-size:16px;line-height:1.5;color:#031e23}.blog-list ul li .blog-caption h4{font-size:17px;line-height:1.5;font-weight:700;margin-bottom:12px}.blog-list ul li .blog-caption h4 a,.product-caption h4 a{color:#131e22}.latest-post ul li{padding:.75rem 1.25rem;font-size:14px;color:#78909c;border-bottom:1px solid rgba(0,0,0,.125)}.latest-post ul li h4{font-size:14px;font-weight:600;line-height:1.5;margin-bottom:5px}.blog-list ul li .blog-caption h4 a,.latest-post ul li h4 a,.product-box,.product-caption h4 a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.latest-post ul li h4 a{display:block;color:#131e22}.latest-post ul li h4 a:hover{color:#1b00ff}.blog-detail,.product-box{background:#fff}.blog-detail .blog-caption{padding:20px;font-size:16px;color:#78909c}.blog-detail ul li{position:relative;padding-left:25px;margin-bottom:5px;line-height:28px}.blog-detail ul li:before{content:"\f101";font-family:"FontAwesome";position:absolute;color:#405158;left:0;top:0}.blog-detail ol,.blog-detail ul{padding-left:15px}.blog-detail ol>li{position:relative;padding-left:20px;margin-bottom:5px}.blog-detail ol,.blog-detail ol>li>ol,.blog-detail ol>li>ol>li>ol{counter-reset:my-badass-counter}.blog-detail ol>li>ol>li:before{content:counter(my-badass-counter,lower-alpha);counter-increment:my-badass-counter}.blog-detail ol>li:before,.blog-detail ol>li>ol>li>ol>li:before{content:counter(my-badass-counter,lower-roman);counter-increment:my-badass-counter}.blog-detail ol>li:before{content:counter(my-badass-counter);position:absolute;left:0;top:0;color:#405158;font-weight:500}.gallery-wrap>ul>li,.product-list ul li{margin-bottom:30px}.product-box{border-radius:10px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08);height:100%}.producct-img{overflow:hidden}.producct-img img{position:relative;border-radius:10px 10px 0 0;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out}.product-list ul li:hover .producct-img img{-webkit-transform:scale(1.3);transform:scale(1.3)}.product-caption{padding:20px}.product-caption h4{font-size:18px;margin-bottom:8px}.product-caption .btn{border-radius:22px}.price{font-size:15px;font-weight:600;padding-bottom:15px;color:#78909c}.price ins{text-decoration:none;display:inline-block;margin-left:10px;color:#131e22}.product-slider{margin-bottom:20px}.slider-arrow .slick-arrow,.slider-arrow .slick-arrow:before{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.slider-arrow .slick-arrow{position:absolute;bottom:0;width:40px;height:40px;top:50%;margin-top:-20px;border:1px solid #1b00ff;background:#1b00ff;border-radius:0;cursor:pointer;font-size:0;text-align:center}.slider-arrow .slick-arrow:hover{border-color:#2a2d31}.slider-arrow .slick-arrow:hover:before{color:#fff}.slider-arrow .slick-arrow:before{font-family:"dropways";font-size:16px;color:#fff;line-height:38px}.slider-arrow .slick-arrow.slick-prev{z-index:12;left:15px}.slider-arrow .slick-arrow.slick-prev:before{content:"\eabc"}.slider-arrow .slick-arrow.slick-next{right:15px}.slider-arrow .slick-arrow.slick-next:before{content:"\eabd"}.product-slide-nav{padding:10px}.product-detail-desc{font-size:16px;line-height:1.5}.faq-wrap .card{margin-bottom:20px;border:0;border-radius:10px;overflow:hidden;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08)}.faq-wrap .card-header{background:#fff;text-align:left;border:0;padding:0}.faq-wrap .card-header .btn{background:0 0;border-radius:0;text-align:left;font-size:16px;font-weight:500;padding:16px 40px 16px 16px;position:relative;white-space:normal;color:#1b00ff;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.faq-wrap .card-header .btn.collapsed{color:#222}.faq-wrap .card-header .btn:after{content:"\f209";font-family:"Ionicons";position:absolute;right:10px;color:#1b00ff;top:16px}.faq-wrap .card-header .btn.collapsed:after{content:"\f218"}.faq-wrap .card-body{padding-top:0}.pricing-table-wrap .card{border:0;-webkit-box-shadow:0 0 48px rgba(0,0,0,.2);box-shadow:0 0 48px rgba(0,0,0,.2)}.pricing-table-wrap .btn{padding-left:30px;padding-right:30px}.pricing-table-wrap .list-group-flush .list-group-item{background:0 0}.pricing-card{text-align:center}.pricing-card .price-title,.pricing-card .pricing-icon{padding-bottom:30px;text-align:center}.pricing-card .pricing-icon img{margin-top:-30px}.pricing-card .price-title{text-transform:uppercase;font-size:16px;font-weight:500;color:#1b00ff;letter-spacing:.15em}.pricing-card .pricing-price{font-size:60px;line-height:1;font-weight:400;padding-bottom:40px;padding-top:20px;color:#1b00ff}.pricing-card .pricing-price sub{font-size:16px;font-weight:400;color:#fd486e}.pricing-card .pricing-price sup{font-size:20px;font-weight:400;color:#fd486e;top:10px;vertical-align:top}.pricing-card .text{padding-bottom:30px}.pricing-card .cta{max-width:170px;margin:0 auto;-webkit-transform:translate(0,50%);transform:translate(0,50%)}.pricing-card .cta .btn{display:block;text-align:center}.pricing-card-style2,.profile-setting .profile-edit-list>li{padding:20px}.pricing-card-style2 .pricing-card-header{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-bottom:15px;border-bottom:2px solid #f0f2f7}.pricing-card-style2 .pricing-card-header .left{width:60%}.pricing-card-style2 .pricing-card-header .left h5{color:#1b00ff;font-size:18px;font-weight:700}.pricing-card-style2 .pricing-card-header .left p,.pricing-points ul li{font-size:14px;font-weight:500;margin-bottom:0}.pricing-card-style2 .pricing-card-header .right{width:40%;text-align:right;color:#000;font-size:18px;line-height:1.4;font-weight:700}.pricing-card-style2 .pricing-card-header .right span{display:block;font-size:12px}.pricing-card-style2 .pricing-card-body{padding-top:30px;padding-bottom:10px}.pricing-points ul li{padding:0 30px 0 0;margin-bottom:20px;color:#000;position:relative}.pricing-points ul li:after{content:"\f121";font-family:Ionicons;font-size:18px;line-height:1;color:#1061e4;position:absolute;right:0;top:0}.pricing-card-style2 .cta{max-width:170px;margin:0 auto;padding-top:10px;padding-bottom:20px}.pricing-card-style2 .cta .btn{display:block;text-align:center}.profile-photo{width:160px;height:160px;margin:0 auto 15px;position:relative}.profile-photo .edit-avatar{position:absolute;right:-15px;top:0;width:30px;height:30px;line-height:30px;font-size:14px;text-align:center;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.4);box-shadow:0 2px 4px rgba(0,0,0,.4)}.contact-directory-box .contact-avatar span img,.profile-photo .avatar-photo,.profile-photo .edit-avatar{border-radius:100%}.profile-info,.profile-skills,.profile-social{border-top:2px dashed #ecf0f4;padding:15px}.profile-info ul li{margin-bottom:15px;font-size:14px;font-weight:500;word-wrap:break-word}.profile-info ul li span{display:block;font-size:14px;color:#1b00ff;font-weight:500;padding-bottom:5px}.profile-info ul li:last-child{margin-bottom:0}.profile-social ul li{float:left;margin:5px}.profile-social ul li .btn{padding:0;width:36px;height:36px;text-align:center;line-height:36px}.notification-list.chat-notification-list ul li.active a,.notification-list.chat-notification-list ul li:hover a,.profile-tab .nav-tabs.customtab{background:#fff}.profile-tab .nav-tabs.customtab .nav-link{padding:18px 30px;background:0 0;font-weight:500}.profile-setting{height:100%}.profile-setting .container{max-width:800px}.profile-tab .tab-content{height:calc(100% - 63px)}.profile-setting .profile-edit-list{padding:30px 0;margin:0}.profile-setting .btn-outline-secondary{border-color:#ced4da}.profile-setting .profile-edit-list .form-control{font-weight:400}.task-title{padding-bottom:30px}.task-title a{padding-left:20px;padding-right:20px}.profile-task-wrap .container{max-width:800px}.profile-task-list ul li{position:relative;padding-left:30px;font-size:18px;line-height:24px;color:#263238;margin-bottom:25px}.profile-task-list.close-tasks ul li{color:#90a4ae;text-decoration:line-through}.profile-task-list ul li .task-type{font-size:16px;color:#90a4ae;font-weight:500}.profile-task-list ul li .task-assign{font-size:16px;color:#90a4ae;font-weight:300}.profile-task-list ul li .due-date{display:inline-block;padding-left:10px}.profile-task-list ul li .due-date:before{content:"\f111";font-family:"FontAwesome";display:inline-block;font-size:8px;vertical-align:middle;margin-right:8px;opacity:.5}.profile-task-list ul li .custom-control,.profile-timeline-list ul:before{position:absolute;left:0;top:0;width:100%;height:100%}.profile-task-list ul li .custom-control-label{position:absolute;width:100%;height:100%;left:0}.profile-task-list ul li .custom-control-label::after,.profile-task-list ul li .custom-control-label::before{top:50%;margin-top:-12px;left:0}.task-list-scroll{height:303px}.task-list-form>ul>li{padding:30px 20px;background:#e7eef0;position:relative;border-bottom:2px dashed #2976aa}.task-list-form>ul>li .remove-task{position:absolute;right:22px;top:3px;font-size:18px;color:#2976aa}.task-list-form .form-control{font-weight:400}.task-list-form textarea.form-control{height:80px}.task-list-form .btn-outline-primary{border-color:#ced4da}.add-more-task,.chat-box .chat-desc ul li.admin_chat .chat-body .chat_time{text-align:right}.add-more-task a{display:inline-block;padding:10px;color:#2976aa}.profile-timeline{padding:30px}.profile-timeline .timeline-month{margin-bottom:20px}.profile-timeline .timeline-month h5{font-size:16px;font-weight:700}.profile-timeline-list ul{padding-left:15px;position:relative}.profile-timeline-list ul:before{content:"";width:2px;left:4px;background-color:#1b00ff}.profile-timeline-list ul li{margin-bottom:10px;position:relative;padding-left:100px;line-height:24px;padding-top:8px}.profile-timeline-list ul li p{margin-bottom:5px;font-size:14px;line-height:1.5;font-weight:500}.profile-timeline-list ul li:before{content:"";width:12px;height:12px;border:2px solid #1b00ff;border-radius:22px;position:absolute;left:-16px;top:15px;background:#1b00ff}.profile-timeline-list .date{position:absolute;top:8px;left:5px;font-weight:700;font-size:13px}.profile-timeline-list .task-name{text-transform:uppercase;font-weight:600;color:#1b00ff;font-size:14px;line-height:22px;position:relative}.profile-timeline-list .task-name i{position:absolute;left:-22px;top:0;font-size:18px}.profile-timeline-list .task-time{color:rgba(24,31,72,.71);font-size:12px;font-weight:700}.contact-directory-list>ul>li{margin-bottom:30px}.contact-directory-box{background:#fff;min-height:400px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08);border-radius:10px}.contact-dire-info{padding:30px 25px 20px}.contact-directory-box .contact-avatar span{display:block;margin:0 auto 20px;width:150px;height:150px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3);border-radius:100%;overflow:hidden}.contact-directory-box .contact-name,.contact-directory-box .contact-skill{padding-bottom:20px}.contact-directory-box .contact-name h4{font-weight:600;font-size:18px}.contact-directory-box .contact-name p{margin-bottom:2px;color:#7f92a9;font-size:14px}.contact-directory-box .contact-skill .badge{border:1px solid #ced9ee;font-weight:500;font-size:16px;padding:7px 11px;margin:3px 0}.contact-directory-box .contact-skill .badge.badge-primary{background:#1b00ff;border-color:#1b00ff;-webkit-box-shadow:0 0 10px rgba(0,0,0,.2);box-shadow:0 0 10px rgba(0,0,0,.2)}.contact-directory-box .profile-sort-desc{font-weight:400;color:#6f7c8d}.contact-directory-box .view-contact a{display:block;text-align:center;text-transform:uppercase;font-size:15px;font-weight:600;padding:20px 5px;letter-spacing:.05em;position:relative;border-radius:0 0 6px 6px}.contact-directory-box:hover .view-contact a:before{opacity:0}.contact-directory-box .view-contact a,.contact-directory-box .view-contact a:before,.notification-list.chat-notification-list ul li a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.contact-directory-box .view-contact a:before{content:"";width:80px;height:1px;background:#1b00ff;position:absolute;left:0;right:0;top:0;margin:0 auto}.invoice-wrap{overflow:auto}.invoice-box{background:#fff;width:800px;margin:0 auto;padding:20px}.invoice-header{padding-bottom:30px}.invoice-desc .invoice-sub{width:40%;float:left;padding:8px 15px}.invoice-desc .invoice-hours,.invoice-desc .invoice-rate{width:20%;float:left;padding:8px 15px}.invoice-desc .invoice-subtotal{width:20%;float:right;padding:8px 15px}.invoice-desc .invoice-desc-head{background:#eaeaea;font-weight:500}.invoice-desc .invoice-desc-body{padding-top:15px;min-height:400px}.invoice-desc .invoice-desc-footer .invoice-desc-body{min-height:50px}.invoice-desc .invoice-desc-body ul li{border-bottom:1px solid #eaeaea;padding-bottom:5px}.chat-list{border:1px solid #ecf0f4;border-radius:5px;height:72vh}.chat-search{border-bottom:1px solid #ccc;padding:10px;position:relative}.chat-search>span{position:absolute;left:30px;top:30px;color:#33484f}.chat-search input{height:55px;width:100%;border:0;background:0 0;padding-left:50px;color:#33484f}.chat-list .notification-list{height:calc(100% - 76px);padding:10px}.notification-list.chat-notification-list ul li a{padding-top:16px}.notification-list.chat-notification-list ul li a p,.upload-file-box .right h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-list.chat-notification-list ul li a p .fa{font-size:10px}.notification-list.chat-notification-list ul li a img{-webkit-box-shadow:none;box-shadow:none}.chat-detail{height:72vh}.chat-profile-header{padding:10px 30px 10px 20px;border-bottom:1px solid #eff0f4}.chat-profile-header .left{float:left;width:60%}.chat-profile-header .left .chat-profile-photo{float:left;width:90px}.chat-profile-header .left .chat-profile-photo img{width:66px;height:66px;border-radius:100%}.chat-profile-header .left .chat-profile-name{float:left;padding-top:15px}.chat-profile-header .left .chat-profile-name h3{font-size:18px;color:#44aeff}.chat-profile-header .left .chat-profile-name span{font-size:12px;color:#a4a4a4;display:block;margin-bottom:6px}.chat-profile-header .left .chat-profile-name a{font-size:10px;color:#44aeff;display:inline-block}.chat-profile-header .right{float:right;width:40%;padding-top:15px}.chat-profile-header .right .text-light-orange{color:#f56767!important}.chat-box{height:calc(100% - 89px)}.chat-box .chat-desc{height:calc(100% - 86px);padding-bottom:10px}.chat-box .chat-desc ul li{margin-bottom:35px}.chat-box .chat-desc ul li .chat-img img,.upload-file-box .left .overlay a span{width:40px;height:40px;border-radius:100%}.chat-box .chat-desc ul li .chat-body{margin-left:60px}.chat-box .chat-desc ul li .chat-body p{font-size:15px;line-height:24px;color:#33484f;min-height:50px;padding:12px 15px;border:1px solid #ecf0f4;background:#ecf0f4;border-radius:5px}.chat-box .chat-desc ul li .chat-body .chat_time{font-size:12px;color:#a4a4a4}.chat-box .chat-desc ul li.admin_chat .chat-img,.chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .left{float:right}.chat-box .chat-desc ul li.admin_chat .chat-body{margin-left:0;margin-right:60px;text-align:right}.chat-box .chat-desc ul li.admin_chat .chat-body p{text-align:right;display:inline-block;background:#e1e1f5;padding:12px 15px;border-radius:5px;position:relative}.chat-box .chat-desc ul li.admin_chat .chat-body p:after{content:"";width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #389bff;position:absolute;right:-6px;top:16px;opacity:0}.chat-footer{height:86px;border-top:1px solid #eff0f4}.chat-footer .file-upload{float:left;width:55px}.chat-footer .file-upload a{display:block;text-align:center;font-size:20px;color:#222;padding-top:30px;padding-bottom:27px}.chat-footer .chat_text_area{float:left;width:calc(100% - 145px)}.chat-footer .chat_text_area textarea{width:100%;height:78px;border:0;font-size:16px;color:#33484f;padding-top:33px}.chat-footer .chat_send{float:right;width:90px}.chat-footer .chat_send .btn{display:block;width:100%;height:86px;font-size:35px;color:#44aeff;text-decoration:none;font-weight:900;padding:25px 10px 5px}.chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .right{float:right;padding-left:0;padding-right:17px}.upload-file-box{padding-bottom:10px}.upload-file-box .left{float:left;position:relative;width:114px;height:84px;overflow:hidden;border-radius:5px}.upload-file-box .left .overlay{background-color:rgba(0,0,0,.5);position:absolute;left:0;top:0;width:100%;height:100%}.upload-file-box .left .overlay a{display:block;width:100%;height:100%}.upload-file-box .left .overlay a span{width:35px;height:35px;display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;background:#fff;color:#222;line-height:35px;text-align:center;font-size:22px}.upload-file-box .right{float:left;width:calc(100% - 114px);padding-left:17px;padding-top:17px}.upload-file-box .right h3{display:block;font-size:14px;color:#000;margin-bottom:5px}.upload-file-box .right a{display:inline-block;color:#1d8df1;font-size:14px}.chat-profile-section{height:calc(100vh - 274px)}.chat-profile-section .chat--profile-desc{height:100%;padding:20px}.wizard-content .wizard>.actions>ul>li>a{background-color:#1b00ff;font-weight:600}.wizard-content .wizard>.actions>ul>li>a[href="#previous"]{border-color:#1b00ff;border-width:2px;color:#1b00ff}.wizard-content .wizard>.actions>ul>li.disabled>a[href="#previous"]{display:none;border-color:#1b00ff}.widget-style1{padding:10px}.widget-style1 .widget-data{width:calc(100% - 80px);padding:0 5px 0 15px}.widget-style1 .progress-data{width:80px}.widget-style1 .progress-data .apexcharts-canvas{margin:0 auto}.right-sidebar .right-sidebar-body .right-sidebar-body-content,.widget-style2 .widget-data{padding:20px}.right-sidebar{position:fixed;right:-315px;top:0;width:315px;height:100%;background:#fff;z-index:123;-webkit-box-shadow:0 0 18px rgba(0,0,0,.08);box-shadow:0 0 18px rgba(0,0,0,.08);-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.right-sidebar-visible{right:0}.right-sidebar .sidebar-title{height:70px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:5px 15px;border-bottom:1px solid #d4d4d4}.right-sidebar .sidebar-title h3{font-weight:600}.right-sidebar .sidebar-title h3 span{font-weight:400;color:#000}.right-sidebar .close-sidebar{font-size:18px;color:#888;cursor:pointer}.right-sidebar .right-sidebar-body{height:calc(100% - 70px);overflow:auto}.sidebar-btn-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.sidebar-btn-group .btn{width:48%}.sidebar-radio-group .custom-control-inline{margin-right:0;width:25%;margin-bottom:10px}.bootstrap-tagsinput .label-info{background:#1b00ff}.bootstrap-touchspin .btn{background:#1b00ff;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:0;padding-bottom:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.bootstrap-touchspin .input-group-btn-vertical .btn{height:52%}.bootstrap-touchspin .bootstrap-touchspin-postfix,.bootstrap-touchspin .bootstrap-touchspin-prefix{border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4}.asColorPicker-buttons a,.asColorPicker-gradient-control a{font-size:13px;font-weight:500}.dropzone{border-color:#1b00ff}.dropzone .dz-preview .dz-remove{color:red}.fc-view-container tr:first-child>td>.fc-day-grid-event{background:#1b00ff}.fc-today.alert-info{background:#e0deef}.fc-day-number,.fc-ltr .fc-axis{font-size:13px;font-weight:500}.swal2-popup .swal2-title{font-size:18px;font-weight:600}.swal2-popup .swal2-styled.swal2-confirm{background:#100099}.documentation-wrap{position:relative;height:100%;padding-left:300px}.documentation-wrap .doc-sidebar{position:absolute;left:0;top:0;background:#fff;width:300px;height:100%}.doc-content-wrap{padding:30px}.table-badge{padding:8px 20px;font-size:14px;background:#1b00ff;color:#ebecef;font-weight:500}
+@media (min-width:1301px) and (max-width:1400px){.header{width:calc(100% - 250px)}.brand-logo,.left-side-bar{width:250px}.main-container{padding-left:270px}}@media (min-width:1200px) and (max-width:1400px){.device-usage-chart .width-50-p{width:100%}}@media (max-width:1300px){.main-container{padding-left:0;padding-right:0}.header-left .menu-icon{display:-webkit-box;display:-ms-flexbox;display:flex}.header{width:100%}.left-side-bar{left:-281px}.left-side-bar .close-sidebar{display:block}.left-side-bar:before{display:block;opacity:0;visibility:hidden}.left-side-bar.open:before{opacity:1;visibility:visible;display:none}.left-side-bar .brand-logo a{text-align:left;padding:5px 15px}.left-side-bar .brand-logo a .svg,.left-side-bar .brand-logo a img{margin:0}.header-right .brand-logo{display:table}.header-right .menu-icon{display:block;padding-left:15px;padding-top:7px}.footer-wrap{width:100%}.mobile-menu-overlay{display:block;opacity:0;visibility:hidden}.mobile-menu-overlay.show{opacity:.6;visibility:visible}}@media (min-width:1025px){.header-left .header-search{display:block!important}}@media (max-width:1024px){.header{position:relative}.header-left{width:25%}.header-right{width:75%}.main-container{padding-top:10px}.header-left .search-toggle-icon{display:-webkit-box;display:-ms-flexbox;display:flex}.header-left .header-search{padding:15px 20px;position:absolute;left:0;top:100%;background:#fff;display:none}.register-page-wrap .wizard-content .wizard{padding-left:300px}.register-page-wrap .wizard-content .wizard .steps{width:300px}}@media (max-width:991px){.device-usage-chart .width-50-p{width:100%}}@media (max-width:767px){.header{position:fixed;left:0;top:0;-webkit-box-shadow:0 5px 25px rgba(0,0,0,.1);box-shadow:0 5px 25px rgba(0,0,0,.1)}.main-container{padding-top:80px}.login-box{padding:40px 15px}.login-header .brand-logo a img{max-width:150px}.pre-loader{background-size:43%}.xs-pd-20-10{padding:20px 10px}.xs-mb-20{margin-bottom:20px}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h4,h4{font-size:1.4rem}.main-container,.timeline ul li{padding-bottom:0}.footer-wrap{position:relative;height:auto}.user-notification{margin-right:5px}.user-notification .dropdown-menu{width:100%;min-width:300px}.user-info-dropdown .dropdown-toggle .user-name{display:none}.page-header{margin-bottom:30px}.forgot-password{text-align:center}.ionicons-list li{width:16.6%}.timeline .timeline-date{position:relative;top:0;margin-bottom:20px;left:35px}.timeline ul:before{left:10px}.timeline ul li{padding-left:0}.timeline ul li:before{left:2px;top:28px}.fc-toolbar .fc-left,.fc-toolbar .fc-right{float:none!important;padding-bottom:10px}.fc-toolbar .fc-left:after,.fc-toolbar .fc-right:after{content:"";clear:both;display:table}.faq-wrap .card-header .btn{font-size:17px}.error-page h1{font-size:150px}}@media (max-width:660px){.docs-buttons .btn-group-crop{display:block}.select-role .btn-group .btn{padding-left:35px;font-size:14px}.select-role .btn-group .btn .icon{left:5px;width:25px;height:25px}.select-role .btn-group .btn .icon .svg{width:25px;height:25px}.forgot-password a{font-size:14px;font-weight:600}.btn-group-lg>.btn,.btn-lg{font-size:16px}.register-page-wrap .wizard-content .wizard{padding-left:0}.register-page-wrap .wizard-content .wizard .steps{display:none}}
\ No newline at end of file
diff --git a/vendors/styles/style.min.css b/vendors/styles/style.min.css
index d65d125f..383c48aa 100644
--- a/vendors/styles/style.min.css
+++ b/vendors/styles/style.min.css
@@ -1,4 +1,4 @@
 @charset "utf-8";/*!
 Version: 3.0.0
 Author: Ankit Hingarajiya - DeskApp
-*/body,html{-webkit-font-smoothing:antialiased;width:100%;height:100%}html{-webkit-text-size-adjust:none;-moz-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=submit]{-webkit-appearance:none}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}body{margin:0;padding:0;font-family:Inter,sans-serif;font-weight:400;min-height:100%;color:#031e23;background:#ecf0f4}a{text-decoration:none;color:#555}a:focus,a:hover{outline:0;text-decoration:none}:focus{outline:0}img{border:0;vertical-align:top;max-width:100%;height:auto}input,select,textarea{resize:none;font-family:Inter,sans-serif}select,textarea{outline:0}.slick-slide,a,button,input{outline:0!important}button::-moz-focus-inner{border:0}h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-weight:700;color:#202342;font-family:Inter,sans-serif}ol,p,ul{padding:0}ol,ul{margin:0;list-style:none}p{margin:0 0 15px}.container{max-width:1120px;width:100%}.pre-loader{background:#fff;background-position:center center;background-size:13%;position:fixed;left:0;top:0;width:100%;height:100%;z-index:12345;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pre-loader .loader-logo{padding-bottom:15px}.pre-loader .loader-progress{height:8px;border-radius:15px;max-width:200px;margin:0 auto;display:block;background:#ecf0f4;overflow:hidden}.pre-loader .bar{width:0%;height:8px;display:block;background:#1b00ff}.pre-loader .percent{text-align:center;font-size:24px;display:none}.pre-loader .loading-text{text-align:center;font-size:18px;font-weight:500;padding-top:15px}.mx-w-150{max-width:150px}.mx-h-300{max-height:300px}.mx-h-350{max-height:350px}.mx-h-380{max-height:380px}.mx-h-400{max-height:400px}.mx-h-450{max-height:450px}.pd-0{padding:0}.padding-top-10{padding-top:10px}.padding-top-30{padding-top:30px}.padding-bottom-30{padding-bottom:30px}.pd-5{padding:5px}.pd-10{padding:10px}.pd-20{padding:20px}.chat-box .chat-desc ul,.pd-ltr-20{padding:20px 20px 0}.pd-30{padding:30px}.pb-10{padding-bottom:10px}.pb-15{padding-bottom:15px}.pb-20{padding-bottom:20px}.pb-30{padding-bottom:30px}.pt-10{padding-top:10px}.pt-15{padding-top:15px}.pt-20{padding-top:20px}.pt-30{padding-top:30px}.pr-10{padding-right:10px}.pr-20{padding-right:20px}.pr-30{padding-right:30px}.pl-10{padding-left:10px}.pl-20{padding-left:20px}.pl-30{padding-left:30px}.margin-5{margin:5px}.mt-15{margin-top:15px}.mt-30{margin-top:30px}.device-manage-progress-chart ul li,.mb-30{margin-bottom:30px}.mb-20{margin-bottom:20px}.mb-15{margin-bottom:15px}.mb-10{margin-bottom:10px}.mb-5{margin-bottom:5px!important}.mr-10{margin-right:10px}.mr-20{margin-right:20px}.font-30{font-size:30px;line-height:1.33em}.font-24{font-size:24px;line-height:1.42em}.font-20{font-size:20px;line-height:1.5em}.font-18{font-size:18px;line-height:1.55em}.font-16{font-size:16px;line-height:1.62em}.font-14{font-size:14px;line-height:1.71em}.font-12{font-size:12px;line-height:1.83em}.h1{font-size:40px;font-weight:700;line-height:1.3}.h1,.h2,.h3{color:#1b3133;font-family:Inter,sans-serif}.h2{font-size:28px;font-weight:700;line-height:1.35}.h3{font-size:24px;line-height:1.5}.h3,.h4{font-weight:700}.h4,.h5,.page-header h4{font-size:20px;line-height:1.35;color:#1b3133;font-family:Inter,sans-serif}.h5{font-size:18px;font-weight:600}.line-height-1{line-height:1}.line-height-1-2{line-height:1.2}.line-height-1-3{line-height:1.3}.weight-300{font-weight:300}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-600{font-weight:600}.weight-700{font-weight:700}.weight-800{font-weight:800}.height-auto{height:auto}.height-100-p{height:100%}.width-50-p{width:50%}.width-box{width:50px;height:50px}.max-width-200{max-width:200px}.max-width-300{max-width:300px}.max-width-400{max-width:400px}.max-width-500{max-width:500px}.max-width-600{max-width:600px}.max-width-700{max-width:700px}.max-width-800{max-width:800px}.max-width-900{max-width:900px}.max-width-1000{max-width:1000px}.min-height-200px{min-height:200px}.bg-cover{background-size:cover!important}.bg-light-blue{background-color:#e1e1f5}.color-light-blue{color:#e1e1f5}.bg-light-gray{background-color:#ecf0f4}.bg-white{background:#fff}.color-white{color:#fff}.bg-light-green{background-color:#41ccba}.text-light-green{color:#00e091}.bg-blue{background-color:#1b00ff}.text-blue{color:#1b00ff}.text-light-blue{color:#2976aa}.bg-light-orange{background-color:#f56767}.text-light-orange{color:#f56767}.bg-light-purple{background-color:#a683eb}.text-light-purple{color:#a683eb}.bg-orange{background-color:#f5956c}.text-orange{color:#f5956c}.text-yellow{color:#ecc72f}.text-green{color:#46be8a}.text-orange-50{color:#f2a654}.text-blue-50{color:#62a8ea}.text-red-50{color:#e14e50}.mCSB_inside>.mCSB_container{margin-right:0}.border-radius-0{border-radius:0}.border-radius-4{border-radius:4px}.border-radius-5{border-radius:5px}.border-radius-6{border-radius:6px}.border-radius-8{border-radius:8px}.border-radius-10{border-radius:10px}.border-radius-100,.user-info-dropdown .dropdown-toggle .user-icon img{border-radius:100%}.box-shadow{-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08)}.wave1{background-image:url(../images/wave.png);background-size:cover;background-position:center bottom;background-repeat:no-repeat}.card-box,.da-card{background-color:#fff;border-radius:10px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08)}.card-img-top{border-radius:10px 10px 0 0}.card-img-bottom{border-radius:0 0 10px 10px}.card-img{border-radius:10px}.card-title{font-size:18px;font-weight:600}.card-header{font-weight:500;font-size:16px}.card-text,.price del{font-size:15px}.badge{padding:.75em}.page-link:focus{-webkit-box-shadow:none;box-shadow:none}.highcharts-root{font-family:Inter,sans-serif!important}.bootstrap-select .dropdown-toggle{height:45px}.bootstrap-select .dropdown-toggle.btn-light{background-color:transparent;border-color:#d4d4d4}.bootstrap-select .dropdown-toggle.btn-light:not(:disabled):not(.disabled):active{background-color:transparent;border-color:#d4d4d4}.dropdown-toggle::after{content:"\f107";font-family:FontAwesome;vertical-align:unset;width:auto;height:auto;border:0!important}.bootstrap-select .dropdown-toggle::after{position:relative;right:5px}.dropdown.show>.dropdown-toggle::after{content:"\f106"}.dropdown-toggle.no-arrow:after{display:none}.dropdown-menu{border:0;padding:0;overflow:hidden;border-radius:10px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.1);box-shadow:0 0 28px rgba(0,0,0,.1)}.dropdown-item{font-size:16px;font-weight:400;padding:.657rem 1rem;color:#444;font-family:Inter,sans-serif;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.dropdown-item:focus,.dropdown-item:hover{background:#ecf0f4;color:#1b00ff}.form-group{margin-bottom:20px}.form-group>label{font-weight:500;font-size:14px}.custom-file-input,.custom-file-label,.custom-select,.form-control{font-family:Inter,sans-serif;color:#131e22;font-weight:400;height:45px;border-color:#d4d4d4;letter-spacing:.035em;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.form-control.form-control-sm{height:38px}.form-control.form-control-line{border-left:0;border-right:0;border-top:0;border-radius:0}.custom-file-label{padding-top:.475rem}.custom-file-label::after{height:100%;padding-top:.475rem}textarea.form-control{height:180px}.custom-file-input:focus,.custom-select:focus,.form-control:focus{color:#131e22;border-color:#1b00ff;-webkit-box-shadow:0 0 28px rgba(0,0,0,.1);box-shadow:0 0 28px rgba(0,0,0,.1)}.form-control.height-auto{height:auto}.input-group{margin-bottom:25px}.input-group.custom>.custom-select,.input-group.custom>.form-control{width:100%}.input-group.custom>.custom-select:not(:first-child),.input-group.custom>.form-control:not(:first-child){border-radius:.25rem;padding-left:50px}.input-group.custom>.custom-select:not(:last-child),.input-group.custom>.form-control:not(:last-child){border-radius:.25rem;padding-right:50px}.input-group-prepend.custom{position:absolute;left:0;top:0;z-index:12;height:100%}.input-group-append.custom{position:absolute;right:0;top:0;z-index:12;height:100%}.input-group-text{border:0;background:0 0}.input-group-text i{font-size:20px}.form-control:focus~.input-group-append .fa{color:#1b00ff}.form-control-lg,.input-group-lg>.form-control,.input-group-lg>.input-group-append>.btn,.input-group-lg>.input-group-append>.input-group-text,.input-group-lg>.input-group-prepend>.btn,.input-group-lg>.input-group-prepend>.input-group-text{height:50px;font-size:16px}.has-success{color:#28a745}.form-control-success{border-color:#28a745;background-image:url(../images/check-mark-green.png);background-repeat:no-repeat;background-position:center right 10px;background-size:20px 20px}.form-control-success:focus{border-color:#28a745;-webkit-box-shadow:0 0 0 1px #28a745;box-shadow:0 0 0 1px #28a745}.has-warning{color:#ffc107}.form-control-warning{border-color:#ffc107;background-image:url(../images/caution-sign.png);background-repeat:no-repeat;background-position:center right 10px;background-size:20px 20px}.form-control-warning:focus{border-color:#ffc107;-webkit-box-shadow:0 0 0 1px #ffc107;box-shadow:0 0 0 1px #ffc107}.has-danger{color:#dc3545}.form-control-danger{border-color:#dc3545;background-image:url(../images/cross.png);background-repeat:no-repeat;background-position:center right 10px;background-size:14px 14px}.form-control-danger:focus{border-color:#dc3545;-webkit-box-shadow:0 0 0 1px #dc3545;box-shadow:0 0 0 1px #dc3545}.btn{font-family:Inter,sans-serif;letter-spacing:0;font-weight:500;padding:.438rem 1rem}.btn-lg{padding:.657rem 1rem}.btn-group-lg>.btn,.btn-lg{font-size:18px}.btn-group-sm>.btn,.btn-sm{padding:.4rem .8rem;font-size:14px}.btn.focus,.btn:focus{-webkit-box-shadow:none!important;box-shadow:none!important}.btn-rounded{border-radius:25px}.breadcrumb{background:0 0;padding:.75rem 0}.breadcrumb-item.active{color:#1b00ff;font-weight:500}.breadcrumb-item a{color:#031e23}.breadcrumb-item+.breadcrumb-item::before{font-family:FontAwesome;content:"\f105"}.customscroll-10-p>.mCustomScrollBox>.mCSB_container{padding:10px}.datepicker{z-index:1060}.datepicker--day-name,.datepicker--time-current-hours,.datepicker--time-current-minutes{color:#1b00ff}.datepicker--nav-action path{stroke:#1b00ff}.datepicker--cell.-focus-,.datepicker--nav-action:hover,.datepicker--nav-title:hover{background:#e1e1f5;color:#1b00ff}.datepicker--cell.-selected-{color:#fff}.datepicker--time-current-hours:after,.datepicker--time-current-minutes:after{display:none}.datepicker-inline .datepicker{margin:0 auto}.form-control.time-picker-default:disabled,.form-control.time-picker-default[readonly],.form-control.time-picker:disabled,.form-control.time-picker[readonly]{background:#fff}.custom-control{padding-left:35px;cursor:pointer;padding-bottom:5px}.custom-control-label{cursor:pointer;font-weight:400}.custom-control-label::before{width:20px;height:20px;top:2px;left:-30px;background-color:transparent;border:2px solid #1b00ff}.custom-control-label::after{width:20px;height:20px;left:-30px;background-size:60%;top:2px}.custom-control-input:focus~.custom-control-label::before{-webkit-box-shadow:none;box-shadow:none;background-color:none}.custom-checkbox .custom-control-input:checked~.custom-control-label::before{background-color:#1b00ff}.custom-checkbox .custom-control-input:checked~.custom-control-label::after{background-image:url(../images/check-mark.png);background-repeat:no-repeat;background-position:center center}.custom-radio .custom-control-input:checked~.custom-control-label::before{background-color:#1b00ff}.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before{border:2px solid transparent}.select2-container .select2-selection--single{height:45px;border-color:#d4d4d4;outline:0;letter-spacing:.035em;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.select2-container--default.select2-container--focus .select2-selection--multiple,.select2-dropdown{border-color:#d4d4d4}.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:43px}.select2-container--default .select2-selection--single .select2-selection__arrow{height:43px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#1b00ff;color:#fff;border-color:#1b00ff}.select2-container--default .select2-selection--multiple{min-height:45px;border-color:#d4d4d4}.select2-container--default .select2-selection--multiple .select2-selection__rendered{padding-top:3px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#fff}.select2-dropdown{-webkit-box-shadow:0 0 28px rgba(0,0,0,.1);box-shadow:0 0 28px rgba(0,0,0,.1)}.select2-search--dropdown{padding:10px}.select2-container--default .select2-search--dropdown .select2-search__field{border-radius:5px}.bootstrap-select .dropdown-menu li .dropdown-item.active:hover,.select2-container--default .select2-results__option[aria-selected=true]{background-color:#1b00ff;color:#fff}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#1b00ff}.bootstrap-select.btn-group .dropdown-menu.inner{display:block}.bootstrap-select .dropdown-toggle:focus{outline:0!important}.bootstrap-select .dropdown-header{color:#222;font-weight:700;font-size:15px}.bootstrap-select .dropdown-menu li .dropdown-item:hover{color:#1b00ff}.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark{top:13px}.bootstrap-select .bs-ok-default:after{border-width:0 2px 2px 0}.dropup .dropdown-toggle::after{content:"\f107";font-family:FontAwesome;vertical-align:unset;width:auto;height:auto;border:0!important}.bootstrap-select.btn-group .dropdown-menu li a{display:block;font-size:15px;font-weight:400;padding:.55rem 1rem;color:#667f87;font-family:Inter,sans-serif;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.bootstrap-select.btn-group .dropdown-menu li.divider{border:1px solid #eaeaea}.bootstrap-select.btn-group .dropdown-menu li.selected a{background:#e1e1f5;color:#131e22}.bootstrap-select.btn-group .dropdown-menu li.disabled a{color:#cecece}.bootstrap-select.btn-group .dropdown-menu li a:hover{background:#e1e1f5;color:#131e22}.bootstrap-select.btn-group .dropdown-menu li a span.check-mark{background:url(../images/check-mark-green.png);width:15px;height:15px;background-size:contain}.label-info{background-color:#009efb}.bootstrap-tagsinput .tag{display:inline-block;padding:2px 6px;margin:2px;font-size:15px;border-radius:2px}.docs-options .dropdown-menu{max-height:250px;overflow:auto}.docs-buttons{padding-top:15px}.docs-buttons label,.notification-list ul li a p,.project-info-right p{margin-bottom:0}.docs-buttons .btn{margin-bottom:5px}.table thead th{font-weight:600;font-size:15px;border-bottom:0;padding-left:1rem}.table td,.table th{vertical-align:middle}.table td{font-size:14px;font-weight:500;padding:1rem}.table-striped tbody tr:nth-of-type(odd){background:#eaeef2}table.dataTable.display tbody tr.odd,table.dataTable.display tbody tr:hover,table.dataTable.hover tbody tr:hover,table.dataTable.stripe tbody tr.odd{background:#ecf0f3!important}table.dataTable tbody tr.selected,table.dataTable.display tbody tr:hover.selected,table.dataTable.hover tbody tr:hover.selected{background-color:#181f48!important;color:#fff}table.dataTable.display tbody tr.odd.selected,table.dataTable.stripe tbody tr.odd.selected{background-color:#1b00ff!important}table.dataTable thead .sorting:after,table.dataTable thead .sorting:before,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc_disabled:after,table.dataTable thead .sorting_desc_disabled:before{font-family:dropways;font-size:14px}table.dataTable thead .sorting:before,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc_disabled:before{content:"\eabb"}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_desc_disabled:after{content:"\eaba";right:.2em}.blog-list ul li:hover .blog-caption h4 a,.fontawesome-icon-list .fa-hover:hover a,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:after{color:#1b00ff}.dataTables_length,.dt-buttons,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{padding-left:15px;padding-right:15px}.dt-checkbox,.dt-checkbox input{width:20px;height:20px;position:relative}.dt-checkbox input{position:absolute;opacity:0;z-index:1;left:0;top:0}.dt-checkbox span,.dt-checkbox span:before{width:20px;height:20px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.dt-checkbox span{position:relative;display:block;border:1px solid #9e9e9e;border-radius:4px}.dt-checkbox span:before{content:"";background:url(../images/check-mark.png) no-repeat;position:absolute;left:0;top:-1px;background-size:12px 12px;background-position:center center;-webkit-transform:scale(0);transform:scale(0)}.dt-checkbox input:checked~span{background:#1b00ff;border-color:#1b00ff;color:#fff}.dt-checkbox input:checked~span:before{-webkit-transform:scale(1);transform:scale(1)}.plyr{border-radius:10px;-webkit-box-shadow:0 0 10px 2px rgba(0,0,0,.15);box-shadow:0 0 10px 2px rgba(0,0,0,.15)}.popover-header{font-weight:500}.list-group-flush .list-group-item{border-top:0;margin-bottom:0}.docs-cropped .modal-body>canvas,.docs-cropped .modal-body>img,.img-preview>img{max-width:100%}.apexcharts-svg *{font-family:Muli,sans-serif!important}table.dataTable.dtr-inline.collapsed>tbody>tr[role=row]>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr[role=row]>th:first-child:before{-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;font-family:FontAwesome;background:0 0;content:"\f107";color:#444;font-size:23px;left:7px;top:50%;margin-top:-7px}table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before{content:"\f106";background:0 0}.header{position:fixed;height:70px;width:calc(100% - 280px);background:#fff;right:0;top:0;z-index:123;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-box-shadow:0 0 10px rgba(0,0,0,.06);box-shadow:0 0 10px rgba(0,0,0,.06)}.header-left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;width:50%}.brand-logo a .dark-logo,.header-left .menu-icon,.header-left .search-toggle-icon,.sidebar-light .brand-logo a .light-logo,.sidebar-menu .submenu li.dropdown:before{display:none}.header-left .header-search{width:100%;padding-left:20px}.header-left .header-search .form-group,.sidebar-menu .submenu li{position:relative}.header-left .header-search .search-icon{position:absolute;left:17px;top:12px;font-size:20px;color:#777}.header-left .header-search .dropdown{position:static;right:0;top:0;padding-right:10px}.header-left .header-search .dropdown .dropdown-toggle{position:absolute;right:0;top:0;width:45px;height:45px;font-size:20px;line-height:45px;text-align:center;border-radius:0 .25rem .25rem 0;color:#777;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.contact-directory-box:hover .view-contact a,.header-left .header-search .dropdown .dropdown-toggle:hover,.header-left .header-search .dropdown.show .dropdown-toggle{background:#1b00ff;color:#fff}.header-left .header-search .dropdown .dropdown-menu{width:100%;min-width:100%;margin-top:5px;padding:20px}.header-left .header-search .search-input{padding-left:50px;padding-right:55px}.header-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;height:70px;width:50%}.header-left .brand-logo{max-width:180px;display:block}.header-right .brand-logo a{padding:0 6px}.header-right .menu-icon{position:relative;right:0;float:left;display:none}.user-info-dropdown{padding:5px 10px 5px 0}.user-info-dropdown .dropdown-toggle{display:block;padding:5px 0;font-size:16px}.user-info-dropdown .dropdown-toggle .user-icon{width:52px;height:52px;font-size:24px;background:#ebeff3;color:#1b00ff;line-height:52px;text-align:center;display:inline-block;vertical-align:middle;border-radius:100%;-webkit-box-shadow:0 0 10px rgba(0,0,0,.18);box-shadow:0 0 10px rgba(0,0,0,.18)}.user-info-dropdown .dropdown-toggle .user-name{font-weight:500;display:inline-block;vertical-align:middle;margin-left:5px;color:#131e22;font-family:Inter,sans-serif}.user-info-dropdown .dropdown-menu{min-width:185px}.dropdown-menu-icon-list .dropdown-item{position:relative;padding-left:45px}.dropdown-menu-icon-list .dropdown-item i{position:absolute;left:16px;top:50%;font-size:18px;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}.user-notification{float:right;margin-right:10px;padding:22px 5px 10px 0}.user-notification .dropdown-toggle{font-size:20px;padding:10px;color:#555;position:relative}.user-notification .dropdown-toggle .badge{position:absolute;right:8px;top:10px;background:#f5678a;width:5px;height:5px;display:block;padding:0}.user-notification .dropdown-menu{width:400px;padding:20px 10px}.notification-list ul li a{display:block;position:relative;padding:10px 15px 10px 75px;min-height:75px;color:#666;font-size:14px;font-weight:500;font-family:Inter,sans-serif;border-radius:5px}.notification-list ul li a img{width:50px;height:50px;position:absolute;left:10px;top:13px;border-radius:10px;-webkit-box-shadow:1px 2px 13px rgba(0,0,0,.2);box-shadow:1px 2px 13px rgba(0,0,0,.2)}.notification-list ul li a h3{font-size:16px;color:#202342;font-weight:700;text-transform:capitalize;font-family:Inter,sans-serif;padding-bottom:5px}.notification-list ul li a h3 span{float:right;font-size:12px;font-weight:500;padding-top:2px}.header-dark .header,.header-dark .header-left .header-search{background:#0b132b}.header-dark .header .user-info-dropdown .dropdown-toggle,.header-dark .header .user-info-dropdown .dropdown-toggle .user-name,.header-dark .menu-icon,.header-dark .search-toggle-icon,.header-dark .user-notification .dropdown-toggle{color:#ecf0f4}.header-dark .header .header-left .header-search .search-input{background:rgba(236,236,236,.1);border-color:transparent;color:#ecf0f4}.header-dark .header .header-left .header-search .search-input:focus{border-color:#4b4d50}.header-dark .header .header-left .header-search .search-input::-webkit-input-placeholder{opacity:1;color:#bfc4ca}.header-dark .header .header-left .header-search .search-input:-moz-placeholder,.header-dark .header .header-left .header-search .search-input::-moz-placeholder{opacity:1;color:#bfc4ca}.header-dark .header .header-left .header-search .search-input:-ms-input-placeholder{opacity:1;color:#bfc4ca}.header-dark .header .header-left .header-search .search-icon{color:#ecf0f4}.footer-wrap{width:100%;position:relative;text-align:center;font-weight:500}.footer-wrap a{color:#1b00ff;text-decoration:underline}.menu-icon,.search-toggle-icon{width:47px;height:47px;font-size:22px;line-height:1;color:#555;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.brand-logo{width:280px;height:70px;border-bottom:1px solid rgba(0,0,0,.1)}.brand-logo a{display:-webkit-box;display:-ms-flexbox;display:flex;vertical-align:middle;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;height:100%;font-size:22px;color:#fff;letter-spacing:.05em;font-weight:500;line-height:45px;font-family:Inter,sans-serif;padding:0 20px}.brand-logo a .light-logo,.sidebar-light .brand-logo a .dark-logo{display:block}.brand-logo a span{display:block;vertical-align:middle;margin-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand-logo a .svg,.brand-logo a img{max-width:180px;display:block;height:auto}.left-side-bar,.left-side-bar:before{position:fixed;left:0;top:0;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.left-side-bar{width:280px;height:100vh;z-index:1000;background:#0b132b}.left-side-bar .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background:#ecf0f4}.left-side-bar:before{content:"";z-index:-1;width:100%;height:100%;background:rgba(0,0,0,.3);display:none}.left-side-bar.open{left:0}.left-side-bar .menu-block{height:calc(100vh - 70px)}.left-side-bar .close-sidebar{font-size:18px;color:#888;cursor:pointer;position:absolute;right:10px;top:20px;display:none}.sidebar-menu{padding:0 0 20px}.sidebar-menu .dropdown-toggle{display:block;padding:18px 15px 18px 67px;font-size:16px;color:#fff;font-weight:300;letter-spacing:.03em;position:relative;font-family:Inter,sans-serif;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.sidebar-menu .dropdown-toggle:after{position:absolute;right:15px;font-size:18px}.sidebar-menu.icon-style-2 .dropdown-toggle:after{content:"\f217";font-family:Ionicons}.sidebar-menu.icon-style-2 .dropdown.show .dropdown-toggle:after{content:"\f208"}.sidebar-menu.icon-style-3 .dropdown-toggle:after{content:"\f101"}.sidebar-menu.icon-style-3 .dropdown.show .dropdown-toggle:after{content:"\f103"}.sidebar-menu .dropdown-toggle:hover,.sidebar-menu .show>.dropdown-toggle{background:rgba(0,0,0,.4);color:#fff}.sidebar-menu .dropdown-toggle .micon{position:absolute;left:10px;width:42px;height:42px;font-size:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;background-color:transparent;top:50%;text-align:center;border-radius:4px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}.sidebar-menu .dropdown-toggle:hover .micon,.sidebar-menu .show>.dropdown-toggle .micon{color:#fff}.sidebar-menu .dropdown-toggle .new{font-size:24px;line-height:14px;display:inline-block;vertical-align:middle}.sidebar-menu .dropdown-toggle .new:before{line-height:14px}.sidebar-menu .submenu{position:relative;width:100%;display:none}.sidebar-menu .submenu:before{content:"";width:1px;height:100%;position:absolute;left:31px;top:0;display:none;background:0 0;border-left:2px dashed #1b00ff}.sidebar-menu .submenu li>a:before{content:"\f208";position:absolute;line-height:1;left:28px;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);font-family:Ionicons}.sidebar-menu.icon-list-style-2 .submenu li>a:before{content:"\f10c";font-family:FontAwesome}.sidebar-menu.icon-list-style-3 .submenu li>a:before{content:"\eb1d";font-family:dropways}.sidebar-menu.icon-list-style-4 .submenu li>a:before{content:"\edd2";font-family:dropways}.sidebar-menu.icon-list-style-5 .submenu li>a:before{content:"\ee07";font-family:dropways}.sidebar-menu.icon-list-style-6 .submenu li>a:before{content:"\ee36";font-family:dropways}.mobile-menu-overlay,.sidebar-menu .submenu li a,.sidebar-menu .submenu li>a:before{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.sidebar-menu .submenu li a{display:block;padding:18px 15px 18px 60px;font-size:14px;color:#fff;font-weight:300;letter-spacing:.03em;position:relative;font-family:Inter,sans-serif}.chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .left .overlay,.chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .right a,.sidebar-menu .submenu li.dropdown>a:before,.sitemap ul li.child:after,.sitemap ul li.child:before{display:none}.sidebar-menu .submenu li a.dropdown-toggle{padding:18px 15px 18px 60px;font-size:16px}.sidebar-menu .submenu.child{padding-left:15px}.sidebar-menu .submenu li:hover>a:before{left:18px}.sidebar-menu .submenu li a.active,.sidebar-menu .submenu li a:hover{color:#fff;background-color:rgba(0,0,0,.4)}.sidebar-light .sidebar-menu .dropdown-toggle:hover .micon,.sidebar-light .sidebar-menu .show>.dropdown-toggle .micon,.sidebar-menu .dropdown-toggle.active,.sidebar-menu .dropdown-toggle.active .micon{color:#fff}.mobile-menu-overlay{position:fixed;left:0;top:0;width:100%;height:100%;background:#121421;opacity:.6;z-index:123;background-size:20px;background-position:98% 15px;display:none}.sidebar-light .left-side-bar{background:#fff}.sidebar-light .sidebar-menu .dropdown-toggle,.sidebar-light .sidebar-menu .submenu li a{color:#0b132b;font-weight:400}.sidebar-light .sidebar-menu .dropdown-toggle .micon{color:#0b132b}.sidebar-light .sidebar-menu .dropdown-toggle:hover,.sidebar-light .sidebar-menu .show>.dropdown-toggle,.sidebar-light .sidebar-menu .submenu li a.active,.sidebar-light .sidebar-menu .submenu li a:hover{color:#fff;background-color:#0b132b}.sidebar-light .menu-block .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{background-color:#0e132b}.sidebar-menu .dropdown-divider{margin:20px 0;border-color:rgba(255,255,255,.2);border-width:2px}.sidebar-light .sidebar-menu .dropdown-divider{border-color:rgba(0,0,0,.2)}.sidebar-menu .sidebar-small-cap{font-size:14px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:#fff;padding:0 15px 10px}.sidebar-light .sidebar-menu .sidebar-small-cap{color:#1502bd}.login-header{position:relative;padding:0 15px;background-color:#fff;z-index:1}.login-header .brand-logo{width:auto;border:0}.login-menu a{font-size:20px;font-weight:600;color:#1b00ff}.login-wrap{height:calc(100% - 70px);overflow:auto;padding:30px 0}body.IE .login-wrap,body.IE .register-page-wrap{display:block!important;padding:0}body.IE .login-wrap .container,body.IE .register-page-wrap .container{padding-top:10vh;padding-bottom:10vh}.login-wrap .container,.register-page-wrap .container{max-width:1300px}.login-wrap .mCustomScrollBox{height:auto;width:100%}.login-box{max-width:400px;width:100%;padding:40px 20px;margin:5px auto}.select-role{margin-bottom:25px;padding:0 5px}.select-role .btn-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 -10px}.select-role .btn-group .btn{margin:0 5px;border:1px solid #d4d4d4;text-align:left;padding-left:60px;padding-top:10px;padding-bottom:10px;width:calc(50% - 10px);border-radius:5px!important;font-size:16px;line-height:1.3;font-weight:700;color:#333;position:relative}.select-role .btn-group .btn.active,.select-role .btn-group .btn.active:focus,.select-role .btn-group .btn.focus.active{background-color:rgba(27,0,255,.05);border-color:rgba(27,0,255,.5);color:#1b00ff}.select-role .btn-group .btn .icon{position:absolute;left:15px;width:30px;height:30px;top:50%;margin-top:-15px}.select-role .btn-group .btn .icon .svg{width:30px;height:30px}.select-role .btn-group .btn span{display:block;font-size:14px;font-weight:500;color:#222}.login-box .login-title{padding:0 0 10px;margin-bottom:30px}.login-box .login-title h2{font-size:24px;font-weight:700}.login-box .login-img{display:block;margin:0 auto 20px;max-width:100px}.forgot-password{text-align:right}.register-page-wrap{height:calc(100% - 70px);padding:30px 0}.register-page-wrap .register-box{max-width:410px;margin:0 auto}.register-page-wrap,.register-page-wrap .wizard-content .wizard{position:relative;overflow:auto}.register-page-wrap .wizard-content .wizard .steps{position:relative}.register-page-wrap .wizard-content .wizard>.steps .step{position:relative;top:0;left:0;display:block;margin:0 auto;border-width:2px;background-color:#fff;border-color:rgba(24,31,72,.3)}.register-page-wrap .wizard-content .wizard>.steps>ul>li.done>a .step{background:url(../images/tick.svg) no-repeat #ecf0f4;font-size:0;background-size:22px;background-position:center center;border-color:rgba(24,31,72,.3)}.register-page-wrap .wizard-content .wizard.wizard-circle>.steps>ul>li:after,.register-page-wrap .wizard-content .wizard.wizard-circle>.steps>ul>li:before,.wizard-content .wizard.wizard-circle>.steps>ul>li.current~li:after,.wizard-content .wizard.wizard-circle>.steps>ul>li.current~li:before{background:rgba(24,31,72,.3)}.wizard-content .wizard.vertical.wizard-circle>.steps>ul>li.current~li:after,.wizard-content .wizard.vertical.wizard-circle>.steps>ul>li.current~li:before{background-color:transparent}.register-page-wrap .wizard-content .wizard>.steps>ul>li.current .step{border-color:#1b00ff;color:#181f48;background-color:#fff}.register-page-wrap .wizard-content .wizard>.steps .info,.register-page-wrap .wizard-content .wizard>.steps .step,.register-page-wrap .wizard-content .wizard>.steps>ul>li a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.register-page-wrap .wizard-content .wizard>.steps .info{display:block;width:100%;padding-top:10px}.register-page-wrap .wizard-content .wizard>.steps>ul{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100%;padding:0 10px}.register-page-wrap .wizard-content .wizard>.steps>ul>li{width:25%}.register-page-wrap .wizard-content .wizard>.steps>ul>li a{padding:20px 10px;margin:0;text-align:center;color:rgba(24,31,72,.6);font-size:11px;font-weight:700}.register-page-wrap .wizard-content .wizard>.steps>ul>li.current>a,.register-page-wrap .wizard-content .wizard>.steps>ul>li.done>a{color:#181f48}.register-page-wrap .wizard-content .wizard>.content{overflow:hidden;padding:15px 15px 0;min-height:320px}.register-page-wrap .wizard-content .wizard>.actions{padding:0 15px 20px;text-align:right}.register-info li{margin-bottom:15px;font-size:14px}.main-container{padding:80px 20px 0 300px}.page-header .dropdown-menu{border-radius:5px}.page-header{background-color:#fff;border-radius:10px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08);margin-bottom:30px;padding:20px}.page-header .row{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.page-header h4{font-weight:600;padding-bottom:5px}.page-header .breadcrumb{padding:0;margin:0}.search-icon-box,.timeline ul{position:relative}.search-icon-box input{height:70px;width:100%;font-size:20px;padding:0 60px 0 30px;font-weight:300;border:0;color:#fff;background:#6209ab}.search-icon-box input::-webkit-input-placeholder{opacity:1;color:#fff}.search-icon-box input:-moz-placeholder,.search-icon-box input::-moz-placeholder{opacity:1;color:#fff}.search-icon-box input:-ms-input-placeholder{opacity:1;color:#fff}.search-icon-box .search_icon{position:absolute;font-size:24px;line-height:1;right:20px;top:26px;color:#fff}.fontawesome-icon-list{padding-top:20px}.fontawesome-icon-list.custom-icon-list,.sitemap ul li.child h5{padding-top:0}.fontawesome-icon-list .fa-hover,.fontawesome-icon-list a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.fontawesome-icon-list .fa-hover{padding-top:13px;padding-bottom:13px;margin-bottom:10px;cursor:pointer;border-radius:8px}.fontawesome-icon-list .fa-hover:hover{background:rgba(68,66,87,.13);-webkit-box-shadow:0 0 18px rgba(0,0,0,.08);box-shadow:0 0 18px rgba(0,0,0,.08)}.fontawesome-icon-list a{display:block;font-size:14px;font-weight:500;position:relative;padding-left:45px;color:#131e22}.fontawesome-icon-list a .icon-copy{position:absolute;left:10px;top:4px;font-size:18px}.fontawesome-icon-list.custom-icon-list a{font-size:14px;line-height:24px}.fontawesome-icon-list.custom-icon-list a .icon-copy{font-size:24px;line-height:1;top:0}.foundation-icon.fontawesome-icon-list a .icon-copy{top:0;font-size:24px;line-height:24px}.ionicons-list li{width:8.3%;text-align:center}.ionicons-list.fontawesome-icon-list a{padding-left:0}.ionicons-list.fontawesome-icon-list a .icon-copy{font-size:24px;left:0;position:relative}.wysihtml5-toolbar .dropdown-menu a{display:block;font-size:15px;font-weight:400;padding:.55rem 1rem;color:#667f87;font-family:Inter,sans-serif;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.html-editor textarea.form-control{height:300px;font-weight:400}.copy-notification{color:#fff;background-color:rgba(0,0,0,.8);padding:12px 20px;border-radius:30px;position:fixed;top:50%;left:50%;width:150px;margin-top:-30px;margin-left:-85px;display:none;text-align:center}.error-page h1,.error-page-wrap{font-size:16px;line-height:26px;font-weight:700;color:#222}.error-page h1{font-size:210px;text-shadow:2px 2px 0 #181f48,4px 4px 0 #fff,8px 8px 0 #181f48;line-height:1;color:#181f48}.error-page h3{font-size:18px;text-transform:uppercase;font-weight:700;margin-bottom:30px;padding-top:30px}.project-info{padding-bottom:15px}.project-info-left{float:left;width:60px;padding-top:10px}.project-info-left .icon{width:50px;height:50px;border-radius:100%;line-height:50px;text-align:center;font-size:20px}.project-info-right{float:right;width:calc(100% - 60px);text-align:right}.device-manage-progress-chart ul li:last-child{margin-bottom:0}.device-manage-progress-chart .device-name{width:75px;float:left;text-align:right}.device-manage-progress-chart .device-total{float:left;width:45px;font-size:14px}.device-manage-progress-chart .device-progress{float:left;width:calc(100% - 120px);padding:7px 10px 0}.device-manage-progress-chart .device-progress .grand_total{float:right}.device-manage-progress-chart .device-progress .progress{margin-bottom:0;height:10px}.device-manage-progress-chart .device-progress .progress .progress-bar{height:100%}.device-manage-progress-chart .device-progress .progress .progress-bar.window{background:#00bcf2}.device-manage-progress-chart .device-progress .progress .progress-bar.mac{background:#027496}.device-manage-progress-chart .device-progress .progress .progress-bar.android{background:#0059b2}.device-manage-progress-chart .device-progress .progress .progress-bar.linux{background:#8ab1b7}.to-do-list ul li{padding:15px}.to-do-list ul li,.to-do-list ul li:hover{background:#ecf0f4}.to-do-list ul li:nth-child(2n){background:#fff}#browservisit path.jvectormap-region.jvectormap-element{stroke-width:.5px;stroke:#667f87}.jvectormap-goback,.jvectormap-zoomin,.jvectormap-zoomout{background:#667f87}.browser-visits ul li{margin-bottom:40px}.browser-visits ul li .icon,.browser-visits ul li .visit{width:50px}.browser-visits ul li .browser-name{width:calc(100% - 100px);font-size:14px;font-weight:600}.docs-preview{margin-right:-1rem}.img-preview{float:left;margin-bottom:.5rem;margin-right:.5rem;overflow:hidden}.preview-lg{height:9rem;width:16rem}.preview-md{height:4.5rem;width:8rem}.preview-sm{height:2.25rem;width:4rem}.preview-xs{height:1.125rem;margin-right:0;width:2rem}.btn-list .btn{margin:5px}#login-modal .modal-dialog{max-width:380px}#login-modal .login-box{margin:0}.confirmation-btn{width:50px;height:50px;margin:0 auto}.da-card .da-card-content{padding:20px 15px;background:#fff;font-size:14px}.da-card,.da-card .da-card-photo{position:relative;overflow:hidden}.da-card .da-card-photo img{position:relative;display:block;width:100%;-webkit-transition:all .4s linear;transition:all .4s linear}.da-card .da-overlay{position:absolute;width:100%;height:100%;left:0;top:0;opacity:0;overflow:hidden;background:rgba(19,30,34,.7);-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.da-card .da-overlay.da-slide-left{left:-100%}.da-card .da-card-photo:hover .da-overlay.da-slide-left{left:0}.da-card .da-overlay.da-slide-bottom,.da-card .da-overlay.da-slide-left,.da-card .da-overlay.da-slide-right,.da-card .da-overlay.da-slide-top{-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.da-card .da-overlay.da-slide-right{right:-100%;left:inherit}.da-card .da-card-photo:hover .da-overlay.da-slide-right{right:0}.da-card .da-overlay.da-slide-bottom,.da-card .da-overlay.da-slide-top{top:-100%}.da-card .da-card-photo:hover .da-overlay.da-slide-bottom,.da-card .da-card-photo:hover .da-overlay.da-slide-top{top:0}.da-card .da-overlay.da-slide-bottom{top:100%}.da-card .da-card-photo:hover img{-webkit-transform:scale(1.2) translateZ(0);transform:scale(1.2) translateZ(0)}.da-card .da-card-photo:hover .da-overlay{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}.da-card .da-card-photo:hover .da-social{opacity:1}.da-card .da-social{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;padding:20px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;opacity:0;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.da-card .da-social h5{position:absolute;top:0;white-space:nowrap;overflow:hidden;width:100%;text-overflow:ellipsis;font-size:16px;font-weight:500}.chat-box .chat-desc ul li .chat-img,.da-card .da-social ul li{float:left}.da-card .da-social ul li a{display:block;width:45px;height:45px;border:1px solid #fff;line-height:43px;font-size:20px;text-align:center;color:#fff;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.da-card .da-social ul li:first-child a{border-top-left-radius:5px;border-bottom-left-radius:5px}.da-card .da-social ul li:last-child a{border-top-right-radius:5px;border-bottom-right-radius:5px}.da-card .da-social ul li a:hover{background:#fff;color:#1b00ff}.nav-tabs.customtab .nav-item.show .nav-link,.nav-tabs.customtab .nav-link.active{color:#1b00ff;border:0;border-bottom:2px solid #1b00ff}.nav-tabs.customtab .nav-item{margin-bottom:0}.nav-tabs.customtab .nav-link{color:#181f48;border:0;border-bottom:2px solid transparent;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.nav-tabs.customtab .nav-link:focus,.nav-tabs.customtab .nav-link:hover{color:#1b00ff;border:0;border-bottom:2px solid #1b00ff}.nav.vtabs{border-bottom:0;border-right:1px solid #dee2e6;height:100%}.nav.vtabs .nav-link{border-radius:0}.nav.vtabs .nav-item.show .nav-link,.nav.vtabs .nav-link.active{border-right:0;border-color:#dee2e6;color:#1b00ff}.nav.vtabs.nav-pills .nav-item.show .nav-link,.nav.vtabs.nav-pills .nav-link.active{border-right:0;border-color:#dee2e6;color:#fff}.nav.vtabs.customtab .nav-item.show .nav-link,.nav.vtabs.customtab .nav-link.active{border-color:#1b00ff}.timeline ul:before{content:"";width:3px;height:100%;background:#1b00ff;position:absolute;left:150px}.timeline ul li{position:relative;padding-left:180px;padding-top:20px;padding-bottom:30px}.timeline ul li:before{content:"";position:absolute;top:30px;left:142px;width:18px;height:18px;background:#fff;border-radius:100%;-webkit-box-shadow:0 0 0 3px #1b00ff;box-shadow:0 0 0 3px #1b00ff}.timeline .timeline-date{position:absolute;left:0;top:20px;width:120px;background:#1b00ff;color:#fff;font-size:16px;padding:6px 10px;border-radius:5px}.list-unstyled>li>ul{margin-left:35px}.list-unstyled>li>ul li{list-style:circle}.sitemap{border-left:2px dashed #1b00ff}.sitemap h5{padding:15px;margin-bottom:10px;font-weight:600;color:#1b00ff}.sitemap ul,.sitemap ul li{position:relative;padding-left:25px}.sitemap ul li{min-height:40px;padding-left:35px;margin-bottom:10px;padding-top:2px}.sitemap ul li:last-child{margin-bottom:0}.sitemap ul li:before{content:"";background:#fff;width:20px;height:20px;border:2px solid #1b00ff;border-radius:100%;position:absolute;left:6px;top:5px}.sitemap ul li:after{content:"";width:25px;left:-25px;top:40%;position:absolute;border-top:2px dashed #1b00ff}.blog-list ul li,.sitemap ul li a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.fc th,.sitemap ul li a{font-weight:500;font-size:15px}.sitemap ul li a{display:inline-block;color:#0b132b}.sitemap ul li a:hover{color:#000}.sitemap ul li.child{padding-left:0;padding-top:0;border-left:2px dashed #2976aa}.calendar-wrap .fc-event.ui-draggable-handle{padding:5px;margin-bottom:5px}.fc th{padding:10px!important;background:#e1e1f5;line-height:1}.fc-day-grid-event .fc-time{font-weight:500!important}.fc-day-grid-event .fc-content{padding:3px 9px}.fc-header-toolbar h2{font-size:18px;padding-top:7px}.blog-wrap{padding-bottom:50px}.blog-list ul li{border-radius:10px;margin-bottom:40px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08);background:#fff}.blog-list ul li:hover{-webkit-box-shadow:0 0 48px rgba(0,0,0,.25);box-shadow:0 0 48px rgba(0,0,0,.25)}.blog-list ul li .blog-img{height:100%;min-height:300px;border-radius:10px 0 0 10px;background-size:cover!important}.blog-list ul li .blog-caption{padding:20px;font-size:16px;line-height:1.5;color:#031e23}.blog-list ul li .blog-caption h4{font-size:17px;line-height:1.5;font-weight:700;margin-bottom:12px}.blog-list ul li .blog-caption h4 a,.product-caption h4 a{color:#131e22}.latest-post ul li{padding:.75rem 1.25rem;font-size:14px;color:#78909c;border-bottom:1px solid rgba(0,0,0,.125)}.latest-post ul li h4{font-size:14px;font-weight:600;line-height:1.5;margin-bottom:5px}.blog-list ul li .blog-caption h4 a,.latest-post ul li h4 a,.product-box,.product-caption h4 a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.latest-post ul li h4 a{display:block;color:#131e22}.latest-post ul li h4 a:hover{color:#1b00ff}.blog-detail,.product-box{background:#fff}.blog-detail .blog-caption{padding:20px;font-size:16px;color:#78909c}.blog-detail ul li{position:relative;padding-left:25px;margin-bottom:5px;line-height:28px}.blog-detail ul li:before{content:"\f101";font-family:FontAwesome;position:absolute;color:#405158;left:0;top:0}.blog-detail ol,.blog-detail ul{padding-left:15px}.blog-detail ol>li{position:relative;padding-left:20px;margin-bottom:5px}.blog-detail ol,.blog-detail ol>li>ol,.blog-detail ol>li>ol>li>ol{counter-reset:my-badass-counter}.blog-detail ol>li>ol>li:before{content:counter(my-badass-counter,lower-alpha);counter-increment:my-badass-counter}.blog-detail ol>li:before,.blog-detail ol>li>ol>li>ol>li:before{content:counter(my-badass-counter,lower-roman);counter-increment:my-badass-counter}.blog-detail ol>li:before{content:counter(my-badass-counter);position:absolute;left:0;top:0;color:#405158;font-weight:500}.gallery-wrap>ul>li,.product-list ul li{margin-bottom:30px}.product-box{border-radius:10px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08);height:100%}.producct-img{overflow:hidden}.producct-img img{position:relative;border-radius:10px 10px 0 0;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out}.product-list ul li:hover .producct-img img{-webkit-transform:scale(1.3);transform:scale(1.3)}.product-caption{padding:20px}.product-caption h4{font-size:18px;margin-bottom:8px}.product-caption .btn{border-radius:22px}.price{font-size:15px;font-weight:600;padding-bottom:15px;color:#78909c}.price ins{text-decoration:none;display:inline-block;margin-left:10px;color:#131e22}.product-slider{margin-bottom:20px}.slider-arrow .slick-arrow,.slider-arrow .slick-arrow:before{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.slider-arrow .slick-arrow{position:absolute;bottom:0;width:40px;height:40px;top:50%;margin-top:-20px;border:1px solid #1b00ff;background:#1b00ff;border-radius:0;cursor:pointer;font-size:0;text-align:center}.slider-arrow .slick-arrow:hover{border-color:#2a2d31}.slider-arrow .slick-arrow:hover:before{color:#fff}.slider-arrow .slick-arrow:before{font-family:dropways;font-size:16px;color:#fff;line-height:38px}.slider-arrow .slick-arrow.slick-prev{z-index:12;left:15px}.slider-arrow .slick-arrow.slick-prev:before{content:"\eabc"}.slider-arrow .slick-arrow.slick-next{right:15px}.slider-arrow .slick-arrow.slick-next:before{content:"\eabd"}.product-slide-nav{padding:10px}.product-detail-desc{font-size:16px;line-height:1.5}.faq-wrap .card{margin-bottom:20px;border:0;border-radius:10px;overflow:hidden;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08)}.faq-wrap .card-header{background:#fff;text-align:left;border:0;padding:0}.faq-wrap .card-header .btn{background:0 0;border-radius:0;text-align:left;font-size:16px;font-weight:500;padding:16px 40px 16px 16px;position:relative;white-space:normal;color:#1b00ff;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.faq-wrap .card-header .btn.collapsed{color:#222}.faq-wrap .card-header .btn:after{content:"\f209";font-family:Ionicons;position:absolute;right:10px;color:#1b00ff;top:16px}.faq-wrap .card-header .btn.collapsed:after{content:"\f218"}.faq-wrap .card-body{padding-top:0}.pricing-table-wrap .card{border:0;-webkit-box-shadow:0 0 48px rgba(0,0,0,.2);box-shadow:0 0 48px rgba(0,0,0,.2)}.pricing-table-wrap .btn{padding-left:30px;padding-right:30px}.pricing-table-wrap .list-group-flush .list-group-item{background:0 0}.pricing-card{text-align:center}.pricing-card .price-title,.pricing-card .pricing-icon{padding-bottom:30px;text-align:center}.pricing-card .pricing-icon img{margin-top:-30px}.pricing-card .price-title{text-transform:uppercase;font-size:16px;font-weight:500;color:#1b00ff;letter-spacing:.15em}.pricing-card .pricing-price{font-size:60px;line-height:1;font-weight:400;padding-bottom:40px;padding-top:20px;color:#1b00ff}.pricing-card .pricing-price sub{font-size:16px;font-weight:400;color:#fd486e}.pricing-card .pricing-price sup{font-size:20px;font-weight:400;color:#fd486e;top:10px;vertical-align:top}.pricing-card .text{padding-bottom:30px}.pricing-card .cta{max-width:170px;margin:0 auto;-webkit-transform:translate(0,50%);transform:translate(0,50%)}.pricing-card .cta .btn{display:block;text-align:center}.pricing-card-style2,.profile-setting .profile-edit-list>li{padding:20px}.pricing-card-style2 .pricing-card-header{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-bottom:15px;border-bottom:2px solid #f0f2f7}.pricing-card-style2 .pricing-card-header .left{width:60%}.pricing-card-style2 .pricing-card-header .left h5{color:#1b00ff;font-size:18px;font-weight:700}.pricing-card-style2 .pricing-card-header .left p,.pricing-points ul li{font-size:14px;font-weight:500;margin-bottom:0}.pricing-card-style2 .pricing-card-header .right{width:40%;text-align:right;color:#000;font-size:18px;line-height:1.4;font-weight:700}.pricing-card-style2 .pricing-card-header .right span{display:block;font-size:12px}.pricing-card-style2 .pricing-card-body{padding-top:30px;padding-bottom:10px}.pricing-points ul li{padding:0 30px 0 0;margin-bottom:20px;color:#000;position:relative}.pricing-points ul li:after{content:"\f121";font-family:Ionicons;font-size:18px;line-height:1;color:#1061e4;position:absolute;right:0;top:0}.pricing-card-style2 .cta{max-width:170px;margin:0 auto;padding-top:10px;padding-bottom:20px}.pricing-card-style2 .cta .btn{display:block;text-align:center}.profile-photo{width:160px;height:160px;margin:0 auto 15px;position:relative}.profile-photo .edit-avatar{position:absolute;right:-15px;top:0;width:30px;height:30px;line-height:30px;font-size:14px;text-align:center;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.4);box-shadow:0 2px 4px rgba(0,0,0,.4)}.contact-directory-box .contact-avatar span img,.profile-photo .avatar-photo,.profile-photo .edit-avatar{border-radius:100%}.profile-info,.profile-skills,.profile-social{border-top:2px dashed #ecf0f4;padding:15px}.profile-info ul li{margin-bottom:15px;font-size:14px;font-weight:500;word-wrap:break-word}.profile-info ul li span{display:block;font-size:14px;color:#1b00ff;font-weight:500;padding-bottom:5px}.profile-info ul li:last-child{margin-bottom:0}.profile-social ul li{float:left;margin:5px}.profile-social ul li .btn{padding:0;width:36px;height:36px;text-align:center;line-height:36px}.notification-list.chat-notification-list ul li.active a,.notification-list.chat-notification-list ul li:hover a,.profile-tab .nav-tabs.customtab{background:#fff}.profile-tab .nav-tabs.customtab .nav-link{padding:18px 30px;background:0 0;font-weight:500}.profile-setting{height:100%}.profile-setting .container{max-width:800px}.profile-tab .tab-content{height:calc(100% - 63px)}.profile-setting .profile-edit-list{padding:30px 0;margin:0}.profile-setting .btn-outline-secondary{border-color:#ced4da}.profile-setting .profile-edit-list .form-control{font-weight:400}.task-title{padding-bottom:30px}.task-title a{padding-left:20px;padding-right:20px}.profile-task-wrap .container{max-width:800px}.profile-task-list ul li{position:relative;padding-left:30px;font-size:18px;line-height:24px;color:#263238;margin-bottom:25px}.profile-task-list.close-tasks ul li{color:#90a4ae;text-decoration:line-through}.profile-task-list ul li .task-type{font-size:16px;color:#90a4ae;font-weight:500}.profile-task-list ul li .task-assign{font-size:16px;color:#90a4ae;font-weight:300}.profile-task-list ul li .due-date{display:inline-block;padding-left:10px}.profile-task-list ul li .due-date:before{content:"\f111";font-family:FontAwesome;display:inline-block;font-size:8px;vertical-align:middle;margin-right:8px;opacity:.5}.profile-task-list ul li .custom-control,.profile-timeline-list ul:before{position:absolute;left:0;top:0;width:100%;height:100%}.profile-task-list ul li .custom-control-label{position:absolute;width:100%;height:100%;left:0}.profile-task-list ul li .custom-control-label::after,.profile-task-list ul li .custom-control-label::before{top:50%;margin-top:-12px;left:0}.task-list-scroll{height:303px}.task-list-form>ul>li{padding:30px 20px;background:#e7eef0;position:relative;border-bottom:2px dashed #2976aa}.task-list-form>ul>li .remove-task{position:absolute;right:22px;top:3px;font-size:18px;color:#2976aa}.task-list-form .form-control{font-weight:400}.task-list-form textarea.form-control{height:80px}.task-list-form .btn-outline-primary{border-color:#ced4da}.add-more-task,.chat-box .chat-desc ul li.admin_chat .chat-body .chat_time{text-align:right}.add-more-task a{display:inline-block;padding:10px;color:#2976aa}.profile-timeline{padding:30px}.profile-timeline .timeline-month{margin-bottom:20px}.profile-timeline .timeline-month h5{font-size:16px;font-weight:700}.profile-timeline-list ul{padding-left:15px;position:relative}.profile-timeline-list ul:before{content:"";width:2px;left:4px;background-color:#1b00ff}.profile-timeline-list ul li{margin-bottom:10px;position:relative;padding-left:100px;line-height:24px;padding-top:8px}.profile-timeline-list ul li p{margin-bottom:5px;font-size:14px;line-height:1.5;font-weight:500}.profile-timeline-list ul li:before{content:"";width:12px;height:12px;border:2px solid #1b00ff;border-radius:22px;position:absolute;left:-16px;top:15px;background:#1b00ff}.profile-timeline-list .date{position:absolute;top:8px;left:5px;font-weight:700;font-size:13px}.profile-timeline-list .task-name{text-transform:uppercase;font-weight:600;color:#1b00ff;font-size:14px;line-height:22px;position:relative}.profile-timeline-list .task-name i{position:absolute;left:-22px;top:0;font-size:18px}.profile-timeline-list .task-time{color:rgba(24,31,72,.71);font-size:12px;font-weight:700}.contact-directory-list>ul>li{margin-bottom:30px}.contact-directory-box{background:#fff;min-height:400px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08);border-radius:10px}.contact-dire-info{padding:30px 25px 20px}.contact-directory-box .contact-avatar span{display:block;margin:0 auto 20px;width:150px;height:150px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3);border-radius:100%;overflow:hidden}.contact-directory-box .contact-name,.contact-directory-box .contact-skill{padding-bottom:20px}.contact-directory-box .contact-name h4{font-weight:600;font-size:18px}.contact-directory-box .contact-name p{margin-bottom:2px;color:#7f92a9;font-size:14px}.contact-directory-box .contact-skill .badge{border:1px solid #ced9ee;font-weight:500;font-size:16px;padding:7px 11px;margin:3px 0}.contact-directory-box .contact-skill .badge.badge-primary{background:#1b00ff;border-color:#1b00ff;-webkit-box-shadow:0 0 10px rgba(0,0,0,.2);box-shadow:0 0 10px rgba(0,0,0,.2)}.contact-directory-box .profile-sort-desc{font-weight:400;color:#6f7c8d}.contact-directory-box .view-contact a{display:block;text-align:center;text-transform:uppercase;font-size:15px;font-weight:600;padding:20px 5px;letter-spacing:.05em;position:relative;border-radius:0 0 6px 6px}.contact-directory-box:hover .view-contact a:before{opacity:0}.contact-directory-box .view-contact a,.contact-directory-box .view-contact a:before,.notification-list.chat-notification-list ul li a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.contact-directory-box .view-contact a:before{content:"";width:80px;height:1px;background:#1b00ff;position:absolute;left:0;right:0;top:0;margin:0 auto}.invoice-wrap{overflow:auto}.invoice-box{background:#fff;width:800px;margin:0 auto;padding:20px}.invoice-header{padding-bottom:30px}.invoice-desc .invoice-sub{width:40%;float:left;padding:8px 15px}.invoice-desc .invoice-hours,.invoice-desc .invoice-rate{width:20%;float:left;padding:8px 15px}.invoice-desc .invoice-subtotal{width:20%;float:right;padding:8px 15px}.invoice-desc .invoice-desc-head{background:#eaeaea;font-weight:500}.invoice-desc .invoice-desc-body{padding-top:15px;min-height:400px}.invoice-desc .invoice-desc-footer .invoice-desc-body{min-height:50px}.invoice-desc .invoice-desc-body ul li{border-bottom:1px solid #eaeaea;padding-bottom:5px}.chat-list{border:1px solid #ecf0f4;border-radius:5px;height:72vh}.chat-search{border-bottom:1px solid #ccc;padding:10px;position:relative}.chat-search>span{position:absolute;left:30px;top:30px;color:#33484f}.chat-search input{height:55px;width:100%;border:0;background:0 0;padding-left:50px;color:#33484f}.chat-list .notification-list{height:calc(100% - 76px);padding:10px}.notification-list.chat-notification-list ul li a{padding-top:16px}.notification-list.chat-notification-list ul li a p,.upload-file-box .right h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-list.chat-notification-list ul li a p .fa{font-size:10px}.notification-list.chat-notification-list ul li a img{-webkit-box-shadow:none;box-shadow:none}.chat-detail{height:72vh}.chat-profile-header{padding:10px 30px 10px 20px;border-bottom:1px solid #eff0f4}.chat-profile-header .left{float:left;width:60%}.chat-profile-header .left .chat-profile-photo{float:left;width:90px}.chat-profile-header .left .chat-profile-photo img{width:66px;height:66px;border-radius:100%}.chat-profile-header .left .chat-profile-name{float:left;padding-top:15px}.chat-profile-header .left .chat-profile-name h3{font-size:18px;color:#44aeff}.chat-profile-header .left .chat-profile-name span{font-size:12px;color:#a4a4a4;display:block;margin-bottom:6px}.chat-profile-header .left .chat-profile-name a{font-size:10px;color:#44aeff;display:inline-block}.chat-profile-header .right{float:right;width:40%;padding-top:15px}.chat-profile-header .right .text-light-orange{color:#f56767!important}.chat-box{height:calc(100% - 89px)}.chat-box .chat-desc{height:calc(100% - 86px);padding-bottom:10px}.chat-box .chat-desc ul li{margin-bottom:35px}.chat-box .chat-desc ul li .chat-img img,.upload-file-box .left .overlay a span{width:40px;height:40px;border-radius:100%}.chat-box .chat-desc ul li .chat-body{margin-left:60px}.chat-box .chat-desc ul li .chat-body p{font-size:15px;line-height:24px;color:#33484f;min-height:50px;padding:12px 15px;border:1px solid #ecf0f4;background:#ecf0f4;border-radius:5px}.chat-box .chat-desc ul li .chat-body .chat_time{font-size:12px;color:#a4a4a4}.chat-box .chat-desc ul li.admin_chat .chat-img,.chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .left{float:right}.chat-box .chat-desc ul li.admin_chat .chat-body{margin-left:0;margin-right:60px;text-align:right}.chat-box .chat-desc ul li.admin_chat .chat-body p{text-align:right;display:inline-block;background:#e1e1f5;padding:12px 15px;border-radius:5px;position:relative}.chat-box .chat-desc ul li.admin_chat .chat-body p:after{content:"";width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #389bff;position:absolute;right:-6px;top:16px;opacity:0}.chat-footer{height:86px;border-top:1px solid #eff0f4}.chat-footer .file-upload{float:left;width:55px}.chat-footer .file-upload a{display:block;text-align:center;font-size:20px;color:#222;padding-top:30px;padding-bottom:27px}.chat-footer .chat_text_area{float:left;width:calc(100% - 145px)}.chat-footer .chat_text_area textarea{width:100%;height:78px;border:0;font-size:16px;color:#33484f;padding-top:33px}.chat-footer .chat_send{float:right;width:90px}.chat-footer .chat_send .btn{display:block;width:100%;height:86px;font-size:35px;color:#44aeff;text-decoration:none;font-weight:900;padding:25px 10px 5px}.chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .right{float:right;padding-left:0;padding-right:17px}.upload-file-box{padding-bottom:10px}.upload-file-box .left{float:left;position:relative;width:114px;height:84px;overflow:hidden;border-radius:5px}.upload-file-box .left .overlay{background-color:rgba(0,0,0,.5);position:absolute;left:0;top:0;width:100%;height:100%}.upload-file-box .left .overlay a{display:block;width:100%;height:100%}.upload-file-box .left .overlay a span{width:35px;height:35px;display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;background:#fff;color:#222;line-height:35px;text-align:center;font-size:22px}.upload-file-box .right{float:left;width:calc(100% - 114px);padding-left:17px;padding-top:17px}.upload-file-box .right h3{display:block;font-size:14px;color:#000;margin-bottom:5px}.upload-file-box .right a{display:inline-block;color:#1d8df1;font-size:14px}.chat-profile-section{height:calc(100vh - 274px)}.chat-profile-section .chat--profile-desc{height:100%;padding:20px}.wizard-content .wizard>.actions>ul>li>a{background-color:#1b00ff;font-weight:600}.wizard-content .wizard>.actions>ul>li>a[href="#previous"]{border-color:#1b00ff;border-width:2px;color:#1b00ff}.wizard-content .wizard>.actions>ul>li.disabled>a[href="#previous"]{display:none;border-color:#1b00ff}.widget-style1{padding:10px}.widget-style1 .widget-data{width:calc(100% - 80px);padding:0 5px 0 15px}.widget-style1 .progress-data{width:80px}.widget-style1 .progress-data .apexcharts-canvas{margin:0 auto}.right-sidebar .right-sidebar-body .right-sidebar-body-content,.widget-style2 .widget-data{padding:20px}.right-sidebar{position:fixed;right:-315px;top:0;width:315px;height:100%;background:#fff;z-index:123;-webkit-box-shadow:0 0 18px rgba(0,0,0,.08);box-shadow:0 0 18px rgba(0,0,0,.08);-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.right-sidebar-visible{right:0}.right-sidebar .sidebar-title{height:70px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:5px 15px;border-bottom:1px solid #d4d4d4}.right-sidebar .sidebar-title h3{font-weight:600}.right-sidebar .sidebar-title h3 span{font-weight:400;color:#000}.right-sidebar .close-sidebar{font-size:18px;color:#888;cursor:pointer}.right-sidebar .right-sidebar-body{height:calc(100% - 70px);overflow:auto}.sidebar-btn-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.sidebar-btn-group .btn{width:48%}.sidebar-radio-group .custom-control-inline{margin-right:0;width:25%;margin-bottom:10px}.bootstrap-tagsinput .label-info{background:#1b00ff}.bootstrap-touchspin .btn{background:#1b00ff;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:0;padding-bottom:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.bootstrap-touchspin .input-group-btn-vertical .btn{height:52%}.bootstrap-touchspin .bootstrap-touchspin-postfix,.bootstrap-touchspin .bootstrap-touchspin-prefix{border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4}.asColorPicker-buttons a,.asColorPicker-gradient-control a{font-size:13px;font-weight:500}.dropzone{border-color:#1b00ff}.dropzone .dz-preview .dz-remove{color:red}.fc-view-container tr:first-child>td>.fc-day-grid-event{background:#1b00ff}.fc-today.alert-info{background:#e0deef}.fc-day-number,.fc-ltr .fc-axis{font-size:13px;font-weight:500}.swal2-popup .swal2-title{font-size:18px;font-weight:600}.swal2-popup .swal2-styled.swal2-confirm{background:#100099}.documentation-wrap{position:relative;height:100%;padding-left:300px}.documentation-wrap .doc-sidebar{position:absolute;left:0;top:0;background:#fff;width:300px;height:100%}.doc-content-wrap{padding:30px}.table-badge{padding:8px 20px;font-size:14px;background:#1b00ff;color:#ebecef;font-weight:500}@media (min-width:1301px) and (max-width:1400px){.header{width:calc(100% - 250px)}.brand-logo,.left-side-bar{width:250px}.main-container{padding-left:270px}}@media (min-width:1200px) and (max-width:1400px){.device-usage-chart .width-50-p{width:100%}}@media (max-width:1300px){.main-container{padding-left:0;padding-right:0}.header-left .menu-icon{display:-webkit-box;display:-ms-flexbox;display:flex}.header{width:100%}.left-side-bar{left:-281px}.left-side-bar .close-sidebar{display:block}.left-side-bar:before{display:block;opacity:0;visibility:hidden}.left-side-bar.open:before{opacity:1;visibility:visible;display:none}.left-side-bar .brand-logo a{text-align:left;padding:5px 15px}.left-side-bar .brand-logo a .svg,.left-side-bar .brand-logo a img{margin:0}.header-right .brand-logo{display:table}.header-right .menu-icon{display:block;padding-left:15px;padding-top:7px}.footer-wrap{width:100%}.mobile-menu-overlay{display:block;opacity:0;visibility:hidden}.mobile-menu-overlay.show{opacity:.6;visibility:visible}}@media (min-width:1025px){.header-left .header-search{display:block!important}}@media (max-width:1024px){.header{position:relative}.header-left{width:25%}.header-right{width:75%}.main-container{padding-top:10px}.header-left .search-toggle-icon{display:-webkit-box;display:-ms-flexbox;display:flex}.header-left .header-search{padding:15px 20px;position:absolute;left:0;top:100%;background:#fff;display:none}.register-page-wrap .wizard-content .wizard{padding-left:300px}.register-page-wrap .wizard-content .wizard .steps{width:300px}}@media (max-width:991px){.device-usage-chart .width-50-p{width:100%}}@media (max-width:767px){.login-box{padding:40px 15px}.login-header .brand-logo a img{max-width:150px}.pre-loader{background-size:43%}.xs-pd-20-10{padding:20px 10px}.xs-mb-20{margin-bottom:20px}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h4,h4{font-size:1.4rem}.main-container,.timeline ul li{padding-bottom:0}.footer-wrap{position:relative;height:auto}.user-notification{margin-right:5px}.user-notification .dropdown-menu{width:100%;min-width:300px}.user-info-dropdown .dropdown-toggle .user-name{display:none}.page-header{margin-bottom:30px}.forgot-password{text-align:center}.ionicons-list li{width:16.6%}.timeline .timeline-date{position:relative;top:0;margin-bottom:20px;left:35px}.timeline ul:before{left:10px}.timeline ul li{padding-left:0}.timeline ul li:before{left:2px;top:28px}.fc-toolbar .fc-left,.fc-toolbar .fc-right{float:none!important;padding-bottom:10px}.fc-toolbar .fc-left:after,.fc-toolbar .fc-right:after{content:"";clear:both;display:table}.faq-wrap .card-header .btn{font-size:17px}.error-page h1{font-size:150px}}@media (max-width:660px){.docs-buttons .btn-group-crop{display:block}.select-role .btn-group .btn{padding-left:35px;font-size:14px}.select-role .btn-group .btn .icon{left:5px;width:25px;height:25px}.select-role .btn-group .btn .icon .svg{width:25px;height:25px}.forgot-password a{font-size:14px;font-weight:600}.btn-group-lg>.btn,.btn-lg{font-size:16px}.register-page-wrap .wizard-content .wizard{padding-left:0}.register-page-wrap .wizard-content .wizard .steps{display:none}}
\ No newline at end of file
+*/body,html{-webkit-font-smoothing:antialiased;width:100%;height:100%}html{-webkit-text-size-adjust:none;-moz-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=submit]{-webkit-appearance:none}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}body{margin:0;padding:0;font-family:Inter,sans-serif;font-weight:400;min-height:100%;color:#031e23;background:#ecf0f4}a{text-decoration:none;color:#555}a:focus,a:hover{outline:0;text-decoration:none}:focus{outline:0}img{border:0;vertical-align:top;max-width:100%;height:auto}input,select,textarea{resize:none;font-family:Inter,sans-serif}select,textarea{outline:0}.slick-slide,a,button,input{outline:0!important}button::-moz-focus-inner{border:0}h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-weight:700;color:#202342;font-family:Inter,sans-serif}ol,p,ul{padding:0}ol,ul{margin:0;list-style:none}p{margin:0 0 15px}.container{max-width:1120px;width:100%}.pre-loader{background:#fff;background-position:center center;background-size:13%;position:fixed;left:0;top:0;width:100%;height:100%;z-index:12345;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.pre-loader .loader-logo{padding-bottom:15px}.pre-loader .loader-progress{height:8px;border-radius:15px;max-width:200px;margin:0 auto;display:block;background:#ecf0f4;overflow:hidden}.pre-loader .bar{width:0%;height:8px;display:block;background:#1b00ff}.pre-loader .percent{text-align:center;font-size:24px;display:none}.pre-loader .loading-text{text-align:center;font-size:18px;font-weight:500;padding-top:15px}.mx-w-150{max-width:150px}.mx-h-300{max-height:300px}.mx-h-350{max-height:350px}.mx-h-380{max-height:380px}.mx-h-400{max-height:400px}.mx-h-450{max-height:450px}.pd-0{padding:0}.padding-top-10{padding-top:10px}.padding-top-30{padding-top:30px}.padding-bottom-30{padding-bottom:30px}.pd-5{padding:5px}.pd-10{padding:10px}.pd-20{padding:20px}.chat-box .chat-desc ul,.pd-ltr-20{padding:20px 20px 0}.pd-30{padding:30px}.pb-10{padding-bottom:10px}.pb-15{padding-bottom:15px}.pb-20{padding-bottom:20px}.pb-30{padding-bottom:30px}.pt-10{padding-top:10px}.pt-15{padding-top:15px}.pt-20{padding-top:20px}.pt-30{padding-top:30px}.pr-10{padding-right:10px}.pr-20{padding-right:20px}.pr-30{padding-right:30px}.pl-10{padding-left:10px}.pl-20{padding-left:20px}.pl-30{padding-left:30px}.margin-5{margin:5px}.mt-15{margin-top:15px}.mt-30{margin-top:30px}.device-manage-progress-chart ul li,.mb-30{margin-bottom:30px}.mb-20{margin-bottom:20px}.mb-15{margin-bottom:15px}.mb-10{margin-bottom:10px}.mb-5{margin-bottom:5px!important}.mr-10{margin-right:10px}.mr-20{margin-right:20px}.font-30{font-size:30px;line-height:1.33em}.font-24{font-size:24px;line-height:1.42em}.font-20{font-size:20px;line-height:1.5em}.font-18{font-size:18px;line-height:1.55em}.font-16{font-size:16px;line-height:1.62em}.font-14{font-size:14px;line-height:1.71em}.font-12{font-size:12px;line-height:1.83em}.h1{font-size:40px;font-weight:700;line-height:1.3}.h1,.h2,.h3{color:#1b3133;font-family:Inter,sans-serif}.h2{font-size:28px;font-weight:700;line-height:1.35}.h3{font-size:24px;line-height:1.5}.h3,.h4{font-weight:700}.h4,.h5,.page-header h4{font-size:20px;line-height:1.35;color:#1b3133;font-family:Inter,sans-serif}.h5{font-size:18px;font-weight:600}.line-height-1{line-height:1}.line-height-1-2{line-height:1.2}.line-height-1-3{line-height:1.3}.weight-300{font-weight:300}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-600{font-weight:600}.weight-700{font-weight:700}.weight-800{font-weight:800}.height-auto{height:auto}.height-100-p{height:100%}.width-50-p{width:50%}.width-box{width:50px;height:50px}.max-width-200{max-width:200px}.max-width-300{max-width:300px}.max-width-400{max-width:400px}.max-width-500{max-width:500px}.max-width-600{max-width:600px}.max-width-700{max-width:700px}.max-width-800{max-width:800px}.max-width-900{max-width:900px}.max-width-1000{max-width:1000px}.min-height-200px{min-height:200px}.bg-cover{background-size:cover!important}.bg-light-blue{background-color:#e1e1f5}.color-light-blue{color:#e1e1f5}.bg-light-gray{background-color:#ecf0f4}.bg-white{background:#fff}.color-white{color:#fff}.bg-light-green{background-color:#41ccba}.text-light-green{color:#00e091}.bg-blue{background-color:#1b00ff}.text-blue{color:#1b00ff}.text-light-blue{color:#2976aa}.bg-light-orange{background-color:#f56767}.text-light-orange{color:#f56767}.bg-light-purple{background-color:#a683eb}.text-light-purple{color:#a683eb}.bg-orange{background-color:#f5956c}.text-orange{color:#f5956c}.text-yellow{color:#ecc72f}.text-green{color:#46be8a}.text-orange-50{color:#f2a654}.text-blue-50{color:#62a8ea}.text-red-50{color:#e14e50}.mCSB_inside>.mCSB_container{margin-right:0}.border-radius-0{border-radius:0}.border-radius-4{border-radius:4px}.border-radius-5{border-radius:5px}.border-radius-6{border-radius:6px}.border-radius-8{border-radius:8px}.border-radius-10{border-radius:10px}.border-radius-100,.user-info-dropdown .dropdown-toggle .user-icon img{border-radius:100%}.box-shadow{-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08)}.wave1{background-image:url(../images/wave.png);background-size:cover;background-position:center bottom;background-repeat:no-repeat}.card-box,.da-card{background-color:#fff;border-radius:10px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08)}.card-img-top{border-radius:10px 10px 0 0}.card-img-bottom{border-radius:0 0 10px 10px}.card-img{border-radius:10px}.card-title{font-size:18px;font-weight:600}.card-header{font-weight:500;font-size:16px}.card-text,.price del{font-size:15px}.badge{padding:.75em}.page-link:focus{-webkit-box-shadow:none;box-shadow:none}.highcharts-root{font-family:Inter,sans-serif!important}.bootstrap-select .dropdown-toggle{height:45px}.bootstrap-select .dropdown-toggle.btn-light{background-color:transparent;border-color:#d4d4d4}.bootstrap-select .dropdown-toggle.btn-light:not(:disabled):not(.disabled):active{background-color:transparent;border-color:#d4d4d4}.dropdown-toggle::after{content:"\f107";font-family:FontAwesome;vertical-align:unset;width:auto;height:auto;border:0!important}.bootstrap-select .dropdown-toggle::after{position:relative;right:5px}.dropdown.show>.dropdown-toggle::after{content:"\f106"}.dropdown-toggle.no-arrow:after{display:none}.dropdown-menu{border:0;padding:0;overflow:hidden;border-radius:10px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.1);box-shadow:0 0 28px rgba(0,0,0,.1)}.dropdown-item{font-size:16px;font-weight:400;padding:.657rem 1rem;color:#444;font-family:Inter,sans-serif;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.dropdown-item:focus,.dropdown-item:hover{background:#ecf0f4;color:#1b00ff}.form-group{margin-bottom:20px}.form-group>label{font-weight:500;font-size:14px}.custom-file-input,.custom-file-label,.custom-select,.form-control{font-family:Inter,sans-serif;color:#131e22;font-weight:400;height:45px;border-color:#d4d4d4;letter-spacing:.035em;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.form-control.form-control-sm{height:38px}.form-control.form-control-line{border-left:0;border-right:0;border-top:0;border-radius:0}.custom-file-label{padding-top:.475rem}.custom-file-label::after{height:100%;padding-top:.475rem}textarea.form-control{height:180px}.custom-file-input:focus,.custom-select:focus,.form-control:focus{color:#131e22;border-color:#1b00ff;-webkit-box-shadow:0 0 28px rgba(0,0,0,.1);box-shadow:0 0 28px rgba(0,0,0,.1)}.form-control.height-auto{height:auto}.input-group{margin-bottom:25px}.input-group.custom>.custom-select,.input-group.custom>.form-control{width:100%}.input-group.custom>.custom-select:not(:first-child),.input-group.custom>.form-control:not(:first-child){border-radius:.25rem;padding-left:50px}.input-group.custom>.custom-select:not(:last-child),.input-group.custom>.form-control:not(:last-child){border-radius:.25rem;padding-right:50px}.input-group-prepend.custom{position:absolute;left:0;top:0;z-index:12;height:100%}.input-group-append.custom{position:absolute;right:0;top:0;z-index:12;height:100%}.input-group-text{border:0;background:0 0}.input-group-text i{font-size:20px}.form-control:focus~.input-group-append .fa{color:#1b00ff}.form-control-lg,.input-group-lg>.form-control,.input-group-lg>.input-group-append>.btn,.input-group-lg>.input-group-append>.input-group-text,.input-group-lg>.input-group-prepend>.btn,.input-group-lg>.input-group-prepend>.input-group-text{height:50px;font-size:16px}.has-success{color:#28a745}.form-control-success{border-color:#28a745;background-image:url(../images/check-mark-green.png);background-repeat:no-repeat;background-position:center right 10px;background-size:20px 20px}.form-control-success:focus{border-color:#28a745;-webkit-box-shadow:0 0 0 1px #28a745;box-shadow:0 0 0 1px #28a745}.has-warning{color:#ffc107}.form-control-warning{border-color:#ffc107;background-image:url(../images/caution-sign.png);background-repeat:no-repeat;background-position:center right 10px;background-size:20px 20px}.form-control-warning:focus{border-color:#ffc107;-webkit-box-shadow:0 0 0 1px #ffc107;box-shadow:0 0 0 1px #ffc107}.has-danger{color:#dc3545}.form-control-danger{border-color:#dc3545;background-image:url(../images/cross.png);background-repeat:no-repeat;background-position:center right 10px;background-size:14px 14px}.form-control-danger:focus{border-color:#dc3545;-webkit-box-shadow:0 0 0 1px #dc3545;box-shadow:0 0 0 1px #dc3545}.btn{font-family:Inter,sans-serif;letter-spacing:0;font-weight:500;padding:.438rem 1rem}.btn-lg{padding:.657rem 1rem}.btn-group-lg>.btn,.btn-lg{font-size:18px}.btn-group-sm>.btn,.btn-sm{padding:.4rem .8rem;font-size:14px}.btn.focus,.btn:focus{-webkit-box-shadow:none!important;box-shadow:none!important}.btn-rounded{border-radius:25px}.breadcrumb{background:0 0;padding:.75rem 0}.breadcrumb-item.active{color:#1b00ff;font-weight:500}.breadcrumb-item a{color:#031e23}.breadcrumb-item+.breadcrumb-item::before{font-family:FontAwesome;content:"\f105"}.customscroll-10-p>.mCustomScrollBox>.mCSB_container{padding:10px}.datepicker{z-index:1060}.datepicker--day-name,.datepicker--time-current-hours,.datepicker--time-current-minutes{color:#1b00ff}.datepicker--nav-action path{stroke:#1b00ff}.datepicker--cell.-focus-,.datepicker--nav-action:hover,.datepicker--nav-title:hover{background:#e1e1f5;color:#1b00ff}.datepicker--cell.-selected-{color:#fff}.datepicker--time-current-hours:after,.datepicker--time-current-minutes:after{display:none}.datepicker-inline .datepicker{margin:0 auto}.form-control.time-picker-default:disabled,.form-control.time-picker-default[readonly],.form-control.time-picker:disabled,.form-control.time-picker[readonly]{background:#fff}.custom-control{padding-left:35px;cursor:pointer;padding-bottom:5px}.custom-control-label{cursor:pointer;font-weight:400}.custom-control-label::before{width:20px;height:20px;top:2px;left:-30px;background-color:transparent;border:2px solid #1b00ff}.custom-control-label::after{width:20px;height:20px;left:-30px;background-size:60%;top:2px}.custom-control-input:focus~.custom-control-label::before{-webkit-box-shadow:none;box-shadow:none;background-color:none}.custom-checkbox .custom-control-input:checked~.custom-control-label::before{background-color:#1b00ff}.custom-checkbox .custom-control-input:checked~.custom-control-label::after{background-image:url(../images/check-mark.png);background-repeat:no-repeat;background-position:center center}.custom-radio .custom-control-input:checked~.custom-control-label::before{background-color:#1b00ff}.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before{border:2px solid transparent}.select2-container .select2-selection--single{height:45px;border-color:#d4d4d4;outline:0;letter-spacing:.035em;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.select2-container--default.select2-container--focus .select2-selection--multiple,.select2-dropdown{border-color:#d4d4d4}.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:43px}.select2-container--default .select2-selection--single .select2-selection__arrow{height:43px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#1b00ff;color:#fff;border-color:#1b00ff}.select2-container--default .select2-selection--multiple{min-height:45px;border-color:#d4d4d4}.select2-container--default .select2-selection--multiple .select2-selection__rendered{padding-top:3px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#fff}.select2-dropdown{-webkit-box-shadow:0 0 28px rgba(0,0,0,.1);box-shadow:0 0 28px rgba(0,0,0,.1)}.select2-search--dropdown{padding:10px}.select2-container--default .select2-search--dropdown .select2-search__field{border-radius:5px}.bootstrap-select .dropdown-menu li .dropdown-item.active:hover,.select2-container--default .select2-results__option[aria-selected=true]{background-color:#1b00ff;color:#fff}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#1b00ff}.bootstrap-select.btn-group .dropdown-menu.inner,table.dataTable>tbody>tr.child ul.dtr-details .dtr-title{display:block}.bootstrap-select .dropdown-toggle:focus{outline:0!important}.bootstrap-select .dropdown-header{color:#222;font-weight:700;font-size:15px}.bootstrap-select .dropdown-menu li .dropdown-item:hover{color:#1b00ff}.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark{top:13px}.bootstrap-select .bs-ok-default:after{border-width:0 2px 2px 0}.dropup .dropdown-toggle::after{content:"\f107";font-family:FontAwesome;vertical-align:unset;width:auto;height:auto;border:0!important}.bootstrap-select.btn-group .dropdown-menu li a{display:block;font-size:15px;font-weight:400;padding:.55rem 1rem;color:#667f87;font-family:Inter,sans-serif;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.bootstrap-select.btn-group .dropdown-menu li.divider{border:1px solid #eaeaea}.bootstrap-select.btn-group .dropdown-menu li.selected a{background:#e1e1f5;color:#131e22}.bootstrap-select.btn-group .dropdown-menu li.disabled a{color:#cecece}.bootstrap-select.btn-group .dropdown-menu li a:hover{background:#e1e1f5;color:#131e22}.bootstrap-select.btn-group .dropdown-menu li a span.check-mark{background:url(../images/check-mark-green.png);width:15px;height:15px;background-size:contain}.label-info{background-color:#009efb}.bootstrap-tagsinput .tag{display:inline-block;padding:2px 6px;margin:2px;font-size:15px;border-radius:2px}.docs-options .dropdown-menu{max-height:250px;overflow:auto}.docs-buttons{padding-top:15px}.docs-buttons label,.notification-list ul li a p,.project-info-right p{margin-bottom:0}.docs-buttons .btn{margin-bottom:5px}.table thead th{font-weight:600;font-size:15px;border-bottom:0;padding-left:1rem}.table td,.table th{vertical-align:middle}.table td{font-size:14px;font-weight:500;padding:1rem}.table-striped tbody tr:nth-of-type(odd){background:#eaeef2}table.dataTable.display tbody tr.odd,table.dataTable.display tbody tr:hover,table.dataTable.hover tbody tr:hover,table.dataTable.stripe tbody tr.odd{background:#ecf0f3!important}table.dataTable tbody tr.selected,table.dataTable.display tbody tr:hover.selected,table.dataTable.hover tbody tr:hover.selected{background-color:#181f48!important;color:#fff}table.dataTable.display tbody tr.odd.selected,table.dataTable.stripe tbody tr.odd.selected{background-color:#1b00ff!important}table.dataTable thead .sorting:after,table.dataTable thead .sorting:before,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc_disabled:after,table.dataTable thead .sorting_desc_disabled:before{font-family:dropways;font-size:14px}table.dataTable thead .sorting:before,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc_disabled:before{content:"\eabb"}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_desc_disabled:after{content:"\eaba";right:.2em}.blog-list ul li:hover .blog-caption h4 a,.fontawesome-icon-list .fa-hover:hover a,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:after{color:#1b00ff}table.dataTable>tbody>tr.child ul.dtr-details{white-space:normal}.dataTables_length,.dt-buttons,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{padding-left:15px;padding-right:15px}.dt-checkbox,.dt-checkbox input{width:20px;height:20px;position:relative}.dt-checkbox input{position:absolute;opacity:0;z-index:1;left:0;top:0}.dt-checkbox span,.dt-checkbox span:before{width:20px;height:20px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.dt-checkbox span{position:relative;display:block;border:1px solid #9e9e9e;border-radius:4px}.dt-checkbox span:before{content:"";background:url(../images/check-mark.png) no-repeat;position:absolute;left:0;top:-1px;background-size:12px 12px;background-position:center center;-webkit-transform:scale(0);transform:scale(0)}.dt-checkbox input:checked~span{background:#1b00ff;border-color:#1b00ff;color:#fff}.dt-checkbox input:checked~span:before{-webkit-transform:scale(1);transform:scale(1)}.plyr{border-radius:10px;-webkit-box-shadow:0 0 10px 2px rgba(0,0,0,.15);box-shadow:0 0 10px 2px rgba(0,0,0,.15)}.popover-header{font-weight:500}.list-group-flush .list-group-item{border-top:0;margin-bottom:0}.docs-cropped .modal-body>canvas,.docs-cropped .modal-body>img,.img-preview>img{max-width:100%}.apexcharts-svg *{font-family:Muli,sans-serif!important}table.dataTable.dtr-inline.collapsed>tbody>tr[role=row]>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr[role=row]>th:first-child:before{-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;font-family:FontAwesome;background:0 0;content:"\f107";color:#444;font-size:23px;left:7px;top:50%;margin-top:-7px}table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before{content:"\f106";background:0 0}.header{position:fixed;height:70px;width:calc(100% - 280px);background:#fff;right:0;top:0;z-index:123;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-box-shadow:0 0 25px rgba(0,0,0,.1);box-shadow:0 0 25px rgba(0,0,0,.1)}.header-left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;width:50%}.brand-logo a .dark-logo,.header-left .menu-icon,.header-left .search-toggle-icon,.sidebar-light .brand-logo a .light-logo,.sidebar-menu .submenu li.dropdown:before{display:none}.header-left .header-search{width:100%;padding-left:20px}.header-left .header-search .form-group,.sidebar-menu .submenu li{position:relative}.header-left .header-search .search-icon{position:absolute;left:17px;top:12px;font-size:20px;color:#777}.header-left .header-search .dropdown{position:static;right:0;top:0;padding-right:10px}.header-left .header-search .dropdown .dropdown-toggle{position:absolute;right:0;top:0;width:45px;height:45px;font-size:20px;line-height:45px;text-align:center;border-radius:0 .25rem .25rem 0;color:#777;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.contact-directory-box:hover .view-contact a,.header-left .header-search .dropdown .dropdown-toggle:hover,.header-left .header-search .dropdown.show .dropdown-toggle{background:#1b00ff;color:#fff}.header-left .header-search .dropdown .dropdown-menu{width:100%;min-width:100%;margin-top:5px;padding:20px}.header-left .header-search .search-input{padding-left:50px;padding-right:55px}.header-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;height:70px;width:50%}.header-left .brand-logo{max-width:180px;display:block}.header-right .brand-logo a{padding:0 6px}.header-right .menu-icon{position:relative;right:0;float:left;display:none}.user-info-dropdown{padding:5px 10px 5px 0}.user-info-dropdown .dropdown-toggle{display:block;padding:5px 0;font-size:16px}.user-info-dropdown .dropdown-toggle .user-icon{width:52px;height:52px;font-size:24px;background:#ebeff3;color:#1b00ff;line-height:52px;text-align:center;display:inline-block;vertical-align:middle;border-radius:100%;-webkit-box-shadow:0 0 10px rgba(0,0,0,.18);box-shadow:0 0 10px rgba(0,0,0,.18)}.user-info-dropdown .dropdown-toggle .user-name{font-weight:500;display:inline-block;vertical-align:middle;margin-left:5px;color:#131e22;font-family:Inter,sans-serif}.user-info-dropdown .dropdown-menu{min-width:185px}.dropdown-menu-icon-list .dropdown-item{position:relative;padding-left:45px}.dropdown-menu-icon-list .dropdown-item i{position:absolute;left:16px;top:50%;font-size:18px;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}.user-notification{float:right;margin-right:10px;padding:22px 5px 10px 0}.user-notification .dropdown-toggle{font-size:20px;padding:10px;color:#555;position:relative}.user-notification .dropdown-toggle .badge{position:absolute;right:8px;top:10px;background:#f5678a;width:5px;height:5px;display:block;padding:0}.user-notification .dropdown-menu{width:400px;padding:20px 10px}.notification-list ul li a{display:block;position:relative;padding:10px 15px 10px 75px;min-height:75px;color:#666;font-size:14px;font-weight:500;font-family:Inter,sans-serif;border-radius:5px}.notification-list ul li a img{width:50px;height:50px;position:absolute;left:10px;top:13px;border-radius:10px;-webkit-box-shadow:1px 2px 13px rgba(0,0,0,.2);box-shadow:1px 2px 13px rgba(0,0,0,.2)}.notification-list ul li a h3{font-size:16px;color:#202342;font-weight:700;text-transform:capitalize;font-family:Inter,sans-serif;padding-bottom:5px}.notification-list ul li a h3 span{float:right;font-size:12px;font-weight:500;padding-top:2px}.header-dark .header,.header-dark .header-left .header-search{background:#0b132b}.header-dark .header .user-info-dropdown .dropdown-toggle,.header-dark .header .user-info-dropdown .dropdown-toggle .user-name,.header-dark .menu-icon,.header-dark .search-toggle-icon,.header-dark .user-notification .dropdown-toggle{color:#ecf0f4}.header-dark .header .header-left .header-search .search-input{background:rgba(236,236,236,.1);border-color:transparent;color:#ecf0f4}.header-dark .header .header-left .header-search .search-input:focus{border-color:#4b4d50}.header-dark .header .header-left .header-search .search-input::-webkit-input-placeholder{opacity:1;color:#bfc4ca}.header-dark .header .header-left .header-search .search-input:-moz-placeholder,.header-dark .header .header-left .header-search .search-input::-moz-placeholder{opacity:1;color:#bfc4ca}.header-dark .header .header-left .header-search .search-input:-ms-input-placeholder{opacity:1;color:#bfc4ca}.header-dark .header .header-left .header-search .search-icon{color:#ecf0f4}.footer-wrap{width:100%;position:relative;text-align:center;font-weight:500}.footer-wrap a{color:#1b00ff;text-decoration:underline}.menu-icon,.search-toggle-icon{width:47px;height:47px;font-size:22px;line-height:1;color:#555;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.brand-logo{width:280px;height:70px;border-bottom:1px solid rgba(0,0,0,.1)}.brand-logo a{display:-webkit-box;display:-ms-flexbox;display:flex;vertical-align:middle;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;height:100%;font-size:22px;color:#fff;letter-spacing:.05em;font-weight:500;line-height:45px;font-family:Inter,sans-serif;padding:0 20px}.brand-logo a .light-logo,.sidebar-light .brand-logo a .dark-logo{display:block}.brand-logo a span{display:block;vertical-align:middle;margin-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand-logo a .svg,.brand-logo a img{max-width:180px;display:block;height:auto}.left-side-bar,.left-side-bar:before{position:fixed;left:0;top:0;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.left-side-bar{width:280px;height:100vh;z-index:1000;background:#0b132b}.left-side-bar .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background:#ecf0f4}.left-side-bar:before{content:"";z-index:-1;width:100%;height:100%;background:rgba(0,0,0,.3);display:none}.left-side-bar.open{left:0}.left-side-bar .menu-block{height:calc(100vh - 70px)}.left-side-bar .close-sidebar{font-size:18px;color:#888;cursor:pointer;position:absolute;right:10px;top:20px;display:none}.sidebar-menu{padding:0 0 20px}.sidebar-menu .dropdown-toggle{display:block;padding:18px 15px 18px 67px;font-size:16px;color:#fff;font-weight:300;letter-spacing:.03em;position:relative;font-family:Inter,sans-serif;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.sidebar-menu .dropdown-toggle:after{position:absolute;right:15px;font-size:18px}.sidebar-menu.icon-style-2 .dropdown-toggle:after{content:"\f217";font-family:Ionicons}.sidebar-menu.icon-style-2 .dropdown.show .dropdown-toggle:after{content:"\f208"}.sidebar-menu.icon-style-3 .dropdown-toggle:after{content:"\f101"}.sidebar-menu.icon-style-3 .dropdown.show .dropdown-toggle:after{content:"\f103"}.sidebar-menu .dropdown-toggle:hover,.sidebar-menu .show>.dropdown-toggle{background:rgba(0,0,0,.4);color:#fff}.sidebar-menu .dropdown-toggle .micon{position:absolute;left:10px;width:42px;height:42px;font-size:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;background-color:transparent;top:50%;text-align:center;border-radius:4px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}.sidebar-light .sidebar-menu>ul>li>.dropdown-toggle.active .micon,.sidebar-menu .dropdown-toggle:hover .micon,.sidebar-menu .show>.dropdown-toggle .micon{color:#fff}.sidebar-menu .dropdown-toggle .new{font-size:24px;line-height:14px;display:inline-block;vertical-align:middle}.sidebar-menu .dropdown-toggle .new:before{line-height:14px}.sidebar-menu .submenu{position:relative;width:100%;display:none}.sidebar-menu .submenu:before{content:"";width:1px;height:100%;position:absolute;left:31px;top:0;display:none;background:0 0;border-left:2px dashed #1b00ff}.sidebar-menu .submenu li>a:before{content:"\f208";position:absolute;line-height:1;left:28px;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);font-family:Ionicons}.sidebar-menu.icon-list-style-2 .submenu li>a:before{content:"\f10c";font-family:FontAwesome}.sidebar-menu.icon-list-style-3 .submenu li>a:before{content:"\eb1d";font-family:dropways}.sidebar-menu.icon-list-style-4 .submenu li>a:before{content:"\edd2";font-family:dropways}.sidebar-menu.icon-list-style-5 .submenu li>a:before{content:"\ee07";font-family:dropways}.sidebar-menu.icon-list-style-6 .submenu li>a:before{content:"\ee36";font-family:dropways}.mobile-menu-overlay,.sidebar-menu .submenu li a,.sidebar-menu .submenu li>a:before{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.sidebar-menu .submenu li a{display:block;padding:18px 15px 18px 60px;font-size:14px;color:#fff;font-weight:300;letter-spacing:.03em;position:relative;font-family:Inter,sans-serif}.chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .left .overlay,.chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .right a,.sidebar-menu .submenu li.dropdown>a:before,.sitemap ul li.child:after,.sitemap ul li.child:before{display:none}.sidebar-menu .submenu li a.dropdown-toggle{padding:18px 15px 18px 60px;font-size:16px}.sidebar-menu .submenu.child{padding-left:15px}.sidebar-menu .submenu li:hover>a:before{left:18px}.sidebar-menu .submenu li a.active,.sidebar-menu .submenu li a:hover{color:#fff;background-color:rgba(0,0,0,.4)}.sidebar-menu>ul>li>.dropdown-toggle.active{background-color:rgba(0,0,0,.4)}.sidebar-light .sidebar-menu>ul>li>.dropdown-toggle.active{background-color:#0b132b;color:#fff}.sidebar-light .sidebar-menu .dropdown-toggle:hover .micon,.sidebar-light .sidebar-menu .show>.dropdown-toggle .micon,.sidebar-menu .dropdown-toggle.active,.sidebar-menu .dropdown-toggle.active .micon{color:#fff}.mobile-menu-overlay{position:fixed;left:0;top:0;width:100%;height:100%;background:#121421;opacity:.6;z-index:123;background-size:20px;background-position:98% 15px;display:none}.sidebar-light .left-side-bar{background:#fff}.sidebar-light .sidebar-menu .dropdown-toggle,.sidebar-light .sidebar-menu .submenu li a{color:#0b132b;font-weight:400}.sidebar-light .sidebar-menu .dropdown-toggle .micon{color:#0b132b}.sidebar-light .sidebar-menu .dropdown-toggle:hover,.sidebar-light .sidebar-menu .show>.dropdown-toggle,.sidebar-light .sidebar-menu .submenu li a.active,.sidebar-light .sidebar-menu .submenu li a:hover{color:#fff;background-color:#0b132b}.sidebar-light .menu-block .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{background-color:#0e132b}.sidebar-menu .dropdown-divider{margin:20px 0;border-color:rgba(255,255,255,.2);border-width:2px}.sidebar-light .sidebar-menu .dropdown-divider{border-color:rgba(0,0,0,.2)}.sidebar-menu .sidebar-small-cap{font-size:14px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:#fff;padding:0 15px 10px}.sidebar-light .sidebar-menu .sidebar-small-cap{color:#1502bd}.login-header{position:relative;padding:0 15px;background-color:#fff;z-index:1}.login-header .brand-logo{width:auto;border:0}.login-menu a{font-size:20px;font-weight:600;color:#1b00ff}.login-wrap{height:calc(100% - 70px);overflow:auto;padding:30px 0}body.IE .login-wrap,body.IE .register-page-wrap{display:block!important;padding:0}body.IE .login-wrap .container,body.IE .register-page-wrap .container{padding-top:10vh;padding-bottom:10vh}.login-wrap .container,.register-page-wrap .container{max-width:1300px}.login-wrap .mCustomScrollBox{height:auto;width:100%}.login-box{max-width:400px;width:100%;padding:40px 20px;margin:5px auto}.select-role{margin-bottom:25px;padding:0 5px}.select-role .btn-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 -10px}.select-role .btn-group .btn{margin:0 5px;border:1px solid #d4d4d4;text-align:left;padding-left:60px;padding-top:10px;padding-bottom:10px;width:calc(50% - 10px);border-radius:5px!important;font-size:16px;line-height:1.3;font-weight:700;color:#333;position:relative}.select-role .btn-group .btn.active,.select-role .btn-group .btn.active:focus,.select-role .btn-group .btn.focus.active{background-color:rgba(27,0,255,.05);border-color:rgba(27,0,255,.5);color:#1b00ff}.select-role .btn-group .btn .icon{position:absolute;left:15px;width:30px;height:30px;top:50%;margin-top:-15px}.select-role .btn-group .btn .icon .svg{width:30px;height:30px}.select-role .btn-group .btn span{display:block;font-size:14px;font-weight:500;color:#222}.login-box .login-title{padding:0 0 10px;margin-bottom:30px}.login-box .login-title h2{font-size:24px;font-weight:700}.login-box .login-img{display:block;margin:0 auto 20px;max-width:100px}.forgot-password{text-align:right}.register-page-wrap{height:calc(100% - 70px);padding:30px 0}.register-page-wrap .register-box{max-width:410px;margin:0 auto}.register-page-wrap,.register-page-wrap .wizard-content .wizard{position:relative;overflow:auto}.register-page-wrap .wizard-content .wizard .steps{position:relative}.register-page-wrap .wizard-content .wizard>.steps .step{position:relative;top:0;left:0;display:block;margin:0 auto;border-width:2px;background-color:#fff;border-color:rgba(24,31,72,.3)}.register-page-wrap .wizard-content .wizard>.steps>ul>li.done>a .step{background:url(../images/tick.svg) no-repeat #ecf0f4;font-size:0;background-size:22px;background-position:center center;border-color:rgba(24,31,72,.3)}.register-page-wrap .wizard-content .wizard.wizard-circle>.steps>ul>li:after,.register-page-wrap .wizard-content .wizard.wizard-circle>.steps>ul>li:before,.wizard-content .wizard.wizard-circle>.steps>ul>li.current~li:after,.wizard-content .wizard.wizard-circle>.steps>ul>li.current~li:before{background:rgba(24,31,72,.3)}.wizard-content .wizard.vertical.wizard-circle>.steps>ul>li.current~li:after,.wizard-content .wizard.vertical.wizard-circle>.steps>ul>li.current~li:before{background-color:transparent}.register-page-wrap .wizard-content .wizard>.steps>ul>li.current .step{border-color:#1b00ff;color:#181f48;background-color:#fff}.register-page-wrap .wizard-content .wizard>.steps .info,.register-page-wrap .wizard-content .wizard>.steps .step,.register-page-wrap .wizard-content .wizard>.steps>ul>li a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.register-page-wrap .wizard-content .wizard>.steps .info{display:block;width:100%;padding-top:10px}.register-page-wrap .wizard-content .wizard>.steps>ul{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100%;padding:0 10px}.register-page-wrap .wizard-content .wizard>.steps>ul>li{width:25%}.register-page-wrap .wizard-content .wizard>.steps>ul>li a{padding:20px 10px;margin:0;text-align:center;color:rgba(24,31,72,.6);font-size:11px;font-weight:700}.register-page-wrap .wizard-content .wizard>.steps>ul>li.current>a,.register-page-wrap .wizard-content .wizard>.steps>ul>li.done>a{color:#181f48}.register-page-wrap .wizard-content .wizard>.content{overflow:hidden;padding:15px 15px 0;min-height:320px}.register-page-wrap .wizard-content .wizard>.actions{padding:0 15px 20px;text-align:right}.register-info li{margin-bottom:15px;font-size:14px}.main-container{padding:80px 20px 0 300px}.page-header .dropdown-menu{border-radius:5px}.page-header{background-color:#fff;border-radius:10px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08);margin-bottom:30px;padding:20px}.page-header .row{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.page-header h4{font-weight:600;padding-bottom:5px}.page-header .breadcrumb{padding:0;margin:0}.search-icon-box,.timeline ul{position:relative}.search-icon-box input{height:70px;width:100%;font-size:20px;padding:0 60px 0 30px;font-weight:300;border:0;color:#fff;background:#6209ab}.search-icon-box input::-webkit-input-placeholder{opacity:1;color:#fff}.search-icon-box input:-moz-placeholder,.search-icon-box input::-moz-placeholder{opacity:1;color:#fff}.search-icon-box input:-ms-input-placeholder{opacity:1;color:#fff}.search-icon-box .search_icon{position:absolute;font-size:24px;line-height:1;right:20px;top:26px;color:#fff}.fontawesome-icon-list{padding-top:20px}.fontawesome-icon-list.custom-icon-list,.sitemap ul li.child h5{padding-top:0}.fontawesome-icon-list .fa-hover,.fontawesome-icon-list a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.fontawesome-icon-list .fa-hover{padding-top:13px;padding-bottom:13px;margin-bottom:10px;cursor:pointer;border-radius:8px}.fontawesome-icon-list .fa-hover:hover{background:rgba(68,66,87,.13);-webkit-box-shadow:0 0 18px rgba(0,0,0,.08);box-shadow:0 0 18px rgba(0,0,0,.08)}.fontawesome-icon-list a{display:block;font-size:14px;font-weight:500;position:relative;padding-left:45px;color:#131e22}.fontawesome-icon-list a .icon-copy{position:absolute;left:10px;top:4px;font-size:18px}.fontawesome-icon-list.custom-icon-list a{font-size:14px;line-height:24px}.fontawesome-icon-list.custom-icon-list a .icon-copy{font-size:24px;line-height:1;top:0}.foundation-icon.fontawesome-icon-list a .icon-copy{top:0;font-size:24px;line-height:24px}.ionicons-list li{width:8.3%;text-align:center}.ionicons-list.fontawesome-icon-list a{padding-left:0}.ionicons-list.fontawesome-icon-list a .icon-copy{font-size:24px;left:0;position:relative}.wysihtml5-toolbar .dropdown-menu a{display:block;font-size:15px;font-weight:400;padding:.55rem 1rem;color:#667f87;font-family:Inter,sans-serif;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.html-editor textarea.form-control{height:300px;font-weight:400}.copy-notification{color:#fff;background-color:rgba(0,0,0,.8);padding:12px 20px;border-radius:30px;position:fixed;top:50%;left:50%;width:150px;margin-top:-30px;margin-left:-85px;display:none;text-align:center}.error-page h1,.error-page-wrap{font-size:16px;line-height:26px;font-weight:700;color:#222}.error-page h1{font-size:210px;text-shadow:2px 2px 0 #181f48,4px 4px 0 #fff,8px 8px 0 #181f48;line-height:1;color:#181f48}.error-page h3{font-size:18px;text-transform:uppercase;font-weight:700;margin-bottom:30px;padding-top:30px}.project-info{padding-bottom:15px}.project-info-left{float:left;width:60px;padding-top:10px}.project-info-left .icon{width:50px;height:50px;border-radius:100%;line-height:50px;text-align:center;font-size:20px}.project-info-right{float:right;width:calc(100% - 60px);text-align:right}.device-manage-progress-chart ul li:last-child{margin-bottom:0}.device-manage-progress-chart .device-name{width:75px;float:left;text-align:right}.device-manage-progress-chart .device-total{float:left;width:45px;font-size:14px}.device-manage-progress-chart .device-progress{float:left;width:calc(100% - 120px);padding:7px 10px 0}.device-manage-progress-chart .device-progress .grand_total{float:right}.device-manage-progress-chart .device-progress .progress{margin-bottom:0;height:10px}.device-manage-progress-chart .device-progress .progress .progress-bar{height:100%}.device-manage-progress-chart .device-progress .progress .progress-bar.window{background:#00bcf2}.device-manage-progress-chart .device-progress .progress .progress-bar.mac{background:#027496}.device-manage-progress-chart .device-progress .progress .progress-bar.android{background:#0059b2}.device-manage-progress-chart .device-progress .progress .progress-bar.linux{background:#8ab1b7}.to-do-list ul li{padding:15px}.to-do-list ul li,.to-do-list ul li:hover{background:#ecf0f4}.to-do-list ul li:nth-child(2n){background:#fff}#browservisit path.jvectormap-region.jvectormap-element{stroke-width:.5px;stroke:#667f87}.jvectormap-goback,.jvectormap-zoomin,.jvectormap-zoomout{background:#667f87}.browser-visits ul li{margin-bottom:40px}.browser-visits ul li .icon,.browser-visits ul li .visit{width:50px}.browser-visits ul li .browser-name{width:calc(100% - 100px);font-size:14px;font-weight:600}.docs-preview{margin-right:-1rem}.img-preview{float:left;margin-bottom:.5rem;margin-right:.5rem;overflow:hidden}.preview-lg{height:9rem;width:16rem}.preview-md{height:4.5rem;width:8rem}.preview-sm{height:2.25rem;width:4rem}.preview-xs{height:1.125rem;margin-right:0;width:2rem}.btn-list .btn{margin:5px}#login-modal .modal-dialog{max-width:380px}#login-modal .login-box{margin:0}.confirmation-btn{width:50px;height:50px;margin:0 auto}.da-card .da-card-content{padding:20px 15px;background:#fff;font-size:14px}.da-card,.da-card .da-card-photo{position:relative;overflow:hidden}.da-card .da-card-photo img{position:relative;display:block;width:100%;-webkit-transition:all .4s linear;transition:all .4s linear}.da-card .da-overlay{position:absolute;width:100%;height:100%;left:0;top:0;opacity:0;overflow:hidden;background:rgba(19,30,34,.7);-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.da-card .da-overlay.da-slide-left{left:-100%}.da-card .da-card-photo:hover .da-overlay.da-slide-left{left:0}.da-card .da-overlay.da-slide-bottom,.da-card .da-overlay.da-slide-left,.da-card .da-overlay.da-slide-right,.da-card .da-overlay.da-slide-top{-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.da-card .da-overlay.da-slide-right{right:-100%;left:inherit}.da-card .da-card-photo:hover .da-overlay.da-slide-right{right:0}.da-card .da-overlay.da-slide-bottom,.da-card .da-overlay.da-slide-top{top:-100%}.da-card .da-card-photo:hover .da-overlay.da-slide-bottom,.da-card .da-card-photo:hover .da-overlay.da-slide-top{top:0}.da-card .da-overlay.da-slide-bottom{top:100%}.da-card .da-card-photo:hover img{-webkit-transform:scale(1.2) translateZ(0);transform:scale(1.2) translateZ(0)}.da-card .da-card-photo:hover .da-overlay{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}.da-card .da-card-photo:hover .da-social{opacity:1}.da-card .da-social{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;padding:20px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#fff;opacity:0;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.da-card .da-social h5{position:absolute;top:0;white-space:nowrap;overflow:hidden;width:100%;text-overflow:ellipsis;font-size:16px;font-weight:500}.chat-box .chat-desc ul li .chat-img,.da-card .da-social ul li{float:left}.da-card .da-social ul li a{display:block;width:45px;height:45px;border:1px solid #fff;line-height:43px;font-size:20px;text-align:center;color:#fff;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.da-card .da-social ul li:first-child a{border-top-left-radius:5px;border-bottom-left-radius:5px}.da-card .da-social ul li:last-child a{border-top-right-radius:5px;border-bottom-right-radius:5px}.da-card .da-social ul li a:hover{background:#fff;color:#1b00ff}.nav-tabs.customtab .nav-item.show .nav-link,.nav-tabs.customtab .nav-link.active{color:#1b00ff;border:0;border-bottom:2px solid #1b00ff}.nav-tabs.customtab .nav-item{margin-bottom:0}.nav-tabs.customtab .nav-link{color:#181f48;border:0;border-bottom:2px solid transparent;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.nav-tabs.customtab .nav-link:focus,.nav-tabs.customtab .nav-link:hover{color:#1b00ff;border:0;border-bottom:2px solid #1b00ff}.nav.vtabs{border-bottom:0;border-right:1px solid #dee2e6;height:100%}.nav.vtabs .nav-link{border-radius:0}.nav.vtabs .nav-item.show .nav-link,.nav.vtabs .nav-link.active{border-right:0;border-color:#dee2e6;color:#1b00ff}.nav.vtabs.nav-pills .nav-item.show .nav-link,.nav.vtabs.nav-pills .nav-link.active{border-right:0;border-color:#dee2e6;color:#fff}.nav.vtabs.customtab .nav-item.show .nav-link,.nav.vtabs.customtab .nav-link.active{border-color:#1b00ff}.timeline ul:before{content:"";width:3px;height:100%;background:#1b00ff;position:absolute;left:150px}.timeline ul li{position:relative;padding-left:180px;padding-top:20px;padding-bottom:30px}.timeline ul li:before{content:"";position:absolute;top:30px;left:142px;width:18px;height:18px;background:#fff;border-radius:100%;-webkit-box-shadow:0 0 0 3px #1b00ff;box-shadow:0 0 0 3px #1b00ff}.timeline .timeline-date{position:absolute;left:0;top:20px;width:120px;background:#1b00ff;color:#fff;font-size:16px;padding:6px 10px;border-radius:5px}.list-unstyled>li>ul{margin-left:35px}.list-unstyled>li>ul li{list-style:circle}.sitemap{border-left:2px dashed #1b00ff}.sitemap h5{padding:15px;margin-bottom:10px;font-weight:600;color:#1b00ff}.sitemap ul,.sitemap ul li{position:relative;padding-left:25px}.sitemap ul li{min-height:40px;padding-left:35px;margin-bottom:10px;padding-top:2px}.sitemap ul li:last-child{margin-bottom:0}.sitemap ul li:before{content:"";background:#fff;width:20px;height:20px;border:2px solid #1b00ff;border-radius:100%;position:absolute;left:6px;top:5px}.sitemap ul li:after{content:"";width:25px;left:-25px;top:40%;position:absolute;border-top:2px dashed #1b00ff}.blog-list ul li,.sitemap ul li a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.fc th,.sitemap ul li a{font-weight:500;font-size:15px}.sitemap ul li a{display:inline-block;color:#0b132b}.sitemap ul li a:hover{color:#000}.sitemap ul li.child{padding-left:0;padding-top:0;border-left:2px dashed #2976aa}.calendar-wrap .fc-event.ui-draggable-handle{padding:5px;margin-bottom:5px}.fc th{padding:10px!important;background:#e1e1f5;line-height:1}.fc-day-grid-event .fc-time{font-weight:500!important}.fc-day-grid-event .fc-content{padding:3px 9px}.fc-header-toolbar h2{font-size:18px;padding-top:7px}.blog-wrap{padding-bottom:50px}.blog-list ul li{border-radius:10px;margin-bottom:40px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08);background:#fff}.blog-list ul li:hover{-webkit-box-shadow:0 0 48px rgba(0,0,0,.25);box-shadow:0 0 48px rgba(0,0,0,.25)}.blog-list ul li .blog-img{height:100%;min-height:300px;border-radius:10px 0 0 10px;background-size:cover!important}.blog-list ul li .blog-caption{padding:20px;font-size:16px;line-height:1.5;color:#031e23}.blog-list ul li .blog-caption h4{font-size:17px;line-height:1.5;font-weight:700;margin-bottom:12px}.blog-list ul li .blog-caption h4 a,.product-caption h4 a{color:#131e22}.latest-post ul li{padding:.75rem 1.25rem;font-size:14px;color:#78909c;border-bottom:1px solid rgba(0,0,0,.125)}.latest-post ul li h4{font-size:14px;font-weight:600;line-height:1.5;margin-bottom:5px}.blog-list ul li .blog-caption h4 a,.latest-post ul li h4 a,.product-box,.product-caption h4 a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.latest-post ul li h4 a{display:block;color:#131e22}.latest-post ul li h4 a:hover{color:#1b00ff}.blog-detail,.product-box{background:#fff}.blog-detail .blog-caption{padding:20px;font-size:16px;color:#78909c}.blog-detail ul li{position:relative;padding-left:25px;margin-bottom:5px;line-height:28px}.blog-detail ul li:before{content:"\f101";font-family:FontAwesome;position:absolute;color:#405158;left:0;top:0}.blog-detail ol,.blog-detail ul{padding-left:15px}.blog-detail ol>li{position:relative;padding-left:20px;margin-bottom:5px}.blog-detail ol,.blog-detail ol>li>ol,.blog-detail ol>li>ol>li>ol{counter-reset:my-badass-counter}.blog-detail ol>li>ol>li:before{content:counter(my-badass-counter,lower-alpha);counter-increment:my-badass-counter}.blog-detail ol>li:before,.blog-detail ol>li>ol>li>ol>li:before{content:counter(my-badass-counter,lower-roman);counter-increment:my-badass-counter}.blog-detail ol>li:before{content:counter(my-badass-counter);position:absolute;left:0;top:0;color:#405158;font-weight:500}.gallery-wrap>ul>li,.product-list ul li{margin-bottom:30px}.product-box{border-radius:10px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08);height:100%}.producct-img{overflow:hidden}.producct-img img{position:relative;border-radius:10px 10px 0 0;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out}.product-list ul li:hover .producct-img img{-webkit-transform:scale(1.3);transform:scale(1.3)}.product-caption{padding:20px}.product-caption h4{font-size:18px;margin-bottom:8px}.product-caption .btn{border-radius:22px}.price{font-size:15px;font-weight:600;padding-bottom:15px;color:#78909c}.price ins{text-decoration:none;display:inline-block;margin-left:10px;color:#131e22}.product-slider{margin-bottom:20px}.slider-arrow .slick-arrow,.slider-arrow .slick-arrow:before{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.slider-arrow .slick-arrow{position:absolute;bottom:0;width:40px;height:40px;top:50%;margin-top:-20px;border:1px solid #1b00ff;background:#1b00ff;border-radius:0;cursor:pointer;font-size:0;text-align:center}.slider-arrow .slick-arrow:hover{border-color:#2a2d31}.slider-arrow .slick-arrow:hover:before{color:#fff}.slider-arrow .slick-arrow:before{font-family:dropways;font-size:16px;color:#fff;line-height:38px}.slider-arrow .slick-arrow.slick-prev{z-index:12;left:15px}.slider-arrow .slick-arrow.slick-prev:before{content:"\eabc"}.slider-arrow .slick-arrow.slick-next{right:15px}.slider-arrow .slick-arrow.slick-next:before{content:"\eabd"}.product-slide-nav{padding:10px}.product-detail-desc{font-size:16px;line-height:1.5}.faq-wrap .card{margin-bottom:20px;border:0;border-radius:10px;overflow:hidden;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08)}.faq-wrap .card-header{background:#fff;text-align:left;border:0;padding:0}.faq-wrap .card-header .btn{background:0 0;border-radius:0;text-align:left;font-size:16px;font-weight:500;padding:16px 40px 16px 16px;position:relative;white-space:normal;color:#1b00ff;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.faq-wrap .card-header .btn.collapsed{color:#222}.faq-wrap .card-header .btn:after{content:"\f209";font-family:Ionicons;position:absolute;right:10px;color:#1b00ff;top:16px}.faq-wrap .card-header .btn.collapsed:after{content:"\f218"}.faq-wrap .card-body{padding-top:0}.pricing-table-wrap .card{border:0;-webkit-box-shadow:0 0 48px rgba(0,0,0,.2);box-shadow:0 0 48px rgba(0,0,0,.2)}.pricing-table-wrap .btn{padding-left:30px;padding-right:30px}.pricing-table-wrap .list-group-flush .list-group-item{background:0 0}.pricing-card{text-align:center}.pricing-card .price-title,.pricing-card .pricing-icon{padding-bottom:30px;text-align:center}.pricing-card .pricing-icon img{margin-top:-30px}.pricing-card .price-title{text-transform:uppercase;font-size:16px;font-weight:500;color:#1b00ff;letter-spacing:.15em}.pricing-card .pricing-price{font-size:60px;line-height:1;font-weight:400;padding-bottom:40px;padding-top:20px;color:#1b00ff}.pricing-card .pricing-price sub{font-size:16px;font-weight:400;color:#fd486e}.pricing-card .pricing-price sup{font-size:20px;font-weight:400;color:#fd486e;top:10px;vertical-align:top}.pricing-card .text{padding-bottom:30px}.pricing-card .cta{max-width:170px;margin:0 auto;-webkit-transform:translate(0,50%);transform:translate(0,50%)}.pricing-card .cta .btn{display:block;text-align:center}.pricing-card-style2,.profile-setting .profile-edit-list>li{padding:20px}.pricing-card-style2 .pricing-card-header{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-bottom:15px;border-bottom:2px solid #f0f2f7}.pricing-card-style2 .pricing-card-header .left{width:60%}.pricing-card-style2 .pricing-card-header .left h5{color:#1b00ff;font-size:18px;font-weight:700}.pricing-card-style2 .pricing-card-header .left p,.pricing-points ul li{font-size:14px;font-weight:500;margin-bottom:0}.pricing-card-style2 .pricing-card-header .right{width:40%;text-align:right;color:#000;font-size:18px;line-height:1.4;font-weight:700}.pricing-card-style2 .pricing-card-header .right span{display:block;font-size:12px}.pricing-card-style2 .pricing-card-body{padding-top:30px;padding-bottom:10px}.pricing-points ul li{padding:0 30px 0 0;margin-bottom:20px;color:#000;position:relative}.pricing-points ul li:after{content:"\f121";font-family:Ionicons;font-size:18px;line-height:1;color:#1061e4;position:absolute;right:0;top:0}.pricing-card-style2 .cta{max-width:170px;margin:0 auto;padding-top:10px;padding-bottom:20px}.pricing-card-style2 .cta .btn{display:block;text-align:center}.profile-photo{width:160px;height:160px;margin:0 auto 15px;position:relative}.profile-photo .edit-avatar{position:absolute;right:-15px;top:0;width:30px;height:30px;line-height:30px;font-size:14px;text-align:center;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.4);box-shadow:0 2px 4px rgba(0,0,0,.4)}.contact-directory-box .contact-avatar span img,.profile-photo .avatar-photo,.profile-photo .edit-avatar{border-radius:100%}.profile-info,.profile-skills,.profile-social{border-top:2px dashed #ecf0f4;padding:15px}.profile-info ul li{margin-bottom:15px;font-size:14px;font-weight:500;word-wrap:break-word}.profile-info ul li span{display:block;font-size:14px;color:#1b00ff;font-weight:500;padding-bottom:5px}.profile-info ul li:last-child{margin-bottom:0}.profile-social ul li{float:left;margin:5px}.profile-social ul li .btn{padding:0;width:36px;height:36px;text-align:center;line-height:36px}.notification-list.chat-notification-list ul li.active a,.notification-list.chat-notification-list ul li:hover a,.profile-tab .nav-tabs.customtab{background:#fff}.profile-tab .nav-tabs.customtab .nav-link{padding:18px 30px;background:0 0;font-weight:500}.profile-setting{height:100%}.profile-setting .container{max-width:800px}.profile-tab .tab-content{height:calc(100% - 63px)}.profile-setting .profile-edit-list{padding:30px 0;margin:0}.profile-setting .btn-outline-secondary{border-color:#ced4da}.profile-setting .profile-edit-list .form-control{font-weight:400}.task-title{padding-bottom:30px}.task-title a{padding-left:20px;padding-right:20px}.profile-task-wrap .container{max-width:800px}.profile-task-list ul li{position:relative;padding-left:30px;font-size:18px;line-height:24px;color:#263238;margin-bottom:25px}.profile-task-list.close-tasks ul li{color:#90a4ae;text-decoration:line-through}.profile-task-list ul li .task-type{font-size:16px;color:#90a4ae;font-weight:500}.profile-task-list ul li .task-assign{font-size:16px;color:#90a4ae;font-weight:300}.profile-task-list ul li .due-date{display:inline-block;padding-left:10px}.profile-task-list ul li .due-date:before{content:"\f111";font-family:FontAwesome;display:inline-block;font-size:8px;vertical-align:middle;margin-right:8px;opacity:.5}.profile-task-list ul li .custom-control,.profile-timeline-list ul:before{position:absolute;left:0;top:0;width:100%;height:100%}.profile-task-list ul li .custom-control-label{position:absolute;width:100%;height:100%;left:0}.profile-task-list ul li .custom-control-label::after,.profile-task-list ul li .custom-control-label::before{top:50%;margin-top:-12px;left:0}.task-list-scroll{height:303px}.task-list-form>ul>li{padding:30px 20px;background:#e7eef0;position:relative;border-bottom:2px dashed #2976aa}.task-list-form>ul>li .remove-task{position:absolute;right:22px;top:3px;font-size:18px;color:#2976aa}.task-list-form .form-control{font-weight:400}.task-list-form textarea.form-control{height:80px}.task-list-form .btn-outline-primary{border-color:#ced4da}.add-more-task,.chat-box .chat-desc ul li.admin_chat .chat-body .chat_time{text-align:right}.add-more-task a{display:inline-block;padding:10px;color:#2976aa}.profile-timeline{padding:30px}.profile-timeline .timeline-month{margin-bottom:20px}.profile-timeline .timeline-month h5{font-size:16px;font-weight:700}.profile-timeline-list ul{padding-left:15px;position:relative}.profile-timeline-list ul:before{content:"";width:2px;left:4px;background-color:#1b00ff}.profile-timeline-list ul li{margin-bottom:10px;position:relative;padding-left:100px;line-height:24px;padding-top:8px}.profile-timeline-list ul li p{margin-bottom:5px;font-size:14px;line-height:1.5;font-weight:500}.profile-timeline-list ul li:before{content:"";width:12px;height:12px;border:2px solid #1b00ff;border-radius:22px;position:absolute;left:-16px;top:15px;background:#1b00ff}.profile-timeline-list .date{position:absolute;top:8px;left:5px;font-weight:700;font-size:13px}.profile-timeline-list .task-name{text-transform:uppercase;font-weight:600;color:#1b00ff;font-size:14px;line-height:22px;position:relative}.profile-timeline-list .task-name i{position:absolute;left:-22px;top:0;font-size:18px}.profile-timeline-list .task-time{color:rgba(24,31,72,.71);font-size:12px;font-weight:700}.contact-directory-list>ul>li{margin-bottom:30px}.contact-directory-box{background:#fff;min-height:400px;-webkit-box-shadow:0 0 28px rgba(0,0,0,.08);box-shadow:0 0 28px rgba(0,0,0,.08);border-radius:10px}.contact-dire-info{padding:30px 25px 20px}.contact-directory-box .contact-avatar span{display:block;margin:0 auto 20px;width:150px;height:150px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3);border-radius:100%;overflow:hidden}.contact-directory-box .contact-name,.contact-directory-box .contact-skill{padding-bottom:20px}.contact-directory-box .contact-name h4{font-weight:600;font-size:18px}.contact-directory-box .contact-name p{margin-bottom:2px;color:#7f92a9;font-size:14px}.contact-directory-box .contact-skill .badge{border:1px solid #ced9ee;font-weight:500;font-size:16px;padding:7px 11px;margin:3px 0}.contact-directory-box .contact-skill .badge.badge-primary{background:#1b00ff;border-color:#1b00ff;-webkit-box-shadow:0 0 10px rgba(0,0,0,.2);box-shadow:0 0 10px rgba(0,0,0,.2)}.contact-directory-box .profile-sort-desc{font-weight:400;color:#6f7c8d}.contact-directory-box .view-contact a{display:block;text-align:center;text-transform:uppercase;font-size:15px;font-weight:600;padding:20px 5px;letter-spacing:.05em;position:relative;border-radius:0 0 6px 6px}.contact-directory-box:hover .view-contact a:before{opacity:0}.contact-directory-box .view-contact a,.contact-directory-box .view-contact a:before,.notification-list.chat-notification-list ul li a{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.contact-directory-box .view-contact a:before{content:"";width:80px;height:1px;background:#1b00ff;position:absolute;left:0;right:0;top:0;margin:0 auto}.invoice-wrap{overflow:auto}.invoice-box{background:#fff;width:800px;margin:0 auto;padding:20px}.invoice-header{padding-bottom:30px}.invoice-desc .invoice-sub{width:40%;float:left;padding:8px 15px}.invoice-desc .invoice-hours,.invoice-desc .invoice-rate{width:20%;float:left;padding:8px 15px}.invoice-desc .invoice-subtotal{width:20%;float:right;padding:8px 15px}.invoice-desc .invoice-desc-head{background:#eaeaea;font-weight:500}.invoice-desc .invoice-desc-body{padding-top:15px;min-height:400px}.invoice-desc .invoice-desc-footer .invoice-desc-body{min-height:50px}.invoice-desc .invoice-desc-body ul li{border-bottom:1px solid #eaeaea;padding-bottom:5px}.chat-list{border:1px solid #ecf0f4;border-radius:5px;height:72vh}.chat-search{border-bottom:1px solid #ccc;padding:10px;position:relative}.chat-search>span{position:absolute;left:30px;top:30px;color:#33484f}.chat-search input{height:55px;width:100%;border:0;background:0 0;padding-left:50px;color:#33484f}.chat-list .notification-list{height:calc(100% - 76px);padding:10px}.notification-list.chat-notification-list ul li a{padding-top:16px}.notification-list.chat-notification-list ul li a p,.upload-file-box .right h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-list.chat-notification-list ul li a p .fa{font-size:10px}.notification-list.chat-notification-list ul li a img{-webkit-box-shadow:none;box-shadow:none}.chat-detail{height:72vh}.chat-profile-header{padding:10px 30px 10px 20px;border-bottom:1px solid #eff0f4}.chat-profile-header .left{float:left;width:60%}.chat-profile-header .left .chat-profile-photo{float:left;width:90px}.chat-profile-header .left .chat-profile-photo img{width:66px;height:66px;border-radius:100%}.chat-profile-header .left .chat-profile-name{float:left;padding-top:15px}.chat-profile-header .left .chat-profile-name h3{font-size:18px;color:#44aeff}.chat-profile-header .left .chat-profile-name span{font-size:12px;color:#a4a4a4;display:block;margin-bottom:6px}.chat-profile-header .left .chat-profile-name a{font-size:10px;color:#44aeff;display:inline-block}.chat-profile-header .right{float:right;width:40%;padding-top:15px}.chat-profile-header .right .text-light-orange{color:#f56767!important}.chat-box{height:calc(100% - 89px)}.chat-box .chat-desc{height:calc(100% - 86px);padding-bottom:10px}.chat-box .chat-desc ul li{margin-bottom:35px}.chat-box .chat-desc ul li .chat-img img,.upload-file-box .left .overlay a span{width:40px;height:40px;border-radius:100%}.chat-box .chat-desc ul li .chat-body{margin-left:60px}.chat-box .chat-desc ul li .chat-body p{font-size:15px;line-height:24px;color:#33484f;min-height:50px;padding:12px 15px;border:1px solid #ecf0f4;background:#ecf0f4;border-radius:5px}.chat-box .chat-desc ul li .chat-body .chat_time{font-size:12px;color:#a4a4a4}.chat-box .chat-desc ul li.admin_chat .chat-img,.chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .left{float:right}.chat-box .chat-desc ul li.admin_chat .chat-body{margin-left:0;margin-right:60px;text-align:right}.chat-box .chat-desc ul li.admin_chat .chat-body p{text-align:right;display:inline-block;background:#e1e1f5;padding:12px 15px;border-radius:5px;position:relative}.chat-box .chat-desc ul li.admin_chat .chat-body p:after{content:"";width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #389bff;position:absolute;right:-6px;top:16px;opacity:0}.chat-footer{height:86px;border-top:1px solid #eff0f4}.chat-footer .file-upload{float:left;width:55px}.chat-footer .file-upload a{display:block;text-align:center;font-size:20px;color:#222;padding-top:30px;padding-bottom:27px}.chat-footer .chat_text_area{float:left;width:calc(100% - 145px)}.chat-footer .chat_text_area textarea{width:100%;height:78px;border:0;font-size:16px;color:#33484f;padding-top:33px}.chat-footer .chat_send{float:right;width:90px}.chat-footer .chat_send .btn{display:block;width:100%;height:86px;font-size:35px;color:#44aeff;text-decoration:none;font-weight:900;padding:25px 10px 5px}.chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .right{float:right;padding-left:0;padding-right:17px}.upload-file-box{padding-bottom:10px}.upload-file-box .left{float:left;position:relative;width:114px;height:84px;overflow:hidden;border-radius:5px}.upload-file-box .left .overlay{background-color:rgba(0,0,0,.5);position:absolute;left:0;top:0;width:100%;height:100%}.upload-file-box .left .overlay a{display:block;width:100%;height:100%}.upload-file-box .left .overlay a span{width:35px;height:35px;display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;background:#fff;color:#222;line-height:35px;text-align:center;font-size:22px}.upload-file-box .right{float:left;width:calc(100% - 114px);padding-left:17px;padding-top:17px}.upload-file-box .right h3{display:block;font-size:14px;color:#000;margin-bottom:5px}.upload-file-box .right a{display:inline-block;color:#1d8df1;font-size:14px}.chat-profile-section{height:calc(100vh - 274px)}.chat-profile-section .chat--profile-desc{height:100%;padding:20px}.wizard-content .wizard>.actions>ul>li>a{background-color:#1b00ff;font-weight:600}.wizard-content .wizard>.actions>ul>li>a[href="#previous"]{border-color:#1b00ff;border-width:2px;color:#1b00ff}.wizard-content .wizard>.actions>ul>li.disabled>a[href="#previous"]{display:none;border-color:#1b00ff}.widget-style1{padding:10px}.widget-style1 .widget-data{width:calc(100% - 80px);padding:0 5px 0 15px}.widget-style1 .progress-data{width:80px}.widget-style1 .progress-data .apexcharts-canvas{margin:0 auto}.right-sidebar .right-sidebar-body .right-sidebar-body-content,.widget-style2 .widget-data{padding:20px}.right-sidebar{position:fixed;right:-315px;top:0;width:315px;height:100%;background:#fff;z-index:123;-webkit-box-shadow:0 0 18px rgba(0,0,0,.08);box-shadow:0 0 18px rgba(0,0,0,.08);-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.right-sidebar-visible{right:0}.right-sidebar .sidebar-title{height:70px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:5px 15px;border-bottom:1px solid #d4d4d4}.right-sidebar .sidebar-title h3{font-weight:600}.right-sidebar .sidebar-title h3 span{font-weight:400;color:#000}.right-sidebar .close-sidebar{font-size:18px;color:#888;cursor:pointer}.right-sidebar .right-sidebar-body{height:calc(100% - 70px);overflow:auto}.sidebar-btn-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.sidebar-btn-group .btn{width:48%}.sidebar-radio-group .custom-control-inline{margin-right:0;width:25%;margin-bottom:10px}.bootstrap-tagsinput .label-info{background:#1b00ff}.bootstrap-touchspin .btn{background:#1b00ff;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:0;padding-bottom:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.bootstrap-touchspin .input-group-btn-vertical .btn{height:52%}.bootstrap-touchspin .bootstrap-touchspin-postfix,.bootstrap-touchspin .bootstrap-touchspin-prefix{border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4}.asColorPicker-buttons a,.asColorPicker-gradient-control a{font-size:13px;font-weight:500}.dropzone{border-color:#1b00ff}.dropzone .dz-preview .dz-remove{color:red}.fc-view-container tr:first-child>td>.fc-day-grid-event{background:#1b00ff}.fc-today.alert-info{background:#e0deef}.fc-day-number,.fc-ltr .fc-axis{font-size:13px;font-weight:500}.swal2-popup .swal2-title{font-size:18px;font-weight:600}.swal2-popup .swal2-styled.swal2-confirm{background:#100099}.documentation-wrap{position:relative;height:100%;padding-left:300px}.documentation-wrap .doc-sidebar{position:absolute;left:0;top:0;background:#fff;width:300px;height:100%}.doc-content-wrap{padding:30px}.table-badge{padding:8px 20px;font-size:14px;background:#1b00ff;color:#ebecef;font-weight:500}@media (min-width:1301px) and (max-width:1400px){.header{width:calc(100% - 250px)}.brand-logo,.left-side-bar{width:250px}.main-container{padding-left:270px}}@media (min-width:1200px) and (max-width:1400px){.device-usage-chart .width-50-p{width:100%}}@media (max-width:1300px){.main-container{padding-left:0;padding-right:0}.header-left .menu-icon{display:-webkit-box;display:-ms-flexbox;display:flex}.header{width:100%}.left-side-bar{left:-281px}.left-side-bar .close-sidebar{display:block}.left-side-bar:before{display:block;opacity:0;visibility:hidden}.left-side-bar.open:before{opacity:1;visibility:visible;display:none}.left-side-bar .brand-logo a{text-align:left;padding:5px 15px}.left-side-bar .brand-logo a .svg,.left-side-bar .brand-logo a img{margin:0}.header-right .brand-logo{display:table}.header-right .menu-icon{display:block;padding-left:15px;padding-top:7px}.footer-wrap{width:100%}.mobile-menu-overlay{display:block;opacity:0;visibility:hidden}.mobile-menu-overlay.show{opacity:.6;visibility:visible}}@media (min-width:1025px){.header-left .header-search{display:block!important}}@media (max-width:1024px){.header{position:relative}.header-left{width:25%}.header-right{width:75%}.main-container{padding-top:10px}.header-left .search-toggle-icon{display:-webkit-box;display:-ms-flexbox;display:flex}.header-left .header-search{padding:15px 20px;position:absolute;left:0;top:100%;background:#fff;display:none}.register-page-wrap .wizard-content .wizard{padding-left:300px}.register-page-wrap .wizard-content .wizard .steps{width:300px}}@media (max-width:991px){.device-usage-chart .width-50-p{width:100%}}@media (max-width:767px){.header{position:fixed;left:0;top:0;-webkit-box-shadow:0 5px 25px rgba(0,0,0,.1);box-shadow:0 5px 25px rgba(0,0,0,.1)}.main-container{padding-top:80px}.login-box{padding:40px 15px}.login-header .brand-logo a img{max-width:150px}.pre-loader{background-size:43%}.xs-pd-20-10{padding:20px 10px}.xs-mb-20{margin-bottom:20px}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h4,h4{font-size:1.4rem}.main-container,.timeline ul li{padding-bottom:0}.footer-wrap{position:relative;height:auto}.user-notification{margin-right:5px}.user-notification .dropdown-menu{width:100%;min-width:300px}.user-info-dropdown .dropdown-toggle .user-name{display:none}.page-header{margin-bottom:30px}.forgot-password{text-align:center}.ionicons-list li{width:16.6%}.timeline .timeline-date{position:relative;top:0;margin-bottom:20px;left:35px}.timeline ul:before{left:10px}.timeline ul li{padding-left:0}.timeline ul li:before{left:2px;top:28px}.fc-toolbar .fc-left,.fc-toolbar .fc-right{float:none!important;padding-bottom:10px}.fc-toolbar .fc-left:after,.fc-toolbar .fc-right:after{content:"";clear:both;display:table}.faq-wrap .card-header .btn{font-size:17px}.error-page h1{font-size:150px}}@media (max-width:660px){.docs-buttons .btn-group-crop{display:block}.select-role .btn-group .btn{padding-left:35px;font-size:14px}.select-role .btn-group .btn .icon{left:5px;width:25px;height:25px}.select-role .btn-group .btn .icon .svg{width:25px;height:25px}.forgot-password a{font-size:14px;font-weight:600}.btn-group-lg>.btn,.btn-lg{font-size:16px}.register-page-wrap .wizard-content .wizard{padding-left:0}.register-page-wrap .wizard-content .wizard .steps{display:none}}
\ No newline at end of file
diff --git a/video-player.html b/video-player.html
new file mode 100644
index 00000000..d9dfb30b
--- /dev/null
+++ b/video-player.html
@@ -0,0 +1,546 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Basic Page Info -->
+	<meta charset="utf-8">
+	<title>DeskApp - Bootstrap Admin Dashboard HTML Template</title>
+
+	<!-- Site favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="vendors/images/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="vendors/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="vendors/images/favicon-16x16.png">
+
+	<!-- Mobile Specific Metas -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<!-- Google Font -->
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+	<!-- CSS -->
+	<link rel="stylesheet" type="text/css" href="vendors/styles/core.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/icon-font.min.css">
+	<link rel="stylesheet" type="text/css" href="vendors/styles/style.css">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'UA-119386393-1');
+	</script>
+	<link rel="stylesheet" type="text/css" href="src/plugins/plyr/dist/plyr.css">
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<div class="pre-loader">
+		<div class="pre-loader-box">
+			<div class="loader-logo"><img src="vendors/images/deskapp-logo.svg" alt=""></div>
+			<div class='loader-progress' id="progress_div">
+				<div class='bar' id='bar1'></div>
+			</div>
+			<div class='percent' id='percent1'>0%</div>
+			<div class="loading-text">
+				Loading...
+			</div>
+		</div>
+	</div>
+
+	<div class="header">
+		<div class="header-left">
+			<div class="menu-icon dw dw-menu"></div>
+			<div class="search-toggle-icon dw dw-search2" data-toggle="header_search"></div>
+			<div class="header-search">
+				<form>
+					<div class="form-group mb-0">
+						<i class="dw dw-search2 search-icon"></i>
+						<input type="text" class="form-control search-input" placeholder="Search Here">
+						<div class="dropdown">
+							<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+								<i class="ion-arrow-down-c"></i>
+							</a>
+							<div class="dropdown-menu dropdown-menu-right">
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">From</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">To</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label class="col-sm-12 col-md-2 col-form-label">Subject</label>
+									<div class="col-sm-12 col-md-10">
+										<input class="form-control form-control-sm form-control-line" type="text">
+									</div>
+								</div>
+								<div class="text-right">
+									<button class="btn btn-primary">Search</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="dashboard-setting user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
+						<i class="dw dw-settings2"></i>
+					</a>
+				</div>
+			</div>
+			<div class="user-notification">
+				<div class="dropdown">
+					<a class="dropdown-toggle no-arrow" href="#" role="button" data-toggle="dropdown">
+						<i class="icon-copy dw dw-notification"></i>
+						<span class="badge notification-active"></span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right">
+						<div class="notification-list mx-h-350 customscroll">
+							<ul>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo1.jpg" alt="">
+										<h3>Lea R. Frith</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo2.jpg" alt="">
+										<h3>Erik L. Richards</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo3.jpg" alt="">
+										<h3>John Doe</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/photo4.jpg" alt="">
+										<h3>Renee I. Hansen</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+								<li>
+									<a href="#">
+										<img src="vendors/images/img.jpg" alt="">
+										<h3>Vicki M. Coleman</h3>
+										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="user-info-dropdown">
+				<div class="dropdown">
+					<a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+						<span class="user-icon">
+							<img src="vendors/images/photo1.jpg" alt="">
+						</span>
+						<span class="user-name">Ross C. Lopez</span>
+					</a>
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-user1"></i> Profile</a>
+						<a class="dropdown-item" href="profile.html"><i class="dw dw-settings2"></i> Setting</a>
+						<a class="dropdown-item" href="faq.html"><i class="dw dw-help"></i> Help</a>
+						<a class="dropdown-item" href="login.html"><i class="dw dw-logout"></i> Log Out</a>
+					</div>
+				</div>
+			</div>
+			<div class="github-link">
+				<a href="/dropways/deskapp" target="_blank"><img src="vendors/images/github.svg" alt=""></a>
+			</div>
+		</div>
+	</div>
+
+	<div class="right-sidebar">
+		<div class="sidebar-title">
+			<h3 class="weight-600 font-16 text-blue">
+				Layout Settings
+				<span class="btn-block font-weight-400 font-12">User Interface Settings</span>
+			</h3>
+			<div class="close-sidebar" data-toggle="right-sidebar-close">
+				<i class="icon-copy ion-close-round"></i>
+			</div>
+		</div>
+		<div class="right-sidebar-body customscroll">
+			<div class="right-sidebar-body-content">
+				<h4 class="weight-600 font-18 pb-10">Header Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
+				<div class="sidebar-btn-group pb-30 mb-10">
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light ">White</a>
+					<a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark active">Dark</a>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
+				<div class="sidebar-radio-group pb-10 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-1" checked="">
+						<label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-2">
+						<label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input" value="icon-style-3">
+						<label class="custom-control-label" for="sidebaricon-3"><i class="fa fa-angle-double-right"></i></label>
+					</div>
+				</div>
+
+				<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
+				<div class="sidebar-radio-group pb-30 mb-10">
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input" value="icon-list-style-1" checked="">
+						<label class="custom-control-label" for="sidebariconlist-1"><i class="ion-minus-round"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-2" name="menu-list-icon" class="custom-control-input" value="icon-list-style-2">
+						<label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-3" name="menu-list-icon" class="custom-control-input" value="icon-list-style-3">
+						<label class="custom-control-label" for="sidebariconlist-3"><i class="dw dw-check"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-4" name="menu-list-icon" class="custom-control-input" value="icon-list-style-4" checked="">
+						<label class="custom-control-label" for="sidebariconlist-4"><i class="icon-copy dw dw-next-2"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-5" name="menu-list-icon" class="custom-control-input" value="icon-list-style-5">
+						<label class="custom-control-label" for="sidebariconlist-5"><i class="dw dw-fast-forward-1"></i></label>
+					</div>
+					<div class="custom-control custom-radio custom-control-inline">
+						<input type="radio" id="sidebariconlist-6" name="menu-list-icon" class="custom-control-input" value="icon-list-style-6">
+						<label class="custom-control-label" for="sidebariconlist-6"><i class="dw dw-next"></i></label>
+					</div>
+				</div>
+
+				<div class="reset-options pt-30 text-center">
+					<button class="btn btn-danger" id="reset-settings">Reset Settings</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="left-side-bar">
+		<div class="brand-logo">
+			<a href="index.html">
+				<img src="vendors/images/deskapp-logo.svg" alt="" class="dark-logo">
+				<img src="vendors/images/deskapp-logo-white.svg" alt="" class="light-logo">
+			</a>
+			<div class="close-sidebar" data-toggle="left-sidebar-close">
+				<i class="ion-close-round"></i>
+			</div>
+		</div>
+		<div class="menu-block customscroll">
+			<div class="sidebar-menu">
+				<ul id="accordion-menu">
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="index.html">Dashboard style 1</a></li>
+							<li><a href="index2.html">Dashboard style 2</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit2"></span><span class="mtext">Forms</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="form-basic.html">Form Basic</a></li>
+							<li><a href="advanced-components.html">Advanced Components</a></li>
+							<li><a href="form-wizard.html">Form Wizard</a></li>
+							<li><a href="html5-editor.html">HTML5 Editor</a></li>
+							<li><a href="form-pickers.html">Form Pickers</a></li>
+							<li><a href="image-cropper.html">Image Cropper</a></li>
+							<li><a href="image-dropzone.html">Image Dropzone</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-library"></span><span class="mtext">Tables</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="basic-table.html">Basic Tables</a></li>
+							<li><a href="datatable.html">DataTables</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="calendar.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-calendar1"></span><span class="mtext">Calendar</span>
+						</a>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-apartment"></span><span class="mtext"> UI Elements </span>
+						</a>
+						<ul class="submenu">
+							<li><a href="ui-buttons.html">Buttons</a></li>
+							<li><a href="ui-cards.html">Cards</a></li>
+							<li><a href="ui-cards-hover.html">Cards Hover</a></li>
+							<li><a href="ui-modals.html">Modals</a></li>
+							<li><a href="ui-tabs.html">Tabs</a></li>
+							<li><a href="ui-tooltip-popover.html">Tooltip &amp; Popover</a></li>
+							<li><a href="ui-sweet-alert.html">Sweet Alert</a></li>
+							<li><a href="ui-notification.html">Notification</a></li>
+							<li><a href="ui-timeline.html">Timeline</a></li>
+							<li><a href="ui-progressbar.html">Progressbar</a></li>
+							<li><a href="ui-typography.html">Typography</a></li>
+							<li><a href="ui-list-group.html">List group</a></li>
+							<li><a href="ui-range-slider.html">Range slider</a></li>
+							<li><a href="ui-carousel.html">Carousel</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-paint-brush"></span><span class="mtext">Icons</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="font-awesome.html">FontAwesome Icons</a></li>
+							<li><a href="foundation.html">Foundation Icons</a></li>
+							<li><a href="ionicons.html">Ionicons Icons</a></li>
+							<li><a href="themify.html">Themify Icons</a></li>
+							<li><a href="custom-icon.html">Custom Icons</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-analytics-21"></span><span class="mtext">Charts</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="highchart.html">Highchart</a></li>
+							<li><a href="knob-chart.html">jQuery Knob</a></li>
+							<li><a href="jvectormap.html">jvectormap</a></li>
+							<li><a href="apexcharts.html">Apexcharts</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-right-arrow1"></span><span class="mtext">Additional Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="video-player.html">Video Player</a></li>
+							<li><a href="login.html">Login</a></li>
+							<li><a href="forgot-password.html">Forgot Password</a></li>
+							<li><a href="reset-password.html">Reset Password</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-browser2"></span><span class="mtext">Error Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="400.html">400</a></li>
+							<li><a href="403.html">403</a></li>
+							<li><a href="404.html">404</a></li>
+							<li><a href="500.html">500</a></li>
+							<li><a href="503.html">503</a></li>
+						</ul>
+					</li>
+
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-copy"></span><span class="mtext">Extra Pages</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="blank.html">Blank</a></li>
+							<li><a href="contact-directory.html">Contact Directory</a></li>
+							<li><a href="blog.html">Blog</a></li>
+							<li><a href="blog-detail.html">Blog Detail</a></li>
+							<li><a href="product.html">Product</a></li>
+							<li><a href="product-detail.html">Product Detail</a></li>
+							<li><a href="faq.html">FAQ</a></li>
+							<li><a href="profile.html">Profile</a></li>
+							<li><a href="gallery.html">Gallery</a></li>
+							<li><a href="pricing-table.html">Pricing Tables</a></li>
+						</ul>
+					</li>
+					<li class="dropdown">
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-list3"></span><span class="mtext">Multi Level Menu</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li class="dropdown">
+								<a href="javascript:;" class="dropdown-toggle">
+									<span class="micon fa fa-plug"></span><span class="mtext">Level 2</span>
+								</a>
+								<ul class="submenu child">
+									<li><a href="javascript:;">Level 2</a></li>
+									<li><a href="javascript:;">Level 2</a></li>
+								</ul>
+							</li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+							<li><a href="javascript:;">Level 1</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="sitemap.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-diagram"></span><span class="mtext">Sitemap</span>
+						</a>
+					</li>
+					<li>
+						<a href="chat.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-chat3"></span><span class="mtext">Chat</span>
+						</a>
+					</li>
+					<li>
+						<a href="invoice.html" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-invoice"></span><span class="mtext">Invoice</span>
+						</a>
+					</li>
+					<li>
+						<div class="dropdown-divider"></div>
+					</li>
+					<li>
+						<div class="sidebar-small-cap">Extra</div>
+					</li>
+					<li>
+						<a href="javascript:;" class="dropdown-toggle">
+							<span class="micon dw dw-edit-2"></span><span class="mtext">Documentation</span>
+						</a>
+						<ul class="submenu">
+							<li><a href="introduction.html">Introduction</a></li>
+							<li><a href="getting-started.html">Getting Started</a></li>
+							<li><a href="color-settings.html">Color Settings</a></li>
+							<li><a href="third-party-plugins.html">Third Party Plugins</a></li>
+						</ul>
+					</li>
+					<li>
+						<a href="https://dropways.github.io/deskapp-free-single-page-website-template/" target="_blank" class="dropdown-toggle no-arrow">
+							<span class="micon dw dw-paper-plane1"></span>
+							<span class="mtext">Landing Page <img src="vendors/images/coming-soon.png" alt="" width="25"></span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="mobile-menu-overlay"></div>
+
+	<div class="main-container">
+		<div class="pd-ltr-20 customscroll-10-p height-100-p xs-pd-20-10">
+			<div class="min-height-200px">
+				<div class="page-header">
+					<div class="row">
+						<div class="col-md-6 col-sm-12">
+							<div class="title">
+								<h4>Video Player</h4>
+							</div>
+							<nav aria-label="breadcrumb" role="navigation">
+								<ol class="breadcrumb">
+									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
+									<li class="breadcrumb-item active" aria-current="page">Video Player</li>
+								</ol>
+							</nav>
+						</div>
+					</div>
+				</div>
+
+				<div class="pd-20 card-box mb-30">
+					<div class="clearfix mb-20">
+						<div class="pull-left">
+							<h4 class="text-blue h4">Plyr HTML5 Video</h4>
+							<p class="font-14 ml-0">A simple, accessible HTML5 media player <a href="/sampotts/plyr" target="_blank" class="weight-700 text-blue">Click Here</a></p>
+						</div>
+					</div>
+					<div class="container">
+						<video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg?v1" controls crossorigin>
+							<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
+							<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
+						</video>
+					</div>
+				</div>
+
+				<div class="pd-20 card-box mb-30">
+					<div class="clearfix mb-20">
+						<div class="pull-left">
+							<h4 class="text-blue h4">Plyr HTML5 Audio</h4>
+							<p class="font-14 ml-0">A simple, accessible HTML5 media player <a href="/sampotts/plyr" target="_blank" class="weight-700 text-blue">Click Here</a></p>
+						</div>
+					</div>
+					<div class="container">
+						<audio controls>
+							<source src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3" type="audio/mp3">
+							<source src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg" type="audio/ogg">
+							Your browser does not support the audio element.
+						</audio>
+					</div>
+				</div>
+
+				<div class="pd-20 card-box mb-30">
+					<div class="clearfix mb-20">
+						<div class="pull-left">
+							<h4 class="text-blue h4">Plyr YouTube Video</h4>
+							<p class="font-14 ml-0">A simple, accessible HTML5 media player <a href="/sampotts/plyr" target="_blank" class="weight-700 text-blue">Click Here</a></p>
+						</div>
+					</div>
+					<div class="container">
+						<div data-type="youtube" data-video-id="bTqVqk7FSmY"></div>
+					</div>
+				</div>
+
+				<div class="pd-20 card-box mb-30">
+					<div class="clearfix mb-20">
+						<div class="pull-left">
+							<h4 class="text-blue h4">Plyr Vimeo Video</h4>
+							<p class="font-14 ml-0">A simple, accessible HTML5 media player <a href="/sampotts/plyr" target="_blank" class="weight-700 text-blue">Click Here</a></p>
+						</div>
+					</div>
+					<div class="container">
+						<div data-type="vimeo" data-video-id="143418951"></div>
+					</div>
+				</div>
+
+			</div>
+			<div class="footer-wrap pd-20 mb-20 card-box">
+				DeskApp - Bootstrap 4 Admin Template By <a href="/dropways" target="_blank">Ankit Hingarajiya</a>
+			</div>
+		</div>
+	</div>
+	<!-- js -->
+	<script src="vendors/scripts/core.js"></script>
+	<script src="vendors/scripts/script.min.js"></script>
+	<script src="vendors/scripts/process.js"></script>
+	<script src="vendors/scripts/layout-settings.js"></script>
+	<script src="src/plugins/plyr/dist/plyr.js"></script>
+	<script src="https://cdn.shr.one/1.0.1/shr.js"></script>
+	<script>
+		plyr.setup({
+			tooltips: {
+				controls: !0
+			},
+		});
+	</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/video-player.php b/video-player.php
deleted file mode 100644
index c5e1dc86..00000000
--- a/video-player.php
+++ /dev/null
@@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<?php include('include/head.php'); ?>
-	<link rel="stylesheet" type="text/css" href="src/plugins/plyr/dist/plyr.css">
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<?php include('include/header.php'); ?>
-	<?php include('include/sidebar.php'); ?>
-	<div class="main-container">
-		<div class="pd-ltr-20 customscroll-10-p height-100-p xs-pd-20-10">
-			<div class="min-height-200px">
-				<div class="page-header">
-					<div class="row">
-						<div class="col-md-6 col-sm-12">
-							<div class="title">
-								<h4>Video Player</h4>
-							</div>
-							<nav aria-label="breadcrumb" role="navigation">
-								<ol class="breadcrumb">
-									<li class="breadcrumb-item"><a href="index.php">Home</a></li>
-									<li class="breadcrumb-item active" aria-current="page">Video Player</li>
-								</ol>
-							</nav>
-						</div>
-					</div>
-				</div>
-
-				<div class="pd-20 card-box mb-30">
-					<div class="clearfix mb-20">
-						<div class="pull-left">
-							<h4 class="text-blue h4">Plyr HTML5 Video</h4>
-							<p class="font-14 ml-0">A simple, accessible HTML5 media player <a href="/sampotts/plyr" target="_blank" class="weight-700 text-blue">Click Here</a></p>
-						</div>
-					</div>
-					<div class="container">
-						<video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg?v1" controls crossorigin>
-							<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
-							<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
-						</video>
-					</div>
-				</div>
-
-				<div class="pd-20 card-box mb-30">
-					<div class="clearfix mb-20">
-						<div class="pull-left">
-							<h4 class="text-blue h4">Plyr HTML5 Audio</h4>
-							<p class="font-14 ml-0">A simple, accessible HTML5 media player <a href="/sampotts/plyr" target="_blank" class="weight-700 text-blue">Click Here</a></p>
-						</div>
-					</div>
-					<div class="container">
-						<audio controls>
-							<source src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3" type="audio/mp3">
-							<source src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg" type="audio/ogg">
-							Your browser does not support the audio element.
-						</audio>
-					</div>
-				</div>
-
-				<div class="pd-20 card-box mb-30">
-					<div class="clearfix mb-20">
-						<div class="pull-left">
-							<h4 class="text-blue h4">Plyr YouTube Video</h4>
-							<p class="font-14 ml-0">A simple, accessible HTML5 media player <a href="/sampotts/plyr" target="_blank" class="weight-700 text-blue">Click Here</a></p>
-						</div>
-					</div>
-					<div class="container">
-						<div data-type="youtube" data-video-id="bTqVqk7FSmY"></div>
-					</div>
-				</div>
-
-				<div class="pd-20 card-box mb-30">
-					<div class="clearfix mb-20">
-						<div class="pull-left">
-							<h4 class="text-blue h4">Plyr Vimeo Video</h4>
-							<p class="font-14 ml-0">A simple, accessible HTML5 media player <a href="/sampotts/plyr" target="_blank" class="weight-700 text-blue">Click Here</a></p>
-						</div>
-					</div>
-					<div class="container">
-						<div data-type="vimeo" data-video-id="143418951"></div>
-					</div>
-				</div>
-
-			</div>
-			<?php include('include/footer.php'); ?>
-		</div>
-	</div>
-	<?php include('include/script.php'); ?>
-	<script src="src/plugins/plyr/dist/plyr.js"></script>
-	<script src="https://cdn.shr.one/1.0.1/shr.js"></script>
-	<script>
-		plyr.setup({
-			tooltips: {
-				controls: !0
-			},
-		});
-	</script>
-</body>
-</html>
\ No newline at end of file