diff --git a/src/layouts/NormalLayout.vue b/src/layouts/NormalLayout.vue
index e0bbe8f..370514f 100644
--- a/src/layouts/NormalLayout.vue
+++ b/src/layouts/NormalLayout.vue
@@ -1,56 +1,53 @@
 <template>
-  <div class="layout-wrapper layout-content-navbar">
-    <div class="layout-container">
-      <!-- menu -->
-      <TheMenu />
-      <!-- Layout container -->
-      <div class="layout-page">
-        <!-- Top -->
-        <TheTop/>
-        <!-- Content -->
-        <div class="content-wrapper">
-          <slot name="content">
-            body
-          </slot>
-          <TheFooter/>
-          <div class="content-backdrop fade"></div>
+    <div class="layout-wrapper layout-content-navbar">
+        <div class="layout-container">
+            <!-- menu -->
+            <TheMenu />
+            <!-- Layout container -->
+            <div class="layout-page">
+                <!-- Top -->
+                <TheTop />
+                <!-- Content -->
+                <div class="content-wrapper">
+                    <slot name="content"> body </slot>
+                    <TheFooter />
+                    <div class="content-backdrop fade"></div>
+                </div>
+            </div>
         </div>
-      </div>
+
+        <!-- Overlay -->
+        <div class="layout-overlay layout-menu-toggle"></div>
+
+        <!-- Drag Target Area To SlideIn Menu On Small Screens -->
+        <div class="drag-target"></div>
     </div>
-
-    <!-- Overlay -->
-    <div class="layout-overlay layout-menu-toggle"></div>
-
-    <!-- Drag Target Area To SlideIn Menu On Small Screens -->
-    <div class="drag-target"></div>
-  </div>
 </template>
 <script setup>
-import TheTop from './TheTop.vue'
-import TheFooter from './TheFooter.vue'
-import TheMenu from './TheMenu.vue'
-import { nextTick } from 'vue'
+import TheTop from './TheTop.vue';
+import TheFooter from './TheFooter.vue';
+import TheMenu from './TheMenu.vue';
+import { nextTick } from 'vue';
 
+window.isDarkStyle = window.Helpers.isDarkStyle();
 
-window.isDarkStyle = window.Helpers.isDarkStyle()
-
-const loadScript = (src) => {
-  const script = document.createElement('script')
-  script.src = src
-  script.type = 'text/javascript'
-  script.async = true
-  document.body.appendChild(script)
-  script.onload = () => {
-    console.log(`${src} loaded successfully.`)
-  }
-  script.onerror = () => {
-    console.error(`Failed to load script: ${src}`)
-  }
-}
+const loadScript = src => {
+    const script = document.createElement('script');
+    script.src = src;
+    script.type = 'text/javascript';
+    script.async = true;
+    document.body.appendChild(script);
+    script.onload = () => {
+        console.log(`${src} loaded successfully.`);
+    };
+    script.onerror = () => {
+        console.error(`Failed to load script: ${src}`);
+    };
+};
 nextTick(() => {
-  loadScript('/vendor/js/menu.js')
-  loadScript('/js/main.js')
-})
+    loadScript('/vendor/js/menu.js');
+    loadScript('/js/main.js');
+});
 </script>
 <style>
 </style>
diff --git a/src/layouts/TheFooter.vue b/src/layouts/TheFooter.vue
index 4f78c8e..7ee5090 100644
--- a/src/layouts/TheFooter.vue
+++ b/src/layouts/TheFooter.vue
@@ -1,23 +1,19 @@
 <template>
-  <footer class="content-footer footer bg-footer-theme">
-    <div class="container-xxl">
-      <div
-        class="footer-container d-flex align-items-center justify-content-between py-4 flex-md-row flex-column"
-      >
-        <div class="text-body">
-          ©2024
-          <!-- <script>
+    <footer class="content-footer footer bg-footer-theme">
+        <div class="container-xxl">
+            <div class="footer-container d-flex align-items-center justify-content-between py-4 flex-md-row flex-column">
+                <div class="text-body">
+                    ©2024
+                    <!-- <script>
                     document.write(new Date().getFullYear())
-                  </script> -->
-          , made with ❤️ by
-          <a href="https://themeselection.com/" target="_blank" class="footer-link"
-            >ThemeSelection</a
-          >
+                    </script> -->
+                    , made with ❤️ by
+                    <a href="https://themeselection.com/" target="_blank" class="footer-link">ThemeSelection</a>
+                </div>
+                <div class="d-none d-lg-inline-block"></div>
+            </div>
         </div>
-        <div class="d-none d-lg-inline-block"></div>
-      </div>
-    </div>
-  </footer>
+    </footer>
 </template>
 <script setup>
 </script>
diff --git a/src/layouts/TheMenu.vue b/src/layouts/TheMenu.vue
index 48f1696..9be3f9a 100644
--- a/src/layouts/TheMenu.vue
+++ b/src/layouts/TheMenu.vue
@@ -1,59 +1,59 @@
 <template>
-  <!-- Menu -->
-  <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
-    <div class="app-brand demo">
-      <a href="/" class="app-brand-link">
-        <span class="app-brand-logo demo">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            width="90"
-            height="90"
-            viewBox="0 0 90 90"
-          >
-            <image
-              xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAAAXNSR0IArs4c6QAACr1JREFUeF7t3Ht0HFUdB/DvbyZpktk0hQIiyltsd7aAKB6Px3PkkIUgFmvJ7rJKEWotLQ8RETjq0T/oHyp6RERE5CW1cAAN2Q2liPIqqOhRj7xKu5uUUl6F8iivJjNpHjM/mQ1JQ/bu3El29u72uPNn7t37u/czd29mfnNnCfVDiQApiVIPgjq0oklQh65DKxJQFKY+o+vQigQUhanP6Dq0IgFFYeozug6tSEBRmPqMrkMrElAUZo+Y0VbGXA7Gt0GYD2A7mNYYxvBPaOGWIUVOZYepaWhmkJ0xrwXhXMFIeyLJfKJsAUUN1Cx0ATkbuw7glQKLtwB0RJL5xxU5lR2mJqHHkM0bAJwtGOGbYOqIpHJPlD16hQ3UHDSvgmYfad4IwjcEDjtYo47WztyTCo1CCVVT0NwF3dajNwK0TDC6N5i0jtbEpqdCGbniRmoGegw5dhPAXxci63xC66m9Tyv2CS1cTUAXkBvM34GxtHhk/LrLWnx2KrcptFFXoaGqQ3vIg7q5moEzi8bv4rUCcnpTTmbDqw9ttlqbj9N0bY7jIldrJ6aq0GPI0TUMOkMA+apLenx2YmNehjyQMU8k4BYAB+yuy3cPa81L9+588h3Z51WUVw3aQ7YazFuJcbpgoNsdduJtqc29MgQrs+DLgHsngFlT6zJhaWsi752Aqh9VgS4g6+ZtBHxFIPCK47jxtnRfn0zHzkYTzHSHCJmYLzFSvVfK2lBVrhyaHz6+wX7rtdsBnCYY5MsOcbwt0btZBmBnY6cx820AGqfUZQIuNpL5q2RtqCxXCs3XH9to72vdDlBKcHWxTWeKN6fyz8gABrqjpxPhVoD0ImSii4xE7mpZG6rLlUFzV2yWreN2gJOCQb6ka3p7c+fGZ2UAAxnzTAKvFiIzX2ikeq+RtVGNciXQY8j8BwCdgkG+qMNpb05u3ioDGMjGlhG73p1j0UwGcEEkmb9W1ka1yisOXUDWuAuExYJBvqA5bntLuu85GYDVHV0BouuBom1sDKLzI4ncdbI2qlleUej3l4tugBcJBvm8pnF7S2fv8zIAq9s8D4TfCJGZz42ker1MX00fFYN+f7nIAjhFIPCcBrS3JPMvyHTsTOxbDP6VEBlYGUnmb5K1UQvlFYHme49osu3GHhC+KEImh4430rkXZQB2d/RiJrpCgOyCaUUklbtZ1katlIcO7eUc7LbmHoBOLh4kbSUH7UGQBzLmdwn4meAy0GHSVrQmcqtrBTFIP0KFHkM27gL4C4Lgz5KutxunbnxJ1jErE/sBwD8WIjOWt6Z618jaqLXy0KC568AWW2/rESEz8IyGxriR3LBNBmBlope9d2GxSlSvlnIXsnFMLQ8Fmtcda9gjdg8YJ00NwMBmzXHiRnrzy7LOWVnzR2D8sHQ9usZI5C4kAsvaqrXysqELyMP2WgAnFiEz+qjRjUcW970iG7idMX/KwPdk9QBcayTyF+xp2GVBe8iDw9Y6BsWLvyrUy+B4JJnfLsMbyMSuIPAlsnoT5YzrjGT+/D0Je8bQHrI1ZP+JCMcLgPLsULw1nXvVD8/bVmD1mL8kbxdS8TFMhO8z4zsADhJcwdxgJHLn7inYM4LmW46OWJGRewk4rgiAkeNGPd66eONrMmQ7Y/4ahG8K6g0BWjqS3HT3rsy8wx3oDwM4WFDvJiORX7knYE8buvBsbk7L/cT4vGDgm1xqjM9ObHhdipyN/hagcwT1bGZOtKZ67xsvG+yaf5irax72IYITe7OxMb+CVsENvPRUoeK0oa1MbBXAlwkG/LTrjpwwO73lDV9kb4PMUYVdSMuL6rmwXM1dNDvZ56F+4BjsiR7quuT9/dDi9nm14fSuoDScsA29JbJ/qP9gNGFH26LNO2ba/gygTS/TNmWw/JTrjHZIkcf2090s2rvBDnZqDXSKkcg9WmowgxnzEBfwsA8rqkNYY4zml4eF7T2ksPYdvJzA5wEwAO+Sku8jvWFlkJuu4ouDaZ4iK2N6X9HdJ4ixi1yaH+i2upBPZlF+4h1iOtlI5f4t647dFTuYdQ+bDxcM5tYWJ7+sXGxJQuzRSDIvWjZ9uz6DGR17duogCby+ZVZkES16zPaLNpAx/yr4B/omgJOmszPUvuvIg9hxvJn9sWJsvq3F6V06U2z/hFjwXE0IM1qch2DGI5Em4xQ/bCtjbvkgDr/OzB2tqb4Nspk8tdzOHH2gi5H1BHw8LGz/hBgC52pEY5n2jC58rRp4XYnb7b9FrMaFdNYGSxTMypj3TMpPb3dJPyHIBplSJ8HumvdRV9c97HlT6zDhjsho/sygMzusXE2pvk4b2mtI0qmS2P3ZBXGN3Qff2/e8zSE+Mci2AtlMt9bO/wiPaOtp7LWLDxwM/DHi5M+QYYeVq/Hr64ygC9g+eWcm/D0ySgspnRuYGtzKmGdrjvtQkOeEMuTxcitjHkCg9QyOCj5zpzF3/yXU/sioqL2wcjWyvs4YuoDt/yTlUbvBXbjf4r5+WSfCKB/oin2YdF4PwCxuj7uNHZEldM5jI5PLwsrVBOl/WdBjy0hhK0GJZ4P0j12Dwwv3+dqWnUE6U26dgbVH7k8jznoQYsVtUcZwsITSueFCv0PI1Uynv2VD78ZGqafd/xxyhhbOTW99dzodm2nd/uzRH9J4xJvZCwRt9BgOfRW7GhrLzdVMt3+hQE9gl96/8a8hZ+hkZdhdR+ynaY0PgXBUEQhjLWuYW06uZrrIXv3QoCctI+IdSS7+M8RDJynF1hseAOgTAWE2us5IXJZGCNhWUbVQoSctI6X22P13WGvqULU5fOe6efvqQ/oDIBzjC8QIlBCbKXLoM3q8I767RhmPjTQ3dOz1paffLqfjQT+7MxvdR2d6AMAnxZ8JlhALGq9UvdBn9AS2/z7ox0cdrWNOepP3BmxFj7e6Dp/TpDfdC+BzgvX6SafJ6Sgn/Rm08xWDLiwj/thPOMQdbYleL6lUkeN95L8A+KwgQMXjT45ZUeixNdvnNQpGxWZUAZma7oeGzwiQlX2jxmNXHHoCu+SLQeGvkW/3HLPXLHfIW5c/LVgulP6PUAo9jl3yVbcQ/+u/c89RezfuGvWuNI4VzGSlVz1Kl47JwXxf3gQCPdj1W8zf7Vowt0F3vZn8qaJ6iq/jp8ZXsnRMxS75OnLArQoibMllnNI7U1H/lEOPLyM+v2IQaPPN5MFIbkyU5lpKfeOqAl3A9vldDkLw7WT9Xl6j5K222uyh37JWNegCts8vzXCADZIF5FLJI0BpPlx2I1BV6N3Y4t9O8tvy65cO9XvCIwOpVHnVoSewS/wamGgTu1+CnwHfB8SVgpS1WxPQk5YR763X8wWdnnjU7/fIKsiWBxlIpcprBnrSMnI1wBcUD5i2EmMJCL8XPYQNuomnUpCydmsKehzbykSvIqILZZ2fVP6gMctYLNspNY32Qq9ac9AT2FnzSgIuko6YcL/RaHTWMrI3hpqEHscdyMZ+QcwXl8am+wxnZyeltw1KT0iVK9Q0tGcz0B39ORFdWuTE+LPRP5igZc/vqrJhoPA1D13AzppnkYtLQYXNMdvAvNp4M3L51A0xgUZcpUp7BHSVbEINW4cOldPnv4miOP/3YeozWtEUqEPXoRUJKApTn9F1aEUCisLUZ3QdWpGAojD1GV2HViSgKEx9RtehFQkoCvM/YGXklyZdjdQAAAAASUVORK5CYII="
-              x="0"
-              y="0"
-              width="90"
-              height="90"
-            />
-          </svg>
-        </span>
-        <span class="app-brand-text demo menu-text fw-bold ms-2">LOCALNET</span>
-      </a>
-
-      <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
-        <i class="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
-      </a>
-    </div>
-
-    <div class="menu-inner-shadow"></div>
-
-    <ul class="menu-inner py-1">
-      <!-- Dashboards -->
-      <li class="menu-item active open">
-        <a href="javascript:void(0);" class="menu-link menu-toggle">
-          <i class="menu-icon tf-icons bx bx-home-smile"></i>
-          <div class="text-truncate" data-i18n="Dashboards">Dashboards</div>
-          <span class="badge rounded-pill bg-danger ms-auto">5</span>
-        </a>
-        <ul class="menu-sub">
-          <li class="menu-item active">
-            <a href="/" class="menu-link">
-              <div class="text-truncate" data-i18n="Analytics">Main</div>
+    <!-- Menu -->
+    <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
+        <div class="app-brand demo">
+            <a href="/" class="app-brand-link">
+                <span class="app-brand-logo demo">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        width="90"
+                        height="90"
+                        viewBox="0 0 90 90"
+                    >
+                        <image
+                            xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAAAXNSR0IArs4c6QAACr1JREFUeF7t3Ht0HFUdB/DvbyZpktk0hQIiyltsd7aAKB6Px3PkkIUgFmvJ7rJKEWotLQ8RETjq0T/oHyp6RERE5CW1cAAN2Q2liPIqqOhRj7xKu5uUUl6F8iivJjNpHjM/mQ1JQ/bu3El29u72uPNn7t37u/czd29mfnNnCfVDiQApiVIPgjq0oklQh65DKxJQFKY+o+vQigQUhanP6Dq0IgFFYeozug6tSEBRmPqMrkMrElAUZo+Y0VbGXA7Gt0GYD2A7mNYYxvBPaOGWIUVOZYepaWhmkJ0xrwXhXMFIeyLJfKJsAUUN1Cx0ATkbuw7glQKLtwB0RJL5xxU5lR2mJqHHkM0bAJwtGOGbYOqIpHJPlD16hQ3UHDSvgmYfad4IwjcEDjtYo47WztyTCo1CCVVT0NwF3dajNwK0TDC6N5i0jtbEpqdCGbniRmoGegw5dhPAXxci63xC66m9Tyv2CS1cTUAXkBvM34GxtHhk/LrLWnx2KrcptFFXoaGqQ3vIg7q5moEzi8bv4rUCcnpTTmbDqw9ttlqbj9N0bY7jIldrJ6aq0GPI0TUMOkMA+apLenx2YmNehjyQMU8k4BYAB+yuy3cPa81L9+588h3Z51WUVw3aQ7YazFuJcbpgoNsdduJtqc29MgQrs+DLgHsngFlT6zJhaWsi752Aqh9VgS4g6+ZtBHxFIPCK47jxtnRfn0zHzkYTzHSHCJmYLzFSvVfK2lBVrhyaHz6+wX7rtdsBnCYY5MsOcbwt0btZBmBnY6cx820AGqfUZQIuNpL5q2RtqCxXCs3XH9to72vdDlBKcHWxTWeKN6fyz8gABrqjpxPhVoD0ImSii4xE7mpZG6rLlUFzV2yWreN2gJOCQb6ka3p7c+fGZ2UAAxnzTAKvFiIzX2ikeq+RtVGNciXQY8j8BwCdgkG+qMNpb05u3ioDGMjGlhG73p1j0UwGcEEkmb9W1ka1yisOXUDWuAuExYJBvqA5bntLuu85GYDVHV0BouuBom1sDKLzI4ncdbI2qlleUej3l4tugBcJBvm8pnF7S2fv8zIAq9s8D4TfCJGZz42ker1MX00fFYN+f7nIAjhFIPCcBrS3JPMvyHTsTOxbDP6VEBlYGUnmb5K1UQvlFYHme49osu3GHhC+KEImh4430rkXZQB2d/RiJrpCgOyCaUUklbtZ1katlIcO7eUc7LbmHoBOLh4kbSUH7UGQBzLmdwn4meAy0GHSVrQmcqtrBTFIP0KFHkM27gL4C4Lgz5KutxunbnxJ1jErE/sBwD8WIjOWt6Z618jaqLXy0KC568AWW2/rESEz8IyGxriR3LBNBmBlope9d2GxSlSvlnIXsnFMLQ8Fmtcda9gjdg8YJ00NwMBmzXHiRnrzy7LOWVnzR2D8sHQ9usZI5C4kAsvaqrXysqELyMP2WgAnFiEz+qjRjUcW970iG7idMX/KwPdk9QBcayTyF+xp2GVBe8iDw9Y6BsWLvyrUy+B4JJnfLsMbyMSuIPAlsnoT5YzrjGT+/D0Je8bQHrI1ZP+JCMcLgPLsULw1nXvVD8/bVmD1mL8kbxdS8TFMhO8z4zsADhJcwdxgJHLn7inYM4LmW46OWJGRewk4rgiAkeNGPd66eONrMmQ7Y/4ahG8K6g0BWjqS3HT3rsy8wx3oDwM4WFDvJiORX7knYE8buvBsbk7L/cT4vGDgm1xqjM9ObHhdipyN/hagcwT1bGZOtKZ67xsvG+yaf5irax72IYITe7OxMb+CVsENvPRUoeK0oa1MbBXAlwkG/LTrjpwwO73lDV9kb4PMUYVdSMuL6rmwXM1dNDvZ56F+4BjsiR7quuT9/dDi9nm14fSuoDScsA29JbJ/qP9gNGFH26LNO2ba/gygTS/TNmWw/JTrjHZIkcf2090s2rvBDnZqDXSKkcg9WmowgxnzEBfwsA8rqkNYY4zml4eF7T2ksPYdvJzA5wEwAO+Sku8jvWFlkJuu4ouDaZ4iK2N6X9HdJ4ixi1yaH+i2upBPZlF+4h1iOtlI5f4t647dFTuYdQ+bDxcM5tYWJ7+sXGxJQuzRSDIvWjZ9uz6DGR17duogCby+ZVZkES16zPaLNpAx/yr4B/omgJOmszPUvuvIg9hxvJn9sWJsvq3F6V06U2z/hFjwXE0IM1qch2DGI5Em4xQ/bCtjbvkgDr/OzB2tqb4Nspk8tdzOHH2gi5H1BHw8LGz/hBgC52pEY5n2jC58rRp4XYnb7b9FrMaFdNYGSxTMypj3TMpPb3dJPyHIBplSJ8HumvdRV9c97HlT6zDhjsho/sygMzusXE2pvk4b2mtI0qmS2P3ZBXGN3Qff2/e8zSE+Mci2AtlMt9bO/wiPaOtp7LWLDxwM/DHi5M+QYYeVq/Hr64ygC9g+eWcm/D0ySgspnRuYGtzKmGdrjvtQkOeEMuTxcitjHkCg9QyOCj5zpzF3/yXU/sioqL2wcjWyvs4YuoDt/yTlUbvBXbjf4r5+WSfCKB/oin2YdF4PwCxuj7uNHZEldM5jI5PLwsrVBOl/WdBjy0hhK0GJZ4P0j12Dwwv3+dqWnUE6U26dgbVH7k8jznoQYsVtUcZwsITSueFCv0PI1Uynv2VD78ZGqafd/xxyhhbOTW99dzodm2nd/uzRH9J4xJvZCwRt9BgOfRW7GhrLzdVMt3+hQE9gl96/8a8hZ+hkZdhdR+ynaY0PgXBUEQhjLWuYW06uZrrIXv3QoCctI+IdSS7+M8RDJynF1hseAOgTAWE2us5IXJZGCNhWUbVQoSctI6X22P13WGvqULU5fOe6efvqQ/oDIBzjC8QIlBCbKXLoM3q8I767RhmPjTQ3dOz1paffLqfjQT+7MxvdR2d6AMAnxZ8JlhALGq9UvdBn9AS2/z7ox0cdrWNOepP3BmxFj7e6Dp/TpDfdC+BzgvX6SafJ6Sgn/Rm08xWDLiwj/thPOMQdbYleL6lUkeN95L8A+KwgQMXjT45ZUeixNdvnNQpGxWZUAZma7oeGzwiQlX2jxmNXHHoCu+SLQeGvkW/3HLPXLHfIW5c/LVgulP6PUAo9jl3yVbcQ/+u/c89RezfuGvWuNI4VzGSlVz1Kl47JwXxf3gQCPdj1W8zf7Vowt0F3vZn8qaJ6iq/jp8ZXsnRMxS75OnLArQoibMllnNI7U1H/lEOPLyM+v2IQaPPN5MFIbkyU5lpKfeOqAl3A9vldDkLw7WT9Xl6j5K222uyh37JWNegCts8vzXCADZIF5FLJI0BpPlx2I1BV6N3Y4t9O8tvy65cO9XvCIwOpVHnVoSewS/wamGgTu1+CnwHfB8SVgpS1WxPQk5YR763X8wWdnnjU7/fIKsiWBxlIpcprBnrSMnI1wBcUD5i2EmMJCL8XPYQNuomnUpCydmsKehzbykSvIqILZZ2fVP6gMctYLNspNY32Qq9ac9AT2FnzSgIuko6YcL/RaHTWMrI3hpqEHscdyMZ+QcwXl8am+wxnZyeltw1KT0iVK9Q0tGcz0B39ORFdWuTE+LPRP5igZc/vqrJhoPA1D13AzppnkYtLQYXNMdvAvNp4M3L51A0xgUZcpUp7BHSVbEINW4cOldPnv4miOP/3YeozWtEUqEPXoRUJKApTn9F1aEUCisLUZ3QdWpGAojD1GV2HViSgKEx9RtehFQkoCvM/YGXklyZdjdQAAAAASUVORK5CYII="
+                            x="0"
+                            y="0"
+                            width="90"
+                            height="90"
+                        />
+                    </svg>
+                </span>
+                <span class="app-brand-text demo menu-text fw-bold ms-2">LOCALNET</span>
             </a>
-          </li>
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link">
-              <div class="text-truncate" data-i18n="CRM">Board</div>
+
+            <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
+                <i class="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
             </a>
-          </li>
+        </div>
+
+        <div class="menu-inner-shadow"></div>
+
+        <ul class="menu-inner py-1">
+            <!-- Dashboards -->
+            <li class="menu-item active open">
+                <a href="javascript:void(0);" class="menu-link menu-toggle">
+                    <i class="menu-icon tf-icons bx bx-home-smile"></i>
+                    <div class="text-truncate" data-i18n="Dashboards">Dashboards</div>
+                    <span class="badge rounded-pill bg-danger ms-auto">5</span>
+                </a>
+                <ul class="menu-sub">
+                    <li class="menu-item active">
+                        <RouterLink class="menu-link"  to="/" >
+                            <div class="text-truncate" data-i18n="Analytics">Main</div>
+                        </RouterLink>
+                    </li>
+                    <li class="menu-item">
+                        <RouterLink class="menu-link"  to="board" >
+                            <div class="text-truncate" data-i18n="Analytics">Board</div>
+                        </RouterLink>
+                    </li>
+                </ul>
+            </li>
         </ul>
-      </li>
-    </ul>
-  </aside>
-  <!-- / Menu -->
+    </aside>
+    <!-- / Menu -->
 </template>
 
 <script setup></script>
diff --git a/src/layouts/TheTop.vue b/src/layouts/TheTop.vue
index 8068ff7..b3a2d12 100644
--- a/src/layouts/TheTop.vue
+++ b/src/layouts/TheTop.vue
@@ -1,565 +1,501 @@
 <template>
-  <nav
-    class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
-    id="layout-navbar"
-  >
-    <div class="layout-menu-toggle navbar-nav align-items-xl-center me-4 me-xl-0 d-xl-none">
-      <a class="nav-item nav-link px-0 me-xl-6" href="javascript:void(0)">
-        <i class="bx bx-menu bx-md"></i>
-      </a>
-    </div>
-
-    <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
-      <!-- Search -->
-      <div class="navbar-nav align-items-center">
-        <div class="nav-item navbar-search-wrapper mb-0">
-          <a class="nav-item nav-link search-toggler px-0" href="javascript:void(0);">
-            <i class="bx bx-search bx-md"></i>
-            <span class="d-none d-md-inline-block text-muted fw-normal ms-4">Search (Ctrl+/)</span>
-          </a>
+    <nav class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme" id="layout-navbar">
+        <div class="layout-menu-toggle navbar-nav align-items-xl-center me-4 me-xl-0 d-xl-none">
+            <a class="nav-item nav-link px-0 me-xl-6" href="javascript:void(0)">
+                <i class="bx bx-menu bx-md"></i>
+            </a>
         </div>
-      </div>
-      <!-- /Search -->
 
-      <ul class="navbar-nav flex-row align-items-center ms-auto">
-        <!-- Language -->
-        <li class="nav-item dropdown-language dropdown me-2 me-xl-0">
-          <a
-            class="nav-link dropdown-toggle hide-arrow"
-            href="javascript:void(0);"
-            data-bs-toggle="dropdown"
-          >
-            <i class="bx bx-globe bx-md"></i>
-          </a>
-          <ul class="dropdown-menu dropdown-menu-end">
-            <li>
-              <a
-                class="dropdown-item"
-                href="javascript:void(0);"
-                data-language="en"
-                data-text-direction="ltr"
-              >
-                <span>English</span>
-              </a>
-            </li>
-            <li>
-              <a
-                class="dropdown-item"
-                href="javascript:void(0);"
-                data-language="fr"
-                data-text-direction="ltr"
-              >
-                <span>French</span>
-              </a>
-            </li>
-            <li>
-              <a
-                class="dropdown-item"
-                href="javascript:void(0);"
-                data-language="ar"
-                data-text-direction="rtl"
-              >
-                <span>Arabic</span>
-              </a>
-            </li>
-            <li>
-              <a
-                class="dropdown-item"
-                href="javascript:void(0);"
-                data-language="de"
-                data-text-direction="ltr"
-              >
-                <span>German</span>
-              </a>
-            </li>
-          </ul>
-        </li>
-        <!-- /Language -->
-
-        <!-- Style Switcher -->
-        <li class="nav-item dropdown-style-switcher dropdown me-2 me-xl-0">
-          <a
-            class="nav-link dropdown-toggle hide-arrow"
-            href="javascript:void(0);"
-            data-bs-toggle="dropdown"
-          >
-            <i class="bx bx-md"></i>
-          </a>
-          <ul class="dropdown-menu dropdown-menu-end dropdown-styles">
-            <li>
-              <a class="dropdown-item" href="javascript:void(0);" data-theme="light">
-                <span><i class="bx bx-sun bx-md me-3"></i>Light</span>
-              </a>
-            </li>
-            <li>
-              <a class="dropdown-item" href="javascript:void(0);" data-theme="dark">
-                <span><i class="bx bx-moon bx-md me-3"></i>Dark</span>
-              </a>
-            </li>
-            <li>
-              <a class="dropdown-item" href="javascript:void(0);" data-theme="system">
-                <span><i class="bx bx-desktop bx-md me-3"></i>System</span>
-              </a>
-            </li>
-          </ul>
-        </li>
-        <!-- / Style Switcher-->
-
-        <!-- Quick links  -->
-        <li class="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
-          <a
-            class="nav-link dropdown-toggle hide-arrow"
-            href="javascript:void(0);"
-            data-bs-toggle="dropdown"
-            data-bs-auto-close="outside"
-            aria-expanded="false"
-          >
-            <i class="bx bx-grid-alt bx-md"></i>
-          </a>
-          <div class="dropdown-menu dropdown-menu-end p-0">
-            <div class="dropdown-menu-header border-bottom">
-              <div class="dropdown-header d-flex align-items-center py-3">
-                <h6 class="mb-0 me-auto">Shortcuts</h6>
-                <a
-                  href="javascript:void(0)"
-                  class="dropdown-shortcuts-add py-2"
-                  data-bs-toggle="tooltip"
-                  data-bs-placement="top"
-                  title="Add shortcuts"
-                  ><i class="bx bx-plus-circle text-heading"></i
-                ></a>
-              </div>
+        <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
+            <!-- Search -->
+            <div class="navbar-nav align-items-center">
+                <div class="nav-item navbar-search-wrapper mb-0">
+                    <a class="nav-item nav-link search-toggler px-0" href="javascript:void(0);">
+                        <i class="bx bx-search bx-md"></i>
+                        <span class="d-none d-md-inline-block text-muted fw-normal ms-4">Search (Ctrl+/)</span>
+                    </a>
+                </div>
             </div>
-            <div class="dropdown-shortcuts-list scrollable-container">
-              <div class="row row-bordered overflow-visible g-0">
-                <div class="dropdown-shortcuts-item col">
-                  <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                    <i class="bx bx-calendar bx-26px text-heading"></i>
-                  </span>
-                  <a href="app-calendar.html" class="stretched-link">Calendar</a>
-                  <small>Appointments</small>
-                </div>
-                <div class="dropdown-shortcuts-item col">
-                  <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                    <i class="bx bx-food-menu bx-26px text-heading"></i>
-                  </span>
-                  <a href="app-invoice-list.html" class="stretched-link">Invoice App</a>
-                  <small>Manage Accounts</small>
-                </div>
-              </div>
-              <div class="row row-bordered overflow-visible g-0">
-                <div class="dropdown-shortcuts-item col">
-                  <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                    <i class="bx bx-user bx-26px text-heading"></i>
-                  </span>
-                  <a href="app-user-list.html" class="stretched-link">User App</a>
-                  <small>Manage Users</small>
-                </div>
-                <div class="dropdown-shortcuts-item col">
-                  <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                    <i class="bx bx-check-shield bx-26px text-heading"></i>
-                  </span>
-                  <a href="app-access-roles.html" class="stretched-link">Role Management</a>
-                  <small>Permission</small>
-                </div>
-              </div>
-              <div class="row row-bordered overflow-visible g-0">
-                <div class="dropdown-shortcuts-item col">
-                  <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                    <i class="bx bx-pie-chart-alt-2 bx-26px text-heading"></i>
-                  </span>
-                  <a href="index.html" class="stretched-link">Dashboard</a>
-                  <small>User Dashboard</small>
-                </div>
-                <div class="dropdown-shortcuts-item col">
-                  <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                    <i class="bx bx-cog bx-26px text-heading"></i>
-                  </span>
-                  <a href="pages-account-settings-account.html" class="stretched-link">Setting</a>
-                  <small>Account Settings</small>
-                </div>
-              </div>
-              <div class="row row-bordered overflow-visible g-0">
-                <div class="dropdown-shortcuts-item col">
-                  <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                    <i class="bx bx-help-circle bx-26px text-heading"></i>
-                  </span>
-                  <a href="pages-faq.html" class="stretched-link">FAQs</a>
-                  <small>FAQs & Articles</small>
-                </div>
-                <div class="dropdown-shortcuts-item col">
-                  <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                    <i class="bx bx-window-open bx-26px text-heading"></i>
-                  </span>
-                  <a href="modal-examples.html" class="stretched-link">Modals</a>
-                  <small>Useful Popups</small>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-        <!-- Quick links -->
+            <!-- /Search -->
 
-        <!-- Notification -->
-        <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
-          <a
-            class="nav-link dropdown-toggle hide-arrow"
-            href="javascript:void(0);"
-            data-bs-toggle="dropdown"
-            data-bs-auto-close="outside"
-            aria-expanded="false"
-          >
-            <span class="position-relative">
-              <i class="bx bx-bell bx-md"></i>
-              <span
-                class="badge rounded-pill bg-danger badge-dot badge-notifications border"
-              ></span>
-            </span>
-          </a>
-          <ul class="dropdown-menu dropdown-menu-end p-0">
-            <li class="dropdown-menu-header border-bottom">
-              <div class="dropdown-header d-flex align-items-center py-3">
-                <h6 class="mb-0 me-auto">Notification</h6>
-                <div class="d-flex align-items-center h6 mb-0">
-                  <span class="badge bg-label-primary me-2">8 New</span>
-                  <a
-                    href="javascript:void(0)"
-                    class="dropdown-notifications-all p-2"
-                    data-bs-toggle="tooltip"
-                    data-bs-placement="top"
-                    title="Mark all as read"
-                    ><i class="bx bx-envelope-open text-heading"></i
-                  ></a>
-                </div>
-              </div>
-            </li>
-            <li class="dropdown-notifications-list scrollable-container">
-              <ul class="list-group list-group-flush">
-                <li class="list-group-item list-group-item-action dropdown-notifications-item">
-                  <div class="d-flex">
-                    <div class="flex-shrink-0 me-3">
-                      <div class="avatar">
-                        <img src="/img/avatars/1.png" class="rounded-circle" />
-                      </div>
-                    </div>
-                    <div class="flex-grow-1">
-                      <h6 class="small mb-0">Congratulation Lettie 🎉</h6>
-                      <small class="mb-1 d-block text-body"
-                        >Won the monthly best seller gold badge</small
-                      >
-                      <small class="text-muted">1h ago</small>
-                    </div>
-                    <div class="flex-shrink-0 dropdown-notifications-actions">
-                      <a href="javascript:void(0)" class="dropdown-notifications-read"
-                        ><span class="badge badge-dot"></span
-                      ></a>
-                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                        ><span class="bx bx-x"></span
-                      ></a>
-                    </div>
-                  </div>
+            <ul class="navbar-nav flex-row align-items-center ms-auto">
+                <!-- Language -->
+                <li class="nav-item dropdown-language dropdown me-2 me-xl-0">
+                    <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
+                        <i class="bx bx-globe bx-md"></i>
+                    </a>
+                    <ul class="dropdown-menu dropdown-menu-end">
+                        <li>
+                            <a class="dropdown-item" href="javascript:void(0);" data-language="en" data-text-direction="ltr">
+                                <span>English</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="javascript:void(0);" data-language="fr" data-text-direction="ltr">
+                                <span>French</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="javascript:void(0);" data-language="ar" data-text-direction="rtl">
+                                <span>Arabic</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="javascript:void(0);" data-language="de" data-text-direction="ltr">
+                                <span>German</span>
+                            </a>
+                        </li>
+                    </ul>
                 </li>
-                <li class="list-group-item list-group-item-action dropdown-notifications-item">
-                  <div class="d-flex">
-                    <div class="flex-shrink-0 me-3">
-                      <div class="avatar">
-                        <span class="avatar-initial rounded-circle bg-label-danger">CF</span>
-                      </div>
-                    </div>
-                    <div class="flex-grow-1">
-                      <h6 class="small mb-0">Charles Franklin</h6>
-                      <small class="mb-1 d-block text-body">Accepted your connection</small>
-                      <small class="text-muted">12hr ago</small>
-                    </div>
-                    <div class="flex-shrink-0 dropdown-notifications-actions">
-                      <a href="javascript:void(0)" class="dropdown-notifications-read"
-                        ><span class="badge badge-dot"></span
-                      ></a>
-                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                        ><span class="bx bx-x"></span
-                      ></a>
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read"
-                >
-                  <div class="d-flex">
-                    <div class="flex-shrink-0 me-3">
-                      <div class="avatar">
-                        <img src="/img/avatars/2.png" class="rounded-circle" />
-                      </div>
-                    </div>
-                    <div class="flex-grow-1">
-                      <h6 class="small mb-0">New Message ✉️</h6>
-                      <small class="mb-1 d-block text-body"
-                        >You have new message from Natalie</small
-                      >
-                      <small class="text-muted">1h ago</small>
-                    </div>
-                    <div class="flex-shrink-0 dropdown-notifications-actions">
-                      <a href="javascript:void(0)" class="dropdown-notifications-read"
-                        ><span class="badge badge-dot"></span
-                      ></a>
-                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                        ><span class="bx bx-x"></span
-                      ></a>
-                    </div>
-                  </div>
-                </li>
-                <li class="list-group-item list-group-item-action dropdown-notifications-item">
-                  <div class="d-flex">
-                    <div class="flex-shrink-0 me-3">
-                      <div class="avatar">
-                        <span class="avatar-initial rounded-circle bg-label-success"
-                          ><i class="bx bx-cart"></i
-                        ></span>
-                      </div>
-                    </div>
-                    <div class="flex-grow-1">
-                      <h6 class="small mb-0">Whoo! You have new order 🛒</h6>
-                      <small class="mb-1 d-block text-body">ACME Inc. made new order $1,154</small>
-                      <small class="text-muted">1 day ago</small>
-                    </div>
-                    <div class="flex-shrink-0 dropdown-notifications-actions">
-                      <a href="javascript:void(0)" class="dropdown-notifications-read"
-                        ><span class="badge badge-dot"></span
-                      ></a>
-                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                        ><span class="bx bx-x"></span
-                      ></a>
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read"
-                >
-                  <div class="d-flex">
-                    <div class="flex-shrink-0 me-3">
-                      <div class="avatar">
-                        <img src="/img/avatars/9.png" class="rounded-circle" />
-                      </div>
-                    </div>
-                    <div class="flex-grow-1">
-                      <h6 class="small mb-0">Application has been approved 🚀</h6>
-                      <small class="mb-1 d-block text-body"
-                        >Your ABC project application has been approved.</small
-                      >
-                      <small class="text-muted">2 days ago</small>
-                    </div>
-                    <div class="flex-shrink-0 dropdown-notifications-actions">
-                      <a href="javascript:void(0)" class="dropdown-notifications-read"
-                        ><span class="badge badge-dot"></span
-                      ></a>
-                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                        ><span class="bx bx-x"></span
-                      ></a>
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read"
-                >
-                  <div class="d-flex">
-                    <div class="flex-shrink-0 me-3">
-                      <div class="avatar">
-                        <span class="avatar-initial rounded-circle bg-label-success"
-                          ><i class="bx bx-pie-chart-alt"></i
-                        ></span>
-                      </div>
-                    </div>
-                    <div class="flex-grow-1">
-                      <h6 class="small mb-0">Monthly report is generated</h6>
-                      <small class="mb-1 d-block text-body"
-                        >July monthly financial report is generated
-                      </small>
-                      <small class="text-muted">3 days ago</small>
-                    </div>
-                    <div class="flex-shrink-0 dropdown-notifications-actions">
-                      <a href="javascript:void(0)" class="dropdown-notifications-read"
-                        ><span class="badge badge-dot"></span
-                      ></a>
-                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                        ><span class="bx bx-x"></span
-                      ></a>
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read"
-                >
-                  <div class="d-flex">
-                    <div class="flex-shrink-0 me-3">
-                      <div class="avatar">
-                        <img src="/img/avatars/5.png" class="rounded-circle" />
-                      </div>
-                    </div>
-                    <div class="flex-grow-1">
-                      <h6 class="small mb-0">Send connection request</h6>
-                      <small class="mb-1 d-block text-body"
-                        >Peter sent you connection request</small
-                      >
-                      <small class="text-muted">4 days ago</small>
-                    </div>
-                    <div class="flex-shrink-0 dropdown-notifications-actions">
-                      <a href="javascript:void(0)" class="dropdown-notifications-read"
-                        ><span class="badge badge-dot"></span
-                      ></a>
-                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                        ><span class="bx bx-x"></span
-                      ></a>
-                    </div>
-                  </div>
-                </li>
-                <li class="list-group-item list-group-item-action dropdown-notifications-item">
-                  <div class="d-flex">
-                    <div class="flex-shrink-0 me-3">
-                      <div class="avatar">
-                        <img src="/img/avatars/6.png" class="rounded-circle" />
-                      </div>
-                    </div>
-                    <div class="flex-grow-1">
-                      <h6 class="small mb-0">New message from Jane</h6>
-                      <small class="mb-1 d-block text-body">Your have new message from Jane</small>
-                      <small class="text-muted">5 days ago</small>
-                    </div>
-                    <div class="flex-shrink-0 dropdown-notifications-actions">
-                      <a href="javascript:void(0)" class="dropdown-notifications-read"
-                        ><span class="badge badge-dot"></span
-                      ></a>
-                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                        ><span class="bx bx-x"></span
-                      ></a>
-                    </div>
-                  </div>
-                </li>
-                <li
-                  class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read"
-                >
-                  <div class="d-flex">
-                    <div class="flex-shrink-0 me-3">
-                      <div class="avatar">
-                        <span class="avatar-initial rounded-circle bg-label-warning"
-                          ><i class="bx bx-error"></i
-                        ></span>
-                      </div>
-                    </div>
-                    <div class="flex-grow-1">
-                      <h6 class="small mb-0">CPU is running high</h6>
-                      <small class="mb-1 d-block text-body"
-                        >CPU Utilization Percent is currently at 88.63%,</small
-                      >
-                      <small class="text-muted">5 days ago</small>
-                    </div>
-                    <div class="flex-shrink-0 dropdown-notifications-actions">
-                      <a href="javascript:void(0)" class="dropdown-notifications-read"
-                        ><span class="badge badge-dot"></span
-                      ></a>
-                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                        ><span class="bx bx-x"></span
-                      ></a>
-                    </div>
-                  </div>
-                </li>
-              </ul>
-            </li>
-            <li class="border-top">
-              <div class="d-grid p-4">
-                <a class="btn btn-primary btn-sm d-flex" href="javascript:void(0);">
-                  <small class="align-middle">View all notifications</small>
-                </a>
-              </div>
-            </li>
-          </ul>
-        </li>
-        <!--/ Notification -->
-        <!-- User -->
-        <li class="nav-item navbar-dropdown dropdown-user dropdown">
-          <a
-            class="nav-link dropdown-toggle hide-arrow p-0"
-            href="javascript:void(0);"
-            data-bs-toggle="dropdown"
-          >
-            <div class="avatar avatar-online">
-              <img src="/img/avatars/1.png" class="w-px-40 h-auto rounded-circle" />
-            </div>
-          </a>
-          <ul class="dropdown-menu dropdown-menu-end">
-            <li>
-              <a class="dropdown-item" href="pages-account-settings-account.html">
-                <div class="d-flex">
-                  <div class="flex-shrink-0 me-3">
-                    <div class="avatar avatar-online">
-                      <img src="/img/avatars/1.png" class="w-px-40 h-auto rounded-circle" />
-                    </div>
-                  </div>
-                  <div class="flex-grow-1">
-                    <h6 class="mb-0">John Doe</h6>
-                    <small class="text-muted">Admin</small>
-                  </div>
-                </div>
-              </a>
-            </li>
-            <li>
-              <div class="dropdown-divider my-1"></div>
-            </li>
-            <li>
-              <a class="dropdown-item" href="pages-profile-user.html">
-                <i class="bx bx-user bx-md me-3"></i><span>My Profile</span>
-              </a>
-            </li>
-            <li>
-              <a class="dropdown-item" href="pages-account-settings-account.html">
-                <i class="bx bx-cog bx-md me-3"></i><span>Settings</span>
-              </a>
-            </li>
-            <li>
-              <a class="dropdown-item" href="pages-account-settings-billing.html">
-                <span class="d-flex align-items-center align-middle">
-                  <i class="flex-shrink-0 bx bx-credit-card bx-md me-3"></i
-                  ><span class="flex-grow-1 align-middle">Billing Plan</span>
-                  <span class="flex-shrink-0 badge rounded-pill bg-danger">4</span>
-                </span>
-              </a>
-            </li>
-            <li>
-              <div class="dropdown-divider my-1"></div>
-            </li>
-            <li>
-              <a class="dropdown-item" href="pages-pricing.html">
-                <i class="bx bx-dollar bx-md me-3"></i><span>Pricing</span>
-              </a>
-            </li>
-            <li>
-              <a class="dropdown-item" href="pages-faq.html">
-                <i class="bx bx-help-circle bx-md me-3"></i><span>FAQ</span>
-              </a>
-            </li>
-            <li>
-              <div class="dropdown-divider my-1"></div>
-            </li>
-            <li>
-              <a class="dropdown-item" href="auth-login-cover.html" target="_blank">
-                <i class="bx bx-power-off bx-md me-3"></i><span>Log Out</span>
-              </a>
-            </li>
-          </ul>
-        </li>
-        <!--/ User -->
-      </ul>
-    </div>
+                <!-- /Language -->
 
-    <!-- Search Small Screens -->
-    <div class="navbar-search-wrapper search-input-wrapper d-none">
-      <input
-        type="text"
-        class="form-control search-input container-xxl border-0"
-        placeholder="Search..."
-        aria-label="Search..."
-      />
-      <i class="bx bx-x bx-md search-toggler cursor-pointer"></i>
-    </div>
-  </nav>
+                <!-- Style Switcher -->
+                <li class="nav-item dropdown-style-switcher dropdown me-2 me-xl-0">
+                    <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
+                        <i class="bx bx-md"></i>
+                    </a>
+                    <ul class="dropdown-menu dropdown-menu-end dropdown-styles">
+                        <li>
+                            <a class="dropdown-item" href="javascript:void(0);" data-theme="light">
+                                <span><i class="bx bx-sun bx-md me-3"></i>Light</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="javascript:void(0);" data-theme="dark">
+                                <span><i class="bx bx-moon bx-md me-3"></i>Dark</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="javascript:void(0);" data-theme="system">
+                                <span><i class="bx bx-desktop bx-md me-3"></i>System</span>
+                            </a>
+                        </li>
+                    </ul>
+                </li>
+                <!-- / Style Switcher-->
+
+                <!-- Quick links  -->
+                <li class="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
+                    <a
+                        class="nav-link dropdown-toggle hide-arrow"
+                        href="javascript:void(0);"
+                        data-bs-toggle="dropdown"
+                        data-bs-auto-close="outside"
+                        aria-expanded="false"
+                    >
+                        <i class="bx bx-grid-alt bx-md"></i>
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-end p-0">
+                        <div class="dropdown-menu-header border-bottom">
+                            <div class="dropdown-header d-flex align-items-center py-3">
+                                <h6 class="mb-0 me-auto">Shortcuts</h6>
+                                <a
+                                    href="javascript:void(0)"
+                                    class="dropdown-shortcuts-add py-2"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-placement="top"
+                                    title="Add shortcuts"
+                                    ><i class="bx bx-plus-circle text-heading"></i
+                                ></a>
+                            </div>
+                        </div>
+                        <div class="dropdown-shortcuts-list scrollable-container">
+                            <div class="row row-bordered overflow-visible g-0">
+                                <div class="dropdown-shortcuts-item col">
+                                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                                        <i class="bx bx-calendar bx-26px text-heading"></i>
+                                    </span>
+                                    <a href="app-calendar.html" class="stretched-link">Calendar</a>
+                                    <small>Appointments</small>
+                                </div>
+                                <div class="dropdown-shortcuts-item col">
+                                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                                        <i class="bx bx-food-menu bx-26px text-heading"></i>
+                                    </span>
+                                    <a href="app-invoice-list.html" class="stretched-link">Invoice App</a>
+                                    <small>Manage Accounts</small>
+                                </div>
+                            </div>
+                            <div class="row row-bordered overflow-visible g-0">
+                                <div class="dropdown-shortcuts-item col">
+                                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                                        <i class="bx bx-user bx-26px text-heading"></i>
+                                    </span>
+                                    <a href="app-user-list.html" class="stretched-link">User App</a>
+                                    <small>Manage Users</small>
+                                </div>
+                                <div class="dropdown-shortcuts-item col">
+                                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                                        <i class="bx bx-check-shield bx-26px text-heading"></i>
+                                    </span>
+                                    <a href="app-access-roles.html" class="stretched-link">Role Management</a>
+                                    <small>Permission</small>
+                                </div>
+                            </div>
+                            <div class="row row-bordered overflow-visible g-0">
+                                <div class="dropdown-shortcuts-item col">
+                                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                                        <i class="bx bx-pie-chart-alt-2 bx-26px text-heading"></i>
+                                    </span>
+                                    <a href="index.html" class="stretched-link">Dashboard</a>
+                                    <small>User Dashboard</small>
+                                </div>
+                                <div class="dropdown-shortcuts-item col">
+                                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                                        <i class="bx bx-cog bx-26px text-heading"></i>
+                                    </span>
+                                    <a href="pages-account-settings-account.html" class="stretched-link">Setting</a>
+                                    <small>Account Settings</small>
+                                </div>
+                            </div>
+                            <div class="row row-bordered overflow-visible g-0">
+                                <div class="dropdown-shortcuts-item col">
+                                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                                        <i class="bx bx-help-circle bx-26px text-heading"></i>
+                                    </span>
+                                    <a href="pages-faq.html" class="stretched-link">FAQs</a>
+                                    <small>FAQs & Articles</small>
+                                </div>
+                                <div class="dropdown-shortcuts-item col">
+                                    <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                                        <i class="bx bx-window-open bx-26px text-heading"></i>
+                                    </span>
+                                    <a href="modal-examples.html" class="stretched-link">Modals</a>
+                                    <small>Useful Popups</small>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+                <!-- Quick links -->
+
+                <!-- Notification -->
+                <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
+                    <a
+                        class="nav-link dropdown-toggle hide-arrow"
+                        href="javascript:void(0);"
+                        data-bs-toggle="dropdown"
+                        data-bs-auto-close="outside"
+                        aria-expanded="false"
+                    >
+                        <span class="position-relative">
+                            <i class="bx bx-bell bx-md"></i>
+                            <span class="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
+                        </span>
+                    </a>
+                    <ul class="dropdown-menu dropdown-menu-end p-0">
+                        <li class="dropdown-menu-header border-bottom">
+                            <div class="dropdown-header d-flex align-items-center py-3">
+                                <h6 class="mb-0 me-auto">Notification</h6>
+                                <div class="d-flex align-items-center h6 mb-0">
+                                    <span class="badge bg-label-primary me-2">8 New</span>
+                                    <a
+                                        href="javascript:void(0)"
+                                        class="dropdown-notifications-all p-2"
+                                        data-bs-toggle="tooltip"
+                                        data-bs-placement="top"
+                                        title="Mark all as read"
+                                        ><i class="bx bx-envelope-open text-heading"></i
+                                    ></a>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="dropdown-notifications-list scrollable-container">
+                            <ul class="list-group list-group-flush">
+                                <li class="list-group-item list-group-item-action dropdown-notifications-item">
+                                    <div class="d-flex">
+                                        <div class="flex-shrink-0 me-3">
+                                            <div class="avatar">
+                                                <img src="/img/avatars/1.png" class="rounded-circle" />
+                                            </div>
+                                        </div>
+                                        <div class="flex-grow-1">
+                                            <h6 class="small mb-0">Congratulation Lettie 🎉</h6>
+                                            <small class="mb-1 d-block text-body">Won the monthly best seller gold badge</small>
+                                            <small class="text-muted">1h ago</small>
+                                        </div>
+                                        <div class="flex-shrink-0 dropdown-notifications-actions">
+                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
+                                                ><span class="badge badge-dot"></span
+                                            ></a>
+                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                                                ><span class="bx bx-x"></span
+                                            ></a>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="list-group-item list-group-item-action dropdown-notifications-item">
+                                    <div class="d-flex">
+                                        <div class="flex-shrink-0 me-3">
+                                            <div class="avatar">
+                                                <span class="avatar-initial rounded-circle bg-label-danger">CF</span>
+                                            </div>
+                                        </div>
+                                        <div class="flex-grow-1">
+                                            <h6 class="small mb-0">Charles Franklin</h6>
+                                            <small class="mb-1 d-block text-body">Accepted your connection</small>
+                                            <small class="text-muted">12hr ago</small>
+                                        </div>
+                                        <div class="flex-shrink-0 dropdown-notifications-actions">
+                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
+                                                ><span class="badge badge-dot"></span
+                                            ></a>
+                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                                                ><span class="bx bx-x"></span
+                                            ></a>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                                    <div class="d-flex">
+                                        <div class="flex-shrink-0 me-3">
+                                            <div class="avatar">
+                                                <img src="/img/avatars/2.png" class="rounded-circle" />
+                                            </div>
+                                        </div>
+                                        <div class="flex-grow-1">
+                                            <h6 class="small mb-0">New Message ✉️</h6>
+                                            <small class="mb-1 d-block text-body">You have new message from Natalie</small>
+                                            <small class="text-muted">1h ago</small>
+                                        </div>
+                                        <div class="flex-shrink-0 dropdown-notifications-actions">
+                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
+                                                ><span class="badge badge-dot"></span
+                                            ></a>
+                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                                                ><span class="bx bx-x"></span
+                                            ></a>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="list-group-item list-group-item-action dropdown-notifications-item">
+                                    <div class="d-flex">
+                                        <div class="flex-shrink-0 me-3">
+                                            <div class="avatar">
+                                                <span class="avatar-initial rounded-circle bg-label-success"
+                                                    ><i class="bx bx-cart"></i
+                                                ></span>
+                                            </div>
+                                        </div>
+                                        <div class="flex-grow-1">
+                                            <h6 class="small mb-0">Whoo! You have new order 🛒</h6>
+                                            <small class="mb-1 d-block text-body">ACME Inc. made new order $1,154</small>
+                                            <small class="text-muted">1 day ago</small>
+                                        </div>
+                                        <div class="flex-shrink-0 dropdown-notifications-actions">
+                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
+                                                ><span class="badge badge-dot"></span
+                                            ></a>
+                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                                                ><span class="bx bx-x"></span
+                                            ></a>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                                    <div class="d-flex">
+                                        <div class="flex-shrink-0 me-3">
+                                            <div class="avatar">
+                                                <img src="/img/avatars/9.png" class="rounded-circle" />
+                                            </div>
+                                        </div>
+                                        <div class="flex-grow-1">
+                                            <h6 class="small mb-0">Application has been approved 🚀</h6>
+                                            <small class="mb-1 d-block text-body">Your ABC project application has been approved.</small>
+                                            <small class="text-muted">2 days ago</small>
+                                        </div>
+                                        <div class="flex-shrink-0 dropdown-notifications-actions">
+                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
+                                                ><span class="badge badge-dot"></span
+                                            ></a>
+                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                                                ><span class="bx bx-x"></span
+                                            ></a>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                                    <div class="d-flex">
+                                        <div class="flex-shrink-0 me-3">
+                                            <div class="avatar">
+                                                <span class="avatar-initial rounded-circle bg-label-success"
+                                                    ><i class="bx bx-pie-chart-alt"></i
+                                                ></span>
+                                            </div>
+                                        </div>
+                                        <div class="flex-grow-1">
+                                            <h6 class="small mb-0">Monthly report is generated</h6>
+                                            <small class="mb-1 d-block text-body">July monthly financial report is generated </small>
+                                            <small class="text-muted">3 days ago</small>
+                                        </div>
+                                        <div class="flex-shrink-0 dropdown-notifications-actions">
+                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
+                                                ><span class="badge badge-dot"></span
+                                            ></a>
+                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                                                ><span class="bx bx-x"></span
+                                            ></a>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                                    <div class="d-flex">
+                                        <div class="flex-shrink-0 me-3">
+                                            <div class="avatar">
+                                                <img src="/img/avatars/5.png" class="rounded-circle" />
+                                            </div>
+                                        </div>
+                                        <div class="flex-grow-1">
+                                            <h6 class="small mb-0">Send connection request</h6>
+                                            <small class="mb-1 d-block text-body">Peter sent you connection request</small>
+                                            <small class="text-muted">4 days ago</small>
+                                        </div>
+                                        <div class="flex-shrink-0 dropdown-notifications-actions">
+                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
+                                                ><span class="badge badge-dot"></span
+                                            ></a>
+                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                                                ><span class="bx bx-x"></span
+                                            ></a>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="list-group-item list-group-item-action dropdown-notifications-item">
+                                    <div class="d-flex">
+                                        <div class="flex-shrink-0 me-3">
+                                            <div class="avatar">
+                                                <img src="/img/avatars/6.png" class="rounded-circle" />
+                                            </div>
+                                        </div>
+                                        <div class="flex-grow-1">
+                                            <h6 class="small mb-0">New message from Jane</h6>
+                                            <small class="mb-1 d-block text-body">Your have new message from Jane</small>
+                                            <small class="text-muted">5 days ago</small>
+                                        </div>
+                                        <div class="flex-shrink-0 dropdown-notifications-actions">
+                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
+                                                ><span class="badge badge-dot"></span
+                                            ></a>
+                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                                                ><span class="bx bx-x"></span
+                                            ></a>
+                                        </div>
+                                    </div>
+                                </li>
+                                <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                                    <div class="d-flex">
+                                        <div class="flex-shrink-0 me-3">
+                                            <div class="avatar">
+                                                <span class="avatar-initial rounded-circle bg-label-warning"
+                                                    ><i class="bx bx-error"></i
+                                                ></span>
+                                            </div>
+                                        </div>
+                                        <div class="flex-grow-1">
+                                            <h6 class="small mb-0">CPU is running high</h6>
+                                            <small class="mb-1 d-block text-body">CPU Utilization Percent is currently at 88.63%,</small>
+                                            <small class="text-muted">5 days ago</small>
+                                        </div>
+                                        <div class="flex-shrink-0 dropdown-notifications-actions">
+                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
+                                                ><span class="badge badge-dot"></span
+                                            ></a>
+                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                                                ><span class="bx bx-x"></span
+                                            ></a>
+                                        </div>
+                                    </div>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="border-top">
+                            <div class="d-grid p-4">
+                                <a class="btn btn-primary btn-sm d-flex" href="javascript:void(0);">
+                                    <small class="align-middle">View all notifications</small>
+                                </a>
+                            </div>
+                        </li>
+                    </ul>
+                </li>
+                <!--/ Notification -->
+                <!-- User -->
+                <li class="nav-item navbar-dropdown dropdown-user dropdown">
+                    <a class="nav-link dropdown-toggle hide-arrow p-0" href="javascript:void(0);" data-bs-toggle="dropdown">
+                        <div class="avatar avatar-online">
+                            <img src="/img/avatars/1.png" class="w-px-40 h-auto rounded-circle" />
+                        </div>
+                    </a>
+                    <ul class="dropdown-menu dropdown-menu-end">
+                        <li>
+                            <a class="dropdown-item" href="pages-account-settings-account.html">
+                                <div class="d-flex">
+                                    <div class="flex-shrink-0 me-3">
+                                        <div class="avatar avatar-online">
+                                            <img src="/img/avatars/1.png" class="w-px-40 h-auto rounded-circle" />
+                                        </div>
+                                    </div>
+                                    <div class="flex-grow-1">
+                                        <h6 class="mb-0">John Doe</h6>
+                                        <small class="text-muted">Admin</small>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <div class="dropdown-divider my-1"></div>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="pages-profile-user.html">
+                                <i class="bx bx-user bx-md me-3"></i><span>My Profile</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="pages-account-settings-account.html">
+                                <i class="bx bx-cog bx-md me-3"></i><span>Settings</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="pages-account-settings-billing.html">
+                                <span class="d-flex align-items-center align-middle">
+                                    <i class="flex-shrink-0 bx bx-credit-card bx-md me-3"></i
+                                    ><span class="flex-grow-1 align-middle">Billing Plan</span>
+                                    <span class="flex-shrink-0 badge rounded-pill bg-danger">4</span>
+                                </span>
+                            </a>
+                        </li>
+                        <li>
+                            <div class="dropdown-divider my-1"></div>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="pages-pricing.html">
+                                <i class="bx bx-dollar bx-md me-3"></i><span>Pricing</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="pages-faq.html">
+                                <i class="bx bx-help-circle bx-md me-3"></i><span>FAQ</span>
+                            </a>
+                        </li>
+                        <li>
+                            <div class="dropdown-divider my-1"></div>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="auth-login-cover.html" target="_blank">
+                                <i class="bx bx-power-off bx-md me-3"></i><span>Log Out</span>
+                            </a>
+                        </li>
+                    </ul>
+                </li>
+                <!--/ User -->
+            </ul>
+        </div>
+
+        <!-- Search Small Screens -->
+        <div class="navbar-search-wrapper search-input-wrapper d-none">
+            <input type="text" class="form-control search-input container-xxl border-0" placeholder="Search..." aria-label="Search..." />
+            <i class="bx bx-x bx-md search-toggler cursor-pointer"></i>
+        </div>
+    </nav>
 </template>
 <script setup>
 </script>
diff --git a/src/router/index.js b/src/router/index.js
index fc8979b..df6ed42 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,14 +3,15 @@ import { createRouter, createWebHistory } from 'vue-router'
 // 초기 렌더링 속도를 위해 지연 로딩 사용
 const routes = [
   {
-    path: '/:anyting(.*)',
+    path: '/',
+    name : 'main',
     component: () => import('@v/MainView.vue'),
     // meta: { requiresAuth: true }
   },
   {
-    // path: '/layouts-collapsed-menu.html',
-    // component: () => import('@v/MainView.vue'),
-    // meta: { requiresAuth: true }
+    path: '/board',
+    name : 'board',
+    component: () => import('@v/TheBoard.vue'),
   },
   // {
   //   path: "/login",
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 5d99817..0760a82 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -1,1294 +1,1192 @@
 <template>
-  <div class="container-xxl flex-grow-1 container-p-y">
-    <div class="row">
-      <div class="col-xxl-8 mb-6 order-0">
-        <Sample-input />
-
-        <div class="card">
-          <div class="d-flex align-items-start row">
-            <div class="col-sm-7">
-              <div class="card-body">
-                <h5 class="card-title text-primary mb-3">Congratulations John! 🎉</h5>
-                <p class="mb-6">
-                  You have done 72% more sales today.<br />Check your new badge in your profile.
-                </p>
-
-                <a href="javascript:;" class="btn btn-sm btn-label-primary">View Badges</a>
-              </div>
-            </div>
-            <div class="col-sm-5 text-center text-sm-left">
-              <div class="card-body pb-0 px-0 px-md-6">
-                <img
-                  src="/img/illustrations/man-with-laptop.png"
-                  height="175"
-                  class="scaleX-n1-rtl"
-                  alt="View Badge User"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="col-xxl-4 col-lg-12 col-md-4 order-1">
+    <div class="container-xxl flex-grow-1 container-p-y">
         <div class="row">
-          <div class="col-lg-6 col-md-12 col-6 mb-6">
-            <div class="card h-100">
-              <div class="card-body pb-4">
-                <span class="d-block fw-medium mb-1">Order</span>
-                <h4 class="card-title mb-0">276k</h4>
-              </div>
-              <div id="orderChart" class="pb-3"></div>
-            </div>
-          </div>
-          <div class="col-lg-6 col-md-12 col-6 mb-6">
-            <div class="card h-100">
-              <div class="card-body">
-                <div class="card-title d-flex align-items-start justify-content-between mb-4">
-                  <div class="avatar flex-shrink-0">
-                    <img
-                      src="/img/icons/unicons/wallet-info.png"
-                      alt="wallet info"
-                      class="rounded"
-                    />
-                  </div>
-                  <div class="dropdown">
-                    <button
-                      class="btn p-0"
-                      type="button"
-                      id="cardOpt6"
-                      data-bs-toggle="dropdown"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                    >
-                      <i class="bx bx-dots-vertical-rounded text-muted"></i>
-                    </button>
-                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt6">
-                      <a class="dropdown-item" href="javascript:void(0);">View More</a>
-                      <a class="dropdown-item" href="javascript:void(0);">Delete</a>
+            <div class="col-xxl-8 mb-6 order-0">
+                <Sample-input />
+
+                <div class="card">
+                    <div class="d-flex align-items-start row">
+                        <div class="col-sm-7">
+                            <div class="card-body">
+                                <h5 class="card-title text-primary mb-3">Congratulations John! 🎉</h5>
+                                <p class="mb-6">You have done 72% more sales today.<br />Check your new badge in your profile.</p>
+
+                                <a href="javascript:;" class="btn btn-sm btn-label-primary">View Badges</a>
+                            </div>
+                        </div>
+                        <div class="col-sm-5 text-center text-sm-left">
+                            <div class="card-body pb-0 px-0 px-md-6">
+                                <img
+                                    src="/img/illustrations/man-with-laptop.png"
+                                    height="175"
+                                    class="scaleX-n1-rtl"
+                                    alt="View Badge User"
+                                />
+                            </div>
+                        </div>
                     </div>
-                  </div>
                 </div>
-                <p class="mb-1">Sales</p>
-                <h4 class="card-title mb-3">$4,679</h4>
-                <small class="text-success fw-medium"
-                  ><i class="bx bx-up-arrow-alt"></i> +28.42%</small
-                >
-              </div>
             </div>
-          </div>
-        </div>
-      </div>
-      <!-- Total Revenue -->
-      <div class="col-12 col-xxl-8 order-2 order-md-3 order-xxl-2 mb-6">
-        <div class="card">
-          <div class="row row-bordered g-0">
-            <div class="col-lg-8">
-              <div class="card-header d-flex align-items-center justify-content-between">
-                <div class="card-title mb-0">
-                  <h5 class="m-0 me-2">Total Revenue</h5>
+            <div class="col-xxl-4 col-lg-12 col-md-4 order-1">
+                <div class="row">
+                    <div class="col-lg-6 col-md-12 col-6 mb-6">
+                        <div class="card h-100">
+                            <div class="card-body pb-4">
+                                <span class="d-block fw-medium mb-1">Order</span>
+                                <h4 class="card-title mb-0">276k</h4>
+                            </div>
+                            <div id="orderChart" class="pb-3"></div>
+                        </div>
+                    </div>
+                    <div class="col-lg-6 col-md-12 col-6 mb-6">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="card-title d-flex align-items-start justify-content-between mb-4">
+                                    <div class="avatar flex-shrink-0">
+                                        <img src="/img/icons/unicons/wallet-info.png" alt="wallet info" class="rounded" />
+                                    </div>
+                                    <div class="dropdown">
+                                        <button
+                                            class="btn p-0"
+                                            type="button"
+                                            id="cardOpt6"
+                                            data-bs-toggle="dropdown"
+                                            aria-haspopup="true"
+                                            aria-expanded="false"
+                                        >
+                                            <i class="bx bx-dots-vertical-rounded text-muted"></i>
+                                        </button>
+                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt6">
+                                            <a class="dropdown-item" href="javascript:void(0);">View More</a>
+                                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <p class="mb-1">Sales</p>
+                                <h4 class="card-title mb-3">$4,679</h4>
+                                <small class="text-success fw-medium"><i class="bx bx-up-arrow-alt"></i> +28.42%</small>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <div class="dropdown">
-                  <button
-                    class="btn p-0"
-                    type="button"
-                    id="totalRevenue"
-                    data-bs-toggle="dropdown"
-                    aria-haspopup="true"
-                    aria-expanded="false"
-                  >
-                    <i class="bx bx-dots-vertical-rounded bx-lg text-muted"></i>
-                  </button>
-                  <div class="dropdown-menu dropdown-menu-end" aria-labelledby="totalRevenue">
-                    <a class="dropdown-item" href="javascript:void(0);">Select All</a>
-                    <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
-                    <a class="dropdown-item" href="javascript:void(0);">Share</a>
-                  </div>
-                </div>
-              </div>
-              <div id="totalRevenueChart" class="px-3"></div>
             </div>
-            <div class="col-lg-4 d-flex align-items-center">
-              <div class="card-body px-xl-9">
-                <div class="text-center mb-6">
-                  <div class="btn-group">
-                    <button type="button" class="btn btn-label-primary">
-                      2023
-                      <!-- <script>
+            <!-- Total Revenue -->
+            <div class="col-12 col-xxl-8 order-2 order-md-3 order-xxl-2 mb-6">
+                <div class="card">
+                    <div class="row row-bordered g-0">
+                        <div class="col-lg-8">
+                            <div class="card-header d-flex align-items-center justify-content-between">
+                                <div class="card-title mb-0">
+                                    <h5 class="m-0 me-2">Total Revenue</h5>
+                                </div>
+                                <div class="dropdown">
+                                    <button
+                                        class="btn p-0"
+                                        type="button"
+                                        id="totalRevenue"
+                                        data-bs-toggle="dropdown"
+                                        aria-haspopup="true"
+                                        aria-expanded="false"
+                                    >
+                                        <i class="bx bx-dots-vertical-rounded bx-lg text-muted"></i>
+                                    </button>
+                                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="totalRevenue">
+                                        <a class="dropdown-item" href="javascript:void(0);">Select All</a>
+                                        <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+                                        <a class="dropdown-item" href="javascript:void(0);">Share</a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div id="totalRevenueChart" class="px-3"></div>
+                        </div>
+                        <div class="col-lg-4 d-flex align-items-center">
+                            <div class="card-body px-xl-9">
+                                <div class="text-center mb-6">
+                                    <div class="btn-group">
+                                        <button type="button" class="btn btn-label-primary">
+                                            2023
+                                            <!-- <script>
                   document.write(new Date().getFullYear() - 1)
 
                   </script> -->
-                    </button>
-                    <button
-                      type="button"
-                      class="btn btn-label-primary dropdown-toggle dropdown-toggle-split"
-                      data-bs-toggle="dropdown"
-                      aria-expanded="false"
-                    >
-                      <span class="visually-hidden">Toggle Dropdown</span>
-                    </button>
-                    <ul class="dropdown-menu">
-                      <li><a class="dropdown-item" href="javascript:void(0);">2023</a></li>
-                      <li><a class="dropdown-item" href="javascript:void(0);">2022</a></li>
-                      <li><a class="dropdown-item" href="javascript:void(0);">2021</a></li>
-                    </ul>
-                  </div>
-                </div>
+                                        </button>
+                                        <button
+                                            type="button"
+                                            class="btn btn-label-primary dropdown-toggle dropdown-toggle-split"
+                                            data-bs-toggle="dropdown"
+                                            aria-expanded="false"
+                                        >
+                                            <span class="visually-hidden">Toggle Dropdown</span>
+                                        </button>
+                                        <ul class="dropdown-menu">
+                                            <li><a class="dropdown-item" href="javascript:void(0);">2023</a></li>
+                                            <li><a class="dropdown-item" href="javascript:void(0);">2022</a></li>
+                                            <li><a class="dropdown-item" href="javascript:void(0);">2021</a></li>
+                                        </ul>
+                                    </div>
+                                </div>
 
-                <div id="growthChart"></div>
-                <div class="text-center fw-medium my-6">62% Company Growth</div>
+                                <div id="growthChart"></div>
+                                <div class="text-center fw-medium my-6">62% Company Growth</div>
 
-                <div class="d-flex gap-3 justify-content-between">
-                  <div class="d-flex">
-                    <div class="avatar me-2">
-                      <span class="avatar-initial rounded-2 bg-label-primary"
-                        ><i class="bx bx-dollar bx-lg text-primary"></i
-                      ></span>
-                    </div>
-                    <div class="d-flex flex-column">
-                      <small>
-                        2024
-                        <!-- <script>
+                                <div class="d-flex gap-3 justify-content-between">
+                                    <div class="d-flex">
+                                        <div class="avatar me-2">
+                                            <span class="avatar-initial rounded-2 bg-label-primary"
+                                                ><i class="bx bx-dollar bx-lg text-primary"></i
+                                            ></span>
+                                        </div>
+                                        <div class="d-flex flex-column">
+                                            <small>
+                                                2024
+                                                <!-- <script>
                                   document.write(new Date().getFullYear() - 1)
                                 </script> -->
-                      </small>
-                      <h6 class="mb-0">$32.5k</h6>
-                    </div>
-                  </div>
-                  <div class="d-flex">
-                    <div class="avatar me-2">
-                      <span class="avatar-initial rounded-2 bg-label-info"
-                        ><i class="bx bx-wallet bx-lg text-info"></i
-                      ></span>
-                    </div>
-                    <div class="d-flex flex-column">
-                      <small>
-                        2023
-                        <!-- <script>
+                                            </small>
+                                            <h6 class="mb-0">$32.5k</h6>
+                                        </div>
+                                    </div>
+                                    <div class="d-flex">
+                                        <div class="avatar me-2">
+                                            <span class="avatar-initial rounded-2 bg-label-info"
+                                                ><i class="bx bx-wallet bx-lg text-info"></i
+                                            ></span>
+                                        </div>
+                                        <div class="d-flex flex-column">
+                                            <small>
+                                                2023
+                                                <!-- <script>
                                   document.write(new Date().getFullYear() - 2)
                                 </script> -->
-                      </small>
-                      <h6 class="mb-0">$41.2k</h6>
+                                            </small>
+                                            <h6 class="mb-0">$41.2k</h6>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--/ Total Revenue -->
+            <div class="col-12 col-md-8 col-lg-12 col-xxl-4 order-3 order-md-2">
+                <div class="row">
+                    <div class="col-6 mb-6">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="card-title d-flex align-items-start justify-content-between mb-4">
+                                    <div class="avatar flex-shrink-0">
+                                        <img src="/img/icons/unicons/paypal.png" alt="paypal" class="rounded" />
+                                    </div>
+                                    <div class="dropdown">
+                                        <button
+                                            class="btn p-0"
+                                            type="button"
+                                            id="cardOpt4"
+                                            data-bs-toggle="dropdown"
+                                            aria-haspopup="true"
+                                            aria-expanded="false"
+                                        >
+                                            <i class="bx bx-dots-vertical-rounded text-muted"></i>
+                                        </button>
+                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt4">
+                                            <a class="dropdown-item" href="javascript:void(0);">View More</a>
+                                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <p class="mb-1">Payments</p>
+                                <h4 class="card-title mb-3">$2,456</h4>
+                                <small class="text-danger fw-medium"><i class="bx bx-down-arrow-alt"></i> -14.82%</small>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-6 mb-6">
+                        <div class="card h-100">
+                            <div class="card-body pb-0">
+                                <span class="d-block fw-medium mb-1">Revenue</span>
+                                <h4 class="card-title mb-0 mb-lg-4">425k</h4>
+                                <div id="revenueChart"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-12 mb-6">
+                        <div class="card">
+                            <div class="card-body">
+                                <div class="d-flex justify-content-between align-items-center flex-sm-row flex-column gap-10">
+                                    <div class="d-flex flex-sm-column flex-row align-items-start justify-content-between">
+                                        <div class="card-title mb-6">
+                                            <h5 class="text-nowrap mb-1">Profile Report</h5>
+                                            <span class="badge bg-label-warning">YEAR 2022</span>
+                                        </div>
+                                        <div class="mt-sm-auto">
+                                            <span class="text-success text-nowrap fw-medium"><i class="bx bx-up-arrow-alt"></i> 68.2%</span>
+                                            <h4 class="mb-0">$84,686k</h4>
+                                        </div>
+                                    </div>
+                                    <div id="profileReportChart"></div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                  </div>
                 </div>
-              </div>
             </div>
-          </div>
         </div>
-      </div>
-      <!--/ Total Revenue -->
-      <div class="col-12 col-md-8 col-lg-12 col-xxl-4 order-3 order-md-2">
         <div class="row">
-          <div class="col-6 mb-6">
-            <div class="card h-100">
-              <div class="card-body">
-                <div class="card-title d-flex align-items-start justify-content-between mb-4">
-                  <div class="avatar flex-shrink-0">
-                    <img src="/img/icons/unicons/paypal.png" alt="paypal" class="rounded" />
-                  </div>
-                  <div class="dropdown">
-                    <button
-                      class="btn p-0"
-                      type="button"
-                      id="cardOpt4"
-                      data-bs-toggle="dropdown"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                    >
-                      <i class="bx bx-dots-vertical-rounded text-muted"></i>
-                    </button>
-                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt4">
-                      <a class="dropdown-item" href="javascript:void(0);">View More</a>
-                      <a class="dropdown-item" href="javascript:void(0);">Delete</a>
-                    </div>
-                  </div>
-                </div>
-                <p class="mb-1">Payments</p>
-                <h4 class="card-title mb-3">$2,456</h4>
-                <small class="text-danger fw-medium"
-                  ><i class="bx bx-down-arrow-alt"></i> -14.82%</small
-                >
-              </div>
-            </div>
-          </div>
-          <div class="col-6 mb-6">
-            <div class="card h-100">
-              <div class="card-body pb-0">
-                <span class="d-block fw-medium mb-1">Revenue</span>
-                <h4 class="card-title mb-0 mb-lg-4">425k</h4>
-                <div id="revenueChart"></div>
-              </div>
-            </div>
-          </div>
-          <div class="col-12 mb-6">
-            <div class="card">
-              <div class="card-body">
-                <div
-                  class="d-flex justify-content-between align-items-center flex-sm-row flex-column gap-10"
-                >
-                  <div
-                    class="d-flex flex-sm-column flex-row align-items-start justify-content-between"
-                  >
-                    <div class="card-title mb-6">
-                      <h5 class="text-nowrap mb-1">Profile Report</h5>
-                      <span class="badge bg-label-warning">YEAR 2022</span>
-                    </div>
-                    <div class="mt-sm-auto">
-                      <span class="text-success text-nowrap fw-medium"
-                        ><i class="bx bx-up-arrow-alt"></i> 68.2%</span
-                      >
-                      <h4 class="mb-0">$84,686k</h4>
-                    </div>
-                  </div>
-                  <div id="profileReportChart"></div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="row">
-      <!-- Order Statistics -->
-      <div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-6">
-        <div class="card h-100">
-          <div class="card-header d-flex justify-content-between">
-            <div class="card-title mb-0">
-              <h5 class="mb-1 me-2">Order Statistics</h5>
-              <p class="card-subtitle">42.82k Total Sales</p>
-            </div>
-            <div class="dropdown">
-              <button
-                class="btn text-muted p-0"
-                type="button"
-                id="orederStatistics"
-                data-bs-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="false"
-              >
-                <i class="bx bx-dots-vertical-rounded bx-lg"></i>
-              </button>
-              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="orederStatistics">
-                <a class="dropdown-item" href="javascript:void(0);">Select All</a>
-                <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
-                <a class="dropdown-item" href="javascript:void(0);">Share</a>
-              </div>
-            </div>
-          </div>
-          <div class="card-body">
-            <div class="d-flex justify-content-between align-items-center mb-6">
-              <div class="d-flex flex-column align-items-center gap-1">
-                <h3 class="mb-1">8,258</h3>
-                <small>Total Orders</small>
-              </div>
-              <div id="orderStatisticsChart"></div>
-            </div>
-            <ul class="p-0 m-0">
-              <li class="d-flex align-items-center mb-5">
-                <div class="avatar flex-shrink-0 me-3">
-                  <span class="avatar-initial rounded bg-label-primary"
-                    ><i class="bx bx-mobile-alt"></i
-                  ></span>
-                </div>
-                <div
-                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                >
-                  <div class="me-2">
-                    <h6 class="mb-0">Electronic</h6>
-                    <small>Mobile, Earbuds, TV</small>
-                  </div>
-                  <div class="user-progress">
-                    <h6 class="mb-0">82.5k</h6>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center mb-5">
-                <div class="avatar flex-shrink-0 me-3">
-                  <span class="avatar-initial rounded bg-label-success"
-                    ><i class="bx bx-closet"></i
-                  ></span>
-                </div>
-                <div
-                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                >
-                  <div class="me-2">
-                    <h6 class="mb-0">Fashion</h6>
-                    <small>T-shirt, Jeans, Shoes</small>
-                  </div>
-                  <div class="user-progress">
-                    <h6 class="mb-0">23.8k</h6>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center mb-5">
-                <div class="avatar flex-shrink-0 me-3">
-                  <span class="avatar-initial rounded bg-label-info"
-                    ><i class="bx bx-home-alt"></i
-                  ></span>
-                </div>
-                <div
-                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                >
-                  <div class="me-2">
-                    <h6 class="mb-0">Decor</h6>
-                    <small>Fine Art, Dining</small>
-                  </div>
-                  <div class="user-progress">
-                    <h6 class="mb-0">849k</h6>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center">
-                <div class="avatar flex-shrink-0 me-3">
-                  <span class="avatar-initial rounded bg-label-secondary"
-                    ><i class="bx bx-football"></i
-                  ></span>
-                </div>
-                <div
-                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                >
-                  <div class="me-2">
-                    <h6 class="mb-0">Sports</h6>
-                    <small>Football, Cricket Kit</small>
-                  </div>
-                  <div class="user-progress">
-                    <h6 class="mb-0">99</h6>
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <!--/ Order Statistics -->
-
-      <!-- Expense Overview -->
-      <div class="col-md-6 col-lg-4 order-1 mb-6">
-        <div class="card h-100">
-          <div class="card-header nav-align-top">
-            <ul class="nav nav-pills" role="tablist">
-              <li class="nav-item">
-                <button
-                  type="button"
-                  class="nav-link active"
-                  role="tab"
-                  data-bs-toggle="tab"
-                  data-bs-target="#navs-tabs-line-card-income"
-                  aria-controls="navs-tabs-line-card-income"
-                  aria-selected="true"
-                >
-                  Income
-                </button>
-              </li>
-              <li class="nav-item">
-                <button type="button" class="nav-link" role="tab">Expenses</button>
-              </li>
-              <li class="nav-item">
-                <button type="button" class="nav-link" role="tab">Profit</button>
-              </li>
-            </ul>
-          </div>
-          <div class="card-body">
-            <div class="tab-content p-0">
-              <div
-                class="tab-pane fade show active"
-                id="navs-tabs-line-card-income"
-                role="tabpanel"
-              >
-                <div class="d-flex mb-6">
-                  <div class="avatar flex-shrink-0 me-3">
-                    <img src="/img/icons/unicons/wallet-primary.png" alt="User" />
-                  </div>
-                  <div>
-                    <p class="mb-0">Total Balance</p>
-                    <div class="d-flex align-items-center">
-                      <h6 class="mb-0 me-1">$459.10</h6>
-                      <small class="text-success fw-medium">
-                        <i class="bx bx-chevron-up bx-lg"></i>
-                        42.9%
-                      </small>
-                    </div>
-                  </div>
-                </div>
-                <div id="incomeChart"></div>
-                <div class="d-flex align-items-center justify-content-center mt-6 gap-3">
-                  <div class="flex-shrink-0">
-                    <div id="expensesOfWeek"></div>
-                  </div>
-                  <div>
-                    <h6 class="mb-0">Income this week</h6>
-                    <small>$39k less than last week</small>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!--/ Expense Overview -->
-
-      <!-- Transactions -->
-      <div class="col-md-6 col-lg-4 order-2 mb-6">
-        <div class="card h-100">
-          <div class="card-header d-flex align-items-center justify-content-between">
-            <h5 class="card-title m-0 me-2">Transactions</h5>
-            <div class="dropdown">
-              <button
-                class="btn text-muted p-0"
-                type="button"
-                id="transactionID"
-                data-bs-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="false"
-              >
-                <i class="bx bx-dots-vertical-rounded bx-lg"></i>
-              </button>
-              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="transactionID">
-                <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
-                <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
-                <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
-              </div>
-            </div>
-          </div>
-          <div class="card-body pt-4">
-            <ul class="p-0 m-0">
-              <li class="d-flex align-items-center mb-6">
-                <div class="avatar flex-shrink-0 me-3">
-                  <img src="/img/icons/unicons/paypal.png" alt="User" class="rounded" />
-                </div>
-                <div
-                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                >
-                  <div class="me-2">
-                    <small class="d-block">Paypal</small>
-                    <h6 class="fw-normal mb-0">Send money</h6>
-                  </div>
-                  <div class="user-progress d-flex align-items-center gap-2">
-                    <h6 class="fw-normal mb-0">+82.6</h6>
-                    <span class="text-muted">USD</span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center mb-6">
-                <div class="avatar flex-shrink-0 me-3">
-                  <img src="/img/icons/unicons/wallet.png" alt="User" class="rounded" />
-                </div>
-                <div
-                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                >
-                  <div class="me-2">
-                    <small class="d-block">Wallet</small>
-                    <h6 class="fw-normal mb-0">Mac'D</h6>
-                  </div>
-                  <div class="user-progress d-flex align-items-center gap-2">
-                    <h6 class="fw-normal mb-0">+270.69</h6>
-                    <span class="text-muted">USD</span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center mb-6">
-                <div class="avatar flex-shrink-0 me-3">
-                  <img src="/img/icons/unicons/chart.png" alt="User" class="rounded" />
-                </div>
-                <div
-                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                >
-                  <div class="me-2">
-                    <small class="d-block">Transfer</small>
-                    <h6 class="fw-normal mb-0">Refund</h6>
-                  </div>
-                  <div class="user-progress d-flex align-items-center gap-2">
-                    <h6 class="fw-normal mb-0">+637.91</h6>
-                    <span class="text-muted">USD</span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center mb-6">
-                <div class="avatar flex-shrink-0 me-3">
-                  <img src="/img/icons/unicons/cc-primary.png" alt="User" class="rounded" />
-                </div>
-                <div
-                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                >
-                  <div class="me-2">
-                    <small class="d-block">Credit Card</small>
-                    <h6 class="fw-normal mb-0">Ordered Food</h6>
-                  </div>
-                  <div class="user-progress d-flex align-items-center gap-2">
-                    <h6 class="fw-normal mb-0">-838.71</h6>
-                    <span class="text-muted">USD</span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center mb-6">
-                <div class="avatar flex-shrink-0 me-3">
-                  <img src="/img/icons/unicons/wallet.png" alt="User" class="rounded" />
-                </div>
-                <div
-                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                >
-                  <div class="me-2">
-                    <small class="d-block">Wallet</small>
-                    <h6 class="fw-normal mb-0">Starbucks</h6>
-                  </div>
-                  <div class="user-progress d-flex align-items-center gap-2">
-                    <h6 class="fw-normal mb-0">+203.33</h6>
-                    <span class="text-muted">USD</span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center">
-                <div class="avatar flex-shrink-0 me-3">
-                  <img src="/img/icons/unicons/cc-warning.png" alt="User" class="rounded" />
-                </div>
-                <div
-                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                >
-                  <div class="me-2">
-                    <small class="d-block">Mastercard</small>
-                    <h6 class="fw-normal mb-0">Ordered Food</h6>
-                  </div>
-                  <div class="user-progress d-flex align-items-center gap-2">
-                    <h6 class="fw-normal mb-0">-92.45</h6>
-                    <span class="text-muted">USD</span>
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <!--/ Transactions -->
-      <!-- Activity Timeline -->
-      <div class="col-md-12 col-lg-6 order-4 order-lg-3">
-        <div class="card h-100">
-          <div class="card-header d-flex justify-content-between">
-            <h5 class="card-title m-0 me-2">Activity Timeline</h5>
-            <div class="dropdown">
-              <button
-                class="btn text-muted p-0"
-                type="button"
-                id="timelineWapper"
-                data-bs-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="false"
-              >
-                <i class="bx bx-dots-vertical-rounded bx-lg"></i>
-              </button>
-              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="timelineWapper">
-                <a class="dropdown-item" href="javascript:void(0);">Select All</a>
-                <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
-                <a class="dropdown-item" href="javascript:void(0);">Share</a>
-              </div>
-            </div>
-          </div>
-          <div class="card-body pt-2">
-            <ul class="timeline mb-0">
-              <li class="timeline-item timeline-item-transparent">
-                <span class="timeline-point timeline-point-primary"></span>
-                <div class="timeline-event">
-                  <div class="timeline-header mb-3">
-                    <h6 class="mb-0">12 Invoices have been paid</h6>
-                    <small class="text-muted">12 min ago</small>
-                  </div>
-                  <p class="mb-2">Invoices have been paid to the company</p>
-                  <div class="d-flex align-items-center mb-1">
-                    <div class="badge bg-lighter rounded-2">
-                      <img src="/img/icons/misc/pdf.png" alt="img" width="15" class="me-2" />
-                      <span class="h6 mb-0 text-body">invoices.pdf</span>
-                    </div>
-                  </div>
-                </div>
-              </li>
-              <li class="timeline-item timeline-item-transparent">
-                <span class="timeline-point timeline-point-success"></span>
-                <div class="timeline-event">
-                  <div class="timeline-header mb-3">
-                    <h6 class="mb-0">Client Meeting</h6>
-                    <small class="text-muted">45 min ago</small>
-                  </div>
-                  <p class="mb-2">Project meeting with john @10:15am</p>
-                  <div class="d-flex justify-content-between flex-wrap gap-2">
-                    <div class="d-flex flex-wrap align-items-center">
-                      <div class="avatar avatar-sm me-2">
-                        <img src="/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
-                      </div>
-                      <div>
-                        <p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
-                        <small>CEO of ThemeSelection</small>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </li>
-              <li class="timeline-item timeline-item-transparent">
-                <span class="timeline-point timeline-point-info"></span>
-                <div class="timeline-event">
-                  <div class="timeline-header mb-3">
-                    <h6 class="mb-0">Create a new project for client</h6>
-                    <small class="text-muted">2 Day Ago</small>
-                  </div>
-                  <p class="mb-2">6 team members in a project</p>
-                  <ul class="list-group list-group-flush">
-                    <li
-                      class="list-group-item d-flex justify-content-between align-items-center flex-wrap p-0"
-                    >
-                      <div class="d-flex flex-wrap align-items-center">
-                        <ul
-                          class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2"
-                        >
-                          <li
-                            data-bs-toggle="tooltip"
-                            data-popup="tooltip-custom"
-                            data-bs-placement="top"
-                            title="Vinnie Mostowy"
-                            class="avatar pull-up"
-                          >
-                            <img class="rounded-circle" src="/img/avatars/5.png" alt="Avatar" />
-                          </li>
-                          <li
-                            data-bs-toggle="tooltip"
-                            data-popup="tooltip-custom"
-                            data-bs-placement="top"
-                            title="Allen Rieske"
-                            class="avatar pull-up"
-                          >
-                            <img class="rounded-circle" src="/img/avatars/12.png" alt="Avatar" />
-                          </li>
-                          <li
-                            data-bs-toggle="tooltip"
-                            data-popup="tooltip-custom"
-                            data-bs-placement="top"
-                            title="Julee Rossignol"
-                            class="avatar pull-up"
-                          >
-                            <img class="rounded-circle" src="/img/avatars/6.png" alt="Avatar" />
-                          </li>
-                          <li class="avatar">
-                            <span
-                              class="avatar-initial rounded-circle pull-up text-heading"
-                              data-bs-toggle="tooltip"
-                              data-bs-placement="bottom"
-                              title="3 more"
-                              >+3</span
+            <!-- Order Statistics -->
+            <div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-6">
+                <div class="card h-100">
+                    <div class="card-header d-flex justify-content-between">
+                        <div class="card-title mb-0">
+                            <h5 class="mb-1 me-2">Order Statistics</h5>
+                            <p class="card-subtitle">42.82k Total Sales</p>
+                        </div>
+                        <div class="dropdown">
+                            <button
+                                class="btn text-muted p-0"
+                                type="button"
+                                id="orederStatistics"
+                                data-bs-toggle="dropdown"
+                                aria-haspopup="true"
+                                aria-expanded="false"
                             >
-                          </li>
+                                <i class="bx bx-dots-vertical-rounded bx-lg"></i>
+                            </button>
+                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="orederStatistics">
+                                <a class="dropdown-item" href="javascript:void(0);">Select All</a>
+                                <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+                                <a class="dropdown-item" href="javascript:void(0);">Share</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <div class="d-flex justify-content-between align-items-center mb-6">
+                            <div class="d-flex flex-column align-items-center gap-1">
+                                <h3 class="mb-1">8,258</h3>
+                                <small>Total Orders</small>
+                            </div>
+                            <div id="orderStatisticsChart"></div>
+                        </div>
+                        <ul class="p-0 m-0">
+                            <li class="d-flex align-items-center mb-5">
+                                <div class="avatar flex-shrink-0 me-3">
+                                    <span class="avatar-initial rounded bg-label-primary"><i class="bx bx-mobile-alt"></i></span>
+                                </div>
+                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="me-2">
+                                        <h6 class="mb-0">Electronic</h6>
+                                        <small>Mobile, Earbuds, TV</small>
+                                    </div>
+                                    <div class="user-progress">
+                                        <h6 class="mb-0">82.5k</h6>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="d-flex align-items-center mb-5">
+                                <div class="avatar flex-shrink-0 me-3">
+                                    <span class="avatar-initial rounded bg-label-success"><i class="bx bx-closet"></i></span>
+                                </div>
+                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="me-2">
+                                        <h6 class="mb-0">Fashion</h6>
+                                        <small>T-shirt, Jeans, Shoes</small>
+                                    </div>
+                                    <div class="user-progress">
+                                        <h6 class="mb-0">23.8k</h6>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="d-flex align-items-center mb-5">
+                                <div class="avatar flex-shrink-0 me-3">
+                                    <span class="avatar-initial rounded bg-label-info"><i class="bx bx-home-alt"></i></span>
+                                </div>
+                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="me-2">
+                                        <h6 class="mb-0">Decor</h6>
+                                        <small>Fine Art, Dining</small>
+                                    </div>
+                                    <div class="user-progress">
+                                        <h6 class="mb-0">849k</h6>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="d-flex align-items-center">
+                                <div class="avatar flex-shrink-0 me-3">
+                                    <span class="avatar-initial rounded bg-label-secondary"><i class="bx bx-football"></i></span>
+                                </div>
+                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="me-2">
+                                        <h6 class="mb-0">Sports</h6>
+                                        <small>Football, Cricket Kit</small>
+                                    </div>
+                                    <div class="user-progress">
+                                        <h6 class="mb-0">99</h6>
+                                    </div>
+                                </div>
+                            </li>
                         </ul>
-                      </div>
-                    </li>
-                  </ul>
+                    </div>
                 </div>
-              </li>
-            </ul>
-          </div>
+            </div>
+            <!--/ Order Statistics -->
+
+            <!-- Expense Overview -->
+            <div class="col-md-6 col-lg-4 order-1 mb-6">
+                <div class="card h-100">
+                    <div class="card-header nav-align-top">
+                        <ul class="nav nav-pills" role="tablist">
+                            <li class="nav-item">
+                                <button
+                                    type="button"
+                                    class="nav-link active"
+                                    role="tab"
+                                    data-bs-toggle="tab"
+                                    data-bs-target="#navs-tabs-line-card-income"
+                                    aria-controls="navs-tabs-line-card-income"
+                                    aria-selected="true"
+                                >
+                                    Income
+                                </button>
+                            </li>
+                            <li class="nav-item">
+                                <button type="button" class="nav-link" role="tab">Expenses</button>
+                            </li>
+                            <li class="nav-item">
+                                <button type="button" class="nav-link" role="tab">Profit</button>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="card-body">
+                        <div class="tab-content p-0">
+                            <div class="tab-pane fade show active" id="navs-tabs-line-card-income" role="tabpanel">
+                                <div class="d-flex mb-6">
+                                    <div class="avatar flex-shrink-0 me-3">
+                                        <img src="/img/icons/unicons/wallet-primary.png" alt="User" />
+                                    </div>
+                                    <div>
+                                        <p class="mb-0">Total Balance</p>
+                                        <div class="d-flex align-items-center">
+                                            <h6 class="mb-0 me-1">$459.10</h6>
+                                            <small class="text-success fw-medium">
+                                                <i class="bx bx-chevron-up bx-lg"></i>
+                                                42.9%
+                                            </small>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div id="incomeChart"></div>
+                                <div class="d-flex align-items-center justify-content-center mt-6 gap-3">
+                                    <div class="flex-shrink-0">
+                                        <div id="expensesOfWeek"></div>
+                                    </div>
+                                    <div>
+                                        <h6 class="mb-0">Income this week</h6>
+                                        <small>$39k less than last week</small>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--/ Expense Overview -->
+
+            <!-- Transactions -->
+            <div class="col-md-6 col-lg-4 order-2 mb-6">
+                <div class="card h-100">
+                    <div class="card-header d-flex align-items-center justify-content-between">
+                        <h5 class="card-title m-0 me-2">Transactions</h5>
+                        <div class="dropdown">
+                            <button
+                                class="btn text-muted p-0"
+                                type="button"
+                                id="transactionID"
+                                data-bs-toggle="dropdown"
+                                aria-haspopup="true"
+                                aria-expanded="false"
+                            >
+                                <i class="bx bx-dots-vertical-rounded bx-lg"></i>
+                            </button>
+                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="transactionID">
+                                <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
+                                <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
+                                <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-body pt-4">
+                        <ul class="p-0 m-0">
+                            <li class="d-flex align-items-center mb-6">
+                                <div class="avatar flex-shrink-0 me-3">
+                                    <img src="/img/icons/unicons/paypal.png" alt="User" class="rounded" />
+                                </div>
+                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="me-2">
+                                        <small class="d-block">Paypal</small>
+                                        <h6 class="fw-normal mb-0">Send money</h6>
+                                    </div>
+                                    <div class="user-progress d-flex align-items-center gap-2">
+                                        <h6 class="fw-normal mb-0">+82.6</h6>
+                                        <span class="text-muted">USD</span>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="d-flex align-items-center mb-6">
+                                <div class="avatar flex-shrink-0 me-3">
+                                    <img src="/img/icons/unicons/wallet.png" alt="User" class="rounded" />
+                                </div>
+                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="me-2">
+                                        <small class="d-block">Wallet</small>
+                                        <h6 class="fw-normal mb-0">Mac'D</h6>
+                                    </div>
+                                    <div class="user-progress d-flex align-items-center gap-2">
+                                        <h6 class="fw-normal mb-0">+270.69</h6>
+                                        <span class="text-muted">USD</span>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="d-flex align-items-center mb-6">
+                                <div class="avatar flex-shrink-0 me-3">
+                                    <img src="/img/icons/unicons/chart.png" alt="User" class="rounded" />
+                                </div>
+                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="me-2">
+                                        <small class="d-block">Transfer</small>
+                                        <h6 class="fw-normal mb-0">Refund</h6>
+                                    </div>
+                                    <div class="user-progress d-flex align-items-center gap-2">
+                                        <h6 class="fw-normal mb-0">+637.91</h6>
+                                        <span class="text-muted">USD</span>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="d-flex align-items-center mb-6">
+                                <div class="avatar flex-shrink-0 me-3">
+                                    <img src="/img/icons/unicons/cc-primary.png" alt="User" class="rounded" />
+                                </div>
+                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="me-2">
+                                        <small class="d-block">Credit Card</small>
+                                        <h6 class="fw-normal mb-0">Ordered Food</h6>
+                                    </div>
+                                    <div class="user-progress d-flex align-items-center gap-2">
+                                        <h6 class="fw-normal mb-0">-838.71</h6>
+                                        <span class="text-muted">USD</span>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="d-flex align-items-center mb-6">
+                                <div class="avatar flex-shrink-0 me-3">
+                                    <img src="/img/icons/unicons/wallet.png" alt="User" class="rounded" />
+                                </div>
+                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="me-2">
+                                        <small class="d-block">Wallet</small>
+                                        <h6 class="fw-normal mb-0">Starbucks</h6>
+                                    </div>
+                                    <div class="user-progress d-flex align-items-center gap-2">
+                                        <h6 class="fw-normal mb-0">+203.33</h6>
+                                        <span class="text-muted">USD</span>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="d-flex align-items-center">
+                                <div class="avatar flex-shrink-0 me-3">
+                                    <img src="/img/icons/unicons/cc-warning.png" alt="User" class="rounded" />
+                                </div>
+                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+                                    <div class="me-2">
+                                        <small class="d-block">Mastercard</small>
+                                        <h6 class="fw-normal mb-0">Ordered Food</h6>
+                                    </div>
+                                    <div class="user-progress d-flex align-items-center gap-2">
+                                        <h6 class="fw-normal mb-0">-92.45</h6>
+                                        <span class="text-muted">USD</span>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <!--/ Transactions -->
+            <!-- Activity Timeline -->
+            <div class="col-md-12 col-lg-6 order-4 order-lg-3">
+                <div class="card h-100">
+                    <div class="card-header d-flex justify-content-between">
+                        <h5 class="card-title m-0 me-2">Activity Timeline</h5>
+                        <div class="dropdown">
+                            <button
+                                class="btn text-muted p-0"
+                                type="button"
+                                id="timelineWapper"
+                                data-bs-toggle="dropdown"
+                                aria-haspopup="true"
+                                aria-expanded="false"
+                            >
+                                <i class="bx bx-dots-vertical-rounded bx-lg"></i>
+                            </button>
+                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="timelineWapper">
+                                <a class="dropdown-item" href="javascript:void(0);">Select All</a>
+                                <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+                                <a class="dropdown-item" href="javascript:void(0);">Share</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-body pt-2">
+                        <ul class="timeline mb-0">
+                            <li class="timeline-item timeline-item-transparent">
+                                <span class="timeline-point timeline-point-primary"></span>
+                                <div class="timeline-event">
+                                    <div class="timeline-header mb-3">
+                                        <h6 class="mb-0">12 Invoices have been paid</h6>
+                                        <small class="text-muted">12 min ago</small>
+                                    </div>
+                                    <p class="mb-2">Invoices have been paid to the company</p>
+                                    <div class="d-flex align-items-center mb-1">
+                                        <div class="badge bg-lighter rounded-2">
+                                            <img src="/img/icons/misc/pdf.png" alt="img" width="15" class="me-2" />
+                                            <span class="h6 mb-0 text-body">invoices.pdf</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="timeline-item timeline-item-transparent">
+                                <span class="timeline-point timeline-point-success"></span>
+                                <div class="timeline-event">
+                                    <div class="timeline-header mb-3">
+                                        <h6 class="mb-0">Client Meeting</h6>
+                                        <small class="text-muted">45 min ago</small>
+                                    </div>
+                                    <p class="mb-2">Project meeting with john @10:15am</p>
+                                    <div class="d-flex justify-content-between flex-wrap gap-2">
+                                        <div class="d-flex flex-wrap align-items-center">
+                                            <div class="avatar avatar-sm me-2">
+                                                <img src="/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
+                                            </div>
+                                            <div>
+                                                <p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
+                                                <small>CEO of ThemeSelection</small>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li>
+                            <li class="timeline-item timeline-item-transparent">
+                                <span class="timeline-point timeline-point-info"></span>
+                                <div class="timeline-event">
+                                    <div class="timeline-header mb-3">
+                                        <h6 class="mb-0">Create a new project for client</h6>
+                                        <small class="text-muted">2 Day Ago</small>
+                                    </div>
+                                    <p class="mb-2">6 team members in a project</p>
+                                    <ul class="list-group list-group-flush">
+                                        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap p-0">
+                                            <div class="d-flex flex-wrap align-items-center">
+                                                <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
+                                                    <li
+                                                        data-bs-toggle="tooltip"
+                                                        data-popup="tooltip-custom"
+                                                        data-bs-placement="top"
+                                                        title="Vinnie Mostowy"
+                                                        class="avatar pull-up"
+                                                    >
+                                                        <img class="rounded-circle" src="/img/avatars/5.png" alt="Avatar" />
+                                                    </li>
+                                                    <li
+                                                        data-bs-toggle="tooltip"
+                                                        data-popup="tooltip-custom"
+                                                        data-bs-placement="top"
+                                                        title="Allen Rieske"
+                                                        class="avatar pull-up"
+                                                    >
+                                                        <img class="rounded-circle" src="/img/avatars/12.png" alt="Avatar" />
+                                                    </li>
+                                                    <li
+                                                        data-bs-toggle="tooltip"
+                                                        data-popup="tooltip-custom"
+                                                        data-bs-placement="top"
+                                                        title="Julee Rossignol"
+                                                        class="avatar pull-up"
+                                                    >
+                                                        <img class="rounded-circle" src="/img/avatars/6.png" alt="Avatar" />
+                                                    </li>
+                                                    <li class="avatar">
+                                                        <span
+                                                            class="avatar-initial rounded-circle pull-up text-heading"
+                                                            data-bs-toggle="tooltip"
+                                                            data-bs-placement="bottom"
+                                                            title="3 more"
+                                                            >+3</span
+                                                        >
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <!--/ Activity Timeline -->
+            <!-- pill table -->
+            <div class="col-md-6 order-3 order-lg-4 mb-6 mb-lg-0">
+                <div class="card text-center h-100">
+                    <div class="card-header nav-align-top">
+                        <ul class="nav nav-pills" role="tablist">
+                            <li class="nav-item">
+                                <button
+                                    type="button"
+                                    class="nav-link active"
+                                    role="tab"
+                                    data-bs-toggle="tab"
+                                    data-bs-target="#navs-pills-browser"
+                                    aria-controls="navs-pills-browser"
+                                    aria-selected="true"
+                                >
+                                    Browser
+                                </button>
+                            </li>
+                            <li class="nav-item">
+                                <button
+                                    type="button"
+                                    class="nav-link"
+                                    role="tab"
+                                    data-bs-toggle="tab"
+                                    data-bs-target="#navs-pills-os"
+                                    aria-controls="navs-pills-os"
+                                    aria-selected="false"
+                                >
+                                    Operating System
+                                </button>
+                            </li>
+                            <li class="nav-item">
+                                <button
+                                    type="button"
+                                    class="nav-link"
+                                    role="tab"
+                                    data-bs-toggle="tab"
+                                    data-bs-target="#navs-pills-country"
+                                    aria-controls="navs-pills-country"
+                                    aria-selected="false"
+                                >
+                                    Country
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="tab-content pt-0 pb-4">
+                        <div class="tab-pane fade show active" id="navs-pills-browser" role="tabpanel">
+                            <div class="table-responsive text-start text-nowrap">
+                                <table class="table table-borderless">
+                                    <thead>
+                                        <tr>
+                                            <th>No</th>
+                                            <th>Browser</th>
+                                            <th>Visits</th>
+                                            <th class="w-50">Data In Percentage</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td>1</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <img src="/img/icons/brands/chrome.png" alt="Chrome" height="24" class="me-3" />
+                                                    <span class="text-heading">Chrome</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">8.92k</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-success"
+                                                            role="progressbar"
+                                                            style="width: 64.75%"
+                                                            aria-valuenow="64.75"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">64.75%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>2</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <img src="/img/icons/brands/safari.png" alt="Safari" height="24" class="me-3" />
+                                                    <span class="text-heading">Safari</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">1.29k</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-primary"
+                                                            role="progressbar"
+                                                            style="width: 18.43%"
+                                                            aria-valuenow="18.43"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">18.43%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>3</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <img src="/img/icons/brands/firefox.png" alt="Firefox" height="24" class="me-3" />
+                                                    <span class="text-heading">Firefox</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">328</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-info"
+                                                            role="progressbar"
+                                                            style="width: 8.37%"
+                                                            aria-valuenow="8.37"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">8.37%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>4</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <img src="/img/icons/brands/edge.png" alt="Edge" height="24" class="me-3" />
+                                                    <span class="text-heading">Edge</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">142</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-warning"
+                                                            role="progressbar"
+                                                            style="width: 6.12%"
+                                                            aria-valuenow="6.12"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">6.12%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>5</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <img src="/img/icons/brands/opera.png" alt="Opera" height="24" class="me-3" />
+                                                    <span class="text-heading">Opera</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">82</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-danger"
+                                                            role="progressbar"
+                                                            style="width: 2.12%"
+                                                            aria-valuenow="1.94"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">2.12%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>6</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <img src="/img/icons/brands/uc.png" alt="uc" height="24" class="me-3" />
+                                                    <span class="text-heading">UC Browser</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">328</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-danger"
+                                                            role="progressbar"
+                                                            style="width: 20.14%"
+                                                            aria-valuenow="1.94"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">20.14%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                        <div class="tab-pane fade" id="navs-pills-os" role="tabpanel">
+                            <div class="table-responsive text-start text-nowrap">
+                                <table class="table table-borderless">
+                                    <thead>
+                                        <tr>
+                                            <th>No</th>
+                                            <th>System</th>
+                                            <th>Visits</th>
+                                            <th class="w-50">Data In Percentage</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td>1</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <img src="/img/icons/brands/windows.png" alt="Windows" height="24" class="me-3" />
+                                                    <span class="text-heading">Windows</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">875.24k</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-success"
+                                                            role="progressbar"
+                                                            style="width: 61.5%"
+                                                            aria-valuenow="61.50"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">61.50%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>2</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <img src="/img/icons/brands/mac.png" alt="Mac" height="24" class="me-3" />
+                                                    <span class="text-heading">Mac</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">89.68k</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-primary"
+                                                            role="progressbar"
+                                                            style="width: 16.67%"
+                                                            aria-valuenow="16.67"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">16.67%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>3</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <img src="/img/icons/brands/ubuntu.png" alt="Ubuntu" height="24" class="me-3" />
+                                                    <span class="text-heading">Ubuntu</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">37.68k</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-info"
+                                                            role="progressbar"
+                                                            style="width: 12.82%"
+                                                            aria-valuenow="12.82"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">12.82%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>4</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <img src="/img/icons/brands/chrome.png" alt="Chrome" height="24" class="me-3" />
+                                                    <span class="text-heading">Chrome</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">8.34k</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-warning"
+                                                            role="progressbar"
+                                                            style="width: 6.25%"
+                                                            aria-valuenow="6.25"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">6.25%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>5</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <img src="/img/icons/brands/cent.png" alt="Cent" height="24" class="me-3" />
+                                                    <span class="text-heading">Cent</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">2.25k</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-danger"
+                                                            role="progressbar"
+                                                            style="width: 2.76%"
+                                                            aria-valuenow="2.76"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">2.76%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>6</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <img src="/img/icons/brands/linux.png" alt="linux" height="24" class="me-3" />
+                                                    <span class="text-heading">Linux</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">328k</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-danger"
+                                                            role="progressbar"
+                                                            style="width: 20.14%"
+                                                            aria-valuenow="2.76"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">20.14%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                        <div class="tab-pane fade" id="navs-pills-country" role="tabpanel">
+                            <div class="table-responsive text-start text-nowrap">
+                                <table class="table table-borderless">
+                                    <thead>
+                                        <tr>
+                                            <th>No</th>
+                                            <th>Country</th>
+                                            <th>Visits</th>
+                                            <th class="w-50">Data In Percentage</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td>1</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <i class="fis fi fi-us rounded-circle fs-4 me-3"></i>
+                                                    <span class="text-heading">USA</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">87.24k</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-success"
+                                                            role="progressbar"
+                                                            style="width: 38.12%"
+                                                            aria-valuenow="38.12"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">38.12%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>2</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <i class="fis fi fi-br rounded-circle fs-4 me-3"></i>
+                                                    <span class="text-heading">Brazil</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">42.68k</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-primary"
+                                                            role="progressbar"
+                                                            style="width: 28.23%"
+                                                            aria-valuenow="28.23"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">28.23%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>3</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <i class="fis fi fi-in rounded-circle fs-4 me-3"></i>
+                                                    <span class="text-heading">India</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">12.58k</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-info"
+                                                            role="progressbar"
+                                                            style="width: 14.82%"
+                                                            aria-valuenow="14.82"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">14.82%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>4</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <i class="fis fi fi-au rounded-circle fs-4 me-3"></i>
+                                                    <span class="text-heading">Australia</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">4.13k</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-warning"
+                                                            role="progressbar"
+                                                            style="width: 12.72%"
+                                                            aria-valuenow="12.72"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">12.72%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>5</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <i class="fis fi fi-fr rounded-circle fs-4 me-3"></i>
+                                                    <span class="text-heading">France</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">2.21k</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-danger"
+                                                            role="progressbar"
+                                                            style="width: 7.11%"
+                                                            aria-valuenow="7.11"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">7.11%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>6</td>
+                                            <td>
+                                                <div class="d-flex align-items-center">
+                                                    <i class="fis fi fi-ca rounded-circle fs-4 me-3"></i>
+                                                    <span class="text-heading">Canada</span>
+                                                </div>
+                                            </td>
+                                            <td class="text-heading">22.35k</td>
+                                            <td>
+                                                <div class="d-flex justify-content-between align-items-center gap-4">
+                                                    <div class="progress w-100" style="height: 10px">
+                                                        <div
+                                                            class="progress-bar bg-danger"
+                                                            role="progressbar"
+                                                            style="width: 15.13%"
+                                                            aria-valuenow="7.11"
+                                                            aria-valuemin="0"
+                                                            aria-valuemax="100"
+                                                        ></div>
+                                                    </div>
+                                                    <small class="fw-medium">15.13%</small>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--/ pill table -->
         </div>
-      </div>
-      <!--/ Activity Timeline -->
-      <!-- pill table -->
-      <div class="col-md-6 order-3 order-lg-4 mb-6 mb-lg-0">
-        <div class="card text-center h-100">
-          <div class="card-header nav-align-top">
-            <ul class="nav nav-pills" role="tablist">
-              <li class="nav-item">
-                <button
-                  type="button"
-                  class="nav-link active"
-                  role="tab"
-                  data-bs-toggle="tab"
-                  data-bs-target="#navs-pills-browser"
-                  aria-controls="navs-pills-browser"
-                  aria-selected="true"
-                >
-                  Browser
-                </button>
-              </li>
-              <li class="nav-item">
-                <button
-                  type="button"
-                  class="nav-link"
-                  role="tab"
-                  data-bs-toggle="tab"
-                  data-bs-target="#navs-pills-os"
-                  aria-controls="navs-pills-os"
-                  aria-selected="false"
-                >
-                  Operating System
-                </button>
-              </li>
-              <li class="nav-item">
-                <button
-                  type="button"
-                  class="nav-link"
-                  role="tab"
-                  data-bs-toggle="tab"
-                  data-bs-target="#navs-pills-country"
-                  aria-controls="navs-pills-country"
-                  aria-selected="false"
-                >
-                  Country
-                </button>
-              </li>
-            </ul>
-          </div>
-          <div class="tab-content pt-0 pb-4">
-            <div class="tab-pane fade show active" id="navs-pills-browser" role="tabpanel">
-              <div class="table-responsive text-start text-nowrap">
-                <table class="table table-borderless">
-                  <thead>
-                    <tr>
-                      <th>No</th>
-                      <th>Browser</th>
-                      <th>Visits</th>
-                      <th class="w-50">Data In Percentage</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>1</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <img
-                            src="/img/icons/brands/chrome.png"
-                            alt="Chrome"
-                            height="24"
-                            class="me-3"
-                          />
-                          <span class="text-heading">Chrome</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">8.92k</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-success"
-                              role="progressbar"
-                              style="width: 64.75%"
-                              aria-valuenow="64.75"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">64.75%</small>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>2</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <img
-                            src="/img/icons/brands/safari.png"
-                            alt="Safari"
-                            height="24"
-                            class="me-3"
-                          />
-                          <span class="text-heading">Safari</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">1.29k</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-primary"
-                              role="progressbar"
-                              style="width: 18.43%"
-                              aria-valuenow="18.43"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">18.43%</small>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>3</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <img
-                            src="/img/icons/brands/firefox.png"
-                            alt="Firefox"
-                            height="24"
-                            class="me-3"
-                          />
-                          <span class="text-heading">Firefox</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">328</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-info"
-                              role="progressbar"
-                              style="width: 8.37%"
-                              aria-valuenow="8.37"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">8.37%</small>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>4</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <img
-                            src="/img/icons/brands/edge.png"
-                            alt="Edge"
-                            height="24"
-                            class="me-3"
-                          />
-                          <span class="text-heading">Edge</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">142</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-warning"
-                              role="progressbar"
-                              style="width: 6.12%"
-                              aria-valuenow="6.12"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">6.12%</small>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>5</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <img
-                            src="/img/icons/brands/opera.png"
-                            alt="Opera"
-                            height="24"
-                            class="me-3"
-                          />
-                          <span class="text-heading">Opera</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">82</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-danger"
-                              role="progressbar"
-                              style="width: 2.12%"
-                              aria-valuenow="1.94"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">2.12%</small>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>6</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <img src="/img/icons/brands/uc.png" alt="uc" height="24" class="me-3" />
-                          <span class="text-heading">UC Browser</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">328</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-danger"
-                              role="progressbar"
-                              style="width: 20.14%"
-                              aria-valuenow="1.94"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">20.14%</small>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            <div class="tab-pane fade" id="navs-pills-os" role="tabpanel">
-              <div class="table-responsive text-start text-nowrap">
-                <table class="table table-borderless">
-                  <thead>
-                    <tr>
-                      <th>No</th>
-                      <th>System</th>
-                      <th>Visits</th>
-                      <th class="w-50">Data In Percentage</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>1</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <img
-                            src="/img/icons/brands/windows.png"
-                            alt="Windows"
-                            height="24"
-                            class="me-3"
-                          />
-                          <span class="text-heading">Windows</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">875.24k</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-success"
-                              role="progressbar"
-                              style="width: 61.5%"
-                              aria-valuenow="61.50"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">61.50%</small>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>2</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <img src="/img/icons/brands/mac.png" alt="Mac" height="24" class="me-3" />
-                          <span class="text-heading">Mac</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">89.68k</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-primary"
-                              role="progressbar"
-                              style="width: 16.67%"
-                              aria-valuenow="16.67"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">16.67%</small>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>3</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <img
-                            src="/img/icons/brands/ubuntu.png"
-                            alt="Ubuntu"
-                            height="24"
-                            class="me-3"
-                          />
-                          <span class="text-heading">Ubuntu</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">37.68k</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-info"
-                              role="progressbar"
-                              style="width: 12.82%"
-                              aria-valuenow="12.82"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">12.82%</small>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>4</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <img
-                            src="/img/icons/brands/chrome.png"
-                            alt="Chrome"
-                            height="24"
-                            class="me-3"
-                          />
-                          <span class="text-heading">Chrome</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">8.34k</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-warning"
-                              role="progressbar"
-                              style="width: 6.25%"
-                              aria-valuenow="6.25"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">6.25%</small>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>5</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <img
-                            src="/img/icons/brands/cent.png"
-                            alt="Cent"
-                            height="24"
-                            class="me-3"
-                          />
-                          <span class="text-heading">Cent</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">2.25k</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-danger"
-                              role="progressbar"
-                              style="width: 2.76%"
-                              aria-valuenow="2.76"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">2.76%</small>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>6</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <img
-                            src="/img/icons/brands/linux.png"
-                            alt="linux"
-                            height="24"
-                            class="me-3"
-                          />
-                          <span class="text-heading">Linux</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">328k</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-danger"
-                              role="progressbar"
-                              style="width: 20.14%"
-                              aria-valuenow="2.76"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">20.14%</small>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            <div class="tab-pane fade" id="navs-pills-country" role="tabpanel">
-              <div class="table-responsive text-start text-nowrap">
-                <table class="table table-borderless">
-                  <thead>
-                    <tr>
-                      <th>No</th>
-                      <th>Country</th>
-                      <th>Visits</th>
-                      <th class="w-50">Data In Percentage</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>1</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <i class="fis fi fi-us rounded-circle fs-4 me-3"></i>
-                          <span class="text-heading">USA</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">87.24k</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-success"
-                              role="progressbar"
-                              style="width: 38.12%"
-                              aria-valuenow="38.12"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">38.12%</small>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>2</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <i class="fis fi fi-br rounded-circle fs-4 me-3"></i>
-                          <span class="text-heading">Brazil</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">42.68k</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-primary"
-                              role="progressbar"
-                              style="width: 28.23%"
-                              aria-valuenow="28.23"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">28.23%</small>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>3</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <i class="fis fi fi-in rounded-circle fs-4 me-3"></i>
-                          <span class="text-heading">India</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">12.58k</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-info"
-                              role="progressbar"
-                              style="width: 14.82%"
-                              aria-valuenow="14.82"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">14.82%</small>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>4</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <i class="fis fi fi-au rounded-circle fs-4 me-3"></i>
-                          <span class="text-heading">Australia</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">4.13k</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-warning"
-                              role="progressbar"
-                              style="width: 12.72%"
-                              aria-valuenow="12.72"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">12.72%</small>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>5</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <i class="fis fi fi-fr rounded-circle fs-4 me-3"></i>
-                          <span class="text-heading">France</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">2.21k</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-danger"
-                              role="progressbar"
-                              style="width: 7.11%"
-                              aria-valuenow="7.11"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">7.11%</small>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>6</td>
-                      <td>
-                        <div class="d-flex align-items-center">
-                          <i class="fis fi fi-ca rounded-circle fs-4 me-3"></i>
-                          <span class="text-heading">Canada</span>
-                        </div>
-                      </td>
-                      <td class="text-heading">22.35k</td>
-                      <td>
-                        <div class="d-flex justify-content-between align-items-center gap-4">
-                          <div class="progress w-100" style="height: 10px">
-                            <div
-                              class="progress-bar bg-danger"
-                              role="progressbar"
-                              style="width: 15.13%"
-                              aria-valuenow="7.11"
-                              aria-valuemin="0"
-                              aria-valuemax="100"
-                            ></div>
-                          </div>
-                          <small class="fw-medium">15.13%</small>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!--/ pill table -->
     </div>
-  </div>
 </template>
 
 <script setup>
-import SampleInput from '@c/SampleInput.vue'
+import SampleInput from '@c/SampleInput.vue';
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/TheBoard.vue b/src/views/TheBoard.vue
new file mode 100644
index 0000000..559346b
--- /dev/null
+++ b/src/views/TheBoard.vue
@@ -0,0 +1,15 @@
+<template>
+    <div class="container-xxl flex-grow-1 container-p-y">
+        <div class="row">
+            board
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>